/* =========================================================
   1. FONTS & IMPORTS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Nunito:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'myfont';
  src: url('./Branding\ Bold.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
}

/* =========================================================
   2. ROOT / DESIGN TOKENS
========================================================= */
:root {
  /* Font Variables */
  --font-primary: 'myfont', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Photography sub-section palette (locked 6-color brand palette) */
  --brown-deep: #3a2317;
  --coral: #f87159;
  --teal: #4dc2af;
  --yellow: #ffba4b;
  --black: #000000;
  --white: #ffffff;

  /* Content sub-section palette (heading / cards / CTA) */
  --brown: #402417;
  --orange-start: #ff9728;
  --orange-end: #e84b0b;

  /* Aspect Ratios & Dimensions */
  --hero-aspect: 2548 / 1246;
  --brown-height: 356px;
  --heading-top: 96px;
  --subheading-gap: 18px;
  --card-width: 235px;
  --card-height: 145px;
  --card-gap: 10px;
  --cards-top-offset: 265px;
  --tagline-top-gap: 22px;
  --button-top-gap: 35px;
  --button-width: 630px;
  --button-height: 77px;
}

/* =========================================================
   3. GLOBAL RESET & BASE STYLES
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--brown-deep);
}

body {
  font-family: var(--font-body);
  color: var(--black);
}

/* Primary Headings Rule Override */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
}

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

/* =========================================================
   4. HERO SECTION
========================================================= */
.hero {
  position: relative;
  width: 100%;
}

/* Photography Sub-Section */
.hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-aspect);
  overflow: hidden;
  background-color: var(--coral);
}

.hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.hero__logo {
  position: absolute;
  top: 2.1%;
  left: 11.6%;
  width: 11.8%;
  min-width: 92px;
  max-width: 210px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__logo-mark {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero__logo-tagline {
  margin-top: 2%;
  width: 100%;
  color: var(--white);
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(6px, 0.62vw, 11px);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-align: center;
}

/* Content Sub-Section */
.hero__top {
  background: var(--brown);
  width: 100%;
  height: var(--brown-height);
  padding-top: var(--heading-top);
  text-align: center;
  position: relative;
}

.hero__heading {
  font-family: var(--font-primary);
  font-weight: 900;
  color: var(--white);
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 0 20px;
}

.hero__subheading {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--white);
  font-size: 27px;
  line-height: 1.2;
  margin-top: var(--subheading-gap);
  padding: 0 20px;
}

.hero__bottom {
  background: var(--white);
  width: 100%;
  text-align: center;
  /* position: relative; */
  position: absolute;
}

/* Cards Area */
.cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--card-gap);
  margin-top: calc(var(--cards-top-offset) - var(--brown-height));
 
  padding: 0 20px;
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  background: var(--white);
  border-radius: 28px 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card__label {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--brown);
  font-size: 40px;
  line-height: 1.05;
  text-align: center;
}

.hero__tagline {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--brown);
  font-size: 30px;
  margin-top: var(--tagline-top-gap);
  padding: 0 20px;
}

.hero__cta {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--white);
  font-size: 32px;
  border: none;
  border-radius: 999px;
  width: var(--button-width);
  max-width: calc(100% - 40px);
  height: var(--button-height);
  margin-top: var(--button-top-gap);
  margin-bottom: 60px;
  background: linear-gradient(to right, var(--orange-start), var(--orange-end));
  cursor: pointer;
  display: inline-block;
}

/* Hero Responsiveness */
@media (max-width: 1024px) {
  .hero__logo {
    width: 10%;
    min-width: 80px;
  }
  .hero__logo-tagline {
    font-size: clamp(5px, 0.9vw, 9px);
  }
}

@media (max-width: 1100px) {
  :root {
    --card-width: 150px;
    --card-height: 100px;
  }
  .hero__heading {
    font-size: 34px;
    white-space: normal;
  }
  .hero__subheading {
    font-size: 20px;
  }
  .card__label {
    font-size: 22px;
  }
  .hero__tagline {
    font-size: 22px;
  }
  .hero__cta {
    font-size: 24px;
    width: 90%;
    height: 60px;
  }
  .hero__top {
    height: 300px;
  }
  .cards {
    margin-top: calc(220px - 300px);
  }
}

@media (max-width: 700px) {
  :root {
    --card-width: 120px;
    --card-height: 80px;
  }
  .hero__heading {
    font-size: 24px;
  }
  .hero__subheading {
    font-size: 15px;
  }
  .cards {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .card__label {
    font-size: 16px;
  }
  .hero__tagline {
    font-size: 17px;
  }
  .hero__cta {
    font-size: 18px;
    height: 50px;
  }
}

@media (max-width: 600px) {
  .hero__logo {
    width: 15%;
    min-width: 56px;
    top: 3%;
    left: 5%;
  }
  .hero__logo-tagline {
    font-size: clamp(4px, 1.6vw, 7px);
    letter-spacing: 0.04em;
  }
}

/* =========================================================
   5. ABOUT BONUM CHA SECTION
========================================================= */
.bonum-about {
  --bonum-brown: #3a2317;
  --bonum-text: #5c4a3d;
  --bonum-orange: #f5821f;
  --bonum-gray: #9a9a9a;
  --bonum-divider: #3a2317;

  width: 100%;
  max-width: 1600px;
  min-height: 650px;
  margin: 246px auto 0px;
  background: #ffffff;
  font-family: var(--font-body);
}

.bonum-about__container {
  width: 75%;
  max-width: 1450px;
  margin: 0 auto;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 40px 0;
}

/* Left Content Column */
.bonum-about__content {
  flex: 0 0 500px;
  max-width: 500px;
}

.bonum-about__heading {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 54px;
  line-height: 1;
  color: var(--bonum-brown);
  text-align: left;
  margin: 0 0 20px 0;
}

.bonum-about__description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--bonum-text);
  max-width: 470px;
  margin: 0;
}

/* Dashed Divider */
.bonum-about__divider {
  width: 610px;
  max-width: 100%;
  height: 0;
  border-top: 2px dashed var(--bonum-divider);
  margin: 26px 0 24px 0;
}

/* Highlight Text Blocks */
.bonum-about__highlights {
  display: flex;
  flex-direction: row;
  gap: 26px;
  margin-bottom: 30px;
}

.bonum-about__highlight {
  font-family: "Poppins";
  border-left: 2px solid var(--bonum-gray);
  padding-left: 14px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: var(--bonum-brown);
}

/* Decorative Timeline */
.bonum-about__timeline {
  display: flex;
  align-items: center;
}

.bonum-about__dot {
  width: 14px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: var(--bonum-orange);
}

.bonum-about__timeline-line {
  flex: 0 0 auto;
  width: 190px;
  max-width: 40vw;
  height: 0;
  margin: 0 8px;
  border-top: 3px dashed var(--bonum-orange);
}

/* Right Side Visual */
.bonum-about__visual-wrap {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  right: 22px;
}

.bonum-about__visual {
  width: 100%;
  height: auto;
  max-width: 880px;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .bonum-about__br { display: none; }
}

