/* ============================================================
   Portfolio site — shared styles
   Edit colors and fonts at the top; the rest should just work.
   ============================================================ */

:root {
  --bg: #fbf9f5;                               /* off-white — warm but near-neutral */
  --ink: #1a1a1a;                              /* near-black text */
  --muted: #a9a29a;                            /* faded grey for inactive/footer */
  --accent: #1a1a1a;                           /* link hover */
  --sidebar-w: clamp(260px, 19vw, 400px);      /* slightly narrower → images start closer */
  --sidebar-pad-v: clamp(120px, 15vh, 190px);  /* top/bottom — just below image top edge */
  --sidebar-pad-h: clamp(36px, 4vw, 72px);     /* left/right space */
  --pad: 48px;
  --img-pad-top: clamp(100px, 12vh, 170px);    /* space above image strip — restored */
  --img-pad-bot: clamp(120px, 14.5vh, 210px); /* space below image strip — restored */
  --img-gap: 8px;                              /* gap between images — tight panels */
  --img-ratio: 3 / 4;                          /* wider portrait, matches reference */
  --serif: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* horizontal-scroll pages manage their own scrolling */
}

body.scrollable {
  overflow-y: auto; /* portfolio/motion/shop/info pages scroll vertically */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.6; }

/* -------------------- sidebar entrance animation -------------------- */

@keyframes sidebar-slide-up {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Wrapper clips the outgoing translate so text rises from beneath */
.sidebar-reveal {
  overflow: hidden;
}

/* Calm, unhurried ease-out — luxury feel */
.sidebar-reveal-inner {
  display: block;
  animation: sidebar-slide-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* -------------------- sidebar -------------------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  padding: var(--sidebar-pad-v) var(--sidebar-pad-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
  background: var(--bg);
}

.sidebar .brand {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
  display: block;
}

.sidebar .brand:hover {
  opacity: 1; /* cancel global a:hover fade */
}

.sidebar .brand-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}

.sidebar .sidebar-bio {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.65;
  margin: 0 0 20px;
  opacity: 0.65;
}

.sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar nav li {
  margin: 8px 0;
}

.sidebar nav a {
  display: block;        /* block keeps everything flush to the same left edge */
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
  transition: opacity 0.25s ease;
}

.sidebar nav a:hover { opacity: 0.45; }

.sidebar nav a.current {
  color: var(--muted);
}

/* CTA button */
.sidebar-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  border-radius: 3px;
  transition: opacity 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-cta:hover { opacity: 0.75; }

/* Footer */
.sidebar .footer {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}

.sidebar .footer .copyright {
  margin-bottom: 12px;
  opacity: 0.7;
}

/* Social icons row */
.sidebar .footer .social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sidebar .footer .social a {
  display: inline-flex;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: opacity 0.25s ease;
}

.sidebar .footer .social a:hover { opacity: 0.45; }

.sidebar .footer .social svg {
  width: 20px;
  height: 20px;
  fill: var(--ink);
}

/* -------------------- main content region -------------------- */

.main {
  margin-left: var(--sidebar-w);
  height: 100vh;
  position: relative;
}

/* -------------------- horizontal scroll strip -------------------- */

.hscroll {
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  will-change: scroll-position;
}
.hscroll::-webkit-scrollbar { display: none; }

.hscroll-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--img-gap);
  padding: var(--img-pad-top) var(--sidebar-pad-h) var(--img-pad-bot) 0;
  width: max-content;
}

.hscroll-inner img,
.hscroll-inner video {
  height: 100%;
  width: auto;          /* natural width from intrinsic ratio */
  display: block;
  object-fit: contain;  /* never crops — landscape images show fully */
  user-select: none;
  -webkit-user-drag: none;
}

.hscroll-caption {
  position: absolute;
  left: calc(var(--sidebar-w) + var(--pad));
  bottom: var(--pad);
  font-size: 12px;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
}

/* -------------------- grid (portfolio / shop) -------------------- */

.grid {
  margin-left: var(--sidebar-w);
  padding: var(--sidebar-pad-v) clamp(32px, 8vw, 200px) 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  align-content: start;
  min-height: 100vh;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

.grid .tile {
  display: block;
}

.grid .tile .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;     /* square */
  background: #e8e4dc;
  overflow: hidden;
}

.grid .tile .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.grid .tile:hover .thumb img {
  transform: scale(1.02);
}

/* Portfolio tiles are <a> tags — cancel the global link fade so only the scale shows */
.grid .tile:hover {
  opacity: 1;
}

.grid .tile .title {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink);
  opacity: 0.8;
}

