/* Extracted 1:1 from _webflow-source/index.html (NEW). Sources: page_code_base, page_code_custom, responsive root vars, accordion css, styleguide guide. */

/* === page_code_base (lines 274-448) === */
:root {
  --site--max-width: min(var(--site--width), 100%);
  --container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
  --container--full: calc(100% - var(--site--margin) * 2);
  --site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
  --column-width-outer--plus-gutter: calc( ( ( ( var(--container--main) - var(--site--gutter-total) ) / var(--site--column-count) ) + var(--site--gutter) ) );
	--column-width-outer--1: calc(var(--column-width-outer--plus-gutter) - var(--site--gutter));
  --container--small: calc( var(--column-width-outer--plus-gutter) * ( var(--site--column-count) - 2 ) - var(--site--gutter) );
  --column-width--1: calc(100% - var(--site--gutter-total)) / var(--site--column-count);
  --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
  --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
  --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
  --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
  --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
  --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
  --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
  --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
  --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
  --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
  --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
  --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
  --column-margin--1: calc(var(--column-width--plus-gutter) * 1);
  --column-margin--2: calc(var(--column-width--plus-gutter) * 2);
  --column-margin--3: calc(var(--column-width--plus-gutter) * 3);
  --column-margin--4: calc(var(--column-width--plus-gutter) * 4);
  --column-margin--5: calc(var(--column-width--plus-gutter) * 5);
  --column-margin--6: calc(var(--column-width--plus-gutter) * 6);
  --column-margin--7: calc(var(--column-width--plus-gutter) * 7);
  --column-margin--8: calc(var(--column-width--plus-gutter) * 8);
  --column-margin--9: calc(var(--column-width--plus-gutter) * 9);
  --column-margin--10: calc(var(--column-width--plus-gutter) * 10);
  --column-margin--11: calc(var(--column-width--plus-gutter) * 11);
  --column-margin--12: calc(var(--column-width--plus-gutter) * 12);
  --breakout-start: [full-start] minmax(0, 1fr) [content-start];
  --breakout-end: [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end);
  --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width-outer--1))) var(--breakout-end);
	--_typography---text-transform--none: none;
	--_typography---text-transform--uppercase: uppercase;
	--_typography---text-transform--captialize: capitalize;
	--_typography---text-transform--lowercase: lowercase;
	--align--start: start;
	--align--center: center;
	--align--end: end;
}
* {
	vertical-align: bottom;
}
::before, ::after {
	box-sizing: border-box;
}
html {
	background-color: var(--_theme---background);
}
button {
	background-color: unset;
	padding: unset;
	text-align: inherit;
}
button:not(:disabled) {
	cursor: pointer;
}
video {
	width: 100%;
	object-fit: cover;
}
/* remove padding of empty element */
.wf-empty {
	padding: 0;
}
svg {
	max-width: 100%;
}
section, header, footer {
	position: relative;
}
@media (prefers-color-scheme: light) {
	option { color: black; }
}
img::selection {
	background: transparent;
}
/* Typography */
body {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}
/* Clear Defaults */
a:not([class]) {
	text-decoration: underline;
}
h1,h2,h3,h4,h5,h6,p,blockquote,label {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-wrap: inherit;
	margin-top: 0;
	margin-bottom: 0;
}
/* Selection Color */
::selection {
	background-color: var(--_theme---selection--background);
	color: var(--_theme---selection--text);
}
/* Margin Trim */
:is(.u-margin-trim, .u-rich-text) > :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)) {
	margin-top: 0;
}
:is(.u-margin-trim, .u-rich-text) > :not(:has(~ :not(.w-condition-invisible))) {
	margin-bottom: 0;
}
/* Line Height Trim */
:is([class*="u-text-style-"],h1,h2,h3,h4,h5,h6,p):not(.w-richtext,.u-text-trim-off)::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
}
:is([class*="u-text-style-"],h1,h2,h3,h4,h5,h6,p):not(.w-richtext,.u-text-trim-off)::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
}
/* Rich Text Links */
.w-richtext a {
	position: relative;
	z-index: 4;
}
/* Line Clamp */
.u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-4 { -webkit-line-clamp: 4; }
/* Child Contain */
.u-child-contain > * {
	width: 100%;
	max-width: inherit !important;
  margin-inline: 0 !important;
	margin-top: 0 !important;
}
/* Hide */
.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.u-embed-js,
.u-embed-css {
	display: none !important;
}
/* Focus State */
a, button, :where([tabindex]) {
	outline-offset: var(--focus--offset-outer);
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline-color: var(--_theme---text);
	outline-width: var(--focus--width);
	outline-style: solid;
}
/* Global / Clickable Component */
.wf-design-mode .g_clickable_wrap {
	z-index: 0;
}
.g_clickable_wrap a[href="#"] {
	display: none;
}
.g_clickable_wrap a[href="#"] ~ button {
	display: block;
}

