/* About Us (/about-us). Ported from SP Page Builder page id 16.
   Breakpoints follow the old builder: desktop >= 1200, laptop 992-1199, tablet 768-991,
   large phone 576-767, phone <= 575. Each row is two 50% columns, stacked below 992px.
   Per-row type sizes are set as custom properties on the row, so a size change is one line. */

.pb-page-about-us .ab {
  --ab-red: #cb333b;
  --ab-brown: #48210e;
  --ab-ink: #252525;
  --ab-cream: #fbf5ee;
}

/* ---------- Rows and columns ---------- */
.ab-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background: var(--ab-cream);
}
.ab-col {
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
  min-height: 600px;
}

/* Text column: white panel, content centred vertically (overflow, if any, runs downward). */
.ab-col--text {
  display: flex;
  flex-direction: column;
  padding: 50px 150px;
  background: #fff;
}
.ab-text {
  margin: auto 0;
  width: 100%;
}

/* Photo column: the photo covers the column, like the old background image. */
.ab-col--photo { overflow: hidden; }
/* <picture> only offers the AVIF file; it adds no box (img keeps the JPG for older browsers). */
.ab-picture { display: contents; }
.ab-col--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Text ---------- */
.ab-title,
.ab-body p { margin: 0 0 16px; }

/* Script line above each heading; it is nudged down so it overlaps the heading. */
.ab-kicker {
  position: relative;
  z-index: 2;
  top: var(--kicker-top, 30px);
  margin: 0;
  font-family: 'Belguri', sans-serif;
  font-size: var(--kicker-fs, 60px);
  line-height: var(--kicker-lh, 25px);
  color: var(--ab-red);
  text-align: center;
}
.ab-kicker span { display: block; margin-bottom: 16px; }

.ab-title {
  font-family: 'Druk Medium', sans-serif;
  font-weight: 400;
  font-size: var(--title-fs, 100px);
  line-height: var(--title-lh, 1.5);
  color: var(--ab-brown);
  text-align: center;
}

.ab-body {
  padding-top: var(--body-pt, 0);
  padding-bottom: var(--body-pb, 0);
  font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--body-fs, 18px);
  line-height: 1.5;
  color: var(--ab-ink);
}

/* ---------- Row 1: mission + video ----------
   Pulled up under the site header slot (60px, 50px on phones); padding-top clears the fixed nav. */
.ab-row--mission {
  background: #fefdfb;
  margin-top: -60px;
  padding-top: 74px;
  --title-fs: 100px;
}
.ab-row--mission .ab-col { min-height: 750px; max-height: 750px; }
/* Desktop stacked cards (shared stack-cards.js): every row fills the window, so the mission row's 750px cap is
   lifted there or a cream band would show under its columns. */