.grid .tile .price {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Shop — 2-column grid */
.grid.shop {
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
  padding: var(--sidebar-pad-v) 180px var(--pad);
}

.grid.shop .tile .thumb {
  aspect-ratio: 1 / 1;
}

.grid.shop .tile .title,
.grid.shop .tile .price {
  text-align: center;
}

.grid.shop .tile .price {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* -------------------- motion page -------------------- */

.motion-list {
  margin-left: var(--sidebar-w);
  padding: var(--pad);
  min-height: 100vh;
}

.motion-list .video-wrap {
  margin: 0 auto 48px;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  background: #000;
}

.motion-list .video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------- info page -------------------- */

.info-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Carousel strip — smaller, raised, aligned with bio below */
.info-hscroll {
  height: 52vh;
  margin-top: clamp(40px, 10vh, 80px);
  margin-left: var(--sidebar-pad-h);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.info-hscroll::-webkit-scrollbar { display: none; }

.info-hscroll-inner {
  padding-top: clamp(16px, 2.5vh, 28px);
  padding-bottom: clamp(16px, 2.5vh, 28px);
}

/* Written bio + contact below the carousel — two columns, raised */
.info-bio-section {
  padding: 36px var(--sidebar-pad-h) 80px var(--sidebar-pad-h);
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 80px;
  align-items: start;
  max-width: 900px;
}

.info-bio-text p {
  margin: 0 0 1.4em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink);
  opacity: 0.85;
}

.info-bio-text p:first-child {
  opacity: 1;
}

.info-bio-text p:last-child { margin-bottom: 0; }

.info-bio-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 3px;
}

.info-inquire-rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  opacity: 0.3;
}

.info-inquire-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.info-inquire-email-link {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.info-inquire-email-link:hover { opacity: 0.45; }

.info-panel {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: var(--img-ratio);
  flex-shrink: 0;
  overflow: hidden;
}

.info-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay so text reads cleanly over any image */
.info-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Text block — position varies per panel */
.info-panel-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  z-index: 2;
  pointer-events: none;
}

.info-panel-text.pos-top          { justify-content: flex-start; padding-top: 52px; }
.info-panel-text.pos-top-low      { justify-content: flex-start; padding-top: calc(52px + 15%); }
.info-panel-text.pos-above-center { justify-content: center; padding-bottom: 47%; }
.info-panel-text.pos-bottom       { justify-content: flex-end; }
.info-panel-text.pos-center       { justify-content: center; }

.info-panel-headline {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.info-panel-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* -------------------- brands page -------------------- */

/* Each brand slide = video + text side by side, centred in the hscroll */
.brand-slide {
  display: flex;
  align-items: center;
  gap: 52px;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}


.brand-slide-video {
  height: 72vh;
  aspect-ratio: 9 / 16;   /* portrait — social/vertical format */
  background: #111;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;     /* needed for the scroll-fix overlay */
  border-radius: 10px;
}

.brand-slide-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Transparent overlay sits on top of the iframe so trackpad wheel events
   reach the page instead of being swallowed by the iframe context.
   Clicking it hides itself so the video becomes interactive. */
.brand-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

.brand-slide-info {
  width: 230px;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: calc(var(--img-pad-bot) * 0.5);
}


/* Thin editorial rule above the brand name */
.brand-slide-name::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
  margin-bottom: 14px;
}

.brand-slide-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}

.brand-slide-meta {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.brand-slide-desc {
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* Brands page: wider gap + left breathing room so first slide isn't edge-flush */
.hscroll-inner.brands-inner {
  gap: 80px;
  padding-left: var(--sidebar-pad-h);
}

/* -------------------- image protection toast -------------------- */

#protection-toast {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(26, 26, 26, 0.75);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

#protection-toast.fade-out {
  opacity: 0;
}

/* -------------------- before / after comparison slider -------------------- */

.ba-slider {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  border-radius: 2px;
  background: #111;
}

.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
}

.ba-before img,
.ba-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ba-after {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path; /* GPU-composite the reveal */
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}

.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.ba-arrow {
  width: 7px;
  height: 11px;
  color: var(--ink);
  flex-shrink: 0;
}

.ba-label {
  position: absolute;
  bottom: 14px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.ba-label-before { left: 14px; }
.ba-label-after  { right: 14px; }

/* -------------------- preset product page -------------------- */

.preset-wrap {
  margin-left: var(--sidebar-w);
  padding: var(--sidebar-pad-v) clamp(40px, 6vw, 100px) 100px;
  min-height: 100vh;
}

.preset-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
  margin-bottom: 72px;
}

/* Left column: main slider + thumbnail strip stacked */
.preset-slider-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0; /* prevent grid blowout */
}

.preset-slider-col .ba-slider {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Thumbnail strip */
.preset-thumbs {
  display: flex;
  gap: 5px;
}

.preset-thumb {
  flex: 1;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0.35;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  border: 1.5px solid transparent;
}

.preset-thumb.active {
  opacity: 1;
  border-color: var(--ink);
}

.preset-thumb:hover:not(.active) {
  opacity: 0.62;
}

.preset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.preset-info {
  position: sticky;
  top: clamp(32px, 5vh, 56px);
}

.preset-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.preset-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px;
}

.preset-price {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 24px;
}

.preset-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.09);
  margin: 0 0 22px;
}

.preset-desc {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.82;
  color: var(--ink);
  opacity: 0.68;
  margin: 0 0 26px;
}

.preset-includes {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.preset-includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink);
  opacity: 0.7;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.preset-includes li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.preset-buy-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.25s ease;
}

.preset-buy-btn:hover { opacity: 0.72; }