/* === page_code_custom (lines 452-577) === */
.u-space-grotesk{
		font-family: var(--_typography---font--secondary-family) !important;
    letter-spacing: var(--_typography---letter-spacing--0-04em) !important;
}
.u-text-strike{
 text-decoration: line-through !important;
}
@media (max-width: 1150px) {
  .u-container-small {
    max-width: var(--container--main) !important;
  }
}
@media (max-width: 991px) {
  .hero-content-wrapper {
    --_alignment---direction: var(--align--center);
    text-align: var(--_alignment---direction, start);
  }
  .positioning .u-text-style-h2 {
  font-size: clamp(2rem, 1.7142857142857142rem + 1.4285714285714286vw, 3rem) !important;
}
  .hero-title br:first-of-type {
    display: none;
  }
  /* Adaugă spațiu după primul BR ascuns */
  .hero-title br:first-of-type::after {
    content: " ";
    display: inline;
  }
  /* Ascunde și al doilea BR din hero-title */
  .hero-title br:nth-of-type(2) {
    display: none;
  }
  /* Adaugă spațiu după al doilea BR ascuns */
  .hero-title br:nth-of-type(2)::after {
    content: " ";
    display: inline;
  }
}
}
.biohacking_solutions span.word {
	display: flow-root;
}
.biohacking_solutions span.word::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + var(--_typography---font--primary-trim-top));
}
.biohacking_solutions span.word::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + var(--_typography---font--primary-trim-bottom));
}
------
/* Menu Hover Effect - Opacity pentru link-urile neconectate */
@media (hover: hover) {
  /* Când faci hover pe orice menu-link din primul wrapper */
  .menu-container .menu-wrapper:first-child:hover .menu-link {
    opacity: 0.4;
  }
  .menu-container .menu-wrapper:first-child:hover .menu-link:hover {
    opacity: 1;
  }
  /* Când faci hover pe primul wrapper, al doilea wrapper devine 0.4 */
  .menu-container .menu-wrapper:first-child:hover ~ .menu-wrapper .menu-link {
    opacity: 0.4;
  }
  /* Când faci hover pe orice menu-link din al doilea wrapper */
  .menu-container .menu-wrapper:last-child:hover .menu-link {
    opacity: 0.4;
  }
  .menu-container .menu-wrapper:last-child:hover .menu-link:hover {
    opacity: 1;
  }
  /* Când faci hover pe al doilea wrapper, primul wrapper devine 0.4 */
  .menu-container .menu-wrapper:last-child:hover ~ .menu-wrapper .menu-link,
  .menu-container:has(.menu-wrapper:last-child:hover) .menu-wrapper:first-child .menu-link {
    opacity: 0.4;
  }
}
/* Fallback pentru browsere fără :has() support */
@media (hover: hover) {
  /* Versiune simplificată - funcționează pe toate browserele */
  .menu-container:hover .menu-link {
    opacity: 0.4;
    transition: opacity 0.3s ease;
  }
  .menu-container .menu-link:hover {
    opacity: 1;
  }
}
----
/* Prima imagine începe din poziție normală */
.dna-decorative:first-child {
  animation-delay: 0s;
}
/* A doua imagine începe din dreapta pentru continuitate */
.dna-decorative:last-child {
  animation-delay: 0s;
}
@keyframes marquee-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Se oprește pe hover */
.dna-decorative-wrapper:hover .dna-decorative {
  animation-play-state: paused;
}
/* Direcție inversă */
.dna-decorative-wrapper.reverse .dna-decorative {
  animation-direction: reverse;
}
@media (max-width: 1002px) {
  .biohacking_solutions {
    font-size: 16vw;
  }
}
@media (min-width: 1002px) {
  .biohacking_solutions {
    font-size: 14vw;
  }
}