.pb-stacking .ab-row--mission .ab-col { max-height: none; }
.pb-stacking .ab-col--video .pb-vid__wrap { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; }
.ab-row--mission .ab-col--video { background: #000; }

/* ---------- Row 2: cooking method ---------- */
.ab-row--method { --title-fs: 80px; }

/* ---------- Row 4: approach ---------- */
.ab-row--approach { --kicker-top: 40px; }

/* ---------- Laptop (<= 1199px) ---------- */
@media (max-width: 1199.98px) {
  .ab-col { min-height: 450px; }
  .ab-col--text { padding: 60px 40px; }
  .ab-row { --body-fs: 16px; --body-pt: 10px; --kicker-top: 0px; }

  .ab-row--mission { padding-top: 70px; --title-fs: 90px; --title-lh: 50px; }
  .ab-row--mission .ab-col--text { min-height: 450px; }
  .ab-row--method { --title-fs: 70px; --title-lh: 60px; --body-pb: 10px; }
  .ab-row--ingredients { --title-fs: 70px; --kicker-lh: 10px; --kicker-top: 20px; }
  .ab-row--approach { --title-fs: 80px; --kicker-top: 40px; }
}

/* ---------- Tablet (<= 991px): columns stack, text above photo, rows flush (no cream stripes; owner 2026-10-18) ---------- */
@media (max-width: 991.98px) {
  .ab-col { flex-basis: 100%; max-width: 100%; }
  .ab-row--method .ab-col--text,
  .ab-row--approach .ab-col--text { order: 1; }
  .ab-row--method .ab-col--photo,
  .ab-row--approach .ab-col--photo { order: 2; }

  .ab-row--mission { margin-top: -50px; padding-top: 100px; }
}

/* ---------- Large phone (<= 767px) ---------- */
@media (max-width: 767.98px) {
  .ab-row--mission { margin-top: -60px; }
}

/* ---------- Phone (<= 575px) ---------- */
@media (max-width: 575.98px) {
  .ab-row { --title-fs: 60px; --title-lh: 50px; --kicker-top: 0px; }
  .ab-row--mission { padding-top: 74px; --kicker-fs: 40px; --body-fs: 14px; }
  .ab-row--approach { padding: 0; --kicker-fs: 50px; --kicker-lh: 40px; }
}

/* =====================================================================
   Video player (ported from the old Raw HTML addon). The wrap is locked at
   750px tall; the video fills it with object-fit: cover.
   ===================================================================== */
.pb-vid__wrap {
  position: relative;
  width: 100%;
  height: 750px;
  min-height: 750px;
  max-height: 750px;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.pb-vid__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  object-fit: cover;
}

/* Centre: tagline above, cut-out play button below */
.pb-vid__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vw, 44px);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  width: 100%;
  padding: 0 24px;
}
.pb-vid__tagline {
  font-family: 'Druk Medium', "Trebuchet MS", Trebuchet, Arial, sans-serif;
  color: #fff;
  font-size: clamp(3.5rem, 14vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
  margin: 0;
  font-weight: 500;
}
.pb-vid__tagline span { display: block; }

.pb-vid__play {
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  background: transparent;
  border: 0;
  padding: 0;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}
.pb-vid__play svg { width: 100%; height: 100%; display: block; }

/* Hide the centre stack while playing inline and in fullscreen */
.pb-vid__wrap.is-playing .pb-vid__cta,
.pb-vid__wrap.is-fullscreen .pb-vid__cta { display: none; }

/* Corner buttons: enlarge (inline), close (fullscreen) */
.pb-vid__enlarge,
.pb-vid__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 10;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.15s ease;
}
.pb-vid__enlarge svg,
.pb-vid__close svg { width: 100%; height: 100%; display: block; }
.pb-vid__enlarge:hover,
.pb-vid__enlarge:focus-visible,
.pb-vid__close:hover,
.pb-vid__close:focus-visible { transform: scale(1.08); outline: none; }

.pb-vid__wrap.is-fullscreen .pb-vid__enlarge { display: none; }
.pb-vid__close { display: none; }
.pb-vid__wrap.is-fullscreen .pb-vid__close { display: block; }
.pb-vid__wrap.is-fullscreen .pb-vid__media { pointer-events: auto; }

/* iPhone: the JS falls back to the video's native fullscreen and adds .is-fullscreen; size the wrap
   behind it as live did. */
.pb-vid__wrap.is-fullscreen {
  width: 100vw; height: 100vh; min-height: 0; max-height: none;
  display: flex; align-items: center; justify-content: center;
}

/* Fullscreen: the wrap fills the screen and the video shows whole (contain).
   The prefixed selector must stay in its own rule: one unknown selector in a
   list makes the browser drop the whole rule. */
.pb-vid__wrap:fullscreen {
  width: 100vw; height: 100vh; min-height: 0; max-height: none;
  display: flex; align-items: center; justify-content: center;
}
.pb-vid__wrap:-webkit-full-screen {
  width: 100vw; height: 100vh; min-height: 0; max-height: none;
  display: flex; align-items: center; justify-content: center;
}
.pb-vid__wrap:fullscreen .pb-vid__media {
  position: static; width: auto; height: 100vh; object-fit: contain; flex-shrink: 0;
}
.pb-vid__wrap:-webkit-full-screen .pb-vid__media {
  position: static; width: auto; height: 100vh; object-fit: contain; flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .pb-vid__wrap:hover .pb-vid__play { transform: scale(1.06); }
}