/* About Section Responsiveness */
@media (max-width: 1024px) {
  .bonum-about{
   margin: 0px auto;
  }
  .bonum-about__heading {
    text-align: center;
    font-size: 40px;
  }
  .bonum-about__description {
    font-size: 16px;
    text-align: center;
  }
  .bonum-about__content {
    flex: 0 0 420px;
    max-width: 420px;
  }
  .bonum-about__divider {
    display: none;
    width: 100%;
  }
  .bonum-about__visual-wrap {
    flex: 0 0 48%;
    max-width: 48%;
  }
  .bonum-about__highlights{
    display: flex;
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .bonum-about {
    min-height: auto;
    overflow-x: clip;
  }
  .bonum-about__container {
    width: 100%;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 40px 0 48px;
    gap: 13px;
  }
  .bonum-about__content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }
  .bonum-about__heading {
    font-size: clamp(38px, 13vw, 62px);
    line-height: 1;
    margin: 0 0 14px;
    white-space: nowrap;
  }
  .bonum-about__description {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 27px;
    padding: 0 5vw;
    font-size: clamp(13px, 4.05vw, 20px);
    line-height: 1.4;
    color: var(--bonum-brown);
  }
  .bonum-about__divider {
    width: 100%;
    order: 2;
    margin: 16px 0;
  }
  .bonum-about__highlights {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(14px, 6.2vw, 30px);
    margin-bottom: 20px;
    gap: 14px;
    order: 3;
  }
  .bonum-about__highlight{
    font-size: 14px;
    color: #000;
        border-left-width: 3px;
    padding-left: 0.65em;
    font-size: clamp(11px, 3.64vw, 17.5px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--bonum-brown);
    white-space: nowrap;
  }
  .bonum-about__timeline {
    order: 4;
      width: 39.3%;
        margin: 0 0 0 8.4%;
  }
  .bonum-about__timeline-line {
        flex: 1 1 0;
    width: auto;
    max-width: none;
    height: 3px;
    margin: 0 8px;
    border-top: 0;
    background: repeating-linear-gradient(
      to right,
      var(--bonum-orange) 0 10px,
      transparent 10px 19px
    );
    max-width: 50vw;
  }
  .bonum-about__visual-wrap {
    flex: 0 0 auto;
    width: 92%;
    max-width: 442px;
    height: auto;
    right: 0; 
  }
  .bonum-about__visual {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
   .bonum-about__dot {
    flex: none;
    width: 14px;
    min-width: 14px;
    height: 14px;
  }
}

/* Large phones (420–480px, e.g. 464px): timeline dots line up under the two highlights */
@media (min-width: 420px) and (max-width: 480px) {
  .bonum-about__timeline {
    width: 38.2%;
        margin: 0px 0 0 9.4%;
    }
  }

/* 395–415px (e.g. 405px): timeline dots line up under the two highlights */
@media (min-width: 395px) and (max-width: 415px) {
  .bonum-about__timeline {
    width: 38.3%;
    margin: 0 0 0 8.4%;
  }
}


/* =========================================================
   6. BEVERAGE SECTION
========================================================= */
.beverage-section {
  position: relative;
  width: 100%;
  max-width: 1523px;
  height: 1204px;
  background-image: url(./images/Desktop/4.jpg);
    background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* margin: 0 auto; */
  /* margin-bottom: 300px; */
  overflow: hidden;
  /* background: #eaf3fb; */
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("./images/Desktop/4.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

.content {
  position: absolute;
  inset: 0;
  width: 1280px;
  /* height: 697px; */
  z-index: 5;
  margin: 0 auto;
}

/* Heading & Subtitle */
.heading-area {
  position: absolute;
  top: 62px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 40px;
  z-index: 5;
  margin: 0 auto;
}

.heading-area h2 {
  font-family: var(--font-primary);
  font-size: 60px;
  font-weight: 800;
  line-height: 1.1;
  color: #3a1f14;
  letter-spacing: 0;
  margin: 12px auto 0px;
}



/* Stat Cards */
.stats-container {
  position: absolute;
  top: 279px;
  left: 0;
  width: 100%;
  height: 245px;
}

.stat-card {
  position: absolute;
  top: -114px; /* was effectively adding 86px */
  width: 155px;
  height: 245px;
  border-radius: 16px;
}

.stat-card:nth-child(1) { left: 72px; }
.stat-card:nth-child(2) { left: 366px; }
.stat-card:nth-child(3) { left: 650px; }
.stat-card:nth-child(4) { left: 934px; }

.stat-accent {
  position: absolute;
  left: 18px;
  top: 30px;
  width: 5px;
  height: 46px;
  background: #f7942d;
  border-radius: 5px;
  display: block;
}

.stat-body {
  position: absolute;
  left: 30px;
  top: 24px;
  right: 4px;
}

.stat-value {
  font-family: var(--font-primary);
  font-size: 33px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
  line-height: 1.1;
}

.stat-desc {
  font-family: var(--font-body);
  margin-top: 8px;
  font-size: 16px;
  font-weight: 900;
  width: 176px;
  line-height: 1.3;
  color: #2b2b2b;
  letter-spacing: -0.1px;
}

/* Beverage Products */
.products {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}


/* Beverage Responsiveness */
@media (max-width: 1024px) {
  .beverage-section {
    height: auto;
    aspect-ratio: 1280 / 697;
    min-height: 320px;
  }
  .content {
    width: 100%;
    height: 100%;
  }
  .heading-area,
  .stats-container {
    transform: scale(0.78);
    transform-origin: top center;
    left: 50%;
    margin-left: -640px;
  }
  .heading-area { top: 36px; width: 1280px; }
  .stats-container { top: 110px; width: 1280px; }
}

@media (max-width: 640px) {
  .heading-area,
  .stats-container {
    transform: scale(0.5);
  }
  .heading-area { top: 16px; }
  .stats-container { top: 68px; }
}
/* =========================================================
   Bonum Cha — investment page
   Design canvas reference: 1600 x 780
   All layout numbers below are expressed in cqw (1cqw = 1% of
   the .stage element's own inline size). Because the stage is
   locked to a 1600:780 aspect ratio, a single cqw-based scale
   factor keeps every horizontal AND vertical measurement in
   the same proportion as the original 1600px-wide design,
   so the whole composition scales together on any screen
   without reflowing or overlapping.
   ========================================================= */

:root{
  --ink: #351c15;              /* dark brown/near-black text */
  --ink-soft: rgba(53, 28, 21, 0.62);   /* muted brown-gray for subtitle/footnote */
  --ink-faint: rgba(53, 28, 21, 0.38);  /* dashed border */
  --pill-bg: #ffffff;
  --font-display: "Baloo 2", "Arial Rounded MT Bold", sans-serif;
  --font-body-stage: "Nunito", "Poppins", sans-serif;

  --bg-gradient: url("assets/background-gradient-processed.jpg");
  --kiosk-image: url("assets/kiosk-image.png");

  --stage-w: 1600;
  --stage-h: 780;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

.stage-scroll{
  font-family: var(--font-body-stage);
  color: var(--ink);
  /* Soft pastel fallback so there is never a white margin,
     even outside the fixed-ratio stage on unusual viewports. */
  background: linear-gradient(120deg, #e9f7f6 0%, #f3ecdf 45%, #f9dfd0 75%, #f6d9c9 100%);
  background-attachment: fixed;
}

.page-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Allow the poster to scroll horizontally rather than shrink
   past legibility on very narrow viewports. */
.stage-scroll{
  width: 100%;
  max-width: 1600px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.stage{
  position: relative;
  width: 100%;
  min-width: 480px;
  aspect-ratio: 1600 / 1000;
  margin: 0 auto;
  overflow: hidden;

  container-type: inline-size;

  background-image: url(./images/Desktop/bonumcha-watermark.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* -----------------------------------------------------------
   Watermark note: the large "BONUMCHA" wordmark is baked into
   the background-gradient asset itself (background-gradient-
   processed.jpg). Because that image is pre-sized to the exact
   1600:780 stage ratio and drawn with background-size: cover,
   it scales perfectly in lockstep with the rest of the
   composition at any viewport width and is never cropped away
   or removed on smaller screens.
----------------------------------------------------------- */

/* -----------------------------------------------------------
   Headline
----------------------------------------------------------- */
.headline{
  position: absolute;
  top: 5.3cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 62cqw;
  text-align: center;
  z-index: 2;
}

.headline h1{
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 47px;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink);
}

.subtitle{
  margin: 0.85cqw 0 0;
  font-family: var(--font-body-stage);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------
   Left / right info blocks (KIOSK / CAFE)
----------------------------------------------------------- */
.info-block{
  position: absolute;
  top: 17.4cqw;
  z-index: 2;
  width: 26cqw;
}

.info-block--left{ left: 17.25cqw; }
.info-block--right{ left: 72.5cqw; }

.tier-label{
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 67px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 0.6;
}

.tier-price{
  margin: 0.2cqw 0 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 41px;
  color: var(--ink);
}

.specs{
  list-style: none;
  margin: 1.5cqw 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25cqw;
}

.specs li{
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  font-family: var(--font-body-stage);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}

.specs .bar{
  display: inline-block;
  width: 0.2cqw;
  height: 1cqw;
  background: var(--ink);
  border-radius: 1px;
  flex: none;
}

/* -----------------------------------------------------------
   Payout pills
----------------------------------------------------------- */
.payout-pill{
  position: absolute;
  top: 34cqw;
  width: 27.4cqw;
  height: 6.6cqw;
  min-height: 44px;
  background: var(--pill-bg);
  border-radius: 999px;
  box-shadow: 0 0.5cqw 1.4cqw rgba(53, 28, 21, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2.55cqw;
  z-index: 2;
}


.payout-pill--left{ left: 13.8cqw; }
.payout-pill--right{ left: 61.2cqw;
text-align: right;
padding-right: 2.55cqw;
 }

.payout-label{
  margin: 15px 0px 0px ;
  font-family: var(--font-body-stage);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  line-height: 0.2;
}

.payout-amount{
  margin: 0.15cqw 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 35px;
  color: var(--ink);
}

/* -----------------------------------------------------------
   Center kiosk / cafe image
----------------------------------------------------------- */
.kiosk-image{
  position: absolute;
  top: 16cqw;
  left: 51.8cqw;
  transform: translateX(-50%);
  width: 48.7cqw;
  height: auto;
  object-fit: contain;
  object-position: center;
  z-index: 3;
  pointer-events: none;
}

/* -----------------------------------------------------------
   Bottom dashed structure box
----------------------------------------------------------- */
.structure-box{
  position: absolute;
  top: 46cqw;
  left: 14.5cqw;
  width: 74%;
  height: 5.1cqw;
  min-height: 52px;
  border: 0.14cqw dashed var(--ink);
  border-radius: 1.9cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.4cqw;
  z-index: 2;
  margin:  0 auto;
}

.structure-item{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--ink);
  white-space: nowrap;
}

.or-pill{
  flex: none;
  min-width: 4.6cqw;
  height: 1.9cqw;
  background: var(--pill-bg);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  color: var(--ink);
  padding: 0 0.6cqw;
  box-shadow: 0 0.2cqw 0.5cqw rgba(53, 28, 21, 0.06);
}
.divider-line {
  position: absolute;
  top: 0;
  left: 40.5%;
  width: 0;
  height: 100%;
  border-left: 2px dashed #3a2b1f;
  transform: translateX(-50%) rotate(22deg);
  transform-origin: top center;
  z-index: 1;
}

/* The OR pill, centered over the line */
.or-pill {
  position: absolute;
  left: 39%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #3a2b1f;
  font-weight: 800;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  z-index: 3;
}
/* -----------------------------------------------------------
   Footnote
----------------------------------------------------------- */
.footnote{
  position: absolute;
  top: 52cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 70cqw;
  text-align: center;
  margin: 0;
  font-family: var(--font-body-stage);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  z-index: 2;
}

/* -----------------------------------------------------------
   Reduced motion / accessibility niceties
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}
/* ==========================================================
   BONUM CHA — STAGGERED IMAGE GALLERY
   Reference canvas: 1600px × 620px
   ========================================================== */

/* ==========================================================
   DESKTOP GALLERY CONTAINER
   Uses aspect-ratio so the whole composition scales as one
   unit down through the tablet range while keeping every
   column's relative position identical to the reference.
   ========================================================== */
.bonum-gallery {
    position: relative;
    width: 100%;
    max-width: 1897px;
    aspect-ratio: 1897 / 914;
    margin: 0 auto;
    margin-top: 180px;
    overflow: hidden;
    background: #ffffff;
}

.gallery-column {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ODD COLUMNS (1, 3, 5) — all start/end on the same line */
.column-peek-left,
.column-3,
.column-5 {
    top: 2.2%;
    width: 18.5%;
}

/* EVEN COLUMNS (2, 4, 6) — all start/end on the same line */
.column-2,
.column-4,
.column-peek-right {
    top: 15.3%;
    width: 18.5%;
}

.column-peek-right {
    /* top: 15.3%; */
    width: 318px;
}
.column-peek-left {
    /* top: 15.3%; */
    width: 318px;
}


/* left positions stay individual per column */
.column-peek-left { left: -16%; }
.column-2          { left: 6%; width: 318px; }
.column-3          { left: 28.5%;width:318px;  }
.column-4          { left: 51%; width:318px; }
.column-5          { left: 73.2%; width:318px; }
.column-peek-right { left: 95.5%; }

/* Mobile-only line break in the headline */
@media (min-width: 768px) {
  .headline__br { display: none; }
}

@media (max-width: 767px) {

  /* ---------- Stage: normal flow, watermark gradient at the top, white below ---------- */
  .stage-scroll {
    overflow-x: hidden;
    background: #fff;
  }

  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    aspect-ratio: auto;
    padding: 17.5vw 0 18vw;
    background: #fff url("./images/Mobile/5.png") center top / 100% auto no-repeat;
    overflow: hidden;
  }

  /* Undo desktop absolute positioning for every stage child */
  .headline,
  .info-block,
  .payout-pill,
  .kiosk-image,
  .structure-box {
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  /* ---------- Heading ---------- */
  .headline {
    width: 100%;
    padding: 0 4vw;
  }

  .headline h1 {
    font-size: 7.8vw;
    font-weight: 700;
    line-height: 1.25;
  }

  .subtitle {
    margin: 1.2vw 0 0;
    font-family: var(--font-body);
    font-size: 3.3vw;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
    white-space: nowrap;
  }

  /* ---------- One peach card: Kiosk, kiosk artwork, Cafe ---------- */
  .format-card {
    width: 66.7vw;
    margin-top: 8.5vw;
    padding: 8vw 0 14.3vw;
    background: rgba(253, 234, 221, 0.92);
    border-radius: 5.3vw;
    text-align: center;
  }

  .info-block {
    width: 100%;
    padding: 0;
  }

  .tier-label {
    font-size: 10.4vw;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .tier-price {
    margin: 1vw 0 0;
    font-size: 10.6vw;
    line-height: 1.1;
  }

  .specs {
    margin: 5.2vw 0 0;
    padding: 0 0 0 8.9vw;
    gap: 4.9vw;
    align-items: flex-start;
    text-align: left;
  }

  .specs li {
    gap: 3vw;
    font-family: var(--font-body);
    font-size: 4.7vw;
    font-weight: 500;
    line-height: 1.3;
  }

  .specs .bar {
    width: 0.8vw;
    height: 4.2vw;
    border-radius: 0.4vw;
  }

  /* ---------- Payout pills ---------- */
  .payout-pill {
    width: 53.4vw;
    height: 15.6vw;
    min-height: 0;
    margin: 7.8vw auto 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 1vw 3vw rgba(53, 28, 21, 0.06);
  }

  .payout-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 3.1vw;
    font-weight: 500;
    line-height: 1.2;
  }

  .payout-amount {
    margin: 0.3vw 0 0;
    font-size: 5.2vw;
    line-height: 1.15;
  }

  /* Kiosk artwork spans the full screen width, overhanging the card */
  .kiosk-image {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 5.7vw -16.65vw 3.6vw;
  }

  /* ---------- 2% MMPP / ( Or ) / 15% Net Revenue Share ---------- */
  .structure-box {
    width: 64vw;
    height: auto;
    min-height: 0;
    margin: 9vw 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4.2vw;
  }

  .structure-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 12.2vw;
    padding: 2.4vw 4vw;
    border: 1px dashed var(--ink);
    border-radius: 8.2vw;
    font-family: var(--font-body);
    font-size: 5.7vw;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .divider-line {
    display: none;
  }

  .or-pill {
    position: static;
    align-self: center;
    transform: none;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;      /* hides the "OR" text node */
    line-height: 0;
  }

  .or-pill::before {
    content: "( Or )";
    font-family: var(--font-body);
    font-size: 5.7vw;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
  }

  /* not present in the mobile reference */
  .footnote {
    display: none;
  }
}

@media (max-width: 1199px) {
    .gallery-column {
        gap: 1.4%;
    }
}

/* ==========================================================
   MOBILE — below 768px
   Switch to a 2-column staggered layout. Desktop absolute
   positions are intentionally NOT reused here.
   ========================================================== */

/* Mobile-only marquee: hidden on tablet/desktop so those layouts are untouched */
.gallery-marquee {
    display: none;
}

@media (max-width: 767px) {
    /* Mobile: all gallery photos in one auto-scrolling strip */
    .bonum-gallery {
        aspect-ratio: auto;
        height: auto;
        margin-top: 0;
        padding: 0;
        overflow: hidden;
    }

    .bonum-gallery .gallery-column {
        display: none;
    }

    .gallery-marquee {
        display: block;
        overflow: hidden;
    }

    .gallery-marquee__track {
        display: flex;
        gap: 2vw;
        width: max-content;
        animation: gallery-marquee 40s linear infinite;
    }

    .gallery-marquee__image {
        display: block;
        width: 44vw;
        height: 52vw;
        object-fit: cover;
        border-radius: 2vw;
        flex-shrink: 0;
    }

    /* Track holds the list twice; moving by half (+ half a gap) lands exactly on the copy */
    @keyframes gallery-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-50% - 1vw)); }
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .gallery-marquee { overflow-x: auto; }
    .gallery-marquee__track { animation: none; }
}

/* Section: locked to the exact image aspect ratio (2548:1579) so background-size:cover
   never crops the artwork or leaves extra vertical whitespace, at any width up to 1280px */
.beverage-section {
  position: relative;
  width: 100%;
  max-width: 1529px;
  margin: 0 auto;
  aspect-ratio: 2548 / 1579;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.content {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0 auto;
}

/* Reset default margins so nothing adds unintended spacing */
.heading-area h2,
.heading-area p,
.stat-value,
.stat-desc {
  margin: 0;
}

/* Heading & Subtitle — measured cap-height puts the title starting at ~166px from
   the top of the section, which a 34px heading with this top offset reproduces */
.heading-area {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 40px;
  margin: 0 auto;
}

.heading-area h2 {
  font-family: var(--font-primary);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.2;
  color: #3a1f14;
}

.stat-value
{
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 800;
}

.beverage-first-para
{
  font-family: var(--font-body);
  font-size: 30px;
}
/* Stat row — measured card width is ~155px with a ~10px gap between cards,
   centered as a group, which sits at ~249px from the top of the section */
.stats-container {
  position: absolute;
  top: 401px;
  left: 132px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
}

/* No background, border-radius, shadow, or box on the card itself —
   it's purely a layout container so the supplied image shows through */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 31px;
  width: 155px;
}

.stat-accent {
  flex-shrink: 0;
  display: block;
  width: 5px;
  height: 60px;
  background: #f7942d;
  border-radius: 4px;
  position: relative;
  /* left: 2; */
  top: 3px;
  
}

.stat-text{
  text-align: left;
}


.stat-value {
  font-family: var(--font-primary);
  font-size: 31px;
  font-weight: 800;
  color: #141414;
  line-height: 1.15;
  white-space: nowrap;
}

.stat-desc {
  font-family: var(--font-body);
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #2b2b2b;
}

/* Hide the mobile-only line breaks on tablet/desktop */
@media (min-width: 768px) {
  .beverage-br { display: none; }
}

@media (max-width: 767px) {

  /* Normal-flow layout: text sits over the sky of Mobile/3.png, cups fill the bottom.
     Section height = ~35vw text band + the full 384x576 artwork (150vw). */
  .beverage-section {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 185vw;
    aspect-ratio: auto;
    padding: 8vw 0 0;
    background-color: #fff;
    background-image: url("./images/Mobile/3.png") !important;   /* beats the inline desktop image */
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    overflow: hidden;
  }

  /* Undo the desktop/tablet absolute + scale() positioning */
  .beverage-section .heading-area,
  .beverage-section .stats-container {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
  }

  .beverage-section .heading-area {
    padding: 0 4vw;
    text-align: center;
  }

  .beverage-section .heading-area h2 {
    margin: 0;
    font-size: 7.8vw;
    line-height: 1.15;
    letter-spacing: 0;
    color: #3a2317;
  }

  .beverage-section .heading-area .beverage-first-para {
    margin: 4.2vw 0 0;
    font-size: 3.4vw;
    line-height: 1.35;
    font-weight: 400;
    color: #3a2317;
  }

  /* 2 x 2 stats */
  .beverage-section .stats-container {
    display: grid;
    grid-template-columns: 46.4vw auto;
    justify-content: start;
    row-gap: 7vw;
    margin-top: 11vw;
    padding: 0 0 0 6.9vw;   /* + heading-area's 4vw = accent at ~11vw */
    list-style: none;
    text-align: left;
  }

  .beverage-section .stat-card {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    gap: 3vw;
  }

  .beverage-section .stat-accent {
    left: 0;
    top: 0.8vw;
    width: 1.3vw;
    height: 13vw;
    background: #fd8c28;
    border-radius: 0.8vw;
  }

  .beverage-section .stat-value {
    font-size: 6vw;
    line-height: 1.15;
    color: #000;
  }

  .beverage-section .stat-text .stat-desc {
    width: auto;
    margin: 0.6vw 0 0;
    font-size: 3.3vw;
    line-height: 1.3;
    font-weight: 500;
    color: #000;
  }
}
/* Scoped styles for .ioj-section — safe to embed in an existing page */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

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

.ioj-section {
    --ioj-text-dark: #3a2419;
    --ioj-orange-1: #f7941e;
    --ioj-orange-2: #e2540d;

    position: relative;
    width: 100%;
    max-width: 1600px;
    height: 900px;
    margin: 0 auto;
    overflow: visible;
    background: #fffdfb;
    font-family: 'Poppins', 'Nunito', Arial, sans-serif;

}



.ioj-section .bg-pattern {
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
  
    z-index: 0;
    pointer-events: none;
      /* filter: brightness(0) invert(1); */
}



/* ===================== TITLE ===================== */
.ioj-section .title-row {
    position: absolute;
    top: 95px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 5;
    margin: 0;
}

.ioj-section .title-row h2 {
    font-size: 43px;
    font-weight: 800;
    color: var(--ioj-text-dark);
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
}

.ioj-section .dash {
    display: inline-block;
    height: 0;
    border-top: 2px dashed #6b4a36;
    opacity: 0.65;
}
.ioj-section .dash-left { width: 210px; }
.ioj-section .dash-right { width: 210px; }

/* ===================== PROCESS ===================== */
.ioj-section .main-process {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 900px;
    z-index: 3;
}

.ioj-section .step {
    position: absolute;
    width: 211px;
    height: 238px;
}

.ioj-section .step-1 { left: 206px; top: 212px; }
.ioj-section .step-2 { left: 385px; top: 320px; }
.ioj-section .step-3 { left: 566px; top: 212px; }
.ioj-section .step-4 { left: 747px; top: 320px; }
.ioj-section .step-5 { left: 924px; top: 212px; }
.ioj-section .step-6 { left: 1095px; top: 320px; width: 200px; }

.ioj-section .step-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.ioj-section .step-content {
    position: absolute;
    left: 0;
    top: 8%;
    width: 100%;
    height: 78%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    z-index: 2;
    padding: 0 14px;
    text-align: center;
}

.ioj-section .step-icon {
    width: 50px;
    height: 50px;
    color: #1f4a4a;
    flex-shrink: 0;
    margin-top: 6px;
}

.ioj-section .step-content p {
    font-size: 16px;
    font-weight: 700;
    color: var(--ioj-text-dark);
    line-height: 1.3;
    margin: 0;
}

/* ===================== CTA ===================== */
.ioj-section .cta {
    position: absolute;
    top: 544px;
    left: 0;
    width: 100%;
    z-index: 5;
    text-align: center;
    /* margin-bottom: 1000px; */
    margin-top: 100px;
}

.ioj-section .cta-line1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ioj-text-dark);
    margin: 0;
}

.ioj-section .cta-line2 {
    font-size: 38px;
    font-weight: 800;
    color: var(--ioj-text-dark);
    margin-top: 6px;
}

.ioj-section .pills {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ioj-section .pill {
    display: inline-block;
    padding: 10px 20px;
    border: 1.5px dashed #8a8a8a;
    border-radius: 30px;
    font-size: 16px;
    color: var(--ioj-text-dark);
    background: #fff;
    white-space: nowrap;
}

.ioj-section .cta-final {
    margin-top: 26px;
    font-size: 26px;
    font-weight: 700;
    color: var(--ioj-text-dark);
}

 .ioj-section .book-call {
  width: 360px;
  height: 60px;
  margin-top: 20px;
  padding: 0 46px 0 60px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, #ff8d26 0%, #eb4d05 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 29px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: none;
}

.ioj-section .arrow-book {
  width: 44px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ioj-section .arrow-book img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}



.ioj-section .book-call .arrow {
    font-size: 24px;
    font-weight: 700;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .ioj-section {
        height: auto;
        aspect-ratio: 1600/900;
        min-height: 420px;
    }
    .ioj-section .title-row,
    .ioj-section .main-process,
    .ioj-section .cta {
        transform: scale(0.62);
        transform-origin: top center;
        left: 50%;
        margin-left: -800px;
        width: 1600px;
    }
    .ioj-section .title-row { top: 55px; }
    .ioj-section .cta { top: 385px; }
}

@media (max-width: 640px) {
    .ioj-section .title-row,
    .ioj-section .main-process,
    .ioj-section .cta {
        transform: scale(0.38);
    }
    .ioj-section .title-row { top: 25px; }
    .ioj-section .cta { top: 230px; }
}

/* =========================================================
   RESET & BASE
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  background: #ffffff;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #141414;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   SECTION SHELL
========================================================= */
.enquiry-section {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: #ffffff;
}

.enquiry-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 64px 32px 55px;
}

/* =========================================================
   HEADER
========================================================= */
.form-header {
  text-align: center;
  margin-bottom: 40px;
  max-width: 920px;
}

.form-title {
  /* font-family: 'Poppins', sans-serif; */
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 41px;
  color: #03817c;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.form-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
  color: #141414;
}

/* =========================================================
   FORM SHELL
========================================================= */
.enquiry-form {
  width: 100%;
  max-width: 1059px;
}

/* =========================================================
   FIELDS
========================================================= */
.fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* margin-bottom: 56px; */
}

.field-row {
  display: flex;
  gap: 14px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

.field {
  position: relative;
  background: #fffbf3;
  border-radius: 12px;
  height: 70px;
}

.field-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 200px 0 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #141414;
}

.field-input:focus {
  outline: 2px solid #03817c;
  outline-offset: -2px;
  border-radius: 12px;
}

.field-input::placeholder {
  color: #adadad;
  font-weight: 500;
}

.field-sample {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: 400;
  color: rgba(120, 120, 120, 0.22);
  pointer-events: none;
  white-space: nowrap;
}

/* Select fields */
.field-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 64px 0 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #adadad;
  cursor: pointer;
}

.field-select:focus {
  outline: 2px solid #03817c;
  outline-offset: -2px;
  border-radius: 12px;
}

.field-select option {
  color: #141414;
}

.chevron {
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* =========================================================
   QUESTIONS
========================================================= */
.questions {
  width: 100%;
  /* margin-bottom: 56px; */
}

.question-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 24px;
}

.question-row + .question-row {
  border-top: 1px solid #c7c7c7;
}

.question-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #141414;
  max-width: 62%;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #141414;
  cursor: pointer;
}

.radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.radio-visual {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #000000;
  position: relative;
  flex-shrink: 0;
}

.radio-input:checked + .radio-visual::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: #000000;
  border-radius: 50%;
}

