/* ============================================================
   Protein Pod — Landing Page Styles
   Theme: near-black background, single lime-green accent.
   ============================================================ */

:root{
  --bg: #0a0a0a;
  --bg-deep: #050505;
  --surface: #121412;
  --surface-border: rgba(244,239,230,0.08);
  --cream: #F4EFE6;
  --text-dim: #F4EFE6;
  --lime: #C9F73E;
  --lime-dim: rgba(201,247,62,0.35);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

/* ---------------- Seamless page-to-page transitions ---------------- */
/* Native cross-document View Transitions: browsers that support it get a
   smooth crossfade between pages automatically; others just navigate as
   normal (no error, no JS required). */
@view-transition{
  navigation: auto;
}
::view-transition-old(root){
  animation: soon-fade-out 0.32s ease both;
}
::view-transition-new(root){
  animation: soon-fade-in 0.38s ease both;
}
@keyframes soon-fade-out{
  to{ opacity: 0; transform: scale(0.99); }
}
@keyframes soon-fade-in{
  from{ opacity: 0; transform: scale(1.01); }
  to{ opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none; }
}

body{
  background: var(--bg);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

.wrap{
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.accent{ color: var(--lime); }

h1, h2, h3{
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }

/* ---------------- Preloader / splash ---------------- */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* True black, not var(--bg) (#0a0a0a). The splash covers the whole
     viewport with nothing beside it to compare against, so the near-black
     just reads as a slightly washed screen — pure black looks intentional. */
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.preloader-logo-wrapper{
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: 50%;
  padding: 12px;
  opacity: 0;
  transform: scale(7);
  filter: blur(15px);
}
.preloader-logo-wrapper.pop{
  /* 2s cycle — roughly a second to swell and a second to settle. */
  animation: preloader-logo-pop 2s ease-in-out infinite;
}
@keyframes preloader-logo-pop{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .preloader-logo-wrapper.pop{ animation: none; }
}
.preloader-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.preloader-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(15px);
}
.preloader-wordmark{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.preloader-tagline{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #888e88;
  margin-bottom: 4px;
}
.loader-bar-track{
  width: 220px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.loader-bar-fill{
  height: 100%;
  width: 0%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  transition: width 0.15s ease-out;
}
.loader-pct{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #888e88;
  letter-spacing: 0.1em;
}

/* Header logo target: the morph destination for the preloader logo wrapper */
.brand-logo-target{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.brand-logo-target .preloader-logo-wrapper{
  width: 100%;
  height: 100%;
  padding: 4px;
}

/* ---------------- Header ---------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(10,10,10,0.85), transparent);
  backdrop-filter: blur(6px);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}
.wordmark{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.brand-link{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo{
  display: block;
  object-fit: contain;
  background: var(--cream);
  border-radius: 50%;
  padding: 4px;
}
.nav-links{
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-dim);
}
.nav-links a{ transition: color 0.2s ease; }
.nav-links a:hover{ color: var(--lime); }
.nav-links a.active{ color: var(--lime); }

/* Hamburger toggle (mobile only) */
.nav-toggle{
  display: none;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 101;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease, background 0.25s ease;
}
.nav-toggle span{ top: 17px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top: 0; transform: rotate(45deg); background: var(--lime); }
.nav-toggle.open span::after{ top: 0; transform: rotate(-45deg); background: var(--lime); }

@media (max-width: 640px){
  .nav-toggle{ display: block; }
  .nav-links{
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(10px);
    padding: 0 24px;
    gap: 0;
    border-bottom: 1px solid var(--surface-border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  }
  .nav-links.open{
    max-height: 400px;
    opacity: 1;
    padding: 12px 24px 20px;
  }
  .nav-links a{
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: 15px;
  }
  .nav-links a:last-child{ border-bottom: none; }
}

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  /* One viewport for the video, one for the headline swap on the way out.
     JS confirms this; it is here so the layout is right before JS runs. */
  height: 200vh;
}
.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* The <video poster> attribute takes a single URL and cannot be switched
     per breakpoint, so phones were showing the landscape desktop still
     behind the portrait video until playback started. Painting the right
     poster here covers that first moment at each size. */
  background: var(--bg-deep) url("assets/hero/hero-desktop-poster.webp?v=20260816b") center/cover no-repeat;
}
@media (max-width: 899px){
  .hero-sticky{
    background-image: url("assets/hero/hero-mobile-poster.webp?v=20260816b");
  }
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Fills the viewport at any aspect ratio, cropping rather than
     letterboxing — the frame sequence behaved the same way. */
  object-fit: cover;
  background: var(--bg-deep);
}
.hero-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,247,62,0.12), transparent 60%);
  mix-blend-mode: screen;
}

.hero-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  text-align: center;
  width: min(90vw, 640px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
  z-index: 2;
}
.hero:not(.hero-revealed) .hero-text,
.hero:not(.hero-revealed) .scroll-hint{
  opacity: 0 !important;
}
.hero-text.visible{ opacity: 1; }
.hero-text h1,
.hero-text .hero-headline{
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 16px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.hero-text p{
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--cream);
  opacity: 0.85;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

.scroll-hint{
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.scroll-hint-line{
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--lime), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%, 100%{ opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%{ opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---------------- Fade-in on scroll (lower sections) ---------------- */
.fade-in{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Features ---------------- */
.features{
  padding: 120px 0 130px;
  background: var(--bg);
}
.section-title{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 60px;
}
.features-head{
  text-align: center;
  margin-bottom: 64px;
}
.features-head .section-title{
  margin-bottom: 18px;
}
.features-sub{
  color: var(--text-dim);
  font-size: 1rem;
  max-width: 620px;
  margin: 0 auto 8px;
  line-height: 1.8;
}
.feature-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .feature-grid{ grid-template-columns: 1fr; }
}
.feature-card{
  background: var(--surface);
  padding: 44px 36px;
  transition: background 0.25s ease;
}
.feature-card:hover{
  background: #171a17;
}
.feature-index{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--lime);
  margin-bottom: 22px;
}
.feature-card h3{
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.4;
}
.feature-card p{
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.75;
}

/* Gyms page: three friction cards feeding a highlighted 4th "fix" card in
   the same row, so the payoff reads as the grid's answer rather than a
   paragraph stacked underneath it. */
.feature-card-fix{
  background: linear-gradient(180deg, rgba(201,247,62,0.14), rgba(201,247,62,0.05));
}
.feature-card-fix:hover{
  background: linear-gradient(180deg, rgba(201,247,62,0.19), rgba(201,247,62,0.07));
}
.feature-card-fix .feature-index{ display: inline-block; color: var(--bg); background: var(--lime); padding: 3px 8px; border-radius: 5px; }
.feature-card-fix h3{ color: var(--lime); }
.feature-card-fix p{ color: var(--cream); }
/* ---------------- How it works ---------------- */
.how-it-works{
  padding: 115px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}
/* Only when an intro line precedes the grid. .features-sub carries just
   an 8px bottom margin, so the copy sat right on top of the first row of
   headings. Where .steps follows .section-title instead (home, gyms)
   that heading's own 60px is already the gap, hence the sibling
   selector rather than a blanket margin. */
.features-sub + .steps{
  margin-top: 48px;
}
@media (max-width: 780px){
  .steps{ grid-template-columns: 1fr; gap: 52px; }
}
.step{
  text-align: center;
  padding: 0 18px;
}
.step-number{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--lime);
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}
.step h3{
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.4;
}
.step p{
  font-size: 0.94rem;
  color: var(--text-dim);
  line-height: 1.8;
  max-width: 340px;
  margin: 0 auto;
}

/* ---------------- Where protein pod belongs ---------------- */
.belongs-section{
  padding: 115px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.belongs-section .section-title{ text-align: left; }
.belongs-list{
  display: flex;
  flex-direction: column;
  margin-top: 56px;
}
.belongs-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 44px;
  padding: 40px 0;
}
.belongs-row + .belongs-row{
  border-top: 1px solid var(--surface-border);
}
.belongs-icon-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 140px;
  height: 156px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
}
.belongs-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  color: var(--lime);
}
.belongs-icon svg{ width: 34px; height: 34px; }
.belongs-icon-label{
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  text-align: center;
}
.belongs-copy h3{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.belongs-arrow{
  color: var(--lime);
  font-size: 0.85em;
}
.belongs-copy p{
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.8;
  max-width: 620px;
}
/* The headline that used to be the h3. The category name is the heading
   now, so this carries the pitch one step down the hierarchy. Written
   after .belongs-copy p, which would otherwise win on colour and size. */
.belongs-copy p.belongs-lead{
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.5;
  margin-bottom: 10px;
}
@media (max-width: 640px){
  .belongs-row{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 24px;
  }
  .belongs-icon-card{ width: 160px; }
  .belongs-icon-label{ display: block; }
  .belongs-copy h3{ justify-content: center; }
  .belongs-copy p{ margin: 0 auto; }
}

/* ---------------- Partners marquee ---------------- */
.partners{
  padding: 100px 0 110px;
  background: var(--bg-deep);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  overflow: hidden;
}
.partners-sub{
  text-align: center;
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 480px;
  margin: -32px auto 48px;
}
.partners-track-wrap{
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners-track{
  display: flex;
  align-items: center;
  width: max-content;
  /* No gap here — .partners-set carries it. A gap on this element would
     sit between the two sets but not after the second, so 50% of the
     track would again stop short of exactly one set's width. */
  animation: partnersScroll 28s linear infinite;
}
.partners-set{
  display: flex;
  align-items: center;
  gap: 40px;
  /* Matches the gap once more where the two sets butt together, so the
     spacing reads the same at the seam as everywhere else in the loop. */
  padding-right: 40px;
}
.partners-track img{
  height: 56px;
  width: auto;
  border-radius: 10px;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.partners-track img:hover{
  opacity: 1;
  transform: translateY(-2px);
}
@keyframes partnersScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .partners-track{ animation: none; }
  .partners-track-wrap{ overflow-x: auto; }
}
.partners-track-wrap:hover .partners-track{
  animation-play-state: paused;
}
@media (max-width: 640px){
  .partners-track img{ height: 42px; }
  .partners-track{ gap: 28px; }
}

/* ---------------- CTA band ---------------- */
.cta-band{
  padding: 120px 0;
  background: var(--bg);
  text-align: center;
  position: relative;
}
.cta-inner h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
}
.cta-inner p{
  color: var(--text-dim);
  margin-bottom: 38px;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-primary{
  display: inline-block;
  background: var(--lime);
  color: #0a0a0a;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 16px 40px;
  border-radius: 999px;
  box-shadow: 0 0 30px var(--lime-dim);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 44px rgba(201,247,62,0.55);
}

/* ---------------- Footer ---------------- */
.site-footer{
  /* Extra top padding: the footer rows wrap, so at 40px the first row sat
     almost on the border with the section above it. */
  padding: 64px 0 48px;
  border-top: 1px solid var(--surface-border);
  background: var(--bg-deep);
}
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Row gap is larger than the column gap — the wrapped address and
     copyright lines were running into the row above. */
  gap: 28px 16px;
}
.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.footer-links a:hover{ color: var(--lime); }
.footer-links a.active{ color: var(--lime); }
.footer-copy{
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Business contact block (NAP): name, address, phone — kept as real
   crawlable text rather than an image so it can be read as an entity. */
.footer-nap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--surface-border);
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: normal;
}
.footer-nap a{ color: var(--text-dim); }
.footer-nap a:hover{ color: var(--lime); }
.footer-nap strong{
  color: var(--cream);
  font-weight: 600;
}

@media (max-width: 640px){
  .footer-inner{ flex-direction: column; text-align: center; }
  .footer-links{ justify-content: center; }
  .footer-nap{ flex-direction: column; text-align: center; align-items: center; gap: 10px; }
}

/* ---------------- Machine menu page ---------------- */
.menu-page{
  background: var(--bg);
}
.menu-hero{
  padding: 170px 0 90px;
  background: radial-gradient(ellipse at 50% -10%, #121412 0%, var(--bg) 45%, var(--bg-deep) 100%);
  text-align: center;
}
.menu-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.menu-eyebrow::before{ content: '\25CF  '; color: var(--lime); }
.menu-headline{
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 18px;
}
.menu-sub{
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  max-width: 600px;
  line-height: 1.7;
  margin: 0 auto;
}

.menu-section{
  padding: 60px 0;
  border-top: 1px solid var(--surface-border);
}
.menu-section:nth-child(even){
  background: var(--bg-deep);
}
.menu-section-head{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.menu-section-head h2{
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.menu-section-head p{
  font-size: 0.88rem;
  color: var(--text-dim);
}

.menu-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .menu-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
  .menu-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px){
  .menu-grid{ grid-template-columns: 1fr; }
}
.menu-slot{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 18px 16px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.menu-slot:hover{
  border-color: var(--lime-dim);
  transform: translateY(-3px);
}
.menu-code{
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0a0a0a;
  background: var(--lime);
  border-radius: 5px;
  padding: 2px 7px;
  margin-bottom: 12px;
}
.menu-slot h3{
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
}
.menu-slot p{
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 10px;
}
.menu-source{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.menu-footnote{
  padding: 40px 0;
  text-align: center;
}
.menu-footnote p{
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
}
.menu-footnote a{
  color: var(--lime);
  border-bottom: 1px solid var(--lime-dim);
}
.menu-footnote a:hover{
  border-color: var(--lime);
}

/* ---------------- Coming soon pages (Machine / Supplements / Gyms / About / Contact) ---------------- */
.soon-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% -10%, #121412 0%, var(--bg) 45%, var(--bg-deep) 100%);
}
.soon-hero{
  position: relative;
  width: 100%;
  padding: 170px 0 110px;
  overflow: hidden;
}
.soon-glow{
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(201,247,62,0.16), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.soon-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.soon-badge{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 0 10px rgba(201,247,62,0.6);
  border: 1px solid rgba(201,247,62,0.35);
  border-radius: 999px;
  padding: 9px 22px;
  margin-bottom: 22px;
  animation: soonPulse 3s ease-in-out infinite;
}
@keyframes soonPulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.6; } }
@media (prefers-reduced-motion: reduce){
  .soon-badge{ animation: none; }
}
.soon-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.soon-eyebrow::before{ content: '\25CF  '; color: var(--lime); }
.soon-headline{
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  max-width: 780px;
  margin-bottom: 18px;
}
.soon-sub{
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--text-dim);
  max-width: 620px;
  line-height: 1.85;
  margin-bottom: 48px;
}
.soon-visual{ margin-bottom: 48px; }
.soon-visual img{
  display: block;
  width: min(280px, 70vw);
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(201,247,62,0.18));
}
.soon-orb{
  width: min(200px, 46vw);
  height: min(200px, 46vw);
  border-radius: 50%;
  margin-bottom: 48px;
  background:
    radial-gradient(circle at 35% 30%, rgba(201,247,62,0.5), rgba(201,247,62,0.05) 55%, transparent 70%),
    var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 0 60px rgba(201,247,62,0.12), inset 0 0 40px rgba(201,247,62,0.08);
}
.soon-queue{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.soon-avatars{ display: flex; }
.soon-avatars span{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--surface), #1c1f1c);
  border: 2px solid var(--bg);
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--lime);
  font-weight: 700;
}
.soon-avatars span:first-child{ margin-left: 0; }

.soon-actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-secondary{
  display: inline-block;
  background: transparent;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 36px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover{
  border-color: var(--lime-dim);
  color: var(--lime);
  transform: translateY(-2px);
}

/* ---------------- Gyms locator page ---------------- */
.gyms-page{ padding-top: 120px; }
.gyms-hero{ padding-bottom: 40px; }
.gyms-hero-inner .soon-sub{ margin-bottom: 0; }

.gyms-locator{ padding: 20px 0 80px; }
.gyms-locator-inner{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: stretch;
  position: relative;
}

/* ---- "Coming soon" state ----
   Applied by gyms-map.js when api/gyms.php returns no locations. Blurs the
   map and sidebar behind a notice. Removing the class (which happens the
   moment a gym exists) restores everything with no other changes. */
.gyms-soon-overlay{ display: none; }

.gyms-locator-inner.is-coming-soon .gyms-map-wrap,
.gyms-locator-inner.is-coming-soon .gyms-sidebar{
  filter: blur(7px) saturate(0.6);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.gyms-locator-inner.is-coming-soon .gyms-soon-overlay{
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gyms-soon-card{
  max-width: 460px;
  text-align: center;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  padding: 40px 36px;
}
.gyms-soon-badge{
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lime);
  border: 1px solid var(--lime-dim);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 22px;
}
.gyms-soon-card h2{
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 16px;
}
.gyms-soon-card p{
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 28px;
}
/* Map on the left, search sidebar on the right — consistent at every
   width. The markup has the sidebar first (for source-order/tab-order
   sense), so it's pushed after the map here with order. */
.gyms-sidebar{ order: 2; }
.gyms-map-wrap{ order: 1; }

@media (max-width: 860px){
  /* A side-by-side split doesn't hold up on phone widths — the map ends
     up only ~150-170px wide and looks stretched/unusable. Stack instead:
     full-width map on top, full-width search list below. */
  .gyms-locator-inner{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .gyms-sidebar{ max-height: none; order: 2; }
  .gyms-map-wrap{ order: 1; }
  .gyms-map-wrap{ min-height: 380px; }
  .gyms-map{ min-height: 380px; }
}

.gyms-sidebar{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 16px;
  max-height: 520px;
}

.gyms-search-box{
  position: relative;
  margin-bottom: 12px;
}
.gyms-search-input{
  width: 100%;
  padding: 12px 40px 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.gyms-search-input:focus{ border-color: var(--lime-dim); }
.gyms-search-input::placeholder{ color: var(--text-dim); }
.gyms-search-icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

.gyms-list{
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gym-list-item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.gym-list-item:hover{ background: rgba(244,239,230,0.05); }
.gym-list-name{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cream);
}
.gym-list-city{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--lime);
  white-space: nowrap;
}
.gyms-empty{
  color: var(--text-dim);
  font-size: 13px;
  padding: 12px 10px;
}

.gyms-map-wrap{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  min-height: 620px;
}
.gyms-map{
  width: 100%;
  height: 100%;
  min-height: 620px;
  background: var(--surface);
}

.gym-map-tiles{
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}

.gym-pin-dot{
  display: block;
  width: 14px;
  height: 14px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201,247,62,0.25), 0 0 12px var(--lime-dim);
}

.leaflet-popup-content-wrapper{
  background: var(--surface);
  color: var(--cream);
  border-radius: 10px;
}
.leaflet-popup-content{ font-family: 'Inter', sans-serif; font-size: 13px; }
.leaflet-popup-tip{ background: var(--surface); }

/* ============================================================
   Machine page — scroll-scrubbed showcase
   ============================================================ */

.mach-page{ padding-top: 120px; }

.mach-intro{ padding-bottom: 20px; }
.mach-intro-inner .soon-sub{ margin-bottom: 0; }

/* The section is tall; the stage inside it pins to the viewport so the
   machine stays put while the page scrolls past it. */
.mach-showcase{
  position: relative;
  /* The zoom is tap-driven now, not scroll-driven, so this no longer
     needs viewports of scroll to scrub against. */
  padding: 40px 0 80px;
}
.mach-stage{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Clear the fixed site header so the model switcher never slides under it */
  padding-top: 92px;
}

/* ---------------- Model switcher ---------------- */

/* Boxed and highlighted, the way the active tab looked back when the
   Pod One / Max / Mini switcher was on this page. With one model there
   is nothing to switch between, so this is a heading rather than a
   button — but it keeps that lime pill treatment so the model name
   still reads as the label on the machine below it. */
.mach-model-title{
  position: relative;
  z-index: 4;
  /* .mach-stage is a column flex with align-items:center, so the pill
     already shrinks to its text and centres — no width or margin needed. */
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--lime);
  padding: 11px 30px;
  border-radius: 999px;
  /* Has to clear the 26px glow below, not just the pill's own box —
     at 0 the halo washed over the top edge of the machine. */
  margin-bottom: 20px;
  box-shadow: 0 0 26px rgba(201, 247, 62, 0.28);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* The zoomed screen grows upward into the space this pill occupies, and
   the pill sits above it (z-index 4 vs 3), so it landed on top of the
   screen's header. Lift it away while zoomed — the model name is still
   on the bezel tag inside the screen, so nothing is lost. */
.mach-showcase.is-zoomed .mach-model-title{
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

.mach-switcher{
  position: relative;
  z-index: 4;
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 8px;
  background: rgba(18,20,18,0.8);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.mach-tab{
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.mach-tab:hover{ color: var(--cream); }
.mach-tab.active{
  background: var(--lime);
  color: #0a0a0a;
  font-weight: 700;
}

/* ---------------- Stage / unit ---------------- */

.mach-viewport{
  position: relative;
  width: 100%;
  max-width: 1000px;
  /* Not flex:1 — stretching this to fill the 100vh stage pushed the photo
     to the vertical centre and left a tall empty band under the model
     pill. Sized to its content, the pill and the machine centre together
     as one group. */
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 55%;
}

.mach-glow{
  position: absolute;
  left: 50%;
  top: 52%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--lime-dim) 0%, transparent 68%);
  filter: blur(50px);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.mach-unit{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform-origin is set from SCREEN_BOX in machine-showcase.js so the
     zoom's pivot and the overlay's position always describe the same
     rectangle. This is only the fallback for the pre-script frame. */
  transform-origin: 49.75% 14.9%;
  /* The unit is a button now — the zoom is tap-driven, not scroll-driven. */
  cursor: zoom-in;
  /* The display sits only ~14% down the photo, so without this the whole
     unit renders with its screen high in the stage. Nudged down so the
     display starts near the middle of the viewport and — since the origin
     is a fixed point of the scale — stays there at every zoom level.
     This nudge is also what separates the model pill from the machine:
     at 0 the pill sat on the unit and 0.5vh still read as touching, so
     it steps up to 1vh. */
  margin-top: 1vh;
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.mach-photo{
  display: block;
  width: auto;
  height: min(74vh, 680px);
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.6));
}

/* ---------------- The machine's screen ----------------
   Positioned over the display in the photograph. The four
   --screen-* values are the only things that need adjusting
   to line it up with a different photo. */
/* Positioned in JS while zooming (it tracks the photo's display), then
   released to the takeover rule below. The screen deliberately sits
   OUTSIDE #machUnit — a transformed ancestor captures position:fixed
   and would drag the screen into the zoom, blowing up its text. */
.mach-screen{
  position: absolute;
  /* JS overwrites these each frame by measuring the photo. The starting
     values are only a sane fallback for the moment before it runs — they
     resolve against .mach-viewport, which is wider than the photo, so the
     screen would sit off the machine if JS never ran. */
  top: 4.7%;
  left: 5.9%;
  width: 70.1%;
  height: 19.5%;
  /* Absolutely positioned, but still a flex child of .mach-viewport —
     margin:auto from the flex centring would otherwise shift it. */
  margin: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  /* Keeps the inset screen's type from rendering blurry as it grows. */
  will-change: left, top, width, height;
}
.mach-showcase.is-zoomed .mach-unit{ cursor: zoom-out; }
.mach-screen.is-on{
  opacity: 1;
  pointer-events: auto;
}

.mach-screen-tag{
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: calc(5px * var(--zoom, 1));
  font-family: 'Space Grotesk', sans-serif;
  background: rgba(10, 12, 10, 0.92);
  padding: calc(2px * var(--zoom, 1)) calc(7px * var(--zoom, 1));
  border-radius: calc(3px * var(--zoom, 1));
  border: 1px solid rgba(201, 247, 62, 0.35);
  box-shadow: 0 0 12px rgba(201, 247, 62, 0.18);
  pointer-events: none;
  white-space: nowrap;
}


.mach-screen-glass{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3.5% 4%;
  border-radius: 6px;
  background: linear-gradient(165deg, rgba(6,8,6,0.97), rgba(14,18,14,0.97));
  box-shadow: inset 0 0 0 1px rgba(201,247,62,0.18),
              inset 0 1px 0 rgba(255,255,255,0.06),
              0 0 34px rgba(201,247,62,0.14);
  overflow: hidden;
}

.mach-screen-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2.5%;
  margin-bottom: 3%;
  border-bottom: 1px solid rgba(244,239,230,0.09);
  flex-shrink: 0;
}
.mach-screen-brand{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(5.2px * var(--zoom, 1));
  letter-spacing: 0.04em;
}
.mach-tag-model{
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(5.3px * var(--zoom, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.mach-screen-time{
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(3.9px * var(--zoom, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

/* 8 tiles, 4 x 2 */
.mach-keypad{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2%;
  flex: 1;
  min-height: 0;
}
.mach-key{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  padding: 4% 2%;
  background: rgba(244,239,230,0.04);
  border: 1px solid rgba(244,239,230,0.09);
  border-radius: 5px;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  min-width: 0;
}
.mach-key:hover{
  background: rgba(201,247,62,0.1);
  border-color: var(--lime-dim);
}
.mach-key:active{ transform: scale(0.96); }
.mach-key.is-active{
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0a0a;
}
.mach-key-icon{
  font-size: calc(8px * var(--zoom, 1));
  line-height: 1;
  color: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mach-key.is-active .mach-key-icon{ color: #0a0a0a; }
.mach-key-icon svg{
  width: calc(9.2px * var(--zoom, 1));
  height: calc(9.2px * var(--zoom, 1));
  min-width: 14px;
  min-height: 14px;
  max-width: 28px;
  max-height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
}
.mach-key-label{
  /* Was 3.6px * zoom — close to illegible at rest, since the whole screen
     is designed to scale up on zoom rather than be readable at 1x. */
  font-size: calc(6.5px * var(--zoom, 1));
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Detail panel slides over the keypad when a tile is picked. */
.mach-detail{
  position: absolute;
  inset: 0;
  padding: 4% 4.5%;
  background: linear-gradient(165deg, rgba(6,8,6,0.985), rgba(14,18,14,0.985));
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2%;
  /* The screen is a fixed box — long copy has to scroll inside it
     rather than spilling over the machine. */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mach-detail::-webkit-scrollbar{ width: 3px; }
.mach-detail::-webkit-scrollbar-thumb{
  background: var(--lime-dim);
  border-radius: 3px;
}
.mach-screen.is-detail .mach-detail{
  opacity: 1;
  pointer-events: auto;
}
.mach-detail-title{
  font-size: calc(8.4px * var(--zoom, 1));
  line-height: 1.25;
  margin-bottom: 1.5%;
  flex-shrink: 0;
}
.mach-detail-body{
  font-size: calc(5.7px * var(--zoom, 1));
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 3%;
}
.mach-detail-figure{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2%;
  flex-shrink: 0;
}
/* The HTML `hidden` attribute only implies display:none, so the
   display:flex above silently beat it — the second figure ("3 separate
   tubes...") stayed on screen for every tile, not just the canister one
   that defines it. This rule makes hidden actually hide. */
.mach-detail-figure[hidden]{ display: none; }
.mach-detail-figure span{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(12.6px * var(--zoom, 1));
  color: var(--lime);
  line-height: 1;
}
.mach-detail-figure small{
  font-family: 'JetBrains Mono', monospace;
  /* 3.4 -> 4.4 -> 5.4 -> 6.2 -> 7px: still reading small on the zoomed screen. */
  font-size: calc(7px * var(--zoom, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  /* Some labels (Ambient Temp / Ambient humidity) pack two lines into one
     string via \n. textContent preserves that character but HTML collapses
     it to a space by default — pre-line makes it a real line break without
     needing innerHTML. */
  white-space: pre-line;
  line-height: 1.5;
}
.mach-detail-back{
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--lime);
  font: inherit;
  font-size: calc(4.6px * var(--zoom, 1));
  cursor: pointer;
  padding: 0;
}

/* Phones keep the desktop behaviour: the screen stays registered to the
   display in the photo and the same tap-to-zoom brings it up to a
   readable size. An earlier version detached the screen and stacked it
   below the machine, but .mach-viewport is a row flex container, so a
   statically-positioned screen became a sibling flex ITEM and landed
   beside the photo instead of under it — the machine ended up squeezed
   into the left half of the screen. Sizes below are tuned so the zoomed
   screen lands close to full width on a phone; machine-showcase.js
   computes the zoom factor to match. */
@media (max-width: 760px){
  /* Shorter photo than desktop's 74vh: the zoom multiplies whatever this
     is, and the whole zoomed screen has to fit a phone's width. */
  .mach-photo{ height: min(52vh, 420px); }

  /* Desktop pushes the unit down 26vh so the display — which sits only
     ~14% down the photo — lands mid-viewport. A phone's stage is sized to
     its content rather than the viewport (below), so there is nothing to
     push against and the offset only opens a gap. */
  .mach-unit{ margin-top: 0; }

  /* Height from the content, not a forced 100vh. Centring a phone-sized
     machine inside a full viewport left a large empty band between the
     model pill and the photo — roughly 270px of nothing on a 915px-tall
     screen. */
  .mach-stage{ min-height: auto; padding: 76px 0 56px; }

  /* Touch affordances the desktop pointer styles don't cover. */
  .mach-key{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mach-key:active{ transform: scale(0.92); }
  .mach-key.is-active{
    animation: keyPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  @keyframes keyPop{
    0%{ transform: scale(0.9); }
    60%{ transform: scale(1.06); }
    100%{ transform: scale(1); }
  }

  .mach-hint{ bottom: 12px; font-size: 10px; }

  /* The screen's box is the display's share of the photo, so its aspect is
     fixed and a phone's is about half the desktop's in each direction. The
     type inside is driven by --zoom, which a narrow viewport caps lower —
     so the text ends up proportionally LARGER against a much smaller box
     and the detail panel overflowed, clipping the last figure mid-line.
     Desktop never scrolls here; these bring the ratio back so phones
     don't either. overflow-y:auto stays as the backstop. */
  .mach-detail{ padding: 3.5% 4%; gap: 1%; }
  .mach-detail-title{ font-size: calc(5.1px * var(--zoom, 1)); margin-bottom: 1%; }
  .mach-detail-body{ font-size: calc(3.5px * var(--zoom, 1)); line-height: 1.5; margin-bottom: 2%; }
  .mach-detail-figure{ gap: 6px; margin-bottom: 1%; }
  .mach-detail-figure span{ font-size: calc(8px * var(--zoom, 1)); }
  .mach-detail-figure small{ font-size: calc(4.1px * var(--zoom, 1)); line-height: 1.4; }
  .mach-detail-back{ font-size: calc(3.4px * var(--zoom, 1)); }
}

/* Very narrow phones. The display's box keeps the photo's aspect, so the
   panel loses height as fast as it loses width, while the copy in it stays
   the same length — the longest tile (two figures) stopped fitting below
   about 380px. Everything shrinks another notch here. The panel still
   scrolls as a backstop on the very smallest screens, where no honest type
   size fits that much copy into ~165px. */
@media (max-width: 380px){
  .mach-detail{ padding: 3% 3.5%; gap: 0.5%; }
  .mach-detail-title{ font-size: calc(4.4px * var(--zoom, 1)); }
  .mach-detail-body{ font-size: calc(3.1px * var(--zoom, 1)); line-height: 1.45; margin-bottom: 1.5%; }
  .mach-detail-figure{ gap: 5px; margin-bottom: 0.5%; }
  .mach-detail-figure span{ font-size: calc(6.6px * var(--zoom, 1)); }
  .mach-detail-figure small{ font-size: calc(3.5px * var(--zoom, 1)); line-height: 1.35; }
  .mach-detail-back{ font-size: calc(3px * var(--zoom, 1)); }
}


/* ---------------- Scroll progress rail + hint ---------------- */

.mach-hint{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity 0.4s ease;
  /* Shrink-to-fit against `left: 50%` leaves only half the stage to wrap
     into, which on a phone is narrower than this line — it broke onto two
     ragged lines. Nothing here ever needs to wrap. */
  white-space: nowrap;
}
.mach-hint.is-faded{ opacity: 0; }

/* ---------------- Machine details card ---------------- */

.mach-lineup{ padding: 100px 0 40px; }
.mach-lineup-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
/* A single model would otherwise stretch full-width under auto-fit —
   this caps and centres the lone card so it reads as a deliberate
   layout rather than a 3-column grid with two empty slots. */
.mach-lineup-grid-single{
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
}
.mach-card{
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  transition: border-color 0.3s, transform 0.3s;
}
.mach-card:hover{
  border-color: var(--lime-dim);
  transform: translateY(-4px);
}
.mach-card h3{
  font-size: 1.35rem;
  margin: 0 0 4px;
}
.mach-card-tag{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream);
  margin-bottom: 20px;
}
/* "Built for" reads as the label, the venues as the value — so only the
   label carries the small uppercase lime treatment the whole line used
   to have. */
.mach-card-tag-label{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 4px;
}

/* Section label above the feature list, matching the "Built for" label
   so the card reads as two labelled blocks rather than a loose list. */
.mach-card-subhead{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 10px;
}
.mach-card-features{
  list-style: none;
  padding: 0;
  /* No top margin — .mach-card-subhead above it owns that spacing now. */
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mach-card-features li{
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mach-card-features li::before{
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}
.mach-card-specs{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mach-card-specs > div{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mach-card-specs dt{
  font-size: 13px;
  color: var(--text-dim);
}
.mach-card-specs dd{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--cream);
  text-align: right;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px){
  .mach-lineup{ padding: 40px 0 20px; }
  .mach-lineup-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .mach-card{ padding: 20px 16px; }
  .mach-card-specs > div{ gap: 16px; }

  .mach-showcase{ height: 280vh; }
  .mach-drum{ height: min(46vh, 380px); width: 240px; }
  .mach-face{ width: 280px; margin-left: -140px; }
  /* Tighter drum radius so the faces don't swing off-screen on phones */
  .mach-face[data-model="one"] { transform: rotateY(0deg)   translateZ(190px); }
  .mach-face[data-model="max"] { transform: rotateY(120deg) translateZ(190px); }
  .mach-face[data-model="mini"]{ transform: rotateY(240deg) translateZ(190px); }
  .mach-callout{ max-width: 150px; }
  .mach-callout-text{ display: none; }
  .mach-callout-label{ font-size: 10.5px; }
  /* Keep right-hand callouts from running off the screen edge */
  .mach-callout[style*="--cx: 68%"],
  .mach-callout[style*="--cx: 70%"]{ left: auto; right: 8px; }
  .mach-readout{
    right: 50%;
    transform: translateX(50%);
    bottom: 2%;
    min-width: 0;
    width: min(320px, 90%);
  }
  }

@media (prefers-reduced-motion: reduce){
  .mach-showcase{ height: auto; }
  .mach-stage{ position: static; height: auto; padding: 60px 0; }
  .mach-callout{ opacity: 1; transform: none; }
  .mach-callout-dot::after{ animation: none; }
  .mach-unit{ transform: none !important; }
}

/* ============================================================
   Supplements — slot detail window
   ============================================================ */

.menu-slot{ cursor: pointer; }
.menu-slot:focus-visible{
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
/* Affordance that the card opens something */
.menu-slot::after{
  content: 'View details \2192';
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s ease;
}
.menu-slot:hover::after{ color: var(--lime); }

body.modal-open{ overflow: hidden; }

.slot-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.slot-modal[hidden]{ display: none; }

.slot-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,0.82);
  backdrop-filter: blur(6px);
  animation: slotFade 0.25s ease;
}
@keyframes slotFade{ from{ opacity: 0; } to{ opacity: 1; } }

.slot-modal-panel{
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 32px 30px 28px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: slotRise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slotRise{
  from{ opacity: 0; transform: translateY(18px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .slot-modal-backdrop, .slot-modal-panel{ animation: none; }
}

.slot-modal-close{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.slot-modal-close:hover{ color: var(--lime); border-color: var(--lime-dim); }

.slot-modal-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.slot-modal-cat{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.slot-modal-title{
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  margin-bottom: 4px;
}
.slot-modal-brand{
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.slot-modal-brand span{ color: var(--lime); }
.slot-modal-desc{
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream);
  margin-bottom: 22px;
}

.slot-modal-macros{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.slot-macro{
  flex: 1 1 110px;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
}
.slot-macro span{
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.slot-macro b{
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  color: var(--lime);
}

.slot-modal-block{
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--surface-border);
}
.slot-modal-block h4{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.slot-modal-block p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream);
}

.slot-modal-note{
  padding: 12px 14px;
  margin: 20px 0 22px;
  background: var(--bg-deep);
  border-left: 2px solid var(--lime-dim);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.slot-modal-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 600px){
  .slot-modal{ padding: 12px; }
  .slot-modal-panel{ padding: 28px 20px 24px; max-height: 92vh; }
  .slot-modal-actions .btn-primary,
  .slot-modal-actions .btn-secondary{ flex: 1 1 100%; text-align: center; }
}

/* ============================================================
   About page — story + founders
   ============================================================ */

.about-page{ padding-top: 120px; }

.about-hero{ padding-bottom: 20px; }
.about-hero-inner .soon-sub{ margin-bottom: 0; max-width: 640px; }

/* ---------------- Story beats ---------------- */

.about-story{ padding: 90px 0 30px; }
.story-beat{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  max-width: 720px;
  padding: 42px 0;
  border-top: 1px solid var(--surface-border);
}
.story-beat:first-child{ border-top: 0; padding-top: 0; }
.story-beat .feature-index{ padding-top: 4px; }
.story-beat h3{
  font-size: 1.3rem;
  line-height: 1.35;
  margin-bottom: 14px;
}
.story-beat p{
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dim);
}
@media (max-width: 560px){
  .story-beat{ grid-template-columns: 1fr; gap: 14px; }
}

/* ---------------- Mission band ---------------- */

.about-mission{
  padding: 90px 0;
  margin: 48px 0;
  background:
    radial-gradient(circle at top left, rgba(201,247,62,0.12), transparent 36%),
    linear-gradient(180deg, rgba(18,20,18,0.96), rgba(12,14,12,0.96));
  border-top: 1px solid rgba(201,247,62,0.18);
  border-bottom: 1px solid rgba(201,247,62,0.12);
}
.about-mission-inner{ max-width: 1080px; }
.about-mission-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
  gap: 28px;
  padding: 34px;
  border-radius: 24px;
  background: rgba(6, 8, 6, 0.52);
  border: 1px solid rgba(244,239,230,0.08);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  backdrop-filter: blur(14px);
}
.about-mission-copy{
  padding: 6px 4px 6px 0;
}
.about-mission-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 16px;
}
.about-mission-kicker::before{
  content: '';
  width: 22px;
  height: 1px;
  background: var(--lime);
}
.about-mission-title{
  text-align: left;
  margin-bottom: 18px;
  max-width: 560px;
}
.about-mission-inner p{
  font-size: clamp(1.02rem, 1.8vw, 1.12rem);
  line-height: 1.9;
  color: var(--cream);
  text-wrap: pretty;
}
.about-definition{ max-width: 64ch; }
.about-definition strong:first-child{
  display: inline;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
.about-definition-lead{
  display: inline;
}
.about-mission-aside{
  display: grid;
  gap: 14px;
  align-content: center;
  padding-left: 24px;
  border-left: 1px solid rgba(244,239,230,0.08);
}
.mission-stat{
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25,28,25,0.92), rgba(17,20,17,0.92));
  border: 1px solid rgba(244,239,230,0.08);
}
.mission-stat span{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.mission-stat p{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.6;
}
@media (max-width: 860px){
  .about-mission-shell{
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .about-mission-aside{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(244,239,230,0.08);
    padding-top: 18px;
  }
}

/* ---------------- Founders ---------------- */

.about-founders{ padding: 90px 0; }

.founders-grid{
  display: grid;
  /* Fixed at three so the founder always keeps the middle column with a
     co-founder either side. auto-fit would reflow to 2 + 1 at some
     widths and break that arrangement. */
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
}
/* The founder's card sits slightly proud of the two beside it. */
.founder-card-lead{
  border-color: var(--lime-dim);
}
@media (max-width: 900px){
  .founders-grid{ grid-template-columns: 1fr; }
  /* Stacked, the flanking order no longer means anything — the founder
     leads instead. */
  .founder-card-lead{ order: -1; }
}

/* ---------------- Vision / Parent company ---------------- */

.ethos-section{
  padding: 40px 0 100px;
}

.ethos-heading{
  display: flex;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
}
.ethos-heading-center{
  justify-content: center;
  text-align: center;
}
.ethos-heading-spaced{ margin-top: 70px; }

.ethos-panel{
  position: relative;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background:
    radial-gradient(680px 260px at 0% 0%, rgba(201,247,62,0.07), transparent 65%),
    var(--surface);
  padding: 56px clamp(28px, 5vw, 64px);
  overflow: hidden;
}

/* corner brackets — precision-instrument motif, reused as the section's
   signature so both panels read as one family without being identical */
.ethos-panel::before,
.ethos-panel::after{
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--lime-dim);
  opacity: 0.7;
}
.ethos-panel::before{
  top: 18px; left: 18px;
  border-right: none;
  border-bottom: none;
}
.ethos-panel::after{
  bottom: 18px; right: 18px;
  border-left: none;
  border-top: none;
}

/* ---------------- Our Vision ----------------
   A vision statement is one conviction, not a set of facts — so this
   leads with a single large centered line rather than the two-column
   identity-block treatment used for the parent company below it. The
   three beliefs unfold as a numbered progression instead of stacked
   paragraphs, echoing the 01/02/03 language from the homepage's
   three-step section without being that layout. */
.vision-block{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.vision-lead{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 56px;
}

.vision-beliefs{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: center;
  padding: 40px 0;
  margin-bottom: 40px;
}
.vision-beliefs li{
  display: flex;
  flex-direction: column;
  /* align-items centres the 01/02/03 number itself — text-align alone
     would centre the paragraph but leave the number hard left, since
     each li is a column flex container. */
  align-items: center;
  gap: 14px;
  padding: 4px 32px;
}
/* A thin rule between the three points instead of boxing each one —
   :first-child gets none, so the line only ever sits BETWEEN items,
   never floating at the outer edges. */
.vision-beliefs li + li{
  border-left: 1px solid var(--surface-border);
}
.vision-belief-num{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lime);
}
.vision-beliefs p{
  /* Bumped from clamp(0.95rem, 1.4vw, 1.02rem) — everything else in the
     box stays the same size, only these three lines read larger. */
  font-size: clamp(1.08rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-dim);
}

.vision-close{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: var(--lime);
}

@media (max-width: 760px){
  .vision-beliefs{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* text-align and align-items are centred in the base rule now, so this
     only needs to drop the horizontal padding that was separating columns. */
  .vision-beliefs li{ padding: 0; }
  /* Stacked now, so the divider has to turn with them — a vertical rule
     on the left of a full-width row would just hang beside the text. */
  .vision-beliefs li + li{
    border-left: none;
    border-top: 1px solid var(--surface-border);
    padding-top: 28px;
  }
}

.ethos-statement{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 620px;
  margin-bottom: 36px;
}

/* ---------------- Parent company ----------------
   Two columns: a fixed identity block on the left, the narrative on the
   right. The previous single-column panel ran four paragraphs down the
   left half and left the right side empty. */
.parent-block{
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  overflow: hidden;
}

.parent-identity{
  padding: 44px 40px;
  /* A faint lime wash ties the block to the brand without competing
     with the lime used for genuine emphasis elsewhere. */
  background:
    linear-gradient(160deg, rgba(201,247,62,0.05), transparent 65%),
    var(--bg-deep);
  border-right: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
}

.parent-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 18px;
}

.parent-name{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}
.parent-suffix{
  display: block;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--text-dim);
  opacity: 0.75;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.parent-tagline{
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream);
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--surface-border);
}

/* Pulling the two hard facts out of the prose gives the eye somewhere
   to land, and answers "who are they" without reading a paragraph. */
.parent-facts{
  list-style: none;
  display: grid;
  gap: 18px;
}
.parent-facts li{
  display: grid;
  gap: 5px;
}
.parent-fact-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.65;
}
.parent-fact-value{
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cream);
}

.parent-detail{
  padding: 44px 44px 44px 40px;
  display: grid;
  gap: 20px;
  align-content: center;
}
.parent-detail p{
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.8;
  color: var(--text-dim);
}
/* The opening sentence carries the fact that matters most, so it gets
   slightly more weight than the paragraphs that follow it. Scoped under
   .parent-detail to beat the sibling `p` rule on specificity rather than
   reaching for !important. */
.parent-detail p.parent-lead{
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  color: var(--cream);
  line-height: 1.7;
}

@media (max-width: 860px){
  .parent-block{ grid-template-columns: 1fr; }
  .parent-identity{
    border-right: none;
    border-bottom: 1px solid var(--surface-border);
    padding: 34px 26px;
  }
  .parent-facts{ margin-top: 0; }
  .parent-detail{ padding: 32px 26px; }
}

.ethos-body{
  display: grid;
  gap: 20px;
  max-width: 640px;
  padding-top: 28px;
  border-top: 1px solid var(--surface-border);
}
.ethos-body p{
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.8;
  color: var(--text-dim);
}
.ethos-body .ethos-emphasis{
  color: var(--cream);
  font-weight: 500;
}

@media (max-width: 640px){
  .ethos-panel{ padding: 40px 22px; border-radius: 14px; }
  .ethos-panel::before,
  .ethos-panel::after{ width: 16px; height: 16px; }
  .ethos-heading-spaced{ margin-top: 48px; }
}

.founder-card{
  padding: 40px 30px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}
.founder-card:hover{
  border-color: var(--lime-dim);
  transform: translateY(-4px);
}

.founder-avatar{
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Founder portraits: square-cropped circle so headshots of slightly
   different aspect ratios still line up across the row. */
.founder-photo{
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.founder-photo-empty .founder-initials{
  font-size: 34px;
}
.founder-avatar-mark{
  position: absolute;
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.5;
}
.founder-initials{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--lime);
  letter-spacing: 0.04em;
}

.founder-card h3{
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.founder-role{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.founder-bio{
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-dim);
  text-align: left;
}

.founders-note{
  margin-top: 32px;
  font-size: 12.5px;
  color: var(--text-dim);
  font-style: italic;
}


/* ---------------- Catalogue download band ---------------- */
.catalog-band{
  /* Was 0 top padding, so this sat flush against the border under the
     "where it belongs" section above it — no breathing room at all. */
  padding: 90px 0 110px;
  background: var(--bg);
}
.catalog-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding: 44px 40px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
}
.catalog-copy{ flex: 1 1 380px; }
.catalog-eyebrow{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 16px;
}
.catalog-copy h2{
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 14px;
}
.catalog-copy p{
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 560px;
}
.catalog-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  text-align: center;
}
.catalog-meta{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 500;
}

@media (max-width: 720px){
  .catalog-band{ padding-bottom: 80px; }
  .catalog-inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 26px;
  }
  .catalog-btn{ width: 100%; }
}

/* Keep the brand lockup readable as two words. */
.wordmark-gap{
  display: inline;
}