/* Bonjour, Our Story (About) page.
   Built as a natural second page of the Bonjour homepage.
   Scoped under .abt so it never touches the cloned Elementor header and footer.
   No em dashes, no double hyphens, by law. */

@font-face {
  font-family: 'Bonjour Quicksand';
  src: url('mirror-assets/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw-f8e00a726942.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

.abt {
  --sky: #d4e4f7;
  --sky-deep: #c3d9f2;
  --cream: #faf7f4;
  --yellow: #fab82c;
  --yellow-deep: #f1b434;
  --chip: #ffd166;
  --blue-btn: #5ba6ff;
  --ink: #2d2d2d;
  --ink-soft: #5b6470;
  --dark: #1a1a1a;
  --white: #ffffff;
  --card-shadow: 0 24px 52px -22px rgba(45, 55, 82, 0.28);
  --card-shadow-lift: 0 34px 64px -22px rgba(45, 55, 82, 0.34);
  /* How far the growth cards dip into the Mission band below them. */
  --growth-overlap: clamp(70px, 8vw, 120px);
  /* MEASURED off the live cloned nav: its boxed content (.e-con-inner) spans exactly
     1280px wide with ZERO side padding, sitting at x=80..1360 on a 1440 viewport.
     Section content must use this same 1280 box, edge-flush, so the logo, nav links,
     and every section body share the identical left/right edge. (The old 1140 guess
     was wrong, it left every section inset ~70px narrower than the nav.) */
  --maxw: 1280px;

  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.abt *,
.abt *::before,
.abt *::after { box-sizing: border-box; }

.abt img { max-width: 100%; display: block; }

/* Typography */
.abt h1, .abt h2, .abt h3, .abt h4 {
  font-family: "Bonjour Quicksand", "Quicksand", "Inter", sans-serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.abt h1 { font-size: clamp(46px, 8.4vw, 104px); font-weight: 700; }
.abt h2 { font-size: clamp(34px, 5.4vw, 68px); font-weight: 700; line-height: 1.05; }
.abt h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; }
.abt h4 { font-size: 20px; font-weight: 600; }
.abt p  { margin: 0; }

.abt .eyebrow {
  font-family: "Bonjour Quicksand", "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin: 0 0 14px;
}
.abt .lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--ink-soft);
  font-weight: 400;
}
.abt .body { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); }