.radio-input:focus-visible + .radio-visual {
  outline: 2px solid #03817c;
  outline-offset: 2px;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */
.submit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 31px;
  gap: 16px;
  width: 400px;
  max-width: 100%;
  height: 65px;
  margin: 0px auto 30px;
  border: none;
  border-radius: 27px;
  background: #03817c;
  color:#fcefd9;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 28px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.footer-arrow{
  height: 30px;
  width: 30px;
    /* color:#fffbf3; */
color: #fcefd9;
}

.submit-btn:hover {
  background: #026a66;
}

.submit-btn:focus-visible {
  outline: 2px solid #026a66;
  outline-offset: 3px;
}

/* =========================================================
   FOOTER
========================================================= */
.page-footer {
  width: 100%;
  height: 110px;
  background: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer-title {
  font-size: 22px;
  font-weight: 500;
  color: #6b6b6b;
}

.footer-sub {
  font-size: 17px;
  font-weight: 700;
  color: #8f8f8f;
}

/* =========================================================
   RESPONSIVE — TABLET (≤1024px)
========================================================= */
@media (max-width: 1024px) {
  .enquiry-content {
    padding: 48px 24px 72px;
  }

  .form-header {
    margin-bottom: 48px;
  }

  .form-title {
    font-size: 40px;
  }

  .form-subtitle {
    font-size: 19px;
  }

  .fields {
    gap: 10px;
    margin-bottom: 40px;
  }

  .field {
    height: 64px;
    border-radius: 10px;
  }

  .field-input {
    font-size: 17px;
    padding: 0 130px 0 24px;
  }

  .field-sample {
    font-size: 26px;
    right: 24px;
  }

  .field-select {
    font-size: 17px;
    padding: 0 48px 0 24px;
  }

  .chevron svg {
    width: 18px;
    height: 11px;
  }

  .chevron {
    right: 24px;
  }

  .questions {
    margin-bottom: 40px;
  }

  .question-row {
    padding: 22px 0;
    gap: 20px;
  }

  .question-text {
    font-size: 18px;
  }

  .radio-group {
    gap: 26px;
  }

  .radio-option {
    font-size: 18px;
    gap: 9px;
  }

  .radio-visual {
    width: 20px;
    height: 20px;
  }

  .submit-btn {
    width: 340px;
    height: 62px;
    font-size: 20px;
    gap: 12px;
  }

  .submit-btn svg {
    width: 20px;
    height: 15px;
  }

  .page-footer {
    height: 90px;
  }

  .footer-title {
    font-size: 18px;
  }

  .footer-sub {
    font-size: 14px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE (≤560px)
========================================================= */
@media (max-width: 560px) {
  .enquiry-content {
    padding: 32px 16px 48px;
  }

  .form-title {
    font-size: 26px;
  }

  .form-subtitle {
    font-size: 15px;
  }

  .field-row {
    flex-direction: column;
    gap: 8px;
  }

  .field {
    height: 52px;
  }

  .field-input {
    font-size: 15px;
    padding: 0 16px;
  }

  .field-sample {
    display: none;
  }

  .field-select {
    font-size: 15px;
    padding: 0 40px 0 16px;
  }

  .question-row {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 18px 0;
  }

  .question-text {
    max-width: 100%;
    font-size: 15px;
  }

  .radio-group {
    gap: 18px;
  }

  .radio-option {
    font-size: 15px;
  }

  .radio-visual {
    width: 17px;
    height: 17px;
  }

  .submit-btn {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }
}


/* ==========================================================================
   MOBILE WIZARD — CSS
   Add to the END of your stylesheet (or link after it).

   Desktop safety: every class here starts with `mwz`, which nothing on your
   desktop page uses. The only rule outside the media query is
   `.mwz { display: none }`, which hides the new block on desktop.
   ========================================================================== */

.mwz { display: none; }

@media (max-width: 767px) {
  .hero__photo{
    display: none;
  }

  .mwz {
    /* Colour */
    --mwz-orange: #f36f21;          /* heading + selected ring */
    --mwz-orange-deep: #d95a0e;
    --mwz-navy: #1f3a78;            /* option text, buttons, step text */
    --mwz-peach: #ffe3d2;           /* card top */
    --mwz-peach-2: #ffd9c3;         /* card bottom */
    --mwz-error: #b3261e;
    /* Optional full-bleed background artwork, e.g. url("./images/mobile-bg.jpg") */
    --mwz-bg-image: none;

    --mwz-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Proportions measured from the reference (385px-wide screen):
       card 294px = 76.4vw, side padding 31px = 8vw, option height 36px, gap 10px */
    --mwz-card-w: clamp(264px, 76.4vw, 400px);
    --mwz-pad-x: clamp(20px, 8vw, 36px);
    --mwz-radius: clamp(10px, 2.6vw, 12px);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--mwz-font);
    color: var(--mwz-navy);
    background-color: #ee6a1b;
  background-image: url(./images/Mobile/2.png);
    background-size: cover;
    background-position: center;
  }

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



  /* ---------- Logo ---------- */

  .mwz__logo {
    display: block;
    width: clamp(120px, 35vw, 170px);   /* 135px @ 385 */
    height: auto;
    margin-top: max(env(safe-area-inset-top), clamp(20px, 7.3vw, 36px));
    position: relative;
    z-index: 2;
  }

  /* ---------- Card ---------- */

  .mwz__card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: var(--mwz-card-w);
    aspect-ratio: 294 / 279;            /* reference proportion; grows if content needs more */
    margin-top: clamp(16px, 6.8vw, 30px);
    padding: clamp(20px, 6.8vw, 30px) var(--mwz-pad-x) clamp(30px, 13vw, 52px);
    background: linear-gradient(180deg, var(--mwz-peach) 0%, var(--mwz-peach-2) 100%);
    border: 1px solid rgba(58, 30, 20, 0.6);
    border-radius: clamp(28px, 9.4vw, 40px);
    box-shadow: 0 10px 28px rgba(120, 40, 0, 0.32);
  }

  /* First step (no footer): fit the card to its content, no empty space below the options.
     Lives in the base mobile block so every phone breakpoint gets it. */
  .mwz__card:has(.mwz__footer[hidden]) {
    aspect-ratio: auto;
    padding-bottom: clamp(20px, 6.8vw, 30px);
  }

  .mwz__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;                     /* pushes the footer to the card's bottom */
    min-width: 0;
  }

  /* One step visible at a time; the entrance animation restarts each time a step is shown */
  .mwz__step { display: none; }

  .mwz__step.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    animation: mwz-in 0.24s ease-out;
  }

  @keyframes mwz-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .mwz__question {
    margin: 0 0 clamp(9px, 2.8vw, 13px);
    color: var(--mwz-orange);
    font-family: var(--mwz-font);
    font-weight: 600;
    font-size: clamp(22px, 7vw, 30px);  /* 27px @ 385 */
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .mwz__question:focus { outline: none; }

  /* ---------- Options ---------- */

  .mwz__options {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.6vw, 11px);       /* 10px @ 385 */
  }

  .mwz__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: clamp(36px, 9.4vw, 44px);
    padding: 8px clamp(12px, 4.7vw, 20px);
    font-family: var(--mwz-font);
    font-weight: 500;
    font-size: clamp(11.5px, 3.1vw, 13.5px);
    line-height: 1.25;
    color: var(--mwz-navy);
    text-align: left;
    background: #fff;
    border: 0;
    border-radius: var(--mwz-radius);
    box-shadow: 0 1px 3px rgba(80, 30, 0, 0.1);
    cursor: pointer;
    transition: box-shadow 0.16s ease, background-color 0.16s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: anywhere;
  }

  .mwz__option:active { transform: scale(0.985); }

  .mwz__option-meta {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
  }

  .mwz__option.is-selected {
    background: #fff5ee;
    box-shadow: inset 0 0 0 2px var(--mwz-orange);
  }

  .mwz__option.is-selected { color: var(--mwz-orange-deep); font-weight: 600; }

  /* ---------- Dropdown + form ---------- */

  .mwz__field { display: flex; flex-direction: column; gap: 4px; }
  .mwz__form { display: flex; flex-direction: column; gap: 10px; }

  .mwz__select,
  .mwz__input {
    width: 100%;
    min-height: 42px;
    padding: 0 clamp(12px, 4.7vw, 18px);
    font-family: var(--mwz-font);
    font-weight: 500;
    font-size: 16px;                    /* 16px prevents iOS zoom-on-focus */
    color: var(--mwz-navy);
    background-color: #fff;
    border: 0;
    border-radius: var(--mwz-radius);
    box-shadow: 0 1px 3px rgba(80, 30, 0, 0.1);
  }

  .mwz__input::placeholder { color: rgba(31, 58, 120, 0.5); }

  .mwz__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%231f3a78' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
  }

  .mwz__select:invalid { color: rgba(31, 58, 120, 0.5); }
  .mwz__select option { color: var(--mwz-navy); }

  .mwz__select:focus,
  .mwz__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mwz-orange);
  }

  .mwz__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--mwz-error); }

  .mwz__error {
    margin: 0;
    padding-left: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--mwz-error);
  }

  .mwz__error:empty,
  .mwz__error[hidden] { display: none; }

  .mwz__primary {
    width: 100%;
    min-height: 42px;
    margin-top: 6px;
    padding: 0 16px;
    font-family: var(--mwz-font);
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: var(--mwz-navy);
    border: 0;
    border-radius: var(--mwz-radius);
    cursor: pointer;
    transition: opacity 0.16s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mwz__primary:active:not(:disabled) { transform: scale(0.985); }
  .mwz__primary:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ---------- Thank you ---------- */

  .mwz__step--thanks.is-active {
    justify-content: center;
    text-align: center;
  }

  .mwz__step--thanks .mwz__question { margin-bottom: 10px; }

  .mwz__thanks-msg {
    margin: 0 0 18px;
    font-size: clamp(12.5px, 3.4vw, 14px);
    line-height: 1.5;
    color: var(--mwz-navy);
  }

  /* ---------- Footer: Back (left) / Step (right), no line, no progress ---------- */

  .mwz__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
  }

  .mwz__footer[hidden] { display: none; }

  .mwz__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    font-family: var(--mwz-font);
    font-weight: 600;
    font-size: clamp(11.5px, 3vw, 13px);
    line-height: 1;
    color: var(--mwz-navy);
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mwz__back[hidden] { display: none; }

  .mwz__step-count {
    margin-left: auto;                  /* stays on the right when Back is hidden */
    font-weight: 600;
    font-size: clamp(11.5px, 3vw, 13px);
    color: var(--mwz-navy);
    white-space: nowrap;
  }

  .mwz__option:focus-visible,
  .mwz__primary:focus-visible,
  .mwz__back:focus-visible {
    outline: 3px solid var(--mwz-navy);
    outline-offset: 2px;
  }

  /* ---------- Product artwork at the bottom ---------- */

  .mwz__products {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;                        /* full-bleed, aspect ratio preserved */
    height: auto;
    margin-top: auto;                   /* sits at the bottom; card can grow above it */
    padding-top: clamp(20px, 6.5vw, 32px);
  }

  /* ---------- Very small phones ---------- */

  @media (max-width: 340px) {
    .mwz__card { padding-left: 18px; padding-right: 18px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mwz__step.is-active { animation: none; }
    .mwz__option,
    .mwz__primary { transition: none; }
  }
}

