/* ============================================================
   Seba Ventures — Site styles
   Five full-viewport sections, sticky glass header, scroll-snap
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Unbounded-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Unbounded-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Unbounded-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Unbounded-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Unbounded-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Unbounded-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/InstrumentSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/InstrumentSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/InstrumentSans-Bold.ttf') format('truetype');
}

/* ---------- Tokens ---------- */
:root {
  --paper:  #F5F5ED;
  --paper-5: rgba(245,245,237,0.05);
  --paper-10: rgba(245,245,237,0.10);
  --paper-50: rgba(245,245,237,0.5);
  --ink:    #282828;
  --ink-10: rgba(40,40,40,0.10);
  --black:  #000000;
  --stone:  #B1AA98;
  --amber:  #E9C46A;
  --sienna: #A0522D;
  --denim:  #3B6A8E;
  --moss:   #556B2F;

  --font-display: 'Unbounded', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif;

  --nav-h: 75px;
  --page-pad-x: clamp(24px, 6vw, 128px);

  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html {
  scroll-behavior: smooth;
  /* scroll-snap removed — it conflicts with sticky-overlay sections */
  overflow-y: scroll;
}
body {
  /* scroll-snap works on html when it's the scroll container */
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber); color: var(--ink); }

/* ---------- Header (fixed glass) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  border-radius: 0;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: rgba(245, 245, 237, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  transition: background-color 360ms var(--ease-out);
}
.nav .brand-logo {
  height: 43px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 9px 18px;
  border-radius: 100px;
  color: var(--ink);
  opacity: 0.85;
  transition:
    background-color 240ms var(--ease-out),
    color 240ms var(--ease-out),
    opacity 240ms var(--ease-out);
}
.nav-links a:hover,
.nav-links a.is-active {
  background: var(--black);
  color: var(--paper);
  opacity: 1;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  color: currentColor;
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- Section scaffolding ---------- */
/* Each section is wrapped in a 100vh "slot" that owns the scroll
   range; the section itself is position:sticky so it stays pinned
   while the next slot scrolls in over it. Stacking by z-index makes
   later sections paint above earlier ones — the overlay effect. */
.slot {
  position: relative;
  height: 100vh;
  width: 100%;
}
#slot-hero    { z-index: 1; }
#slot-what    { z-index: 2; }
#slot-thesis  { z-index: 3; }
#slot-about   { z-index: 4; }
#slot-contact { z-index: 5; }

.section {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: calc(var(--nav-h) + 60px) var(--page-pad-x) 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
  isolation: isolate;
}
/* Background lives on a pseudo-element so we can scroll-fade it
   independently of the section's content. */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--section-bg, var(--paper));
}
.section--hero    { --section-bg: var(--paper);  color: var(--ink);   }
.section--what    { --section-bg: var(--denim);  color: var(--paper); }
.section--thesis  { --section-bg: var(--moss);   color: var(--paper); }
.section--about   { --section-bg: var(--sienna); color: var(--paper); }
.section--contact { --section-bg: var(--stone);  color: var(--ink);   }

/* ---------- Cross-fade between sections (scroll-driven) ----------
   Each non-hero section's BACKGROUND fades in (opacity 0 → 1) as its
   slot enters the viewport. Combined with sticky stacking, this creates
   a soft cross-fade between the prior section's color and the new one,
   instead of a hard cut. The section's content stays fully opaque, so
   text reveals (rise+blur) are unaffected. */
