/* Dynamic WordPress/Elementor compatibility additions. */
.nav__links {
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links > .menu-item { position: relative; }
.nav__links .sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  min-width: 210px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__links .menu-item:hover > .sub-menu,
.nav__links .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__links .sub-menu a { display: block; padding: 10px 8px; white-space: nowrap; }

.nav__brand-logo { display: block; width: auto; max-width: min(280px, 34vw); height: 42px; object-fit: contain; }
.nav__brand-logo--dark,
.nav__brand-logo--mobile { display: none; }
[data-theme=dark] .nav__brand-logo--light:has(+ .nav__brand-logo--dark) { display: none; }
[data-theme=dark] .nav__brand-logo--dark { display: block; }

.site-announcement {
  position: relative;
  z-index: 61;
  padding: 9px var(--site-edge, 20px);
  text-align: center;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.site-announcement a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-announcement + header .nav { top: 36px; }

.footer__logo { display: inline-flex; margin-bottom: 18px; }
.footer__logo img { display: block; width: auto; max-width: 220px; max-height: 92px; object-fit: contain; }
.footer-social__monogram { display: grid; place-items: center; min-width: 1em; font-size: 12px; font-weight: 700; line-height: 1; }
.footer-legal-menu { display: flex !important; flex-flow: row wrap !important; gap: 8px 16px !important; }
.footer-legal-menu a { font-size: inherit !important; color: inherit !important; }

.toc-elementor-content { min-height: 70vh; overflow: clip; }
.toc-elementor-content > .elementor { width: 100%; }
.toc-elementor-content .elementor-section { width: 100% !important; }
.toc-elementor-content .elementor-section.elementor-section-boxed > .elementor-container,
.toc-elementor-content .elementor-container { max-width: 100% !important; width: 100% !important; }
.toc-elementor-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.toc-elementor-content .elementor-widget-wrap { padding: 0 !important; }
.toc-elementor-content .elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
.toc-elementor-content .elementor-widget-container { width: 100% !important; }
.cta__copy,
.cta__form-wrap {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1023px) {
  .nav__brand-logo { height: 36px; max-width: 180px; }
  .nav__brand-logo--mobile { display: block; }
  .nav__brand-logo--mobile ~ .nav__brand-logo,
  .nav__brand:has(.nav__brand-logo--mobile) .nav__brand-logo--light,
  .nav__brand:has(.nav__brand-logo--mobile) .nav__brand-logo--dark { display: none; }
  .mobile-menu__links ul { margin: 0; padding: 0; list-style: none; }
  .mobile-menu__links .sub-menu { padding-left: 18px; }
  .mobile-menu__links .sub-menu a { font-size: clamp(26px, 7vw, 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links .sub-menu { transition: none; }
}

/* Inline text links (Explore Your Health page). */
.toc-inline-link { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.toc-inline-link:hover, .toc-inline-link:focus-visible { text-decoration-thickness: 2px; }

/* ---------- Story pages: About + Explore Your Health ----------
   One continuous page instead of stacked, separately-coloured bands:
   a single background, shared heading scale, and cards/panels that sit
   on the same surface. */
.toc-story {
  --story-edge: var(--site-edge, clamp(20px, 3.5vw, 60px));
  --story-max: var(--site-max, 1320px);
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 85% 8%, color-mix(in srgb, var(--lime) 10%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 70%, rgba(42, 167, 176, .07), transparent 70%),
    var(--ink);
  color: var(--sky);
}
.toc-story__hero,
.toc-story__section { max-width: calc(var(--story-max) + var(--story-edge) * 2); margin: 0 auto; padding-inline: var(--story-edge); }
.toc-story__hero { padding-top: clamp(124px, 12vw, 180px); padding-bottom: clamp(48px, 6vw, 88px); }
.toc-story__section { padding-block: clamp(32px, 4vw, 56px); }
.toc-story__section:last-child { padding-bottom: clamp(72px, 8vw, 120px); }

.toc-story__title {
  margin: 22px 0 28px; font-family: 'Anton SC', 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(54px, 6.6vw, 108px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; color: var(--sky);
}
.toc-story__title em { font-style: normal; color: var(--lime); }
.toc-story__heading {
  margin: 14px 0 16px; font-family: 'Anton SC', 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(34px, 3.6vw, 56px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: var(--sky); text-wrap: balance;
}
.toc-story__lead { display: grid; gap: 16px; }
.toc-story__lead p { margin: 0; max-width: 62ch; color: var(--body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }

.toc-story__panel {
  display: flex; align-items: center; justify-content: space-between; gap: 24px clamp(24px, 4vw, 64px);
  padding: clamp(26px, 3.2vw, 48px); border: 1px solid var(--line); border-radius: 24px;
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--ink-2) 88%, transparent);
}
.toc-story__panel-text { min-width: 0; }
.toc-story__panel-text p { margin: 0; max-width: 62ch; color: var(--body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.toc-story__panel .btn { flex: none; }

.toc-story__note { margin: 22px 0 0; max-width: 110ch; color: var(--body); font-size: 13px; line-height: 1.7; }
.toc-story__note strong { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }

.toc-story__section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.toc-story__section-head .toc-story__heading { margin-bottom: 0; }
.toc-story__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.toc-story__card {
  display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--ink-2) 70%, transparent);
  transition: border-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.toc-story__card:hover { border-color: color-mix(in srgb, var(--lime) 55%, transparent); transform: translateY(-3px); }
.toc-story__card-num { font-family: 'Anton SC', 'Anton', sans-serif; font-size: 34px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--lime); }
.toc-story__card-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.toc-story__card p { margin: 0; color: var(--sky); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; }

/* About: text left, portrait right (portrait stays in view while the founder story is read). */
.about-story__hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "intro photo" "founder photo";
  column-gap: clamp(40px, 6vw, 110px); row-gap: clamp(40px, 5vw, 72px); align-items: start;
}
.about-story__intro { grid-area: intro; min-width: 0; }
.about-story__founder { grid-area: founder; min-width: 0; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.about-story__founder p { margin: 0 0 16px; max-width: 62ch; color: var(--body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; }
.about-story__founder p:last-child { margin-bottom: 0; }
.about-story__founder .about-story__founder-lead { color: var(--sky); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.about-story__portrait { grid-area: photo; position: sticky; top: 96px; margin: 0; align-self: start; }
.about-story__portrait picture, .about-story__portrait img { display: block; width: 100%; height: auto; }
.about-story__portrait picture { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.about-story__portrait img { aspect-ratio: 1100 / 1306; object-fit: cover; }
.about-story__portrait figcaption {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px; padding: 10px 20px; border-radius: 14px; white-space: nowrap;
  border: 1px solid rgba(237, 244, 239, .14); background: rgba(9, 13, 11, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #a9b6af;
}
.about-story__portrait figcaption span { font-family: 'Anton SC', 'Anton', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .02em; color: #edf4ef; }

/* Explore Your Health: intro and the care panel share one hero. */
.health-story__hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "intro care" "note note";
  column-gap: clamp(40px, 6vw, 100px); align-items: center;
}
.health-story__intro { grid-area: intro; min-width: 0; }
.health-story__care { grid-area: care; flex-direction: column; align-items: flex-start; }
.health-story__care .toc-story__heading { font-size: clamp(30px, 2.8vw, 44px); }
.health-story__care-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent);
}
.health-story__note { grid-area: note; max-width: none; margin-top: clamp(36px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); }
.health-story__jump { display: none; }

@media (max-width: 1100px) {
  .toc-story__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .about-story__hero { grid-template-columns: 1fr; grid-template-areas: "intro" "photo" "founder"; row-gap: 36px; }
  .about-story__portrait { position: relative; top: auto; width: min(100%, 440px); justify-self: center; }
  .health-story__hero { grid-template-columns: 1fr; grid-template-areas: "intro" "care" "note"; row-gap: 32px; }
  .health-story__jump { display: inline-flex; margin-top: 26px; }
  .health-story__note { margin-top: 0; }
}
@media (max-width: 640px) {
  .toc-story__hero { padding-top: 104px; }
  .toc-story__title { font-size: clamp(44px, 13vw, 64px); margin: 18px 0 22px; }
  .toc-story__cards { grid-template-columns: 1fr; }
  .toc-story__panel { flex-direction: column; align-items: stretch; border-radius: 18px; }
  .toc-story__panel .btn, .health-story__jump { width: 100%; justify-content: center; text-align: center; }
  .about-story__portrait figcaption span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-story__card { transition: none; }
  .toc-story__card:hover { transform: none; }
}

/* ==========================================================================
   Home hero: always dark, with the founder portrait.
   The section carries data-theme="dark" + .toc-force-dark so it uses the dark
   palette in both modes; the portrait's black background then blends in.
   Portrait source is 800×805 (cropped from the client's 1600×900 photo), so it is never shown much larger than that.
   ========================================================================== */
.opt-hero.toc-force-dark { background: #000; color-scheme: dark; }
/* Keep the headline beside the portrait, never across the face. */
@media (min-width: 1024px) {
  .opt-hero.toc-force-dark .opt-hero__content { max-width: min(58%, 820px); }
}
.opt-hero.toc-force-dark .opt-hero__image {
  inset: auto clamp(0px, 5vw, 96px) 0 auto;
  width: auto; height: min(84svh, 760px); aspect-ratio: 800 / 805;
  background-image: url('../assets/images/hero/mohammad-hajjawi-portrait.jpg?v=2');
  background-image: image-set(url('../assets/images/hero/mohammad-hajjawi-portrait.webp?v=2') type('image/webp'), url('../assets/images/hero/mohammad-hajjawi-portrait.jpg?v=2') type('image/jpeg'));
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  filter: none; opacity: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 84%, transparent 100%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 84%, transparent 100%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-composite: intersect;
}
/* Copy side stays readable; the portrait side stays clean. */
.opt-hero.toc-force-dark .opt-hero__shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .82) 34%, rgba(0, 0, 0, .25) 58%, transparent 70%),
    linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, transparent 34%);
}
/* Soft teal/gold glow behind the portrait, from the logo colours. */
.opt-hero.toc-force-dark::before {
  content: ""; position: absolute; z-index: 0; right: clamp(0px, 8vw, 160px); bottom: 8%;
  width: min(60vw, 720px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 167, 176, .16), rgba(232, 163, 59, .06) 55%, transparent 72%);
  pointer-events: none;
}
.opt-hero.toc-force-dark .opt-hero__content { z-index: 2; }

/* Small laptops and iPad landscape: smaller portrait so it clears the headline. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .opt-hero.toc-force-dark .opt-hero__image { height: min(70svh, 580px); right: 0; }
}

/* iPad portrait and large phones: portrait top-right, copy along the bottom. */
@media (min-width: 641px) and (max-width: 1023px) {
  .opt-hero.toc-force-dark .opt-hero__image { inset: 84px 0 auto auto; height: min(58svh, 600px); }
  .opt-hero.toc-force-dark .opt-hero__shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .95) 36%, rgba(0, 0, 0, .4) 58%, transparent 74%);
  }
}

/* Phones: portrait centred at the top, copy below it. */
@media (max-width: 640px) {
  .opt-hero.toc-force-dark .opt-hero__image {
    inset: 70px 0 auto 0; margin-inline: auto;
    width: min(100%, 460px); height: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 4%, #000 40%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 4%, #000 40%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .opt-hero.toc-force-dark .opt-hero__shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .96) 34%, rgba(0, 0, 0, .55) 48%, transparent 60%);
  }
  .opt-hero.toc-force-dark::before { right: 50%; transform: translateX(50%); top: 60px; bottom: auto; width: 110vw; }
}
/* Phones in landscape: behave like the tablet layout, smaller. */
@media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
  .opt-hero.toc-force-dark .opt-hero__image { inset: 64px 0 auto auto; margin: 0; width: auto; height: min(78svh, 340px); }
  .opt-hero.toc-force-dark .opt-hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .85) 45%, transparent 75%); }
  .opt-hero.toc-force-dark .opt-hero__content { max-width: 62%; padding-top: 86px; padding-bottom: 28px; }
  .opt-hero.toc-force-dark .opt-kicker { margin-bottom: 14px; }
  .opt-hero.toc-force-dark h1 { font-size: min(10vw, 19svh) !important; }
  .opt-hero.toc-force-dark .opt-hero__content > p { margin: 14px 0 16px; font-size: 14px; }
  .opt-hero.toc-force-dark .opt-hero__rail { display: none; }
}