/* === responsive root vars (line 580 inline) === */
:root{--site--margin:clamp(1rem, 0.42857142857142855rem + 2.857142857142857vw, 3rem);--_typography---font-size--display:clamp(2.7rem, 1.929rem + 3.857vw, 5.4rem);--_typography---font-size--h1:clamp(2.7rem, 2.186rem + 2.571vw, 4.5rem);--_typography---font-size--h2:clamp(2.25rem, 1.993rem + 1.286vw, 3.15rem);--_typography---font-size--h3:clamp(1.8rem, 1.543rem + 1.286vw, 2.7rem);--_typography---font-size--h4:clamp(1.35rem, 1.221rem + 0.643vw, 1.8rem);--_typography---font-size--h5:clamp(1.125rem, 1.061rem + 0.321vw, 1.35rem);--_typography---font-size--h6:clamp(0.9rem, 0.868rem + 0.161vw, 1.013rem);--_typography---font-size--text-large:clamp(1rem, 0.9285714285714286rem + 0.35714285714285715vw, 1.25rem);--_typography---font-size--text-main:clamp(0.875rem, 0.8392857142857143rem + 0.17857142857142858vw, 1rem);--_typography---font-size--text-small:clamp(0.75rem, 0.7142857142857143rem + 0.17857142857142858vw, 0.875rem);--_spacing---space--1:clamp(0.375rem, 0.3392857142857143rem + 0.17857142857142858vw, 0.5rem);--_spacing---space--2:clamp(0.625rem, 0.5892857142857143rem + 0.17857142857142858vw, 0.75rem);--_spacing---space--3:clamp(0.875rem, 0.8392857142857143rem + 0.17857142857142858vw, 1rem);--_spacing---space--4:clamp(1.25rem, 1.1785714285714286rem + 0.35714285714285715vw, 1.5rem);--_spacing---space--5:clamp(1.75rem, 1.6785714285714286rem + 0.35714285714285715vw, 2rem);--_spacing---space--6:clamp(2rem, 1.8571428571428572rem + 0.7142857142857143vw, 2.5rem);--_spacing---space--7:clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);--_spacing---space--8:clamp(2.5rem, 2.0714285714285716rem + 2.142857142857143vw, 4rem);--_spacing---section-space--small:clamp(3rem, 2.4285714285714284rem + 2.857142857142857vw, 5rem);--_spacing---section-space--main:clamp(4rem, 3.142857142857143rem + 4.285714285714286vw, 7rem);--_spacing---section-space--large:clamp(5.5rem, 4.214285714285714rem + 6.428571428571428vw, 10rem);--_spacing---section-space--page-top:clamp(7rem, 5rem + 10vw, 14rem)}

/* === accordion css (lines 728-742) === */
.wf-design-mode .accordion_content_wrap {
	display: block;
}
.u-dashed-underline{
  height: 1.5px;
  width: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--_theme---tag--text) 0 7px,      /* dash lungime */
      transparent 6px 14px /* gap */
    ); !important
  border-radius: 999px;    /* colțuri “rotunde” vizual */
}

/* === styleguide guide (lines 749-758) === */
html.wf-design-mode .styleguide_guide_wrap {
	display: block;
}
.styleguide_guide_layout {
	counter-reset: gridguides;
}
.styleguide_guide_layout > div::before {
  counter-increment: gridguides;
  content: counter(gridguides);
}