@supports (animation-timeline: view()) {
  /* === crossfade (default) === */
  body[data-transition="crossfade"] #slot-what .section::before,
  body[data-transition="crossfade"] #slot-thesis .section::before,
  body[data-transition="crossfade"] #slot-about .section::before,
  body[data-transition="crossfade"] #slot-contact .section::before {
    animation: section-bg-fade linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
  }
  @keyframes section-bg-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* === curtain: prior section recoils (scale + blur) as new enters ===
     The OUTGOING section gets pushed back in space — slight scale-down
     and blur — while the INCOMING section enters crisp at full size.
     Creates spatial depth, like layers in a stack. */
  body[data-transition="curtain"] #slot-hero .section,
  body[data-transition="curtain"] #slot-what .section,
  body[data-transition="curtain"] #slot-thesis .section,
  body[data-transition="curtain"] #slot-about .section {
    animation: section-recoil linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
    transform-origin: 50% 30%;
  }
  @keyframes section-recoil {
    from { transform: scale(1);    filter: blur(0); }
    to   { transform: scale(0.92); filter: blur(8px); }
  }
  body[data-transition="curtain"] #slot-what .section::before,
  body[data-transition="curtain"] #slot-thesis .section::before,
  body[data-transition="curtain"] #slot-about .section::before,
  body[data-transition="curtain"] #slot-contact .section::before {
    animation: section-bg-fade linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 35%;
  }

  /* === sweep: diagonal gradient curtain rises over the prior section ===
     A second pseudo-element paints a diagonal band of the new color,
     scaled from 0 height to full as the slot enters view. Like a
     painter's brush dragged up across the screen. */
  body[data-transition="sweep"] .section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      105deg,
      var(--section-bg) 0%,
      var(--section-bg) 60%,
      transparent 100%
    );
    transform-origin: 50% 100%;
    transform: scaleY(0);
    pointer-events: none;
  }
  body[data-transition="sweep"] #slot-what .section::after,
  body[data-transition="sweep"] #slot-thesis .section::after,
  body[data-transition="sweep"] #slot-about .section::after,
  body[data-transition="sweep"] #slot-contact .section::after {
    animation: section-sweep linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 60%;
  }
  /* Hero gets a static background; non-hero sections rely on the sweep */
  body[data-transition="sweep"] #slot-what .section::before,
  body[data-transition="sweep"] #slot-thesis .section::before,
  body[data-transition="sweep"] #slot-about .section::before,
  body[data-transition="sweep"] #slot-contact .section::before {
    background: transparent;
  }
  @keyframes section-sweep {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  /* === bloom: circular clip-path expands from center ===
     The new section is revealed inside a circle that grows from a
     point in the lower third to fill the whole viewport. Cinematic. */
  body[data-transition="bloom"] #slot-what .section::before,
  body[data-transition="bloom"] #slot-thesis .section::before,
  body[data-transition="bloom"] #slot-about .section::before,
  body[data-transition="bloom"] #slot-contact .section::before {
    animation: section-bloom linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 55%;
  }
  @keyframes section-bloom {
    from {
      clip-path: circle(0% at 50% 80%);
      opacity: 1;
    }
    to {
      clip-path: circle(140% at 50% 80%);
      opacity: 1;
    }
  }
}
/* Fallback: solid backgrounds (no fade) for browsers without
   scroll-driven animations. */

/* ---------- Hero ---------- */
.hero-wrap {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  text-align: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--moss);
  margin: 0;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 24px);
  line-height: 1.2;
  color: var(--black);
  margin: 0;
  max-width: 720px;
  text-wrap: pretty;
}
.hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  opacity: 0.95;
  flex-wrap: wrap;
  width: 100%;
}
/* Desktop: track behaves like the old flex row. Duplicate logos
   (aria-hidden="true") stay hidden — only the originals show. */
.hero-logos-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.hero-logos-track > a[aria-hidden="true"] {
  display: none;
}
.hero-logos a {
  display: inline-flex;
  align-items: center;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.hero-logos a:hover { opacity: 0.7; }
.hero-logos img {
  height: 26px;
  width: auto;
  object-fit: contain;
}

/* ---------- What We Do ---------- */
.what-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.what-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.2;
  max-width: 976px;
  margin: 0;
  color: var(--paper);
}
.what-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.what-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.what-tab {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  background: transparent;
  border: 0;
  color: var(--paper-50);
  text-align: left;
  transition: color 260ms var(--ease-out);
}
.what-tab-num {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: var(--ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--paper-50);
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out);
}
.what-tab-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  transition: color 260ms var(--ease-out);
}
.what-tab.is-active { color: var(--paper); }
.what-tab.is-active .what-tab-num {
  background: var(--paper);
  color: var(--denim);
}
.what-tab.is-active .what-tab-label { color: var(--paper); }