/* ---- Social proof ---- */

.preset-social-proof {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.preset-testimonial-rule {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  opacity: 0.2;
  margin-bottom: 22px;
}

.preset-testimonial-quote {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 22px;
  padding: 0;
}

.preset-testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preset-testimonial-name {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.preset-testimonial-detail {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* ---- Before / after examples ---- */

.preset-examples {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.preset-examples-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}

.preset-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.preset-examples-grid .ba-slider {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* ---- Final CTA ---- */

.preset-final-cta {
  margin-top: 80px;
  padding: 80px 0 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.preset-final-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.preset-final-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}

.preset-final-price {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 28px;
}

.preset-buy-btn--centered {
  min-width: 240px;
  text-align: center;
}

/* -------------------- mobile layout (≤780px) -------------------- */

/* Hamburger button — hidden on desktop */
.mobile-menu-btn {
  display: none;
}

/* Mobile nav overlay — hidden on desktop */
.mobile-nav-overlay {
  display: none;
}

@media (max-width: 780px) {
  :root {
    --sidebar-w: 0px;
    --pad: 20px;
    --mobile-bar: 52px;
  }

  /* Page scrolls vertically; no horizontal overflow */
  html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ---- Sidebar → fixed top bar: name left, hamburger right ---- */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--mobile-bar);
    padding: 0 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    z-index: 200;
  }

  .sidebar > div:first-child {
    display: flex;
    align-items: center;
  }

  .sidebar .brand       { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 0; white-space: nowrap; letter-spacing: 0.01em; }
  .sidebar .brand-sub   { display: none; }
  .sidebar .sidebar-bio { display: none; }
  .sidebar nav          { display: none; } /* nav lives in the overlay on mobile */
  .sidebar-cta          { display: none; }
  .sidebar .footer      { display: none; }

  /* ---- Hamburger button ---- */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    z-index: 201;
  }

  .mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   0.28s ease;
  }

  /* Animate to × when open */
  .mobile-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mobile-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ---- Full-screen nav overlay — fade in, centred ---- */
  .mobile-nav-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    inset: 0;
    top: var(--mobile-bar);
    background: var(--bg);
    z-index: 199;
    padding: 48px 28px 56px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .mobile-nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Subtitle line — "specialising in..." */
  .mobile-nav-overlay .overlay-subtitle {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-bottom: 36px;
  }

  .mobile-nav-overlay nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .mobile-nav-overlay nav a {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
  }

  .mobile-nav-overlay nav a:hover { opacity: 0.45; }
  .mobile-nav-overlay nav a.current { color: var(--muted); }

  /* Social icons — pinned to bottom of overlay */
  .mobile-nav-overlay .overlay-footer {
    position: absolute;
    bottom: 36px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }

  .mobile-nav-overlay .overlay-footer .social {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .mobile-nav-overlay .overlay-footer .social a {
    display: inline-flex;
    width: 20px;
    height: 20px;
    opacity: 0.55;
    transition: opacity 0.2s ease;
  }

  .mobile-nav-overlay .overlay-footer .social a:hover { opacity: 1; }

  .mobile-nav-overlay .overlay-footer .social svg {
    width: 20px;
    height: 20px;
    fill: var(--ink);
  }

  /* ---- Content areas: clear the top bar, no left margin ---- */
  .main {
    margin-left: 0;
    margin-top: var(--mobile-bar);
    height: auto;
  }

  .grid, .motion-list, .info-main, .preset-wrap {
    margin-left: 0;
    margin-top: var(--mobile-bar);
  }

  /* ---- Horizontal strip → full-bleed vertical stack ---- */
  .hscroll {
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .hscroll-inner {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: 0;   /* full bleed — edge to edge */
    gap: 4px;
  }

  .hscroll-inner img,
  .hscroll-inner video {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
  }

  /* ---- Portfolio / shop grids ---- */
  .grid, .grid.shop {
    grid-template-columns: 1fr;
    padding: 20px 16px 40px;
    gap: 24px;
  }

  /* ---- Brands page: video + text stack vertically ---- */
  .hscroll-inner.brands-inner {
    padding: 0;
    gap: 48px;
  }

  .brand-slide {
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 0 16px;
  }

  .brand-slide-video {
    height: auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
  }

  .brand-slide-info {
    width: 100%;
    align-self: auto;
    padding-bottom: 0;
  }

  /* ---- Info page ---- */
  .info-main { margin-top: var(--mobile-bar); }

  .info-hscroll {
    height: auto;
    overflow-x: hidden;
    margin-left: 0;
    margin-top: 0;
  }

  .info-hscroll-inner {
    flex-direction: column;
    padding: 0;
    gap: 4px;
  }

  .info-panel {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .info-bio-section {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 16px 60px;
    max-width: 100%;
  }

  /* ---- Preset page ---- */
  .preset-wrap { padding: 20px 16px 60px; }
  .preset-hero { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .preset-info { position: static; }
  .preset-social-proof { grid-template-columns: 1fr; gap: 32px; }
  .preset-examples-grid { grid-template-columns: 1fr; }
  .preset-final-title { font-size: 34px; }
}