/* ============================================================================
   Mangra Studios — mangrastudios.com
   Tokens transcribed from the Figma "Mangra Web token set"
   (file me2nLhsxHVuDmaq0EEBwQy, page "Home Page - production").

   Figma letterSpacing values on this file are PERCENTAGES, not pixels —
   e.g. UI/Eyebrow ls 22 on 11px renders as 2.42px. Converted below in em,
   which keeps the ratio correct at any size.
   ========================================================================= */

:root {
  /* brand */
  --brand-teal:      #1dc4cc;
  --brand-gold:      #ffca07;
  --brand-yellow:    #fbdb14;
  --brand-pink:      #f178aa;
  --brand-navy:      #163853;

  /* ink on dark */
  --text-primary:    #ffffff;
  --text-secondary:  #c3cbd3;
  --text-muted:      #8d99a6;
  --text-accent:     #1dc4cc;

  /* ink on light */
  --text-on-light:     #181f25;
  --text-on-light-mut: #5a6672;
  --text-muted-light:  #646f7b;

  /* accents that hold contrast on light grounds */
  --accent-teal-ink: #127a7f;
  --accent-pink-ink: #a75376;
  --accent-gold-ink: #876b04;
  --accent-red-ink:  #b42318;

  /* surfaces */
  --surface-deep:      #10151a;
  --surface-base:      #181f25;
  --surface-white:     #ffffff;
  --surface-cream:     #f4f1ee;
  --surface-tint-teal: #e4f8f9;

  /* borders */
  --border-hairline:     #2c363f;
  --border-strong:       #3a4650;
  --border-light:        #e4e0da;
  --border-light-strong: #cfcac2;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* layout — design canvas is 1728 with a 120px inset */
  --gutter: clamp(20px, 6.94vw, 120px);
  --measure: 1488px;

  --shadow-card: 0 10px 30px -4px rgba(24, 31, 37, 0.18);
  --shadow-drawer: -28px 0 36px rgba(0, 0, 0, 0.38);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font);
  background: var(--surface-white);
  color: var(--text-on-light);
  font-size: 16px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* padding:0 matters — the UA default of 1px 6px shrinks a button's CONTENT box,
   and a child img with max-width:100% then clamps to that narrower box while
   its height stays put. That is how an icon ends up squashed inside a button
   whose own dimensions look correct. */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--brand-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brand-teal); color: var(--text-on-light);
  padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ primitives */