/* Buttons */
.abt .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Bonjour Quicksand", "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 40px;
  border: 1.6px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease, background 0.16s ease;
}
.abt .btn:hover { transform: translateY(-2px); }
.abt .btn:active { transform: translateY(0); }
.abt .btn-yellow { background: var(--chip); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(250, 184, 44, 0.7); }
.abt .btn-yellow:hover { background: var(--yellow); }
.abt .btn-dark { background: var(--dark); color: #fff; }
.abt .btn-dark:hover { background: #000; }
.abt .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.abt .btn-outline:hover { background: var(--ink); color: #fff; }
.abt .btn-blue { background: var(--blue-btn); color: #fff; box-shadow: 0 12px 24px -12px rgba(91, 166, 255, 0.7); }

.abt .btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Section shell and waves */
.abt .sec {
  position: relative;
  /* Every section carries a ~58px bottom wave that sits INSIDE the bottom padding.
     Pad the bottom extra so the wave never crowds the content: the clean gap below
     the content stays roughly equal to the clean gap above it, so it reads centered. */
  padding-top: clamp(56px, 6vw, 84px);
  padding-bottom: clamp(112px, 12vw, 148px);
  overflow: hidden;
}

/* Nav stays transparent over the hero, solid only after scroll (standing rule, all builds).
   The header sits in normal flow above the hero by default, so transparency alone would
   just reveal the page background behind it, not the hero. Pin it over the hero instead. */
.elementor-location-header {
  position: fixed !important;
  top: 0 !important; left: 0; right: 0;
  z-index: 100;
}
.elementor-element-5b3e4ace {
  background-color: transparent !important;
  transition: background-color 0.25s ease;
}
body.abt-scrolled .elementor-element-5b3e4ace {
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(45, 55, 82, 0.08);
}
/* Edge-flush like the nav (no side padding), with a 20px safety gutter on narrow
   viewports via the min() so content never touches the screen edge. At >=1320px this
   resolves to the full 1280 box at x=80..1360, exactly matching the nav content. */
.abt .inner { width: min(100% - 40px, var(--maxw)); margin-inline: auto; position: relative; z-index: 2; }
.abt .bg-white  { background: var(--white); }
.abt .bg-sky    { background: var(--sky); }
.abt .bg-cream  { background: var(--cream); }
.abt .bg-yellow { background: var(--yellow); }

.abt .wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(36px, 4vw, 60px);
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.abt .wave svg { width: 100%; height: 100%; display: block; }
.abt .wave-bottom { bottom: -1px; }
/* Top divider: same wave flipped, sits at the section's top edge. */
.abt .wave-top { top: -1px; transform: rotate(180deg); }

/* Hero. Extra top clearance because the header is now fixed and overlays it.
   Explicit flex centering so content is always vertically centered, not just padding-balanced. */
.abt .hero {
  padding-top: 172px;
  padding-bottom: clamp(120px, 13vw, 180px);
  min-height: 800px;
  display: flex;
  align-items: center;
}
.abt .hero-wordmark {
  position: absolute;
  top: clamp(24px, 4vw, 52px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 116%);
  max-width: none;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.abt .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.abt .hero-copy { max-width: 560px; }
.abt .hero-copy h1 { margin-bottom: 20px; }
.abt .hero-copy .lede { margin-bottom: 30px; }

.abt .hero-art { position: relative; display: flex; justify-content: center; }

/* Cloud-masked photo, the homepage Best Sellers treatment (cloud_border):
   the product photo is masked into the white-cloud shape. */
.abt .cloud-photo {
  position: relative;
  overflow: hidden;
  width: clamp(300px, 38vw, 540px);
  aspect-ratio: 660.11 / 438.2;
  -webkit-mask-image: url('about-assets/cloud-white.svg');
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('about-assets/cloud-white.svg');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.abt .cloud-photo img { width: 100%; height: 100%; object-fit: cover; }
.abt .client-story-photo {
  filter: drop-shadow(0 22px 30px rgba(45, 55, 82, 0.20));
}
.abt .client-story-photo img {
  object-position: 50% 55%;
  transform: scale(1.02);
}

/* Yellow chip overlapping the cloud photo, same spec as the homepage price chip:
   Quicksand 700, #FFD166 pill. */
.abt .price-chip {
  position: absolute;
  top: 4%;
  left: 2%;
  z-index: 4;
  font-family: "Bonjour Quicksand", "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1;
  color: var(--ink);
  background: var(--chip);
  padding: 14px 22px;
  border-radius: 40px;
  box-shadow: 0 12px 24px -12px rgba(45, 55, 82, 0.35);
}

/* Cutout product floating directly on a color band, like the homepage member section. */
.abt .float-cutout {
  position: relative;
  z-index: 2;
  width: clamp(340px, 42vw, 560px);
  filter: drop-shadow(0 26px 38px rgba(90, 61, 12, 0.30));
}

/* decorative clouds and mascot */
.abt .cloud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(70, 90, 130, 0.08));
}
.abt .mascot { position: absolute; z-index: 3; width: clamp(84px, 9vw, 132px); pointer-events: none; }

/* Story cards, three clouds: white, yellow with white text, white */
.abt .sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 3vw, 36px); }
.abt .sec-head .lede { margin-top: 18px; }

.abt .story-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
.abt .cloud-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
  width: auto;
  aspect-ratio: 660.11 / 438.2;
  -webkit-mask-image: url('about-assets/cloud-white.svg');
  mask-image: url('about-assets/cloud-white.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 22px 40px rgba(45, 55, 82, 0.32));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.abt .cloud-card:hover { transform: translateY(-6px); }
.abt .cloud-card.card-white { background: var(--cream); }
.abt .cloud-card.card-yellow { background: var(--yellow); }
.abt .cloud-card-content {
  width: 74%;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
}
.abt .story-num {
  font-family: "Bonjour Quicksand", "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--chip);
  border-radius: 50%;
}
.abt .cloud-card.card-yellow .story-num { background: #fff; color: #7a4a00; }
.abt .cloud-card-content h3 { font-size: 20px; }
.abt .cloud-card-content .body { font-size: 13.5px; line-height: 1.55; }
.abt .cloud-card.card-yellow .cloud-card-content h3,
.abt .cloud-card.card-yellow .cloud-card-content .body { color: #fff; }

/* Split rows for craft and partners */
.abt .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.abt .split.reverse .split-media { order: 2; }
.abt .split-copy h2 { margin-bottom: 22px; }
.abt .split-copy .lede + .lede { margin-top: 18px; }
.abt .split-copy .btn-row { margin-top: 30px; }

.abt .media-frame {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: #fff;
  aspect-ratio: 5 / 4;
}
.abt .media-frame img { width: 100%; height: 100%; object-fit: cover; }
.abt .still {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.abt .still img {
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 18px 18px rgba(45, 55, 82, 0.30)) drop-shadow(0 7px 8px rgba(45, 55, 82, 0.20));
}
.abt .client-craft-photo img {
  width: min(108%, 600px);
  max-width: none;
  filter: drop-shadow(0 24px 24px rgba(45, 55, 82, 0.24));
}

/* Partners left column: cloud photo with the Dusit banner stacked directly below it */
.abt .partners-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.abt .partners-left .cloud-photo { width: 100%; max-width: 460px; }
.abt .partners-left .cloud-photo img {
  transform: scale(1.48);
  transform-origin: 64% 78%;
}
.abt .partners-left .client-partner-photo img {
  transform: scale(1.04);
  transform-origin: center;
  object-position: 50% 52%;
}

/* Growth cards with real photos */
.abt .growth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
  /* The cards straddle down into the Mission band below (homepage pattern).
     They sit above it via z-index; Mission adds matching top padding to clear them. */
  position: relative;
  z-index: 3;
  margin-bottom: calc(-1 * var(--growth-overlap));
}
.abt .gcard {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  /* Soft, low, restrained shadow so the cards lift just slightly off the band. */
  box-shadow: 0 18px 40px -20px rgba(45, 55, 82, 0.30), 0 2px 6px -2px rgba(45, 55, 82, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}
.abt .gcard:hover { transform: translateY(-8px); box-shadow: var(--card-shadow-lift); }
.abt .gcard-media {
  aspect-ratio: 4 / 3;
  background: var(--sky);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.abt .gcard-media img { width: 100%; height: 100%; object-fit: cover; }
.abt .gcard-media.contain { background: linear-gradient(160deg, #eaf2fc, #dcebfb); }
.abt .gcard-media.contain img { width: 88%; height: 92%; object-fit: contain; }
.abt .gcard-body { padding: 26px 28px 30px; }
.abt .gcard-body .eyebrow { color: var(--yellow-deep); margin-bottom: 10px; }
.abt .gcard-body h3 { margin-bottom: 10px; }
.abt .gcard-body .body { font-size: 15px; }

/* Partners and Dusit */
.abt .partner-mark {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 18px 24px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  margin-top: 8px;
  flex-wrap: nowrap;
}
.abt .partner-logo {
  display: block;
  width: clamp(118px, 10vw, 145px);
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.abt .partner-note {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .abt .partner-mark { gap: 14px; padding: 16px 18px; text-align: left; }
  .abt .partner-logo { width: 104px; }
  .abt .partner-note { width: auto; font-size: 12.5px; }
  .abt .client-craft-photo img { width: min(106%, 430px); }
}

/* Mission on yellow */
/* Growth section lets its cards overflow its bottom edge into the Mission band.
   padding-bottom is 0 so the section ends above the cards and they overhang below it. */
.abt #growth { overflow: visible; padding-bottom: 0; }
/* Mission sits under the overhanging cards: sit below them and pad the top so its
   own content (eyebrow, heading) starts clear of the overlap. */
.abt #mission { position: relative; z-index: 1; padding-top: calc(var(--growth-overlap) + clamp(76px, 6vw, 104px)); }
.abt .mission-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.abt .bg-yellow .eyebrow { color: #7a4a00; }
.abt .mission-copy h2 { color: var(--ink); margin-bottom: 22px; max-width: 12ch; }
.abt .mission-copy .body { color: #5a3d0c; font-size: 17.5px; max-width: 46ch; }
.abt .mission-art { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: clamp(320px, 36vw, 480px); }
.abt .mission-art .float-cutout {
  width: min(122%, 690px);
  max-width: none;
}

@media (max-width: 560px) {
  .abt .mission-art { justify-content: center; }
  .abt .mission-art .float-cutout { width: min(108%, 430px); }
}

/* Final CTA, heading nested inside the open center of the ingredient arc */
.abt .cta-inner { text-align: center; max-width: 920px; margin: 0 auto; }
.abt .cta-inner .eyebrow { margin-bottom: 8px; }
.abt .cta-inner .lede {
  max-width: 36em;
  margin: 22px auto 34px;
  font-size: clamp(18px, 1.75vw, 22px);
  line-height: 1.55;
  text-wrap: balance;
}
.abt .cta-inner .btn-row { justify-content: center; }
.abt .cta-visual {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.abt .cta-visual img { width: 100%; display: block; }
/* Heading nested INSIDE the constellation's empty centre: kept narrow and sized
   down so the ring of ingredients frames it, never crosses the letters. */
.abt .cta-visual h2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  text-align: center;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
}

/* Responsive */
@media (max-width: 900px) {
  .abt .cloud-desktop { display: none; }
  .abt .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .abt .hero-copy { max-width: 100%; margin: 0 auto; }
  .abt .hero-copy .btn-row { justify-content: center; }
  .abt .hero-art { order: -1; }
  .abt .split { grid-template-columns: 1fr; }
  .abt .split.reverse .split-media { order: 0; }
  .abt .story-grid { flex-direction: column; gap: 28px; }
  .abt .cloud-card { width: min(340px, 88vw); }
  .abt .cta-visual { max-width: 390px; }
  .abt .cta-visual h2 { width: 62%; font-size: clamp(21px, 6vw, 28px); }
  .abt .growth-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  /* Stacked single-column on mobile: no card overlap, restore normal section spacing. */
  .abt #growth { overflow: hidden; padding-bottom: clamp(56px, 8vw, 88px); }
  .abt #mission { padding-top: clamp(56px, 8vw, 88px); }
  .abt .mission-grid { grid-template-columns: 1fr; text-align: center; }
  .abt .mission-copy h2 { max-width: 100%; }
  .abt .mission-copy .body { max-width: 100%; margin: 0 auto; }
  .abt .mission-art { order: -1; }
  .abt .hero-wordmark { width: 150%; opacity: 0.42; }
}
@media (max-width: 560px) {
  .abt .sec { padding-top: 46px; padding-bottom: 88px; }
  .abt .hero { padding-top: 190px; }
  .abt .cloud-card-content { width: 84%; }
  .abt .btn { width: 100%; }
  .abt .btn-row { flex-direction: column; }
  .abt .hero-copy .btn-row .btn { width: 100%; }
  .abt .mascot { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .abt .btn, .abt .card, .abt .gcard { transition: none; }
}

/* Mobile mega menu drawer readability.
   The mirror ships the open dropdown with a transparent background,
   so menu links overlap page content. Give the open drawer a solid
   panel. Loaded only on about.html, so the homepage is untouched. */
.e-n-menu[data-layout="dropdown"] .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper {
  background-color: #ffffff;
  box-shadow: 0 26px 52px -20px rgba(45, 55, 82, 0.30);
  border-radius: 0 0 24px 24px;
  padding: 6px 0 20px;
  max-height: 82vh;
}
.e-n-menu[data-layout="dropdown"] .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-title-text {
  font-family: "Bonjour Quicksand", "Quicksand", sans-serif;
  font-weight: 600;
}