/* ---------- Podcast card: "Coming soon" artwork ---------- */
.podcast-card__art.podcast-card__art--soon {
  display: grid; place-items: center; min-height: clamp(320px, 38vw, 520px);
  background: #050706; filter: none; isolation: isolate;
}
.podcast-card__art--soon::before {
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(5, 7, 6, .35) 0%, rgba(5, 7, 6, .82) 72%), linear-gradient(135deg, rgba(232, 163, 59, .16), transparent 55%) !important;
}
.podcast-soon__bg {
  position: absolute; inset: -24px; z-index: 0;
  background: url('../assets/images/optimize-podcast-hero.png') center 30% / cover no-repeat;
  filter: blur(9px) brightness(.5) saturate(.75);
  transform: scale(1.05);
}
.podcast-soon {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 14px; padding: 32px 24px; text-align: center;
}
.podcast-soon__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: #e8a33b; border: 1px solid rgba(232, 163, 59, .55); background: rgba(232, 163, 59, .08);
  box-shadow: 0 0 0 8px rgba(232, 163, 59, .06);
  animation: podcast-soon-pulse 2.6s ease-in-out infinite;
}
.podcast-soon__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(237, 244, 239, .78); }
.podcast-soon__title {
  font-family: 'Anton SC', 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(54px, 7.4vw, 112px); line-height: .9; letter-spacing: .01em; color: #e8a33b;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .45);
}
.podcast-card__art--soon .podcast-card__wave {
  position: static; inset: auto; width: auto; height: 44px; margin-top: 6px; justify-content: center;
}
.podcast-card__art--soon .podcast-card__wave i { background: rgba(237, 244, 239, .85); }
@keyframes podcast-soon-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(232, 163, 59, .06); }
  50% { box-shadow: 0 0 0 14px rgba(232, 163, 59, .02); }
}
@media (prefers-reduced-motion: reduce) {
  .podcast-soon__icon { animation: none; }
}