.shell {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand-teal); color: var(--text-on-light); }
.btn--primary:hover { background: #17b0b7; }

.btn--outline-light { border: 1px solid var(--text-on-light); color: var(--text-on-light); }
.btn--outline-light:hover { background: var(--text-on-light); color: var(--surface-white); }

.btn--ink { background: var(--surface-base); color: var(--text-primary); }
.btn--ink:hover { background: #10151a; }

.btn--reel {
  gap: 14px;
  padding: 5px 26px 5px 9px;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  text-transform: none;
  font-weight: 600;
  font-size: 14.3px;
  letter-spacing: 0.02em;
}
.btn--reel:hover { border-color: var(--brand-teal); }
.btn--reel img { width: 46px; height: 46px; flex: none; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  padding-block: 40px;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__brand img { width: 168px; height: auto; }
.site-header__actions { display: flex; align-items: center; gap: 22px; }
.site-header .btn { min-height: 50px; }

.nav-toggle {
  /* flex: none — as a flex child this button will otherwise shrink below 42px
     when the header runs short of room, which squashes the icon inside it. */
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 8px;
  transition: opacity 0.15s;
}
.nav-toggle:hover { opacity: 0.7; }
.nav-toggle img { width: 42px; height: 42px; object-fit: contain; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: var(--surface-base);
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(1020px, 100svh);
  padding-block: clamp(140px, 16vw, 265px) 0;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Sits above the photograph, below the copy. screen blending means the grid
   only ever adds light, so it lifts the dark plate instead of muddying it. */
.hero__pixels {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__pixels.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__pixels { display: none; } }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__eyebrow {
  color: var(--text-accent);
  font-size: clamp(12px, 0.93vw, 16px);
  letter-spacing: 0.22em;
  margin-bottom: 26px;
}
.hero__title {
  font-weight: 900;
  font-size: clamp(44px, 6.94vw, 120px);
  line-height: 0.983;
  letter-spacing: -0.029em;
  text-wrap: balance;
  margin-bottom: 26px;
}
.hero__lede {
  max-width: 660px;
  font-size: clamp(16px, 1.15vw, 19.8px);
  line-height: 1.667;
  color: var(--text-secondary);
  margin-bottom: 40px;
}
.hero__lede strong { font-weight: 700; color: var(--text-primary); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* credential strip */
.creds {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(40px, 4vw, 66px);
}
.creds__item { padding-inline: 30px; }
.creds__item:first-child { padding-left: 0; }
.creds__item + .creds__item { border-left: 1px solid var(--border-hairline); }
.creds__n {
  display: block;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.006em;
  color: var(--brand-gold);
  margin-bottom: 6px;
}
.creds__l {
  font-weight: 600;
  font-size: 13.2px;
  line-height: 17.6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------ trusted by */
.trusted { background: var(--surface-white); padding-block: 40px; }
.trusted__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.trusted__label {
  font-weight: 700;
  font-size: 12.1px;
  line-height: 17.6px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  white-space: nowrap;
}
.trusted__logos {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 56px);
  flex-wrap: wrap;
}
.trusted__logos img { opacity: 0.82; object-fit: contain; }

/* ----------------------------------------------------------------- about */
.about {
  position: relative;
  background: var(--surface-white);
  padding-block: clamp(64px, 9vw, 150px);
  overflow: hidden;
}
.about__glow {
  position: absolute;
  top: 0; right: -12%;
  width: min(743px, 70vw);
  pointer-events: none;
  z-index: 0;
}
.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 730fr) minmax(0, 650fr);
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
}
.about__media { position: relative; }
.about__media img { width: 100%; }
.about__caption {
  position: absolute;
  left: clamp(12px, 4%, 110px);
  bottom: clamp(12px, 6%, 46px);
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 15px 20px 15px 16px;
  font-size: 14.3px;
  line-height: 22px;
  font-weight: 500;
}
.about__caption::before {
  content: '';
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-teal);
  flex: none;
}
.about__caption b { color: var(--accent-teal-ink); font-weight: 600; }

.about__eyebrow { color: var(--accent-teal-ink); font-size: 17.6px; letter-spacing: 0.22em; }
.about__title {
  font-weight: 700;
  font-size: clamp(34px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  margin: 22px 0 32px;
  text-wrap: balance;
}
.about__body {
  font-size: clamp(16px, 1.15vw, 19.8px);
  line-height: 1.667;
  color: var(--text-on-light-mut);
  display: flex;
  flex-direction: column;
  gap: 33px;
  margin-bottom: 40px;
}

/* ------------------------------------------------------------ what's new */
/* Redesigned 2026-08-24. The tabs and the panel below them now form one
   continuous white surface on the cream section: inactive tabs are white,
   the ACTIVE tab is transparent so the cream shows through and it reads as
   lifted out of the sheet, marked with a 3px teal underline. */

.whatsnew { background: var(--surface-cream); padding-block: clamp(64px, 8vw, 104px); }
.whatsnew__eyebrow { color: var(--accent-teal-ink); margin-bottom: 16px; }
.whatsnew__title {
  font-weight: 700;
  font-size: clamp(32px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.whatsnew__sub { font-size: 18px; line-height: 27px; color: var(--text-on-light-mut); max-width: 820px; }

.tabs { display: flex; align-items: stretch; margin-top: 48px; }
.tab {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  padding: 28px;
  background: var(--surface-white);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.15s, border-color 0.15s;
}
/* The 1px dividers between tabs, as border-left rather than extra elements. */
.tab + .tab { border-left: 1px solid var(--border-light); }
.tab__label {
  display: block;
  font-weight: 600;
  font-size: clamp(17px, 1.27vw, 22px);
  line-height: 30px;
  letter-spacing: -0.006em;
  color: var(--text-on-light-mut);
}
.tab__sub { display: block; margin-top: 6px; font-size: 14px; line-height: 23px; color: var(--text-muted-light); }

.tab[aria-selected='true'] {
  background: transparent;
  border-bottom: 3px solid var(--brand-teal);
}
.tab[aria-selected='true'] .tab__label { color: var(--text-on-light); }
.tab[aria-selected='true'] .tab__sub { color: var(--accent-teal-ink); }
.tab:hover:not([aria-selected='true']) .tab__label { color: var(--text-on-light); }

/* Panels are white cards flush under the tabs — no gap, no padding of their
   own; the inner blocks carry the inset so media can bleed to the edges. */
.panel { background: var(--surface-white); }
.panel[hidden] { display: none; }

/* panel — In Focus */
.infocus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 64px;
  align-items: start;
}
.infocus__detail { padding: 56px; }
.infocus__kicker { color: var(--accent-teal-ink); margin-bottom: 16px; }
.infocus__title {
  font-weight: 700;
  font-size: clamp(30px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

/* State pill beside a heading. Deliberately quiet: the title runs up to 60px,
   so the pill holds at 12px with tracking and a neutral ground rather than
   competing with it. Nudged up so it centres on the cap height, not the
   baseline, and it sits inside the h3 so it is announced with the title. */
.pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
  transform: translateY(-0.16em);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(180, 35, 24, 0.1);
  color: var(--accent-red-ink);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.infocus__lede { font-size: 18px; line-height: 30px; color: var(--text-on-light-mut); margin-bottom: 32px; }

.inclusions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.inclusion { padding-block: 20px; border-top: 1px solid var(--border-light); }
.inclusion h4 { font-weight: 600; font-size: 22px; line-height: 30px; letter-spacing: -0.006em; }
.inclusion p { margin-top: 6px; font-size: 14px; line-height: 23px; color: var(--text-on-light-mut); }

.offer { background: var(--surface-tint-teal); border-radius: 2px; overflow: hidden; }
.offer__media img { width: 100%; aspect-ratio: 480 / 402; object-fit: cover; }
.offer__body { padding: 60px 40px 44px; }
.offer__price {
  font-weight: 900;
  font-size: clamp(40px, 3.24vw, 56px);
  line-height: 1.071;
  letter-spacing: -0.03em;
  color: var(--accent-teal-ink);
}
.offer__priceSub { margin-top: 8px; font-size: 14px; line-height: 23px; color: var(--text-on-light); }
/* Rules top AND bottom — the bonus is banded off from the price above it and
   the availability below it. */
.offer__bonus {
  margin-top: 22px;
  padding-block: 18px;
  border-top: 1px solid var(--border-light-strong);
  border-bottom: 1px solid var(--border-light-strong);
}
.offer__bonusLabel { color: var(--accent-teal-ink); margin-bottom: 8px; }
.offer__bonusBody { font-size: 14px; line-height: 23px; color: var(--text-on-light); }
.offer__dates { margin-top: 22px; font-size: 14px; line-height: 23px; color: var(--text-on-light-mut); }
.offer .btn { width: 100%; margin-top: 26px; }

/* panel — Content House */
.season { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 64px; align-items: center; }
.season__media img { width: 100%; aspect-ratio: 760 / 520; object-fit: cover; border: 1px solid var(--border-light); border-radius: 2px; }
.season__detail { padding-right: 56px; }
.season__kicker { color: var(--accent-pink-ink); margin-bottom: 16px; }
.season__title { font-weight: 700; font-size: clamp(32px, 3.47vw, 60px); line-height: 1.067; letter-spacing: -0.02em; }
.season__sub { margin-top: 10px; font-weight: 600; font-size: 22px; line-height: 30px; letter-spacing: -0.006em; color: var(--accent-pink-ink); }
.season__body { margin-top: 20px; font-size: 18px; line-height: 30px; color: var(--text-on-light-mut); }
.season__stats { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 32px; }
.season__statN {
  display: block;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.012em;
  color: var(--accent-pink-ink);
}
.season__stat p { margin-top: 6px; font-size: 14px; line-height: 23px; color: var(--text-on-light-mut); }
.season__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* panel — News */
.news { display: grid; grid-template-columns: 880px minmax(0, 1fr); gap: 48px; align-items: center; }
.news__media img { width: 100%; aspect-ratio: 880 / 520; object-fit: cover; object-position: top; border: 1px solid var(--border-light); border-radius: 2px; }
.news__copy { padding-right: 56px; }
.news__tag { color: var(--accent-gold-ink); margin-bottom: 16px; }
.news__title { font-weight: 600; font-size: clamp(24px, 1.85vw, 32px); line-height: 1.25; letter-spacing: -0.012em; }
.news__title a:hover { color: var(--accent-teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.news__excerpt { margin-top: 16px; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }
.news__meta { margin-top: 22px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-light); }
.news__cta { margin-top: 28px; }
.news__all { display: flex; justify-content: center; margin-top: 44px; }

/* carousel */
.carousel { padding-bottom: 56px; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  margin: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }
.carousel__slide { flex: 0 0 100%; min-width: 0; }

.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--border-light-strong);
  transition: background-color 0.2s, width 0.2s, height 0.2s;
}
.carousel__dot:hover { background: var(--accent-teal-ink); }
.carousel__dot[aria-current='true'] {
  width: 12px; height: 12px;
  background: var(--brand-teal);
}
.carousel__dot:focus-visible { outline-offset: 4px; }

/* --------------------------------------------------- newsletter + find us */
/* The teal card straddles the cream section and the dark band that runs into
   the footer. Without the bottom padding the card lands flush on the seam
   between them and reads as resting on a rule instead of floating over it. */
.outro { position: relative; background: var(--surface-cream); padding-bottom: clamp(48px, 5vw, 88px); }
.outro::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 344px;
  /* surface-BASE, not surface-deep — the band is a step lighter than the footer
     it runs into, and the 2px hairline is what makes that step read as
     deliberate rather than as a rendering seam. Both straight from the Figma
     "Dark BG" node. */
  background: var(--surface-base);
  border-bottom: 2px solid var(--border-hairline);
  z-index: 0;
}
.outro__card {
  position: relative;
  z-index: 1;
  background: var(--brand-teal);
  border-radius: 34px;
  padding: clamp(36px, 5vw, 96px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 89px);
  color: var(--text-on-light);
}
.outro__h { font-weight: 600; font-size: clamp(26px, 1.85vw, 32px); line-height: 40px; letter-spacing: -0.0375em; }
.outro__sub { margin-top: 4px; font-weight: 600; font-size: clamp(17px, 1.15vw, 19.8px); line-height: 28px; letter-spacing: 0.014em; }
.outro__body { margin-top: 16px; font-size: clamp(16px, 1.15vw, 19.8px); line-height: 33px; max-width: 46ch; }

.field { margin-top: 24px; }
/* Sentence case at 14.3px — these are field labels, not eyebrows. */
.field label { display: block; font-weight: 600; font-size: 14.3px; line-height: 19.8px; letter-spacing: 0.02em; margin-bottom: 10px; }
.field input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-white);
  font: inherit;
  font-size: clamp(16px, 1.02vw, 17.6px);
  color: var(--text-on-light);
}
.field input::placeholder { color: #9aa6b1; }
.field input:focus-visible { outline: 3px solid var(--surface-base); outline-offset: 2px; }
.outro form .btn { margin-top: 26px; }

.form-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 23px;
  font-weight: 600;
  color: var(--surface-base);
}
.form-note[hidden] { display: none; }

/* Three addresses, label over value. Same relationship as the hero credential
   strip, so the card reads as one system. The label takes the near-black ink
   rather than a muted grey: muted greys are tuned for white surfaces and lose
   their contrast on the teal card. */
/* Find Us map.
   A pixel map, not a tile map: the same square-grid motif as the hero canvas
   and the nav mark, so the card stays inside the brand's own language and the
   page loads nothing from a third party. Geography is coarse on purpose — one
   square is 1.25deg of longitude — but every square sits at the longitude it
   belongs to, so the three pins land where the cities actually are.
   The addresses below are the content; this is the enhancement. */
.findmap {
  position: relative;
  margin: 24px 0 0;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(24, 31, 37, 0.07);
}
.findmap__svg { display: block; width: 100%; height: auto; }
.findmap__land { fill: rgba(24, 31, 37, 0.32); }
.findmap__pin {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  /* The hit area is 34px for the finger; the visible mark is the 12px dot
     drawn by ::before, centred inside it. */
}
.findmap__pin::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--surface-base);
  box-shadow: 0 0 0 4px rgba(24, 31, 37, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.findmap__pin:hover::before,
.findmap__pin:focus::before,
.findmap__pin:focus-visible::before { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(24, 31, 37, 0.14); }
.findmap__pin:focus-visible { outline: 2px solid var(--surface-base); outline-offset: 2px; }
.findmap__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 230px;
  transform: translateX(-50%) translateY(4px);
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 2;
}
.findmap__tip b { display: block; font-weight: 700; margin-bottom: 3px; }
.findmap__pin:hover .findmap__tip,
.findmap__pin:focus .findmap__tip,
.findmap__pin:focus-visible .findmap__tip { opacity: 1; visibility: visible; transform: translateX(-50%); }
/* A pin near the right edge would push its tip off the card. */
.findmap__pin:nth-of-type(3) .findmap__tip { left: auto; right: -8px; transform: translateY(4px); }
.findmap__pin:nth-of-type(3):hover .findmap__tip,
.findmap__pin:nth-of-type(3):focus .findmap__tip,
.findmap__pin:nth-of-type(3):focus-visible .findmap__tip { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .findmap__pin::before, .findmap__tip { transition: none; }
}



.social { display: flex; gap: 14px; flex-wrap: wrap; }
.social a { width: 29px; height: 29px; display: grid; place-items: center; position: relative; transition: transform 0.15s; }
.social a:hover { transform: translateY(-2px); }
.social a img.social__bg { position: absolute; inset: 0; width: 29px; height: 29px; }
/* The marks are not all square — the Facebook "f" is portrait (9x17). Cap both
   axes and let object-fit letterbox, rather than forcing a square box and
   stretching the glyph to fill it. */
.social a img.social__mark {
  position: relative;
  width: auto; height: auto;
  max-width: 15.5px; max-height: 15.5px;
  object-fit: contain;
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--surface-deep); color: var(--text-secondary); padding-block: 88px 40px; }
.site-footer__brand img { width: 200px; height: auto; }
.site-footer__blurb { margin-top: 24px; max-width: 380px; font-size: 14px; line-height: 23px; color: var(--text-muted); }
/* The three cities, not the three addresses. The full street addresses live on
   the Find Us map, where each pin carries one as its accessible name. */