/* === marquee_1_timeline keyframe (extracted from inline <style> at line 1150 of NEW source — used by .marquee_1_layout for the "AS FEATURED IN" media logos scroll) === */
@keyframes marquee_1_timeline {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

/* Start the marquee mid-loop so it reads as an in-flight band, not a
   train pulling out from the left edge. Negative animation-delay jumps
   the animation to ~halfway through its 40s cycle on first paint. */
.marquee-css__list {
  animation-delay: -20s;
}

/* === Book promo: fade book-cover edges into page bg ===
   The current book cover photo carries its own baked-in background
   panel that sits visibly inside a rectangle against the cream page.
   Two intersected linear gradients carve a soft frame: opaque core,
   transparent on the outer ~8% of every side, so the image dissolves
   into the bg instead of looking pasted on. `mask-composite: intersect`
   = pixel is visible only where BOTH gradients are opaque (the inner
   rectangle). `-webkit-mask-composite: source-in` is the legacy WebKit
   equivalent. */
.book-section img.book:not(.shadow) {
  mask-image:
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
}

/* === Hero secondary (guest-section): fade-out bottom on portrait ===
   The portrait crops mid-torso, which leaves a hard horizontal edge
   against the orange panel. A linear-gradient mask softens that edge:
   fully opaque for the top 60% (face + shoulders), then fades to
   transparent over the bottom 40% so the body dissolves into the bg
   instead of cutting off abruptly. `-webkit-` prefix needed for
   Safari and older Chromium-based browsers. */
.guest-portrait {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* === Hero secondary (guest-section): vertical breathing room ===
   The orange panel (`.hero_section` inside `.hero-section.u-theme-dark`)
   has zero vertical padding by default — eyebrows sit flush against the
   top edge and the "Get tickets" / "Become a Partner" CTAs nearly touch
   the bottom rounded corner. Fluid padding gives the text + buttons
   room to breathe at all viewport sizes. */
.hero-section.u-theme-dark .hero_section {
  padding-top: clamp(3rem, 1.5rem + 4vw, 6rem);
  padding-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
}

/* === Hero secondary (guest-section): inverted layout (image left / text right) ===
   The base `.hero-container.u-container-small` is a 2-col grid with the
   content wrapper (text + CTAs) in the first column and the portrait
   image in the second. The duplicate variant rendered below the main
   guest-section flips this: portrait goes left, text goes right.
   We use grid `order` so the text reading direction stays LTR.

   Mobile keeps the natural stacking order — the inverted layout only
   applies at the same breakpoint where the base layout is also 2-col. */
@media (min-width: 992px) {
  .hero-section.inverted .hero-content-wrapper {
    order: 2;
  }
  .hero-section.inverted .hero-image-wrapper {
    order: 1;
  }
}

/* === Form checkbox / radio state — extracted from the inline <style> Webflow embedded inside the contact form (we drop the wrapper, so these rules live here). Drives the visible checked / focus appearance via :has() and :focus-within selectors. */
.form_main_radio_label:has(input:checked) .form_main_radio_circle_inner {
  opacity: 1;
}
.form_main_radio_label:focus-within .form_main_radio_circle_wrap {
  border-color: currentColor;
}
.form_main_checkbox_label:has(input:checked) .form_main_checkbox_box {
  background-color: currentColor;
}
.form_main_checkbox_label:has(input:checked) .form_main_checkbox_icon {
  opacity: 1;
}
.form_main_checkbox_label:focus-within .form_main_checkbox_box {
  border-color: currentColor;
}

/* Link inside the checkbox label that points at /terms-conditions.
   The Webflow `.form_main_checkbox_input` rule positions the real
   <input type=checkbox> absolutely (inset:0, z-index:2) on top of
   the whole label — an invisible overlay that intercepts every
   click. Without raising the link above it, the link receives no
   pointer events. position:relative + z-index:3 puts it above the
   overlay so clicks reach the anchor and open /terms-conditions. */
.form_main_checkbox_link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  position: relative;
  z-index: 3;
}
.form_main_checkbox_link:hover,
.form_main_checkbox_link:focus-visible {
  text-decoration-thickness: 1.5px;
}

/* === Section wave anti-aliasing fix ===
   Webflow exports the wave SVG with viewBox="0 0.96 654 14.14" — a 14.14 unit
   height that doesn't divide evenly into most viewport widths. Browsers then
   leave a 1px sub-pixel gap between the cream wave shape and the cream
   section below it, visible as a thin horizontal stripe along the wave's
   bottom edge. A 2% vertical scale (with the rotation transform composed in
   for the .bottom variant) inflates the path just enough to cover the gap
   without visibly distorting the curve. */
.section-wave-svg {
  transform-origin: center;
}
.section-wave-svg.bottom {
  transform: rotate(180deg) scaleY(1.02) translateY(-0.5px);
}
.section-wave-svg:not(.bottom) {
  transform: scaleY(1.02) translateY(-0.5px);
}

/* === Navbar — pull menu items toward the centered logo ===
   Webflow's default uses `space-between` on `.menu-container` with
   `width: var(--column-width--5)` + `justify-content: center` on each
   `.menu-wrapper`. That bunches items in the middle of each 5-column
   slot, but visually they sit closer to the page edges than to the
   centered logo. Right-align the left group and left-align the right
   group so the menu items hug the logo with a small gap. */
@media (min-width: 768px) {
  .menu-container.u-container-full > .menu-wrapper:first-of-type {
    justify-content: flex-end;
    padding-right: 2rem;
  }
  .menu-container.u-container-full > .menu-wrapper:last-of-type {
    justify-content: flex-start;
    padding-left: 2rem;
  }
}

/* ============================================================
 * Mobile audit fixes (B1, B3, B4, R1, R2, R3)
 * Captured via live audit at 320/375px viewports.
 * ============================================================ */

/* === B1 — Fix the hero-title <br>→space trick on mobile ===
   Webflow's theme.css ships a mobile-only rule:
     .hero-title br:first-of-type { display: none; }
     .hero-title br:first-of-type::after { content: " "; ... }
   The trick is supposed to swap line-break with a space on narrow
   viewports (so "First <br> Last" reads as "First Last" inline).
   BUT setting display:none on the parent <br> kills its ::after
   pseudo-element too — so the space never appears and the result
   reads as "FirstLast" with no gap between the words.
   Fix: replace display:none with font-size:0 so the element stays
   in flow and the ::after still renders.
   Applied at the same breakpoint Webflow uses (max-width: 991px). */
@media (max-width: 991px) {
  .hero-title br:first-of-type,
  .hero-title br:nth-of-type(2) {
    display: inline !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .hero-title br:first-of-type::after,
  .hero-title br:nth-of-type(2)::after {
    content: " " !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline !important;
  }
}

/* === B3 — Heading scale on very small viewports ===
   Webflow's fluid clamp() for `--_typography---font-size--h1` is
   tuned for 480px+; below that, headings can occupy 5-6 lines of
   the viewport. The earlier override capped h2 at 2rem (32px),
   but body / h4 are also ~22px on mobile, so heading-to-body
   ratio collapsed to ~1× and the visual hierarchy disappeared
   (e.g. "Bestselling Authors on Longevity" read at the same
   size as the lead paragraph beneath it).
   New override raises the floor + ceiling: heading lands at
   ~30px on a 375px screen instead of 22px, restoring the same
   ~1.7× heading-to-body ratio we have on desktop. Lead-paragraph
   h4 also gets a tighter mobile cap so it stays clearly below
   the heading. */
@media (max-width: 479px) {
  :root {
    --_typography---font-size--display: clamp(2.5rem, 10vw, 3.75rem);
    --_typography---font-size--h1: clamp(2.125rem, 9vw, 3rem);
    --_typography---font-size--h2: clamp(2rem, 8vw, 2.5rem);
    --_typography---font-size--h4: clamp(1.05rem, 4.25vw, 1.4rem);
  }
}

/* === B4 — Contact submit button: full width on mobile ===
   The .btn_main_outline inside .contact_card_wrap renders at ~220px
   wide on mobile, which is fine for desktop multi-button rows but
   looks underweight as a single primary action on a narrow screen.
   Stretch it to 100% on mobile to match expectations for "the one
   important action on this page". */
@media (max-width: 767px) {
  .contact_card_wrap .btn_main_outline,
  .contact_card_wrap .btn_main_wrap {
    width: 100%;
  }
}

/* === R1 — Better wrap for headings ===
   text-wrap: balance distributes words across lines more evenly so
   we don't get "widows" (a single dangling word on the last line).
   Supported in modern browsers; falls back to normal wrap elsewhere. */
.g_heading h1,
.g_heading h2,
.g_heading h3,
.g_heading > p {
  text-wrap: balance;
}

/* === R2 — Atyp size scaling fallback for 360-479px ===
   The fluid display-style font on the main hero stays large at
   small viewports. Cap it via clamp() so it never exceeds what fits
   in a 320-wide column with reasonable padding. */
@media (max-width: 479px) {
  .u-text-style-display {
    font-size: clamp(2.25rem, 11vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
}

/* === R3 — Speaker stats grid forced to 1 column on small screens ===
   The default `repeat(auto-fit, minmax(128px, 1fr))` lets stats
   collapse to 1-2 cols depending on width, which can leave the
   third stat orphaned on its own row. Pin to 1 col below 480 so
   each stat gets full focus. */
@media (max-width: 479px) {
  #speaker-section .about-wrapper {
    grid-template-columns: 1fr;
  }
}

/* === Mobile carousel utility (scroll-snap) ===
   Applied to card containers in Testimonials / Personas / Expo
   Exhibitors. On mobile, replaces the vertical stack (which was
   ~2 000-2 400px tall per section) with a horizontal swipeable
   strip. Native browser scroll-snap = zero JS, smooth on iOS +
   Android, no library bundle.

   Layout details:
   - flex row, nowrap.
   - Each card is 85% of viewport wide so the next one peeks in
     from the right (visual cue that the section is swipeable).
   - 16px gap + side padding so the first/last cards aren't flush
     with the screen edge.
   - scroll-snap-type: x mandatory + scroll-snap-align: center on
     each card snaps the closest card to the viewport center.
   - Scrollbar hidden (-webkit + scrollbar-width: none).
   - Native browser scroll handles wheel/touch on the strip — no
     extra JS hooks required.

   ABOVE 768px the rule is a no-op — desktop keeps its grid layout
   exactly as Webflow shipped it. */
@media (max-width: 767px) {
  .mobile-carousel {
    display: flex !important;
    flex-flow: row nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* CRITICAL: restrict touch to horizontal pan only. Without this,
       a finger drag that starts on a carousel card captures the
       gesture and the page can't scroll vertically — user is "stuck"
       inside the carousel. pan-x = horizontal swipes scroll the
       carousel, any other direction bubbles up to the page. */
    touch-action: pan-x;
    /* Stop scroll chaining at the carousel boundary so over-pulling
       past the last card doesn't bounce the whole page. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 -1rem;
    scrollbar-width: none;
    /* Make sure transformed children (Reveal animations) aren't
       clipped on the cross axis. */
    scroll-padding-inline: 1rem;
  }
  .mobile-carousel::-webkit-scrollbar {
    display: none;
  }
  .mobile-carousel > * {
    flex: 0 0 85%;
    scroll-snap-align: center;
    /* Some grid children rely on `width: 100%` from the parent
       grid track. Reassert it inside the flex row so card widths
       are predictable. */
    width: 85%;
    min-width: 0;
  }
}

/* === Exhibitor + Persona carousel cards: 3:4 portrait on mobile ===
   `.persona-inner` and `.expo-persona-inner` use `aspect-ratio:
   2.85 / 4.2` on the desktop grid, but in a carousel the parent
   wrapper has no explicit height and the inner aspect ratio can
   collapse to a wide rectangle. Pin the carousel children to a
   portrait aspect ratio so each card visually matches the desktop
   tall-card look. Scoped to the `_4-columns` carousels only so it
   doesn't hit the Expo Benefits `_2-columns` carousel (where the
   cards are icon + text, no large image — they should size to
   content). */
@media (max-width: 767px) {
  #expo-section .mobile-carousel._4-columns > .benefit-image-wrapper {
    aspect-ratio: 3 / 4;
  }
  #expo-section .mobile-carousel._4-columns > .benefit-image-wrapper > .expo-persona-inner {
    aspect-ratio: auto;
    height: 100%;
  }
  #personas-section .mobile-carousel._4-columns > .benefit-image-wrapper {
    aspect-ratio: 3 / 4;
  }
  #personas-section .mobile-carousel._4-columns > .benefit-image-wrapper > .persona-inner {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* === Solutions tiles: smaller carousel (2.2 visible per row) ===
   Tiles are icon + 1-2 line title — much smaller than testimonials
   or persona cards. Showing one at a time (the default 85%) felt
   oversized; instead show ~2.2 per viewport so users see "there's
   more" + scroll horizontally to reveal the rest. */
@media (max-width: 767px) {
  #solutions-section .mobile-carousel > * {
    flex: 0 0 calc((100% - 2rem) / 2.2);
    width: calc((100% - 2rem) / 2.2);
  }
}