/* ---------- Mobile wizard: keep the drinks clear of the card ----------
   With 5–6 options the card grows. background-size: cover then re-crops 2.png and the drinks
   slide up under the card. Instead: pin the artwork to the bottom at full width (its drinks fill
   the bottom ~72vw) and reserve that space below the card, so a taller card pushes the section
   down rather than covering the drinks. The top edge colour of 2.png fills any extra height. */
@media (max-width: 767px) {
  .mwz {
    padding-bottom: 72vw;
    background-color: #f86c17;
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;       /* otherwise the artwork tiles above itself */
  }
}

/* ---------- Mobile wizard: tuning per phone width (wizard only; desktop and other sections untouched) ---------- */

/* ≤359px (small Android, iPhone SE 1st gen) */
@media (max-width: 359px) {
  .mwz__logo { width: 116px; }
  .mwz__question { font-size: 22px; }
  .mwz__option {
    min-height: 36px;
    font-size: 11.5px;
  }
  .mwz__step-count,
  .mwz__back { font-size: 11.5px; }
}

/* 360–394px (most Android phones, iPhone 12/13/14/15) */
@media (min-width: 360px) and (max-width: 394px) {
  .mwz__logo { width: 132px; }
  .mwz__question { font-size: 26px; }
  .mwz__option {
    min-height: 36px;
    font-size: 12px;
  }
  .mwz__step-count,
  .mwz__back { font-size: 12px; }
}