.what-panels {
  position: relative;
  min-height: 420px;
}
.what-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  transform: translateY(8px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.what-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.what-panel p,
.what-panel .lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.2;
  color: var(--paper);
}
.what-panel .lead { font-weight: 700; }
.what-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.what-panel li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.2;
  color: var(--paper);
  padding-left: 18px;
  position: relative;
}
.what-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.what-panel strong {
  font-weight: 700;
  color: var(--paper);
}

/* ---------- Thesis & Process ---------- */
.thesis-wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.thesis-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2;
  color: var(--paper);
  max-width: 1036px;
  margin: 0;
}
.thesis-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.thesis-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 502px;
}
.thesis-num {
  width: 68px;
  height: 68px;
  border-radius: 15px;
  background: rgba(245,245,237,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--paper);
}
.thesis-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--paper);
  margin: 0;
  white-space: pre-line;
}
.thesis-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}

/* ---------- About Us ---------- */
.about-wrap {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 120px;
  align-items: start;
}
.about-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.about-lead p { margin: 0 0 1.2em; }
.about-lead p:last-child { margin: 0; }
.about-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-avatar {
  width: 170px;
  height: 170px;
  border-radius: 20px 1000px 1000px 1000px;
  overflow: hidden;
  background: var(--ink-10);
  flex-shrink: 0;
}
.about-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-bio {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.about-bio p { margin: 0 0 1em; }
.about-bio p:last-child { margin: 0; }

/* ---------- Contact ---------- */
.contact-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(56px, 11vw, 128px);
  line-height: 1.02;
  letter-spacing: normal;
  color: var(--moss);
  margin: 0;
  text-wrap: balance;
}
.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--paper);
  margin-top: 8px;
  transition: opacity 200ms var(--ease-out);
  align-self: flex-start;
  white-space: nowrap;
}
.contact-email:hover { opacity: 0.7; }