/* --------------------------------------------------------------------------
   Gallery: the original staggered (masonry) look, but in numbered order.
   Without JavaScript the wall uses the original CSS columns. js/chrome.js adds
   .gallery-wall--masonry: a grid of 4px rows where each photo spans as many
   rows as its height. Photos keep their DOM order (01, 02, 03 … left to right)
   and each one drops into the shortest column, like the original wall.
   -------------------------------------------------------------------------- */
.gallery-wall.gallery-wall--masonry {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 4px;
  grid-auto-flow: row dense;
  column-gap: clamp(24px, 3.4vw, 54px) !important;
  row-gap: 0 !important;
  columns: auto !important;
  align-items: start;
}
.gallery-wall--masonry .gallery-item { margin: 0 !important; align-self: start; }
@media (max-width: 1023px) { .gallery-wall.gallery-wall--masonry { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .gallery-wall.gallery-wall--masonry { grid-template-columns: 1fr !important; column-gap: 18px !important; } }

/* Home hero headline: a little breathing room between letters and lines
   (the original -.045em tracking made the letters touch). */
.opt-hero h1 { letter-spacing: 0 !important; gap: .07em; }
.opt-hero h1 .hero-title__line { line-height: .9 !important; }

/* Home hero portrait, laptops and desktops: hang it from the top (just under the
   header) instead of the bottom of the section. With the large headline the
   section is taller than the screen, so a bottom-anchored portrait slid down. */
@media (min-width: 1024px) {
  .opt-hero.toc-force-dark .opt-hero__image { top: clamp(104px, 13svh, 140px); bottom: auto; }
}
@media (min-width: 1280px) {
  .opt-hero.toc-force-dark .opt-hero__image { height: min(calc(100svh - 160px), 760px); }
}

/* Home hero on phones and tablets held upright: portrait at the top, the text
   directly under it (normal flow). Previously the text was pinned to the bottom
   of a full-screen section, which left a large empty gap on tall phones. */
/* Also applies to tall screens of any width, e.g. a phone in "Desktop site" mode (about 980–1100px wide but much taller). */
@media (max-width: 1023px) and (orientation: portrait), (max-aspect-ratio: 4/5) {
  .opt-hero.toc-force-dark {
    flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important;
    min-height: 0 !important; height: auto !important;
  }
  .opt-hero.toc-force-dark .opt-hero__image {
    position: relative !important; inset: auto !important; flex: none; display: block;
    width: min(100%, 640px) !important; height: auto !important; aspect-ratio: 800 / 805;
    margin: 76px auto 0 !important;
  }
  .opt-hero.toc-force-dark .opt-hero__content {
    width: 100% !important; max-width: none !important;
    margin-top: calc(-1 * min(16vw, 110px)) !important; padding-top: 0 !important;
  }
  .opt-hero.toc-force-dark::before { top: 60px; bottom: auto; right: 50%; transform: translateX(50%); width: 110vw; }
}