/* 395–415px (e.g. 412px Android, 414px iPhone Plus/Max) */
@media (min-width: 395px) and (max-width: 415px) {
  .mwz {
    --mwz-card-w: 310px;
    --mwz-pad-x: 32px;
  }
  .mwz__logo { width: 140px; }
  .mwz__card { border-radius: 38px; }
  .mwz__question { font-size: 28px; }
  .mwz__option {
    min-height: 38px;
    font-size: 13px;
  }
  .mwz__options { gap: 10px; }
  .mwz__step-count,
  .mwz__back { font-size: 12.5px; }
}

/* 420–480px (large phones / phablets) */
@media (min-width: 420px) and (max-width: 480px) {
  .mwz {
    --mwz-card-w: min(336px, 76vw);
    --mwz-pad-x: 34px;
  }
  .mwz__logo { width: 152px; }
  .mwz__card {
    margin-top: 28px;
    border-radius: 40px;
  }
  .mwz__question { font-size: 30px; }
  .mwz__option {
    min-height: 41px;
    font-size: 13.5px;
  }
  .mwz__options { gap: 11px; }
  .mwz__step-count,
  .mwz__back { font-size: 13px; }
}

/* 481–767px (phones in landscape, small tablets) */
@media (min-width: 481px) and (max-width: 767px) {
  .mwz {
    --mwz-card-w: 360px;
    --mwz-pad-x: 36px;
  }
  .mwz__logo { width: 170px; }
  .mwz__card {
    margin-top: 30px;
    border-radius: 40px;
  }
  .mwz__question { font-size: 30px; }
  .mwz__option {
    min-height: 44px;
    font-size: 14px;
  }
  .mwz__options { gap: 11px; }
  .mwz__step-count,
  .mwz__back { font-size: 13px; }
}