/* === Expo Benefits carousel: natural height (no forced ratio) ===
   Cards are icon + heading + body text — no image. Letting them
   size to content height looks better than forcing a square or
   portrait box. Just allow normal flex sizing. */
@media (max-width: 767px) {
  #expo-section .mobile-carousel._2-columns > * {
    aspect-ratio: auto;
    height: auto;
  }
}

/* === Tickets group packages: 2×2 full-width grid on mobile ===
   The 4 group tier tiles (Duo / Group / Team / Corporate) were
   constrained to ~83% of the container width on desktop (
   var(--column-width--10)). On mobile that left big empty side
   margins. Drop the constraint + force a 2-col grid that fills
   the available width. Class `tickets-group-tiers` is added in JSX
   to scope this rule without affecting the Solutions tile wrapper
   (which shares the `.biohacking-numbers-wrapper` class). */
.tickets-group-tiers {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767px) {
  .tickets-group-tiers {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .tickets-group-tiers > * {
    width: 100%;
  }
}

/* === FAQ list width — responsive ===
   `min(720px, 60%)` was applied to all viewports. On mobile 60% of
   375px = 225px which crushes the questions. Make it full width up
   to 991px, then constrain on desktop. */
.faq-list-narrow {
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .faq-list-narrow {
    max-width: min(720px, 60%);
  }
}

/* === Mobile menu — overlay rendered separately from desktop nav ===
   The desktop navbar (`.menu-container` with [left nav, logo, right
   nav, hamburger]) keeps its grid layout untouched. On mobile, the
   Webflow CSS hides the desktop nav menus via
   `.w-nav[data-collapse='medium'] .w-nav-menu { display: none }` —
   we leave that alone.

   When the hamburger is tapped, React sets `open=true` and a separate
   `.mobile-menu-overlay` element (rendered after the navbar in JSX)
   becomes visible. Single render tree per breakpoint — no fighting
   with the desktop flex layout. */
.mobile-menu-overlay {
  display: none;
}

@media (max-width: 991px) {
  /* Hamburger icon: morph to "×" when open. */
  .menu-button.is-open .w-icon-nav-menu::before {
    content: '\00d7';
  }

  /* Header (navbar wrapper) must span the full viewport with the
     logo flush left and hamburger flush right, only padded by the
     container side padding. Webflow's .menu-container already uses
     `justify-content: space-between` but its width inherits from the
     u-container-full track. Force full width on mobile so the two
     items hug the screen edges. */
  .navbar-wrapper .menu-container.u-container-full {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
    justify-content: space-between;
    align-items: center;
  }
  /* `.brand` has `margin-top: 1rem` from theme.css that pushes the
     logo down inside the header bar — on desktop it's hidden by
     other layout rules but on mobile it makes the logo look mis-
     aligned. Reset it. */
  .navbar-wrapper .menu-container.u-container-full .brand {
    margin: 0;
    padding: 0;
  }
  .navbar-wrapper .menu-container.u-container-full .brand .biohacking360-logo {
    display: block;
  }

  /* Overlay sits BELOW the navbar so the header stays bright (not
     dimmed). 5.5rem ≈ navbar height. The backdrop dim only covers
     the page content underneath the panel. */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    top: 5.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  }
  .mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.24s ease;
  }

  /* Panel fills the overlay (which already starts below the header).
     space-between distributes links to the top and CTAs to the
     bottom — the user can scroll if the link list grows tall. */
  .mobile-menu-panel {
    position: absolute;
    inset: 0;
    background-color: var(--swatch--light-100, #faf6ef);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-1rem);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .mobile-menu-overlay.is-open .mobile-menu-panel {
    transform: translateY(0);
  }

  .mobile-menu-links {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .mobile-menu-link {
    display: block;
    width: 100%;
    padding: 1rem 0.25rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--swatch--dark-900, #111);
    text-decoration: none;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: color 0.15s ease;
  }
  .mobile-menu-link:hover,
  .mobile-menu-link:focus-visible {
    color: var(--swatch--green-500, #f5b94e);
  }
  .mobile-menu-link:last-child {
    border-bottom: 0;
  }

  /* CTAs pinned to the bottom of the panel — stacked vertically,
     each full-width (matches the in-page btn_main pattern).

     Force identical dimensions for both buttons. The default
     `.btn_main_outline` + `.btn_main_wrap` structure renders
     differently for primary (visible inner wrap, transparent
     outline) vs secondary (visible outline + transparent inner),
     which makes the secondary button look ~2-3px taller because
     it shows the outer ring's padding. Pin min-height + identical
     padding on the wrap so both render as the same pill. */
  .mobile-menu-ctas {
    display: flex;
    flex-flow: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
    width: 100%;
  }
  .mobile-menu-ctas .btn_main_outline {
    width: 100%;
    padding: 0;
    border-width: 1.5px;
  }
  .mobile-menu-ctas .btn_main_wrap {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  /* The accessible <a>/<button> overlay inside wrap covers the
     whole pill so the entire surface is tappable. */
  .mobile-menu-ctas .g_clickable_wrap,
  .mobile-menu-ctas .g_clickable_wrap a,
  .mobile-menu-ctas .g_clickable_wrap button {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* === Footer: breathing room under the bottom row ===
   Without this, the "© Biohacking360" + Terms/Privacy line sits
   flush against the rounded footer panel’s bottom edge. 1rem
   of padding on the inner container lifts it off the edge while
   keeping the panel’s outer rounded shape intact (the wrapper
   uses overflow:hidden + radius). */
.footer .footer-container {
  padding-bottom: 2.5rem;
}

/* === Body bottom padding ===
   Leaves 1rem of cream background visible below the rounded footer
   panel so the page doesn't end flush with the viewport edge. */
body {
  padding-bottom: 1rem;
}

/* === Podcast marquee: seamless loop math ===
   `.marquee-css__list` is a flex child of `.marquee_1_wrap` (a
   `display: flex; flex-flow: column;` container). Default
   align-items is `stretch`, so the marquee element gets stretched
   to the parent's cross-axis (viewport) width — NOT its content
   width. The keyframe `translateX(-50%)` calculates 50% of the
   element's own width, so it ends up shifting by half the
   viewport (~960px) instead of half the content (~6160px).
   That's the gap: the animation completes one cycle long before
   the duplicate set rotates into position.

   `width: max-content` opts the element out of the stretch and
   sizes it to its child's natural width — half of that is then
   exactly half the cards, which lines up with the second copy
   and makes the loop seamless.

   Animation-duration goes 40s → 80s because we now have 4× the
   cards (was 7 unique × 2, now 7 unique × 4) — without this the
   marquee scrolls 2× faster than feels right. */
#podcast-section .marquee-css__list {
  width: max-content;
  animation-duration: 80s;
}

/* === Podcast cards: lock width + tame title font ===
   Episode-title length was driving card width: the background image
   is positioned absolute, so the content (eyebrow + title) defined
   the card's intrinsic size. A short title like "Is Your Diet
   Killing You?" produced a noticeably smaller card than 3-line
   titles, breaking the marquee rhythm. Lock width so every card
   is identical regardless of title length. Also dial the title
   down a notch — at the original h4 size, longer titles bled over
   the speaker's face in the background image.

   The width has to land on .podcast-wrapper (the inner clip-path
   card) — not just the outer .podcast-container-wrap article — because
   the article is `display: flex` and the wrapper sits inside it as
   a content-sized flex child. Sizing only the article left the
   visible card still hugging the longest line of text. */
.podcast-container-wrap {
  flex: none;
  width: 26rem;
}
.podcast-container-wrap .podcast-wrapper {
  width: 100%;
}
.podcast-inner.u-theme-dark .g_heading.u-text-style-h4 {
  --_text-style---font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
}
@media (max-width: 767px) {
  .podcast-container-wrap {
    width: 20rem;
  }
  /* Mobile cards: drop the 16:9 ratio in favour of a taller 4:3
     so the dark gradient under the title has more room to breathe
     and the cards feel more substantial in the narrow viewport. */
  .podcast-inner {
    aspect-ratio: 4 / 3;
  }
}

/* Override theme.css `.footer { margin-bottom: 1rem }` — the body
   padding above already handles the bottom breathing room; the
   margin was stacking with it and giving 2rem of dead space. */
.footer {
  margin-bottom: 0;
}