.site-footer__locations {
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
/* Copyright left, social icons right, on one rule-topped row — matching the
   Figma "Footer Bar", which is justify-between with the right side left empty
   for the social set. */
.site-footer__bar {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 23px;
  color: var(--text-muted);
}
.site-footer__copy { max-width: 72ch; }
.site-footer__bar .heart { color: var(--brand-pink); }
.site-footer__bar a { color: var(--brand-teal); font-weight: 500; }
.site-footer__bar a:hover { text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; font-size: 14px; line-height: 23px; color: var(--text-secondary); }
.site-footer__legal a:hover { color: var(--brand-teal); }

.payments { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
.payments__label { font-weight: 700; font-size: 11px; line-height: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.payments__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.payments__mark { width: 50px; height: 26px; background: #fff; border-radius: 3px; display: grid; place-items: center; overflow: hidden; }
.payments__mark img { width: 42px; height: 16px; object-fit: contain; }
.payments__ssl { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: var(--text-secondary); }
.payments__ssl img { width: 13px; height: 15px; }

.disclaimer { margin-top: 18px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--text-muted); }
.disclaimer b { color: var(--text-secondary); font-weight: 600; }

/* ----------------------------------------------------------- nav drawer */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 21, 26, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 100;
  width: min(480px, 100vw);
  height: 100dvh;
  background: var(--surface-white);
  color: var(--text-on-light);
  box-shadow: var(--shadow-drawer);
  padding: 48px 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.is-open { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drawer__head img.drawer__logo { width: 180px; height: auto; }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; flex: none; }
.drawer__close:hover { background: var(--surface-cream); }
.drawer__close img { width: 20px; height: 20px; }

.drawer__nav { margin-top: 56px; }
.drawer__link {
  display: block;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.012em;
  transition: color 0.15s;
}
.drawer__link:hover { color: var(--accent-teal-ink); }
.drawer__nav > li + li { margin-top: 26px; }
.drawer__sub { display: flex; gap: 18px; margin-top: 16px; }
.drawer__sub::before { content: ''; width: 2px; background: var(--brand-teal); flex: none; border-radius: 1px; }
.drawer__sub ul { display: flex; flex-direction: column; gap: 12px; }
.drawer__sub a { font-size: 18px; line-height: 30px; color: var(--text-on-light-mut); }
.drawer__sub a:hover { color: var(--accent-teal-ink); }

.drawer__actions { display: flex; flex-direction: column; gap: 12px; }
.drawer__actions .btn { width: 100%; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 300;
  background: var(--surface-base);
  color: var(--text-primary);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  /* Stacked, the panels take their inset from the panel itself so the inner
     blocks can drop theirs and the media can still run full-bleed edge to edge
     inside the card. */
  .panel { padding: clamp(24px, 3.9vw, 56px); }
  .infocus, .season, .news { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .infocus__detail { padding: 0; }
  .season__detail, .news__copy { padding-right: 0; }
  .carousel { padding-bottom: 0; }
  .season__media { order: -1; }
  .about__grid { grid-template-columns: minmax(0, 1fr); }

  /* Stacked, the reading order matters in a way it does not side by side.
     display:contents dissolves the column wrappers so their children become
     grid items in their own right and can be interleaved with the media. */

  /* About — heading, then the photo, then the prose. */
  .about__copy { display: contents; }
  .about__head { order: 1; }
  .about__media { order: 2; }
  .about__body { order: 3; margin-bottom: 0; }
  .about__cta { order: 4; justify-self: start; }
  .about__grid { gap: 32px; }

  /* In Focus — the offer lands straight after the lede, before the inclusions,
     so the price is visible without scrolling the whole list first. */
  .infocus__detail { display: contents; }
  .infocus__intro { order: 1; }
  .offer { order: 2; }
  .inclusions { order: 3; }
  .infocus__lede { margin-bottom: 0; }

  .creds { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .creds__item { padding-inline: 0 24px; }
  .creds__item + .creds__item { border-left: 0; }
  /* Five stats in two columns orphans the fifth. It also carries much the
     longest label, so give it the full row rather than half of one. */
  .creds__item:last-child { grid-column: 1 / -1; padding-right: 0; }
  .outro__card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .site-header .btn--primary { display: none; }
  /* 230px of tooltip does not fit beside a 251px map. */
  .findmap__tip { max-width: 168px; font-size: 12px; line-height: 17px; padding: 9px 11px; }
  .findmap { padding: 14px 12px; }
  /* Tabs stay side by side at every width — the labels wrap rather than the
     row stacking, so the three states keep reading as one control. */
  .tab { padding: 16px 12px; }
  .tab__label { font-size: 15px; line-height: 21px; overflow-wrap: break-word; }
  .tab__sub { margin-top: 4px; font-size: 12px; line-height: 17px; }
  /* Once the row wraps to a stack, left-alignment leaves the last row of logos
     hanging off-centre. Centre the whole block instead. */
  .trusted__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
  }
  .trusted__logos { justify-content: center; gap: 28px 32px; }
  .drawer { padding: 32px 28px 40px; }
  .drawer__link { font-size: 26px; line-height: 34px; }
  .drawer__nav { margin-top: 36px; }
}

@media (max-width: 560px) {
  /* Two per row, not one — a single column turns five short stats into a long
     scroll and loses the sense of them being a set. */
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .creds__item { padding-inline: 0; }
  .creds__l { font-size: 12px; letter-spacing: 0.06em; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .offer__body { padding: 32px 24px 32px; }
  .payments { justify-content: flex-start; }
  /* two-up inclusions need to give back some type size at this width */
  .inclusions { gap: 0 16px; }
  .inclusion { padding-block: 16px; }
  .inclusion h4 { font-size: 16.5px; line-height: 23px; }
  .inclusion p { font-size: 12.5px; line-height: 19px; }
  .payments__mark { width: 44px; height: 23px; }
  .payments__mark img { width: 37px; height: 14px; }
  .season__stats { gap: 24px 32px; }
  .tab { padding: 14px 9px; }
  .tab__label { font-size: 13px; line-height: 18px; letter-spacing: -0.01em; }
  .tab__sub { font-size: 11px; line-height: 15px; }
}


/* ═══════════════════════════════════════════════════ about page ═══
   Built from Figma "About Page - production" (2283:20564), minus the Meet
   the Team and Content House chapters. Section rhythm is the design's own:
   104px block padding, 120px inset — both already carried by .shell and the
   gutter token, so nothing here redefines the page measure. */

.photocap {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 15px 20px 15px 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-on-light);
  max-width: calc(100% - 48px);
}
.photocap::before {
  content: '';
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-teal);
  flex: none;
}
.photocap b { color: var(--accent-teal-ink); font-weight: 600; }

/* ---------------------------------------------------- page hero --- */
.ahero { background: var(--surface-base); padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 96px); }
/* 800:600 as a ratio, not as fixed tracks: at 1440 the design's own widths
   plus the gutter exceed the viewport, and a fixed media column would take
   the difference out of the headline. */
.ahero__inner { display: grid; grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.ahero__eyebrow {
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 24px);
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.ahero__title {
  margin-top: 24px;
  overflow-wrap: break-word;
  font-weight: 900;
  font-size: clamp(42px, 5.55vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ahero__body { margin-top: 32px; font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.ahero__media { position: relative; margin: 0; }
.ahero__media img { display: block; width: 100%; height: auto; border-radius: 18px; }
.ahero__media .photocap { position: absolute; left: clamp(12px, 8%, 81px); bottom: 22px; }

/* ------------------------------------------------------ mission --- */
.mission { background: var(--surface-white); padding-block: clamp(56px, 6.5vw, 104px); }
.mission__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.5vw, 72px); align-items: start; }
.mission__eyebrow { color: var(--accent-gold-ink); }
.mission__h {
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(32px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  text-wrap: balance;
}
.mission__h em { font-style: normal; color: var(--brand-teal); }
.mission__body { margin-top: 18px; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }
.mission__body + .mission__body { margin-top: 27px; }
.mission__body b { color: var(--text-on-light); font-weight: 700; }
.facts { margin: 0; }
.fact { display: flex; align-items: center; gap: 20px; padding-block: 20px; }
.fact + .fact { border-top: 1px solid var(--border-light); }
.fact__n {
  flex: none;
  width: clamp(110px, 16vw, 280px);
  font-weight: 700;
  font-size: clamp(34px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  color: var(--accent-teal-ink);
  font-variant-numeric: tabular-nums;
}
.fact__l { margin: 0; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }

/* ------------------------------------------------------- studio --- */
.studio { background: var(--surface-cream); padding-block: clamp(56px, 6.5vw, 104px); }
.studio__inner { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.studio__media { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 700 / 460; }
.studio__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.studio__eyebrow { color: var(--accent-pink-ink); }
.studio__h {
  margin-top: 16px;
  font-weight: 700;
  font-size: clamp(32px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
}
.studio__body { margin-top: 16px; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }

/* ------------------------------------------------------ journey --- */
.journey { background: var(--surface-white); padding-block: clamp(56px, 6.5vw, 104px); }
.journey__eyebrow { color: var(--accent-teal-ink); }
.journey__h {
  margin-top: 16px;
  font-weight: 700;
  font-size: clamp(32px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  color: var(--text-on-light);
  text-wrap: balance;
}
.journey__lede { margin-top: 16px; max-width: 860px; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }
.timeline { list-style: none; margin: clamp(40px, 4.5vw, 72px) 0 0; padding: 0; }
.chapter { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: clamp(24px, 3.25vw, 56px); }
.chapter + .chapter { padding-top: clamp(48px, 5vw, 88px); }
/* The rail carries the year and a rule that runs the height of the chapter,
   so the timeline reads as one line rather than three stacked blocks. The
   last chapter has no rule: the story has not ended, it has arrived. */
.chapter__mark {
  position: relative;
  font-weight: 700;
  font-size: clamp(34px, 3.47vw, 60px);
  line-height: 1.067;
  letter-spacing: -0.02em;
  color: var(--accent-teal-ink);
}
.chapter__mark--pink { color: var(--accent-pink-ink); }
.chapter:not(:last-child) .chapter__mark::after {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(1.067em + 20px);
  bottom: calc(-1 * clamp(48px, 5vw, 88px));
  width: 2px;
  background: var(--brand-teal);
  opacity: 0.35;
}
.chapter__h {
  font-weight: 600;
  font-size: clamp(24px, 1.85vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text-on-light);
}
.chapter__tx { margin-top: 14px; max-width: 820px; font-size: 16px; line-height: 27px; color: var(--text-on-light-mut); }
.shots { display: grid; gap: 24px; margin-top: 32px; }
.shots img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.shots--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shots--four img { aspect-ratio: 4 / 3; }
.shots--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shots--three img { aspect-ratio: 4 / 3; }
.shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots--pair img { aspect-ratio: 4 / 5; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.role__label { font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.02em; color: var(--text-on-light); }
.role .shots { margin-top: 12px; }
.chapter__feature { position: relative; margin: 32px 0 0; }
.chapter__feature img { display: block; width: 100%; height: clamp(260px, 32vw, 480px); object-fit: cover; border-radius: 18px; }
.chapter__feature .photocap { position: absolute; left: 24px; bottom: 24px; }

@media (max-width: 1100px) {
  .ahero__inner { grid-template-columns: minmax(0, 1fr); }
  .studio__inner { grid-template-columns: minmax(0, 1fr); }
  .mission__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Two-up rather than four-up — four across a phone is a filmstrip of thumbnails. */
  .shots--four, .shots--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  /* The rail becomes a label above the chapter; a 160px column leaves nothing
     for the text at this width. */
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chapter:not(:last-child) .chapter__mark::after { display: none; }
  .fact__n { width: 92px; }
  .ahero__media .photocap, .chapter__feature .photocap { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
}