/* Desktop/tablet: ignore the mobile-only line breaks */
@media (min-width: 768px) {
  .hero__br { display: none; }
}

/* Mobile only */
@media (max-width: 767px) {
  .hero {
    overflow-x: clip;
  }

  /* Brown block: height follows content; first line of heading ~56px from top at 385px */
  .hero__top {
    height: auto;
    padding: clamp(40px, 14.5vw, 72px) 0 0;
  }

  /* Same brown continues; the last 35% of the CTA overlaps into the white strip below */
  .hero__bottom {
    --cta-h: clamp(36px, 10vw, 50px);
    --pb: 16px;
    position: relative;
    display: flow-root;   /* stops .cards margin collapsing out and exposing a white strip */
    padding-bottom: var(--pb);
    background: linear-gradient(
      to bottom,
      var(--brown) calc(100% - var(--pb) - var(--cta-h) * 0.35),
      var(--white) 0
    );
  }

  /* 1. Heading: ~28px / 31px line-height at 385px */
  .hero__heading {
    font-size: clamp(22px, 7.3vw, 40px);
    line-height: 1.1;
    padding: 0 12px;
  }

  /* 2. Description: ~19px / 26px line-height */
  .hero__subheading {
    font-size: clamp(15px, 5vw, 24px);
    line-height: 1.35;
    margin-top: clamp(10px, 3.6vw, 18px);
    padding: 0 16px;
  }

  /* 3. Category buttons: 3 + 2 centered, ~94x56px, 16px radius, 5px/12px gaps */
  .cards {
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;   /* second row (Matcha / Ice Cream Tea) centered */
    overflow: visible;
    align-items: stretch;
    gap: 12px 5px;
    width: 76%;
    max-width: 340px;
    margin: clamp(22px, 7.8vw, 40px) auto 0;
    padding: 0;
  }

  .card {
    width: calc((100% - 10px) / 3);
    height: clamp(46px, 14.5vw, 64px);
    border-radius: 16px;
  }

  .card__label {
    font-size: clamp(12px, 3.9vw, 17px);
    line-height: 1;
  }

  /* 4. Tagline: ~21px / 26px line-height, peach-cream */
  .hero__tagline {
    color: #ffe3cf;
    font-size: clamp(17px, 5.5vw, 28px);
    line-height: 1.25;
    margin-top: clamp(22px, 8vw, 40px);
    padding: 0 16px;
  }

  /* 5. CTA: ~304x38px pill, straddling the brown/white edge */
  .hero__cta {
    display: block;
    box-sizing: border-box;
    width: 79%;
    max-width: 400px;
    height: var(--cta-h);
    margin: clamp(36px, 13.8vw, 64px) auto 0;
    padding: 0;
    font-size: clamp(14px, 4.8vw, 22px);
    white-space: nowrap;
  }
}