/* ---------- Reveal animation ---------- */
/* Hidden state only applies when JS has enabled the system — if JS
   fails, IntersectionObserver misbehaves, or the user has JS off, the
   reveals stay visible by default so the page never looks empty.
   Energy levels (subtle / soft / cinematic) tune distance, blur, and
   duration. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y, 56px));
  filter: blur(var(--reveal-blur, 14px));
  transition:
    opacity var(--reveal-dur, 1100ms) var(--ease-out),
    transform var(--reveal-dur, 1100ms) var(--ease-out),
    filter var(--reveal-dur, 1100ms) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
body[data-reveal="subtle"]    { --reveal-y: 24px;  --reveal-blur: 4px;  --reveal-dur: 700ms;  }
body[data-reveal="soft"]      { --reveal-y: 56px;  --reveal-blur: 14px; --reveal-dur: 1100ms; }
body[data-reveal="cinematic"] { --reveal-y: 96px;  --reveal-blur: 24px; --reveal-dur: 1500ms; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Hero parallax */
.hero-wrap {
  will-change: transform;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --page-pad-x: 24px; }
  .nav { left: 0; right: 0; top: 0; padding: 12px 16px; height: 64px; }
  .nav .brand-logo { height: 34px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px;
    /* Solid light pane — fully opaque so it never picks up the
       section color underneath. Paired with locked dark text below. */
    background: #f5f5ed;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  }
  /* Lock menu text to dark tone whenever open — overrides the
     section-driven theme so the menu stays readable. */
  .nav.is-open .nav-links a {
    padding: 14px 8px;
    color: #282828;
    opacity: 0.9;
  }
  .nav.is-open .nav-links a:hover,
  .nav.is-open .nav-links a.is-active { background: transparent; color: #282828; opacity: 1; }

  /* Mobile: sections flow naturally instead of pinned 100vh panels, so
     tall content is never clipped or bleeding into the next section.
     Matches the original mobile spacing (auto height, 100px top/bottom). */
  .slot { height: auto; }
  .section {
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .section::before { animation: none !important; opacity: 1 !important; }

  .what-grid { grid-template-columns: 1fr; gap: 32px; }
  .what-tabs { flex-direction: row; }
  .what-tab { flex: 1; padding: 12px 8px; }
  .what-tab-num { width: 48px; height: 48px; border-radius: 12px; font-size: 16px; }
  .what-tab-label { font-size: 15px; }
  /* Mobile: the active panel flows in normally so the section grows to
     fit its full height (panels are absolutely overlaid only on desktop,
     for the tab crossfade). Without this, the taller panel content
     overflows past the section's bottom padding into the next section. */
  .what-panels { min-height: 0; }
  .what-panel { position: static; }
  .what-panel:not(.is-active) { display: none; }

  .thesis-cols { grid-template-columns: 1fr; gap: 40px; }
  .about-wrap { grid-template-columns: 1fr; gap: 40px; }
  .about-avatar { width: 130px; height: 130px; }

  .section--contact { padding-top: calc(64px + 60px); }

  /* ---------- Mobile: hero logos as infinite marquee ----------
     Edge-to-edge horizontal carousel that loops seamlessly. The track
     contains 6 logos (3 originals + 3 aria-hidden duplicates) animated
     by translateX(-50%), creating a continuous loop. */
  .hero-logos {
    /* Break out of the hero-wrap padding to go edge-to-edge */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    flex-wrap: nowrap;
    /* Soft fade on the edges so logos don't pop in/out abruptly */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .hero-logos-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 64px;
    animation: hero-logos-marquee 18s linear infinite;
  }
  /* Larger logos on mobile, matching the original site's marquee */
  .hero-logos img { height: 34px; }
  /* Show the duplicates so the loop has content to scroll into */
  .hero-logos-track > a[aria-hidden="true"] {
    display: inline-flex;
  }
  .hero-logos-track > a {
    flex-shrink: 0;
  }
  @keyframes hero-logos-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-logos-track { animation: none; }
  }
}

/* Keep the full horizontal menu down to tablet widths, matching the
   original site (which only collapses to a burger on narrow screens). */
@media (min-width: 761px) and (max-width: 960px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

@media (max-width: 520px) {
  .hero-title { font-size: 34px; }
  .hero-logos img { height: 30px; }
  .hero-wrap { gap: 40px; }
  .contact-title { font-size: clamp(48px, 14vw, 80px); }
  /* Sized so the full address stays on one line down to the narrowest
     phones (paired with white-space: nowrap on .contact-email). */
  .contact-email { font-size: clamp(18px, 5.6vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section indicator (toggle) ----------
   Editorial counter in the bottom-left: "01 / 05 — What We Do".
   Number animates with a flip when sections change. */
.section-indicator {
  position: fixed;
  left: 26px;
  bottom: 22px;
  z-index: 99;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
body[data-indicator="on"] .section-indicator { opacity: 1; }
.section-indicator-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  min-width: 1.6em;
  transition: transform 360ms var(--ease-out), opacity 360ms var(--ease-out);
}
.section-indicator-num.is-flipping {
  transform: translateY(-12px) rotateX(-60deg);
  opacity: 0;
}
.section-indicator-total {
  opacity: 0.6;
  font-size: 13px;
}
.section-indicator-label {
  font-size: 12px;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .section-indicator { left: 16px; bottom: 16px; gap: 8px; }
  .section-indicator-num { font-size: 22px; }
  .section-indicator-label { display: none; }
}

/* ---------- Tweaks panel (transition picker) ---------- */
.tx-panel {
  position: fixed;
  right: 26px;
  bottom: 22px;
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(20, 22, 24, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 12px;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
body[data-tweaks="on"] .tx-panel { display: flex; }
.tx-panel-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}
.tx-row {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  padding: 4px;
  border-radius: 8px;
}
.tx-row button {
  flex: 1;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.tx-row button:hover { color: var(--paper); }
.tx-row button.is-active {
  background: var(--paper);
  color: var(--ink);
}
.tx-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 0;
}
.tx-toggle-row label {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.85;
}
.tx-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px; height: 16px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 200ms var(--ease-out);
}
.tx-toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 200ms var(--ease-out);
}
.tx-toggle-row input[type="checkbox"]:checked { background: var(--moss); }
.tx-toggle-row input[type="checkbox"]:checked::after { transform: translateX(12px); }