/* Sygma Media LLC — global typography & aesthetic brand layer */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --pr-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --pr-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --ivory: #f7f3eb;
  --ivory-warm: #f3ede2;
  --ivory-deep: #ebe4d6;
  --ivory-mid: #e2d9c8;
  --charcoal: #0a0b0d;
  --charcoal-mid: #16181c;
  /* Darker body/muted text on light sections (WCAG-friendly) */
  --charcoal-soft: #3b3d40;
  --stone: #5a5854;
  --stone-light: #9a9690;
  --sage: #3f5348;
  --sage-light: #5f7568;
  --sage-pale: #c8d4bc;
  --blush: #c9a87c;
  --blush-pale: #f5ebe0;
  --deep-forest: #1a211c;
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
#root,
.hm,
button,
input,
textarea,
select,
.hd,
.ft,
.hm-w,
.hd-k,
.ft-blurb,
.hm-lede,
.hm-op-body,
.faq-answer,
p,
li,
label,
span,
a,
dt,
dd,
summary {
  font-family: var(--font-sans) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ap-h1,
.ap-l1,
.ap-l2,
.hm-h2,
.pw-h,
.rv-h2,
.rv-h,
.ft-h,
.hd-burger-t,
[class*="hero"] h1,
[class*="hero"] h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

em,
.ap-l2 em,
.pw-h em,
.hm-h2 em,
.hm-cur-c .hm-h2 em,
i.italic {
  font-family: "Cormorant Garamond", var(--font-display) !important;
  font-style: italic;
  color: #7a6245;
}

/* Stock theme: transparent/minimal at top; solid bar after scroll (`is-sm`) */
.hd:not(.is-sm):not(.is-pan):not(.is-mob) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body:has([data-hero="dark"]) .hd:not(.is-sm):not(.is-pan):not(.is-mob) {
  background: linear-gradient(180deg, rgba(18, 20, 16, 0.5), transparent) !important;
}

.hd.is-sm,
.hd.is-pan,
.hd.is-mob {
  background: rgba(247, 243, 235, 0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(10, 11, 13, 0.06) !important;
}

/*
  Mega panels must never sit in normal page flow (broken mobile layout if main CSS is slow).
  Mobile: panels off; use burger + .hd-mob drawer only.
*/
.hd-pan,
.hd-scrim {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 110 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  clip-path: inset(0 0 100% 0) !important;
}

.hd-pan.is-on {
  pointer-events: auto !important;
  visibility: visible !important;
  clip-path: inset(0 0 -120px 0) !important;
}

.hd-scrim.is-on {
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 1279.98px) {
  .hd-l .hd-k,
  .hd-r .hd-k,
  .hd-cta {
    display: none !important;
  }

  .hd-burger {
    display: block !important;
  }

  .hd-pan,
  .hd-scrim {
    display: none !important;
    visibility: hidden !important;
    clip-path: inset(0 0 100% 0) !important;
  }

  .hd-mob {
    display: block !important;
  }
}

.hd-burger {
  cursor: pointer;
  z-index: 130;
}

/* Avoid scroll lock stuck after mobile menu closes (React + fallback scripts) */
body:not(:has(.hd-mob.is-on)) {
  overflow-y: auto !important;
}

.hd-mob:not(.is-on) {
  pointer-events: none !important;
}

.hd-mob.is-on {
  pointer-events: auto !important;
}

/* Desktop mega menu (≥1280px): hover panels like aestheticlaunchlab.com */
@media (min-width: 1280px) {
  .hd-l .hd-k,
  .hd-r .hd-k {
    display: inline-flex !important;
  }

  .hd-burger {
    display: none !important;
  }

  .hd-pan,
  .hd-scrim {
    display: block !important;
  }

  .hd-mob {
    display: none !important;
  }
}

/* Proof-of-work: keep active case visuals visible if scroll-sync vars stall */
.pw-case.is-on .pw-scn {
  --a: 1 !important;
  --b: 1 !important;
  --c: 1 !important;
  --d: 1 !important;
  --o: 1 !important;
  opacity: 1 !important;
}

.pw-case.is-on .pw-ph img,
.pw-case.is-on .pw-dk img,
.pw-case.is-on .pw-mb img {
  opacity: 1 !important;
}

/* Proof of work (desktop): stock narrow left rail + collapsed rows; keep title links clickable */
@media (min-width: 1001px) and (min-height: 601px) {
  .pw--stage .pw-rail {
    width: 33vw;
    max-width: 560px;
  }

  .pw--stage .pw-more {
    grid-template-rows: 0fr;
  }

  .pw--stage .pw-case.is-on .pw-more {
    grid-template-rows: 1fr;
  }

  .pw--stage .pw-case h3 a {
    pointer-events: auto;
  }
}

.hd-cta,
.btn-primary,
.sticky-cta__primary {
  background: linear-gradient(135deg, #0a0b0d 0%, #243028 100%) !important;
  border: 1px solid rgba(201, 168, 124, 0.4) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.btn-outline,
.hm-ul,
.hm-link {
  font-family: var(--font-sans) !important;
  color: var(--sage) !important;
}

.pw--stage,
.pw-pin {
  background: linear-gradient(165deg, #141a16 0%, #2d3b32 50%, #1c2620 100%) !important;
}

/* Services 01–04: sticky panel crossfade (desktop) */
.hm-svc-media figure:not(.is-on) {
  opacity: 0 !important;
  pointer-events: none;
}

.hm-svc-media:not(:has(figure.is-on)) figure:first-child {
  opacity: 1 !important;
}

.hm-svc-media figure.is-on {
  opacity: 1 !important;
  z-index: 2;
}

.hm-svc-mimg {
  min-height: 12rem;
  background: var(--ivory-deep);
}

.hm-svc-mimg img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 12rem;
  object-fit: cover;
}

/* Mobile list images + desktop sticky panel when lazy load stalls */
.hm-svc-mimg img,
.hm-svc-media figure.is-on img {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 1000px) {
  .hm-svc-mimg {
    display: block !important;
  }
}

/*
  Homepage pinned scroll (hero + clinics): stock theme uses ~265vh hero and ~97.5vh × N
  clinics — feels like many wheel ticks before the rest of the page moves. Shorter
  tracks keep the animation but release scroll sooner.
*/
@media (min-width: 1001px) and (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  /* Match stock hero pin depth so --p / intro plate / nav reveal stay in sync */
  .ap {
    height: 265vh !important;
  }

  .pw--stage {
    height: calc(var(--pw-n, 7) * 34vh + 12vh) !important;
  }

  .ap-plate {
    --q: clamp(0, calc((var(--p) - 0.5) * 3.4), 1) !important;
  }
}

.hm-dark,
.hm-sec.hm-dark {
  background: #0f1210 !important;
}

.hm-eb,
.pw-eyebrow,
.hd-cap,
.ap-eb {
  font-family: var(--font-sans) !important;
  color: #a88858 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 600;
}

.hm-sec:not(.hm-dark) {
  background: var(--ivory) !important;
}

/* Inner pages (about, contact, etc.) */
.container {
  font-family: var(--font-sans) !important;
}

/* --- Readability: contrast on dark sections (fixes inline var(--sage) on forest bg) --- */
.hm-dark,
.hm-sec.hm-dark,
.pw--stage,
.pw-pin,
.cs-showcase-section.cs-dark,
section[style*="deep-forest"],
section[style*="--charcoal)"] {
  --sage: #dce8d8 !important;
  --sage-light: #e8f0e6 !important;
  --stone-light: #ddd9d2 !important;
  --charcoal-soft: #e6e3dd !important;
}

.hm-dark .hm-lede,
.hm-dark .hm-op-body p,
.hm-dark p,
.pw-lede,
.cs-dark .cs-note,
.cs-dark .cs-chapter p {
  color: #ebe7e0 !important;
  font-weight: 400;
}

.hm-dark .hm-h2,
.cs-dark .cs-showcase-title,
.display-heading {
  color: var(--charcoal);
}

.hm-dark .display-heading,
section[style*="deep-forest"] .display-heading,
section[style*="deep-forest"] h2 {
  color: var(--ivory, #faf8f4) !important;
}

/* Comparison tables on forest green (service pages) */
section[style*="deep-forest"] table {
  font-size: 0.94rem !important;
}

section[style*="deep-forest"] table th,
section[style*="deep-forest"] table td {
  line-height: 1.55 !important;
}

section[style*="deep-forest"] table thead th:nth-child(3),
section[style*="deep-forest"] table tbody td:nth-child(3) {
  color: #f5f2ec !important;
  font-weight: 500 !important;
}

section[style*="deep-forest"] table tbody td:nth-child(2) {
  color: #d5d1ca !important;
}

/* Eyebrows & small caps — slightly larger, heavier */
.section-eyebrow,
.hm-eb,
.ap-eb,
.pw-eyebrow,
.cs-eyebrow,
.hm-nums dt {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

.section-eyebrow {
  color: var(--sage) !important;
}

.hm-dark .section-eyebrow,
section[style*="deep-forest"] .section-eyebrow {
  color: #d5cbb8 !important;
}

/* Body copy minimum legibility */
.hm-lede,
.rv-note,
.ap-lede,
p,
li,
.hm-op-body p,
.cs-chapter p,
.sv-ans-a,
.pr-lede {
  font-size: clamp(0.94rem, 1.05vw, 1.05rem) !important;
  line-height: 1.72 !important;
}

.rv-note,
.hm-lede,
.cs-note {
  color: var(--charcoal-soft) !important;
}

/* Muted labels on light backgrounds */
.hm-fq summary,
.hm-pr p,
.pr-table td {
  color: #454540 !important;
}

em,
.ap-l2 em,
.pw-h em,
.hm-h2 em,
.hm-cur-c .hm-h2 em {
  color: #5c4a36 !important;
}

.hm-dark em,
section[style*="deep-forest"] em {
  color: #d5cbb8 !important;
}

/* --- Header: balanced nav + clearance above hero --- */
.hd-in {
  gap: clamp(0.75rem, 1.8vw, 1.5rem) !important;
  row-gap: 0.35rem !important;
}

.hd-l,
.hd-r {
  flex-wrap: wrap !important;
  align-content: center !important;
  gap: 0.15rem 1.1rem !important;
}

.hd-k {
  font-size: clamp(0.52rem, 0.55vw, 0.6rem) !important;
  letter-spacing: 0.14em !important;
  padding: 0.45rem 0 !important;
}

.hd-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.hd-logo img,
.hd-logo svg {
  display: block;
  height: clamp(2rem, 4vw, 3rem);
  width: auto;
  max-width: min(12rem, 38vw);
}

/* --- Home hero: stop ticker overlapping the headline --- */
.ap-disc {
  display: none !important;
}

.ap-eb {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  max-width: min(36rem, 92vw) !important;
  white-space: normal !important;
  line-height: 1.55 !important;
  letter-spacing: 0.14em !important;
  font-size: clamp(0.52rem, 0.58vw, 0.62rem) !important;
  margin-bottom: 1.25rem !important;
  opacity: 1 !important;
}

@media (min-width: 1001px) and (min-height: 601px) and (prefers-reduced-motion: no-preference) {
  .ap-pin {
    --top: calc(var(--hd-h) + 4.25rem) !important;
    --y0: calc(var(--top) + 1.5rem) !important;
  }

  .ap-eb {
    position: absolute !important;
    left: var(--g) !important;
    right: var(--g) !important;
    top: calc(var(--hd-h) + 1.1rem) !important;
    max-width: min(28rem, 55vw) !important;
    z-index: 2;
  }

  .ap-l1 {
    z-index: 1;
  }

  .ap-foot {
    z-index: 2;
  }

  .ap-trust {
    justify-content: flex-start !important;
    gap: 0.35rem 0.9rem !important;
    font-size: clamp(0.5rem, 0.52vw, 0.58rem) !important;
    letter-spacing: 0.16em !important;
    color: var(--charcoal-soft) !important;
    max-width: 100%;
  }
}

/* Stacked hero (no scroll-pin): clear vertical rhythm */
.ap-pin:not([style*="--p"]) {
  padding-top: calc(var(--hd-h) + 2rem) !important;
}

.ap-h1 .ap-l1,
.ap-h1 .ap-l2 {
  font-family: var(--font-display) !important;
}

/* --- Site-wide type: inner pages (pricing, services, FAQ, blog, etc.) --- */
[class^="pr-"],
[class*=" pr-"],
.pr-h1,
.pr-answer,
.pr-ratecard,
.pr-lede,
.pr-jump,
.pr-table,
.pr-compare,
.sv-ans,
.sv-ans-q,
.sv-ans-a,
.faq-,
.cs-chapter,
.cs-showcase,
.cs-note,
.cs-eyebrow,
.display-heading,
.section-eyebrow,
.ap-page,
.rv-eyebrow,
.rv-h2,
.pw-h,
.pw-lede,
.hd-t,
.hd-pl,
.hd-cap,
.hd-mob,
.ft-blurb,
.ft-h {
  font-family: var(--font-sans) !important;
}

.pr-h1,
.pr-h1 span,
.display-heading,
.display-heading-light,
.sv-ans-q,
.cs-showcase-title,
.cs-chapter h2,
.rv-h2,
.pw-h,
.hd-t,
.ft-h,
.ap-h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}

.pr-answer,
.pr-ratecard,
.pr-ratecard-note,
.pr-lede,
.pr-table td,
.pr-table th,
.faq-answer,
.cs-chapter p {
  font-size: clamp(0.95rem, 1.04vw, 1.06rem) !important;
  line-height: 1.72 !important;
  color: var(--charcoal-soft) !important;
}

.pr-h1 {
  letter-spacing: -0.025em !important;
  line-height: 0.98 !important;
}

.pr-ratecard b,
.pr-ratecard i,
.pr-ratecard li {
  font-family: var(--font-sans) !important;
}

.pr-ratecard b {
  color: var(--charcoal) !important;
  font-weight: 600 !important;
}

/* --- Footer: Sygma fonts + readable links on forest background --- */
.ft,
.ft-in,
.ft-cols,
.ft-cols a,
.ft-blurb,
.ft-nap,
.ft-nap a,
.ft-bar,
.ft-bar a,
.ft-more,
.ft-social a,
.ft-legal a {
  font-family: var(--font-sans) !important;
}

.ft-h {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

.ft-blurb,
.ft-cols a,
.ft-nap {
  font-size: 0.92rem !important;
  line-height: 1.68 !important;
}

.ft-cols a,
.ft-more {
  color: rgba(247, 243, 235, 0.9) !important;
}

.ft-cols a:hover,
.ft-more:hover {
  color: var(--ivory) !important;
}

.ft-bar p,
.ft-legal a {
  font-size: 0.82rem !important;
  color: rgba(247, 243, 235, 0.75) !important;
}

/* Homepage: Digital Assets marketplace block (product removed for Sygma pitch) */
section#assets.hm-ads-s,
.hm-sec.hm-ads-s {
  display: none !important;
}

/* Slim footer: tighter link stacks, clearer columns */
.ft-cols {
  gap: clamp(1rem, 2vw, 1.75rem) !important;
}

.ft-cols a {
  padding: 0.18rem 0 !important;
}

.ft-cols .ft-more {
  margin-top: 0.45rem !important;
}

/* Override legacy DM Sans / Bodoni hooks from bundled CSS */
[style*="DM Sans"],
[style*="Bodoni"],
[style*="dm-sans"] {
  font-family: var(--font-sans) !important;
}

/* --- About: three team placeholder cards --- */
.sygma-team-grid {
  width: 100%;
}

.sygma-team-card {
  display: flex;
  flex-direction: column;
  min-height: 14rem;
  padding: 1.75rem 1.6rem 1.5rem;
  background: linear-gradient(165deg, #ffffff 0%, #f6f1e8 100%);
  border: 1px solid rgba(63, 83, 72, 0.14);
  box-shadow: 0 14px 40px rgba(26, 33, 28, 0.06);
}

.sygma-team-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ivory);
  background: linear-gradient(145deg, var(--sage) 0%, #2a3830 100%);
}

.sygma-team-card__name {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  line-height: 1.15;
  color: var(--charcoal) !important;
  margin: 0 0 0.35rem !important;
}

.sygma-team-card__role {
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage) !important;
  margin: 0 0 0.85rem !important;
}

.sygma-team-card__blurb {
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: var(--charcoal-soft) !important;
  margin: 0 !important;
}