.enquiry-toast {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      max-width: 90vw;
      padding: 14px 24px;
      border-radius: 8px;
      color: #fff;
      font-size: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
      transition: opacity .4s ease;
    }
    .enquiry-toast--success { background: #03817c; }
    .enquiry-toast--error   { background: #b3261e; }
    .enquiry-toast.is-hiding { opacity: 0; }


    @media (max-width: 767px) {

  /* 1u = 1vw, capped at 480px wide, so the layout scales from 320px to 480px and stays centered above that */
  .ioj-section {
    --u: min(1vw, 4.8px);
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    max-width: none;
    padding: calc(21.3 * var(--u)) 0 calc(18 * var(--u));
    /* Scalloped top from Mobile/6.png (1181x410, transparent between the scallops).
       307.5vw = native size on a 384px screen, so each scallop is ~42px like the mockup
       and scales with the viewport. Solid #f3f3f3 continues below; white shows in the gaps. */
    background:
      url("./images/Mobile/6.png") center top / 307.5vw auto no-repeat,
      linear-gradient(#f3f3f3, #f3f3f3) 0 12vw / 100% 100% no-repeat,
      #fff;
    overflow: hidden;
  }

  /* The ≤1024px / ≤640px rules scale these as a 1600px canvas; undo that here */
  .ioj-section .title-row,
  .ioj-section .main-process,
  .ioj-section .cta {
    transform: none;
    margin-left: 0;
    left: auto;
    top: auto;
    width: 100%;
  }

  /* ---------- Scalloped top edge: desktop pattern image hidden, Mobile/6.png used instead ---------- */
  .ioj-section .pattern {
    display: none;
  }

  /* scallops now come from Mobile/6.png (see .ioj-section background) */
  .ioj-section::before {
    content: none;
  }

  /* ---------- Heading ---------- */
  .ioj-section .title-row {
    position: relative;
    top: auto;
    left: auto;
    gap: 0;
    margin: 0 0 calc(10 * var(--u));
    padding: 0 calc(4 * var(--u));
  }

  .ioj-section .dash {
    display: none;
  }

  .ioj-section .title-row h2 {
    max-width: 10.2em;
    font-size: calc(8.8 * var(--u));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    text-wrap: balance;   /* keeps "From Investment" / "to Opening Day" */
  }

  /* ---------- Circle stack ---------- */
  .ioj-section .main-process {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ioj-section .step-asset {
    display: none;   /* rings are drawn with CSS borders on mobile */
  }

  .ioj-section .main-process .step {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    width: calc(48.6 * var(--u));
    height: calc(48.6 * var(--u));
    border: max(1.5px, calc(0.55 * var(--u))) solid;
    border-radius: 50%;
    background: transparent;
  }

  .ioj-section .main-process .step + .step {
    margin-top: calc(-3.9 * var(--u));
  }

  .ioj-section .main-process .step-1 { border-color: #1fb0b5; }
  .ioj-section .main-process .step-2 { border-color: #4fd0d8; }
  .ioj-section .main-process .step-3 { border-color: #e8a020; }
  .ioj-section .main-process .step-4 { border-color: #f7c65a; }
  .ioj-section .main-process .step-5 { border-color: #c98a12; }
  .ioj-section .main-process .step-6 { border-color: #24494a; }

  .ioj-section .step-content {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: calc(8.3 * var(--u)) calc(4 * var(--u)) 0;
    justify-content: flex-start;
  }

  .ioj-section .step-icon {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    margin-top: 0px;
    object-fit: contain;
  }

  .ioj-section .step-content p {
    margin-top: calc(3.6 * var(--u));
    font-size: calc(4.6 * var(--u));
    font-weight: 500;
    line-height: 1.25;
  }

  /* single-line label sits at the same vertical center as the two-line labels */
  .ioj-section .step-6 .step-content p {
    margin-top: calc(7.7 * var(--u));
  }

  /* ---------- CTA: flows below the circles on a white band (grey ends above it) ---------- */
  .ioj-section .cta {
    position: relative;
    margin-top: calc(25 * var(--u));
    padding: calc(15 * var(--u)) calc(6 * var(--u)) 0;
    background: #fff;
    /* full-bleed white to the section's sides and bottom */
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax -100vmax);
  }

  .ioj-section .cta-line1 {
    font-size: calc(4.8 * var(--u));
    line-height: 1.2;
    text-wrap: balance;
  }

  .ioj-section .cta-line2 {
    margin-top: calc(3 * var(--u));
    font-size: calc(7.4 * var(--u));
    line-height: 1.2;
    text-wrap: balance;
  }

  .ioj-section .pills {
    margin-top: calc(6 * var(--u));
    flex-direction: column;
    gap: calc(2.5 * var(--u));
  }

  .ioj-section .pill {
    padding: calc(2.6 * var(--u)) calc(5 * var(--u));
    font-size: calc(3.8 * var(--u));
    text-align: center;
    white-space: normal;
  }

  .ioj-section .cta-final {
    margin-top: calc(6 * var(--u));
    font-size: calc(5.2 * var(--u));
  }

  .ioj-section .book-call {
    width: calc(70 * var(--u));
    height: calc(13.5 * var(--u));
    margin-top: calc(6 * var(--u));
    padding: 0 calc(8 * var(--u)) 0 calc(11 * var(--u));
    font-size: calc(6.2 * var(--u));
    font-weight: 600;
  }

  .ioj-section .arrow-book {
    width: calc(11 * var(--u));
    height: calc(6 * var(--u));
  }

  /* ---------- Enquiry: the mobile wizard at the top replaces the desktop form ---------- */
  .enquiry-section {
    min-height: 0;
  }

  /* whole desktop form hidden: the mobile wizard at the top replaces it */
  .enquiry-content,
  .enquiry-section .enquiry-form,
  .enquiry-section .submit-btn {
    display: none;
  }

  .page-footer {
    height: auto;
    padding: min(8vw, 38px) 4vw;
    background: #fff;
    gap: min(1.5vw, 7px);
    text-align: center;
  }

  .footer-title {
    font-size: min(3.4vw, 16px);
  }

  .footer-sub {
    font-size: min(2.6vw, 12.5px);
  }
}

/* Tablet: space above Submit now that the button sits inside the form again */
@media (min-width: 768px) and (max-width: 1024px) {
  .submit-btn { margin-top: 32px; }
}

/* ==========================================================================
   DESKTOP (≥1025px) — proportional layout from the 2548px-wide desktop mockup
   --d = one mockup pixel. Every size below is "mockup px × --d", so each
   section keeps the mockup's proportions at 1240, 1440, 1920, 2560…
   Tablet (768–1024) and mobile (≤767) rules above are not touched.
   Small copy uses max(<floor>px, …) so it stays readable on ~1240px screens.
   ========================================================================== */
@media (min-width: 1025px) {
  :root { --d: calc(100vw / 2548); }

  /* ---------------- HERO ---------------- */
  /* Matches the PSD at 100%: the centre 1890px of 2.jpg (2548x955), sides cropped
     so the drinks appear larger. object-fit: cover keeps the crop centred. */
  .hero__photo { aspect-ratio: 1890 / 955; }

  /* Logo placement relative to that 1890px frame (187px wide, 230px from left, 25px from top) */
  .hero__logo {
    top: 2.6%;
    left: 12.2%;
    width: 9.9%;
    min-width: 0;
    max-width: none;
  }

  /* Brown intro band + cards + CTA: sized like the PSD at 100% on the 1890px hero frame,
     so --h (1 PSD px on a 1890px frame) is used instead of --d (1 px of the 2548 mockup). */
  .hero { --h: calc(100vw / 1890); }

  .hero__top {
    height: calc(461 * var(--h));
    padding-top: calc(125 * var(--h));
  }

  .hero__heading {
    font-size: calc(58 * var(--h));
    line-height: 1.1;
    white-space: nowrap;
    padding: 0;
  }

  .hero__subheading {
    font-size: calc(30 * var(--h));
    margin-top: calc(12 * var(--h));
    padding: 0;
  }

  /* back in normal flow (was absolute + a 246px margin on the next section) */
  .hero__bottom {
    position: relative;
    display: flow-root;
  }

  .cards {
    gap: calc(12 * var(--h));
    margin-top: calc(-130 * var(--h));   /* cards rise into the brown band */
    padding: 0;
    justify-content: center;
    overflow: visible;
  }

  .card {
    width: calc(278 * var(--h));
    height: calc(130 * var(--h));
    border-radius: calc(44 * var(--h)) calc(44 * var(--h)) 0 0;
  }

  .card__label {
    font-size: calc(48 * var(--h));
    line-height: 0.95;
  }

  .hero__tagline {
    font-size: calc(38 * var(--h));
    line-height: 1.2;
    margin-top: calc(60 * var(--h));
    padding: 0;
  }

  .hero__cta {
    display: block;
    width: calc(740 * var(--h));
    max-width: none;
    height: calc(88 * var(--h));
    margin: calc(43 * var(--h)) auto calc(88 * var(--h));
    font-size: calc(46 * var(--h));
  }

  /* ---------------- ABOUT ---------------- */
  /* Sized like the PSD at 100% on the same 1890px frame as the hero (--h, not --d) */
  .bonum-about { --h: calc(100vw / 1890); }

  .bonum-about {
    position: relative;
    z-index: 2;                          /* road artwork overlaps the sky below */
    width: 100%;
    max-width: none;
    min-height: 0;
    height: calc(517 * var(--h));
    margin: 0;
    overflow: visible;
  }

  .bonum-about__container {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    padding: 0;
  }

  .bonum-about__content {
    position: absolute;
    left: calc(239 * var(--h));   /* 568 in the 2548 mockup − 329 cropped each side */
    top: calc(80 * var(--h));
    flex: none;
    width: calc(640 * var(--h));
    max-width: none;
  }

  .bonum-about__heading {
    font-size: calc(58 * var(--h));
    line-height: 0.97;
    text-align: left;
    margin: 0 0 calc(26 * var(--h));
  }

  .bonum-about__br { display: inline; }   /* mockup breaks after "beverage-led" */

  .bonum-about__description {
    max-width: calc(540 * var(--h));
    font-size: max(12px, calc(24 * var(--h)));
    line-height: 1.34;
    text-align: left;
    color: var(--bonum-brown);
  }

  .bonum-about__divider {
    display: block;
    width: calc(612 * var(--h));
    max-width: none;
    border-top-width: max(1px, calc(2 * var(--h)));
    margin: calc(38 * var(--h)) 0 calc(36 * var(--h));
  }

  .bonum-about__highlights {
    gap: calc(52 * var(--h));
    margin-bottom: calc(32 * var(--h));
  }

  .bonum-about__highlight {
    font-size: max(12px, calc(24 * var(--h)));
    font-weight: 600;
    line-height: 1.25;
    border-left-width: max(2px, calc(3 * var(--h)));
    padding-left: calc(18 * var(--h));
  }

  .bonum-about__dot {
    width: calc(24 * var(--h));
    min-width: calc(24 * var(--h));
    height: calc(24 * var(--h));
  }

  .bonum-about__timeline-line {
    width: calc(206 * var(--h));
    max-width: none;
    margin: 0 calc(10 * var(--h));
    border-top-width: max(2px, calc(3 * var(--h)));
  }

  .bonum-about__visual-wrap {
    position: absolute;
    left: calc(847 * var(--h));   /* 1176 − 329 */
    top: calc(44 * var(--h));
    right: auto;
    flex: none;
    width: calc(814 * var(--h));
    max-width: none;
    height: auto;
  }

  .bonum-about__visual { max-width: 100%; }

  /* ---------------- INDIA IS READY (beverage) ---------------- */
  .beverage-section { --h: calc(100vw / 1890); }   /* PSD at 100% on the 1890px frame */

  /* 4.jpg carries the four glass panels the stats sit in */
  .beverage-section {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1890 / 1579;             /* centre 1890px of 4.jpg, like the PSD at 100% */
    margin: 0;
    background-image: url("./images/Desktop/4.jpg") !important;   /* beats the inline image */
    background-size: auto 100%;            /* full height; 329px of each side cropped */
    background-position: center top;
  }

  .beverage-section .heading-area {
    position: absolute;
    top: calc(319 * var(--h));
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: none;
  }

  .beverage-section .heading-area h2 {
    margin: 0;
    font-size: calc(55 * var(--h));
    line-height: 1.2;
  }

  .beverage-section .beverage-first-para {
    margin-top: calc(16 * var(--h));
    font-size: max(12px, calc(24 * var(--h)));
    line-height: 1.34;
  }

  .beverage-section .stats-container {
    position: absolute;
    top: calc(232 * var(--h));             /* panel content row, relative to heading-area */
    left: 0;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    display: block;
    transform: none;
  }

  .beverage-section .stat-card {
    position: absolute;
    top: 0;
    width: calc(290 * var(--h));
    height: auto;
    gap: calc(22 * var(--h));
  }

  /* panels in 4.jpg start at 628 / 956 / 1284 / 1612; accents sit 20px inside; −329 for the side crop */
  .beverage-section .stat-card:nth-child(1) { left: calc(319 * var(--h)); }
  .beverage-section .stat-card:nth-child(2) { left: calc(647 * var(--h)); }
  .beverage-section .stat-card:nth-child(3) { left: calc(975 * var(--h)); }
  .beverage-section .stat-card:nth-child(4) { left: calc(1303 * var(--h)); }

  .beverage-section .stat-accent {
    left: 0;
    top: calc(4 * var(--h));
    width: calc(10 * var(--h));
    height: calc(92 * var(--h));
    border-radius: calc(5 * var(--h));
  }

  .beverage-section .stat-value {
    font-size: calc(40 * var(--h));
    line-height: 1.1;
  }

  .beverage-section .stat-desc {
    width: auto;
    margin-top: calc(6 * var(--h));
    font-size: max(11px, calc(21 * var(--h)));
    font-weight: 500;
    line-height: 1.4;
  }

  /* ---------------- INVEST IN A BRAND (stage) ---------------- */
  /* PSD at 100% on the 1890px frame (--h); left values are the 2548 mockup's minus 329 */
  .stage { --h: calc(100vw / 1890); }

  .stage-scroll {
    max-width: none;
    overflow: hidden;
  }

  .stage {
    width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    height: calc(1200 * var(--h));
    background-size: calc(2548 * var(--h)) auto;   /* full mockup width, sides cropped */
    background-position: center calc(-460 * var(--h));   /* "BONUM CHA" watermark along the top edge */
  }

  .headline {
    top: calc(134 * var(--h));
    width: auto;
    white-space: nowrap;
  }

  .headline h1 { font-size: calc(56 * var(--h)); }

  .subtitle {
    margin-top: calc(18 * var(--h));
    font-size: max(12px, calc(26 * var(--h)));
    color: var(--ink);
  }

  .info-block {
    top: calc(370 * var(--h));
    width: calc(420 * var(--h));
  }

  .info-block--left  { left: calc(271 * var(--h)); }
  .info-block--right { left: calc(1323 * var(--h)); }

  .tier-label {
    font-size: calc(58 * var(--h));
    line-height: 1;
  }

  .tier-price {
    margin-top: calc(6 * var(--h));
    font-size: calc(58 * var(--h));
    line-height: 1.1;
  }

  .specs {
    margin-top: calc(33 * var(--h));
    gap: calc(23 * var(--h));
  }

  .specs li {
    gap: calc(12 * var(--h));
    font-family: var(--font-body);
    font-size: max(12px, calc(30 * var(--h)));
    font-weight: 500;
    line-height: 1.2;
  }

  .specs .bar {
    width: max(2px, calc(4 * var(--h)));
    height: calc(22 * var(--h));
  }

  .payout-pill {
   top: calc(681 * var(--h));
        height: calc(102 * var(--h));
        min-height: 0;
        padding: 0 0 0 calc(52 * var(--h));
        box-shadow: 0 calc(8 * var(--h)) calc(22 * var(--h)) rgba(53, 28, 21, 0.08);
  }

  .payout-pill--left {
    left: calc(227 * var(--h));
        width: calc(441 * var(--h));
  }

  .payout-pill--right {
           left: calc(1228 * var(--h));
        width: calc(414 * var(--h));
        padding: 0 0 0 calc(76 * var(--h));
        text-align: left;                    /* mockup: left-aligned in both pills */
  }

  .payout-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: max(11px, calc(21 * var(--h)));
    font-weight: 500;
    line-height: 1.2;
  }

  .payout-amount {
    margin: calc(2 * var(--h)) 0 0;
    font-size: calc(34 * var(--h));
    line-height: 1.15;
  }

  .kiosk-image {
    top: calc(334 * var(--h));
    left: calc(941 * var(--h));
    width: calc(929 * var(--h));
  }

  .structure-box {
    top: calc(914 * var(--h));
    left: calc(227 * var(--h));
    width: calc(1438 * var(--h));
    height: calc(106 * var(--h));
    min-height: 0;
    margin: 0;
    padding: 0 calc(130 * var(--h)) 0 calc(111 * var(--h));
    border-width: max(1px, calc(2 * var(--h)));
    border-radius: calc(24 * var(--h));
  }

  .structure-item {
    font-family: var(--font-body);
    font-size: calc(52 * var(--h));
    font-weight: 700;
  }

  .divider-line { left: 36.4%; }

  .or-pill {
    left: 35.7%;
    min-width: 0;
    height: auto;
    padding: calc(8 * var(--h)) calc(22 * var(--h));
    font-size: max(11px, calc(24 * var(--h)));
  }

  .footnote {
    top: calc(1052 * var(--h));
    width: auto;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: max(12px, calc(25 * var(--h)));
    font-weight: 400;
  }

  /* ---------------- FROM INVESTMENT TO OPENING DAY ---------------- */
  /* PSD at 100% on the 1890px frame (--h); step lefts are the 2548 mockup's minus 329 */
  .ioj-section {
    --h: calc(100vw / 1890);
    max-width: none;
    height: calc(1444 * var(--h));
    aspect-ratio: auto;
    min-height: 0;
    margin: 0;
  }

  /* scalloped edge keeps the full mockup width, sides cropped like the rest of the frame */
  /* Transition from "Invest in a Brand": the stage's colours carry on under the
     scalloped white veil (6.png) and fade to the section's off-white. */
  .ioj-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(560 * var(--h));
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(255, 253, 251, 0) 0%, #fffdfb 100%),
      linear-gradient(to right, #e3f0ea 0%, #e1e1d6 16%, #e1cdbc 32%, #e3bea8 50%, #ecc4ac 68%, #f4ceb8 84%, #f7d5c1 100%);
  }

  .ioj-section .bg-pattern {
    top: calc(12 * var(--h));
    left: calc(-329 * var(--h));
    width: calc(2548 * var(--h));
    max-width: none;
  }

  .ioj-section .title-row,
  .ioj-section .main-process,
  .ioj-section .cta {
    left: 0;
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .ioj-section .title-row {
    top: calc(146 * var(--h));
    gap: calc(18 * var(--h));
  }

  .ioj-section .title-row h2 { font-size: calc(52 * var(--h)); }

  .ioj-section .dash-left,
  .ioj-section .dash-right {
    width: calc(284 * var(--h));
    border-top-width: max(1px, calc(2 * var(--h)));
  }

  .ioj-section .main-process {
    top: 0;
    height: 100%;
  }

  .ioj-section .step {
    width: calc(263 * var(--h));          /* a1–a6 native size: box line ≈ 246px wide */
    height: calc(282 * var(--h));
  }

  .ioj-section .step-1 { left: calc(239 * var(--h));  top: calc(314 * var(--h)); }
  .ioj-section .step-2 { left: calc(475 * var(--h));  top: calc(462 * var(--h)); }
  .ioj-section .step-3 { left: calc(703 * var(--h)); top: calc(314 * var(--h)); }
  .ioj-section .step-4 { left: calc(941 * var(--h)); top: calc(462 * var(--h)); }
  .ioj-section .step-5 { left: calc(1173 * var(--h)); top: calc(314 * var(--h)); }
  .ioj-section .step-6 { left: calc(1401 * var(--h)); top: calc(462 * var(--h)); width: calc(252 * var(--h)); height: calc(284 * var(--h)); }

  .ioj-section .step-content {
    gap: calc(14 * var(--h));
    padding: 0 calc(14 * var(--h));
  }

  .ioj-section .step-icon {
    width: calc(80 * var(--h));
    height: calc(80 * var(--h));
    margin-top: calc(20 * var(--h));
  }

  .ioj-section .step-content p {
    font-size: max(11px, calc(24 * var(--h)));
    line-height: 1.5;
  }

  /* PSD: Launch icon and label sit lower in the last box */
  .ioj-section .step-6 .step-content { gap: calc(48 * var(--h)); }
  .ioj-section .step-6 .step-icon { margin-top: calc(28 * var(--h)); }

  .ioj-section .cta {
    top: calc(925 * var(--h));
    margin-top: 0;
  }

  .ioj-section .cta-line1 {
    font-size: calc(28 * var(--h));
    line-height: 1.2;
  }

  .ioj-section .cta-line2 {
    margin-top: calc(8 * var(--h));
    font-size: calc(46 * var(--h));
    line-height: 1.2;
  }

  .ioj-section .pills {
    margin-top: calc(36 * var(--h));
    gap: calc(16 * var(--h));
  }

  .ioj-section .pill {
    padding: calc(14 * var(--h)) calc(30 * var(--h));
    font-size: max(11px, calc(24 * var(--h)));
    line-height: 1.3;
    border-width: max(1px, calc(2 * var(--h)));
  }

  .ioj-section .cta-final {
    margin-top: calc(40 * var(--h));
    font-size: calc(31 * var(--h));
    line-height: 1.2;
  }

  .ioj-section .book-call {
    width: calc(376 * var(--h));
    height: calc(73 * var(--h));
    margin-top: calc(28 * var(--h));
    padding: 0 calc(40 * var(--h)) 0 calc(56 * var(--h));
    font-size: calc(34 * var(--h));
    font-weight: 600;
  }

  .ioj-section .arrow-book {
    width: calc(56 * var(--h));
    height: calc(28 * var(--h));
  }

  /* ---------------- GALLERY ---------------- */
  /* six 412px columns on a 428px pitch; odd columns start 60px higher */
  .bonum-gallery {
    --h: calc(100vw / 1890);            /* PSD at 100% on the 1890px frame; lefts are mockup − 329 */
    max-width: none;
    aspect-ratio: auto;
    height: calc(900 * var(--h));
    margin-top: 0;
  }

  .gallery-column { gap: calc(20 * var(--h)); }

  .column-peek-left,
  .column-3,
  .column-5 { top: calc(100 * var(--h)); }

  .column-2,
  .column-4,
  .column-peek-right { top: calc(160 * var(--h)); }

  .column-peek-left  { left: calc(-339 * var(--h));  width: calc(412 * var(--h)); }
  .column-2          { left: calc(89 * var(--h));  width: calc(412 * var(--h)); }
  .column-3          { left: calc(517 * var(--h));  width: calc(412 * var(--h)); }
  .column-4          { left: calc(945 * var(--h)); width: calc(412 * var(--h)); }
  .column-5          { left: calc(1373 * var(--h)); width: calc(412 * var(--h)); }
  .column-peek-right { left: calc(1801 * var(--h)); width: calc(412 * var(--h)); }

  /* ---------------- ENQUIRY FORM + FOOTER ---------------- */
  /* PSD at 100% on the 1890px frame (--h) */
  .enquiry-section { min-height: 0; --h: calc(100vw / 1890); }

  .enquiry-content { padding: calc(124 * var(--h)) calc(32 * var(--h)) calc(88 * var(--h)); }

  .form-header {
    max-width: none;
    margin-bottom: calc(66 * var(--h));
  }

  .form-title {
    font-size: calc(49 * var(--h));
    margin-bottom: calc(14 * var(--h));
  }

  .form-subtitle {
    font-size: max(13px, calc(28 * var(--h)));
    line-height: 1.43;
  }

  .enquiry-form { max-width: calc(1246 * var(--h)); }

  .fields { gap: calc(16 * var(--h)); margin-bottom: 0; }
  .field-row { gap: calc(14 * var(--h)); }

  .field {
    height: max(40px, calc(84 * var(--h)));
    border-radius: calc(12 * var(--h));
  }

  .field-input {
    font-size: max(12px, calc(24 * var(--h)));
    padding: 0 calc(200 * var(--h)) 0 calc(38 * var(--h));
  }

  .field-sample {
    right: calc(24 * var(--h));
    font-size: max(14px, calc(36 * var(--h)));
  }

  .field-select {
    font-size: max(12px, calc(24 * var(--h)));
    padding: 0 calc(64 * var(--h)) 0 calc(38 * var(--h));
  }

  .chevron { right: calc(40 * var(--h)); }

  .chevron svg {
    width: max(12px, calc(26 * var(--h)));
    height: max(7px, calc(15 * var(--h)));
  }

  .question-row {
    border-bottom: 1px solid #c7c7c7;    /* PSD: rule under the question */
    gap: calc(32 * var(--h));
    padding: calc(30 * var(--h)) calc(34 * var(--h));
  }

  .question-text { font-size: max(12px, calc(24 * var(--h))); font-weight: 500; }

  .radio-group { gap: calc(40 * var(--h)); }

  .radio-option {
    gap: calc(12 * var(--h));
    font-size: max(12px, calc(24 * var(--h)));
  }

  .radio-visual {
    width: max(14px, calc(22 * var(--h)));
    height: max(14px, calc(22 * var(--h)));
  }

  .submit-btn {
    width: calc(546 * var(--h));
    height: max(40px, calc(84 * var(--h)));
    margin: calc(46 * var(--h)) auto 0;
    padding: 0 calc(52 * var(--h));
    border-radius: calc(24 * var(--h));
    font-size: max(14px, calc(36 * var(--h)));
  }

  .footer-arrow {
    width: max(16px, calc(36 * var(--h)));
    height: max(16px, calc(36 * var(--h)));
  }

  .page-footer {
    height: calc(148 * var(--h));
    gap: calc(8 * var(--h));
  }

  .footer-title { font-size: max(12px, calc(30 * var(--h))); }
  .footer-sub   { font-size: max(11px, calc(24 * var(--h))); }
}

/* Desktop enquiry form: inline validation message under each field */
.field.has-error {
  outline: 2px solid #b3261e;
  outline-offset: -2px;
  margin-bottom: 22px;
}

.field-error {
  position: absolute;
  top: calc(100% + 4px);
  left: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #b3261e;
  white-space: nowrap;
}

.field-error--static {
  position: static;
  display: block;
  margin: -16px 0 16px 24px;
}

/* Hide the grey sample hint once the user has typed something */
.field-input:not(:placeholder-shown) + .field-sample {
  display: none;
}

/* Mobile: every heading at weight 900 (desktop untouched).
   !important beats the per-component weights set on the heading classes. */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6 {
    font-weight: 900 !important;
  }
}

/* Mobile (every phone width): "Join the Modern Beverage Movement." in the brand font */
@media (max-width: 767px) {
  .ioj-section .cta-line2 {
    font-family: var(--font-primary);
  }
}