*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;font-family:Lexend;background:#071b27;color:#eef4f6;}
.nunito {font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-style: normal;}	
.lexend {font-family: "Lexend", sans-serif;font-optical-sizing: auto;font-style: normal;}
.panel{min-height:100vh;position:relative;scroll-snap-align:start;overflow:hidden}
.site-header{position:fixed;top:0;left:0;width:100%;height:92px;z-index:100;display:flex;justify-content:center;align-items:center;transition:.3s;background:linear-gradient(to bottom,rgba(238,246,250,.7),transparent)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.links{display:flex;align-items:center;gap:48px}
.links a,.logo{color:#1f292e;text-decoration:none;font-size:17px;letter-spacing:1.1px;font-weight:600;font-family:lexend;}
.links a.active{color:#1775aa}
.links .logo{font-size:22px;letter-spacing:5px;font-weight:600;font-family:nunito;}
.logo img{position: relative;top: 5px;}
.mobile-logo,.menu-toggle{display:none}
.hero{background:linear-gradient(rgba(3,20,31,.05),rgba(3,20,31,.13)),url("bg.jpg") center/cover no-repeat}
.headline{position:absolute;top:16%;left:20%;font-size:23px;line-height:1.25;letter-spacing:.6px;font-weight:700;color:#1672aa}
.quote-card{position:absolute;top:32.5%;left:0%;width:33%;padding-top:36px;padding-left:8%;padding-right:36px;padding-bottom:48px;background: rgba(98, 98, 98, 0.6);border-radius:0 0 9px 9px}
.quote-card h1{font-size:27px;line-height:1.3;margin:0 0 10px;letter-spacing:.8px}
.quote-card strong{font-size:17px;letter-spacing:1px}
.quote-card p{font-size:12px;line-height:1.45;margin:2px 0 0}
.product-zone{position:absolute;top:25%;right:9.5%;width:600px;height:400px}
.product-photo{height:100%;background:url('bottle-about.jpg') center center/cover no-repeat;
object-position: center -120px !important;
}
.tech-card{position:absolute;left:0;top:120px;width:260px;padding:24px 25px;background: rgba(98, 98, 98, 0.6);font-size:17px;line-height:1.65;text-align:right;}
.tech-card b,.tech-card span{display:block}
.tech-card em{font-style:normal;color:#2794cf}
.bottles{position:absolute;right:0;top:0;width:300px;height:410px}
.bottle{position:absolute;bottom:0;width:100px;border-radius:15px 15px 20px 20px;background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(235,245,250,.3),rgba(255,255,255,.88));border:2px solid rgba(255,255,255,.65);box-shadow:0 10px 25px rgba(0,0,0,.35)}
.bottle:before{content:"";position:absolute;top:-34px;left:20px;width:58px;height:38px;border-radius:8px 8px 3px 3px;background:linear-gradient(90deg,#f7f7f7,#bfc6ca,#fff);border:1px solid #d5d9da}
.bottle:after{content:"";position:absolute;left:24px;top:45px;width:52px;height:72%;background:#0d4c90}
.bottle.tall{height:320px;right:128px}
.bottle.short{height:245px;right:15px}
.bottle label{position:absolute;z-index:2;left:40px;top:65px;writing-mode:vertical-rl;letter-spacing:3px;color:#dceeff;font-size:14px}
.bottle i{position:absolute;z-index:3;top:18px;left:45px;width:9px;height:9px;border-radius:50%;background:#d9ecf8}
.brand{position:absolute;right:10%;bottom:12%;text-align:right}
.brand1{font-size:29px;letter-spacing:1px;font-weight:800;color:#2d7199;text-decoration:none}
.brand div{font-size:48px;font-weight:300;letter-spacing:6px;text-align:right}
.brand small{display:block;margin-top:9px;font-size:14px;font-weight:700;letter-spacing:1px;color:#1b83c2}
.brand img{display: block;margin-left: auto;margin-right: 0;}
.bottom-barcc{position:absolute;bottom:0;left:0;width:100%;height:34px;background:#1685c2}
.bottom-bar {position: absolute; bottom: 0; left: 0; width: 100%;height: 60px; display: flex;flex-direction: column;}
.blue-section {flex: 1;background-color: #1685c2;}
.compare{width:50%;font-size:14px}
.eyebrow{color:#2693cd;font-size:13px;font-weight:700;letter-spacing:3px;margin-bottom:18px}
.gray-section {flex: 2; background-color: #53585A;}
.row{display:grid;grid-template-columns:22% 39% 39%;min-height:35px;align-items:center;border-bottom:1px solid #e2e3e2;text-align:center}
.row span{font-size:8px;font-weight:700;letter-spacing:.4px}
.row b{color:#2776a2;line-height:1.25;font-size:8px}
.row em{font-style:normal;color:#8b9297;line-height:1.3;font-size:8px}
.scroll-hint{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);color:#d9edf6;text-decoration:none;font-size:10px;letter-spacing:2px}
.scroll-hint span{display:block;text-align:center;font-size:24px;margin-top:5px}
.section-content{width:min(1320px,84%);margin:0 auto;padding:150px 0 100px}
.section-content-about{width:100%;margin:0 auto;padding:0px 0 100px}
.panel h2{font-size:62px;line-height:1.03;letter-spacing:1px;margin:0 0 45px;font-weight:700}
.about-page{margin:0 auto;overflow:hidden;background:white;border:0px solid #d6dadc}
.about-page1{background:white;color:silver;}
/*.about-section{background:linear-gradient(135deg,#0b2c3d,#123e52)}*/
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start;width:100%;height:768px;}
.lead{font-size:21px;line-height:1.65;color:#c9d9e1;margin:0}
.feature{border-top:1px solid rgba(255,255,255,.28);padding-top:20px}
.feature span{color:#2a9bd5;font-size:30px;font-weight:700}
.feature h3{font-size:16px;letter-spacing:1.5px;margin:17px 0 10px}
.feature p{color:#b8cbd4;line-height:1.6;font-size:14px}
.info-panel{padding:44px 46px 28px 48px;background:white;}
.info-panel h2{text-align:right;margin:0 2px 20px 0;font-size:15px;line-height:1.45;letter-spacing:1px;color:#667077}
.panel-header{display:flex;justify-content:flex-end;gap:24px;align-items:center;margin-bottom:34px}
.products-section{background:linear-gradient(145deg,#f2f5f5,#dce7eb);color:#1d2c34}.product-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.product-card{min-height:420px;background:rgba(255,255,255,.8);padding:40px 35px;text-align:center;box-shadow:0 20px 50px rgba(10,42,57,.1);border:1px solid rgba(20,78,105,.08)}.product-card.featured{transform:translateY(-25px);background:#113a50;color:#fff}
.mini-bottle{height:190px;width:70px;margin:0 auto 28px;border-radius:12px 12px 17px 17px;background:linear-gradient(90deg,#fff,#c8d9df,#fff);border:2px solid #fff;position:relative}
.mini-bottle:before{content:"";position:absolute;top:-25px;left:14px;width:38px;height:28px;background:#e9edef;border-radius:6px 6px 2px 2px}
.mini-bottle:after{content:"ORGANIQUE";writing-mode:vertical-rl;position:absolute;left:22px;top:28px;width:28px;height:130px;background:#105092;color:#e9f5ff;padding:8px 7px;font-size:8px;letter-spacing:2px}
.large-mini{height:225px;width:82px}.wide-mini{height:170px;width:90px}.product-card h3{letter-spacing:1.5px;font-size:17px}.product-card p{font-size:14px;color:#6c7e86;line-height:1.6}.featured p{color:#c5d6de}.product-card button{margin-top:20px;padding:11px 26px;background:transparent;border:1px solid #2996ce;color:inherit;letter-spacing:1px;font-size:11px}.communities-section{background:radial-gradient(circle at 80% 20%,#175d7c 0,#0a2b3b 45%,#061b27 100%)}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:center}.outline-button{display:inline-block;margin-top:35px;border:1px solid #309cd3;padding:15px 25px;color:#dcecf2;text-decoration:none;font-size:11px;letter-spacing:1.5px}.community-stat{border-left:1px solid rgba(255,255,255,.2);padding-left:60px}.community-stat div{display:flex;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12)}.community-stat strong{font-size:42px;color:#2c9bd3}.community-stat span{font-size:12px;letter-spacing:1.5px;color:#c3d4db}.faq-section{background:#eaf1f3;color:#182d37}.faq-list{max-width:900px}.faq-list details{border-top:1px solid #b9cbd2;padding:20px 0}.faq-list details:last-child{border-bottom:1px solid #b9cbd2}.faq-list summary{cursor:pointer;list-style:none;font-size:22px;font-weight:700;padding-right:40px;position:relative}.faq-list summary:after{content:"+";position:absolute;right:5px;color:#208bc5}.faq-list details[open] summary:after{content:"−"}.faq-list p{max-width:700px;color:#637780;line-height:1.7;font-size:16px}.back-top{display:inline-block;margin-top:45px;color:#167bb3;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:2px}
.next-arrow{position:absolute;bottom:60px;right:8%;font-size:30px;color:inherit;text-decoration:none;opacity:.7}.faq-section .bottom-bar{height:34px}
.waves,.corner-waves{width:118px;display:grid;gap:6px}
.waves i,.corner-waves i{display:block;height:6px;border-top:3px solid #55646b;border-radius:50%;transform:skewX(35deg)}
.waves i:nth-child(2),.corner-waves i:nth-child(2){border-color:var(--blue)}
.corner-waves{position:absolute;right:2%;bottom:52px;width:145px}

@media(max-width:900px)
{
html{scroll-snap-type:none}
site-header{height:82px;justify-content:space-between;padding:0 22px;background:rgba(244,248,249,.95)}
.about-grid,.split{grid-template-columns:1fr;gap:22px}
.bottles{right:0;top:-30px;width:150px;height:245px}
.bottle.tall{height:205px;right:78px;width:64px}
.bottle.short{height:155px;width:62px;right:0}
.bottle:before{left:12px;top:-25px;width:38px;height:28px}
.bottle:after{left:14px;top:32px;width:32px}
.bottle label{left:24px;top:46px;font-size:9px}
.brand{right:8%;bottom:9%}
.brand div{font-size:33px}
.brand small{font-size:10px}
.brand img{ width:50%}
.bottom-bar{height:28px}
.community-stat{padding-left:25px}
.community-stat strong{font-size:34px}
.compare{order: 2;font-size:8px}
.faq-list summary{font-size:17px}
.faq-section{min-height:100vh}
.faq-section .section-content{width:86%;padding:120px 0 80px}
.headline{top:14%;left:9%;font-size:20px !important;}
.hero-right{height:500px;order:1}
.info-panel{order:2;padding:28px 20px}
.lead{font-size:17px}
.large-mini{height:140px}
.links{display:none;position:absolute;top:82px;left:0;width:100%;background:#f4f8f9;padding:22px;flex-direction:column;gap:20px}
.links.show{display:flex}
.menu-toggle{display:block;border:0;background:transparent;padding:6px;
 margin-right: 10px !important;
 margin-left: auto !important;}
.menu-toggle span{display:block;width:24px;height:2px;background:#24343c; margin:5px;}
.mini-bottle{height:120px}
.mobile-logo{display:block;color:#1e2c33;text-decoration:none;font-size:18px;letter-spacing:2px;margin-left:25px;margin-top:15px;}
.next-arrow{display :none;bottom:38px}
.panel{min-height:100svh}
.panel h2{font-size:2.3vw;margin-bottom:32px}

.product-photo {order: 1;display: block !important; width: 100%;
height: 550px !important; 
object-fit: cover !important;
object-position: center -120px !important;
/*height: 600px; Berikan tinggi manual agar area gambar tidak gepeng/nol */    }
.product-zone{top:52%;right:5%;width:88%;height:260px}.tech-card{left:0;top:0;width:190px;padding:18px;font-size:12px}
.product-cards{grid-template-columns:1fr;gap:22px}
.product-cards{padding-bottom:35px}
.product-card{min-height:310px;padding:28px}
.product-card.featured{transform:none}
.quote-card{top:28%;left:8%;width:78%;padding:24px 22px;border-radius:8px}
.quote-card h1{font-size:19px;margin-bottom:10px}
.quote-card strong{font-size:13px}
.quote-card p{font-size:14px;margin-top:2px}
.scroll-hint{display:none;bottom:40px}
}
/* =========================================================
   ABOUT — reference layout shown in contoh.jpg
   These rules are appended so the existing styles remain intact.
   ========================================================= */
.about-page1 {
  background: #edf4f7;
  color: #5c6469;
  min-height: 100vh;
  overflow-x: hidden;
}

.about-reference-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 46.75% 53.25%;
}

.about-reference-left {
  position: relative;
  min-height: 100vh;
  background: #edf4f7;
  padding-top: 145px;
}

.about-reference-title {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 8px 25px 0;
}

.about-reference-title h1 {
  margin: 0;
  color: #1784c1;
  font-size: clamp(30px, 2.65vw, 43px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .5px;
}

.reference-waves {
  width: 180px;
  display: grid;
  gap: 7px;
  flex: 0 0 180px;
}

.reference-compare {
  width: 72%;
  min-width: 470px;
  margin-left: 0;
  background: rgba(255,255,255,.97);
  padding: 28px 20px 30px 58px;
}

.reference-row {
  display: grid;
  grid-template-columns: 25% 42% 33%;
  align-items: center;
  min-height: 43px;
  text-align: center;
}

.reference-row > span {
  color: #596166;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .2px;
}

.reference-row > b {
  color: #1685c2;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.reference-row > em {
  color: #9ca2a5;
  font-style: normal;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.reference-heading {
  min-height: 76px;
  margin-bottom: 8px;
}

.reference-heading > span { visibility: hidden; }

.reference-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 155px;
  height: 48px;
  padding: 0 18px;
  border: 3px solid #596166;
  border-radius: 8px 12px 12px 8px;
  color: #1685c2;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 500;
  position: relative;
}

.reference-logo::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 11px;
  height: 22px;
  background: #fff;
  border-left: 3px solid #596166;
  border-top: 3px solid #596166;
  border-bottom: 3px solid #596166;
  border-radius: 5px 0 0 5px;
}

.reference-logo::after {
  content: "•";
  position: absolute;
  left: 12px;
  color: #1685c2;
  font-size: 20px;
}

.reference-logo sup { font-size: 7px; margin-left: 2px; }

.about-reference-photo {
  min-height: 100vh;
  background-image: url("contoh.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  background-color: #f5f5f2;
}

.about-reference-details {
  background: #fff;
  padding: 80px 8% 100px;
}

.about-reference-details .story-copy {
  max-width: 1050px;
  margin: 0 auto 90px;
}

.about-reference-details .story-copy p {
  color: #59676d;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 25px;
}

.about-reference-details .sterilization { color: #233b48; }
.about-reference-details .section-title { display:flex; align-items:center; gap:25px; }
.about-reference-details .section-title > span { flex:1; border-top:1px solid #bfcbd0; }
.about-reference-details .section-title > div { text-align:center; }
.about-reference-details .section-title h2 { font-size: 28px; margin:0 0 8px; }
.about-reference-details .section-title p { margin:0; color:#6e7d83; font-size:12px; }
.about-reference-details .stages { display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; gap:12px; margin-top:55px; }
.about-reference-details .stage { text-align:center; }
.about-reference-details .stage img { width:100%; max-height:150px; object-fit:cover; }
.about-reference-details .stage h3 { font-size:13px; line-height:1.35; }
.about-reference-details .stage p { font-size:10px; line-height:1.5; color:#718087; }
.about-reference-details .arrow { font-size:26px; color:#1685c2; text-align:center; }
.about-reference-details .video-section { margin-top:80px; min-height:260px; position:relative; background:#edf4f7; display:grid; place-items:center; }
.about-reference-details .video-box { width:100%; height:260px; border:0; background:transparent; cursor:pointer; }

@media (max-width: 900px) {
  .about-reference-layout { grid-template-columns: 1fr; }
  .about-reference-left { min-height: auto; padding-top: 105px; }
  .about-reference-title { justify-content: space-between; padding: 0 22px 22px; gap: 15px; }
  .about-reference-title h1 { font-size: 30px; }
  .reference-waves { width: 100px; flex-basis: 100px; }
  .reference-compare { width: 100%; min-width: 0; padding: 20px 8px 30px; }
  .reference-row { grid-template-columns: 23% 42% 35%; min-height: 50px; }
  .reference-row > span { font-size: 8px; }
  .reference-row > b { font-size: 8px; }
  .reference-row > em { font-size: 8px; }
  .reference-heading { min-height: 68px; }
  .reference-logo { min-width: 110px; height: 38px; font-size: 11px; }
  .about-reference-photo { min-height: 72vh; background-size: auto 100%; }
  .about-reference-details { padding: 55px 7% 80px; }
  .about-reference-details .stages { grid-template-columns: 1fr; }
  .about-reference-details .arrow { transform: rotate(90deg); }
}

/* =========================================================
   ORDER PAGE — REFERENCE IMAGE MATCH
   New rules only: existing CSS above remains untouched.
   ========================================================= */
.order-reference {
  min-height: 100vh;
  background: #edf4f7;
  color: #111d24;
  overflow: hidden;
  position: relative;
}

.order-reference-main {
  width: 100%;
  height: calc(100vh - 148px);
  min-height: 430px;
  margin-top: 92px;
  display: grid;
  grid-template-columns: 62.5% 37.5%;
}

.order-reference-form-area {
  position: relative;
  background: #edf4f7;
  min-width: 0;
}

.order-waves {
  position: absolute;
  left: 2px;
  top: -66px;
  width: min(165px, 28vw);
  height: auto;
  max-width: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.order-reference-form {
  width: min(520px, 69%);
/*  margin: 23px 0 0 16.5%; */
  margin-top:23px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.order-reference-form h1 {
  margin: 0 0 28px;
  color: #1685c2;
  font-size: 2.15vw;
  line-height: 1.2;
  letter-spacing: .35px;
  font-weight: 800;
}

.order-form-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  column-gap: 1px;
  margin-bottom: 12px;
}

.order-form-row label {
  color: #111b22;
  font-family: Lexend, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.order-form-row input,
.order-form-row select,
.order-form-row textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: #fff;
  color: #24343c;
  font-family: Lexend, sans-serif;
  font-size: 16px;
  box-shadow: none;
}

.order-form-row input,
.order-form-row select {
  height: 37px;
  padding: 0 16px;
  border-radius: 22px;
}

.order-form-row select {
  appearance: auto;
  padding-right: 8px;
  cursor: pointer;
}

.order-form-row textarea {
  min-height: 105px;
  padding: 13px 16px;
  border-radius: 12px;
  resize: vertical;
  line-height: 1.45;
}

.order-notes-row {
  align-items: start;
  margin-top: 1px;
}

.order-notes-row label {
  padding-top: 11px;
}

.order-submit {
  display: block;
  width: 130px;
  height: 36px;
  margin: 17px 0 0 auto;
  border: 0;
  border-radius: 22px;
  background: #168fca;
  color: #fff;
  font-family: Lexend, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.order-submit:hover {
  transform: translateY(-1px);
  background: #137fb5;
}

.order-reference-photo {
  min-width: 0;
  height: 100%;
  background: url("OrganiqueOrder.jpg") center center / cover no-repeat;
}

.order-reference .order-bottom-bar {
  height: 148px;
  z-index: 5;
}

.order-reference .order-bottom-bar .gray-section {
  flex: 1;
  background: #565b5e;
}

.order-reference .order-bottom-bar .blue-section {
  flex: 0 0 31px;
  background: #168fca;
}

@media (max-width: 900px) {
  .order-reference-main {
    height: auto;
    min-height: 0;
    margin-top: 82px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .order-reference-form-area {
    min-height: 560px;
    padding: 0 0 35px;
  }

  .order-waves {
	display: none;
    top: -57px;
    width: min(115px, 32vw);
    height: auto;
  }

  .order-reference-form {
    width: min(88%, 430px);
    margin: 28px auto 0;
  }

  .order-reference-form h1 {
    margin-bottom: 25px;
  }

  .order-form-row {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .order-reference-photo {
    height: 62vw;
    min-height: 330px;
    max-height: 520px;
  }

  .order-reference .order-bottom-bar {
    position: relative;
    height: 90px;
  }

  .order-reference .order-bottom-bar .blue-section {
    flex-basis: 25px;
  }
}

@media (max-width: 520px) {
  .order-reference-form {
    width: 90%;
  }

  .order-form-row {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 4px;
  }

  .order-form-row label {
    font-size: 11px;
  }

  .order-form-row input,
  .order-form-row select,
  .order-form-row textarea {
    font-size: 11px;
  }
}


/* =========================================================
   FAQ — reference layout from the supplied screenshot
   Existing CSS above is intentionally left untouched.
   ========================================================= */
.faq-reference {
  background: #edf4f7;
  color: #102d3a;
  min-height: 100vh;
  height: auto;
  overflow: hidden;
  padding-bottom: 90px;
}

.faq-reference-top {
  position: relative;
  min-height: 620px;
  background: #edf4f7;
}

.faq-reference-content {
  width: 72%;
  margin: 0 auto;
  padding: 112px 0 34px;
}

.faq-reference-content > h1 {
  margin: 0 0 14px;
  color: #1685c2;
  font-size: clamp(26px, 2.15vw, 40px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .4px;
}

.faq-reference-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
/*  column-gap: 85px; */
  row-gap: 20px;
}

.faq-ref-item {
 /* max-width: 360px; */
}

.faq-ref-item h2,
.faq-ref-highlight-copy h2,
.faq-retailer-copy h2 {
  margin: 0 0 6px;
  color: #087fbd;
  font-size: 1.25vw;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .35px;
}
.faq-ref-q6 h2 {
	margin-left: -5%;
}

.faq-ref-item p {
  margin: 0;
  color: #101e25;
  font-size: 1.1vw;
  line-height: 1.2;
  font-weight: 500;
}

.faq-ref-left { grid-column: 1 / span 2; /*justify-self: start;*/ margin-right:20%}
.faq-ref-right { grid-column: 2 / span 2; /* justify-self: end; */ margin-right:6%}
.faq-ref-q1 { margin-left: 26px; }
.faq-ref-q2 { margin-top: 53px; }
.faq-ref-q3 { margin-left: 26px; margin-top: 5px; }

.faq-ref-highlight {
  position: relative;
  margin-top: 14px;
  margin-left: 0;
  width: 100%;
  min-height: 108px;
  background: #a7abad;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 18px 13% 18px 35%;
}

.faq-ref-highlight-copy {
  /*max-width: 340px;*/
  text-align: right;
}

.faq-ref-highlight-copy h2 { color: #fff; }
.faq-ref-highlight-copy p { color: #fff; }

.faq-waves {
  position: absolute;
  width: 165px;
  display: grid;
  gap: 5px;
  z-index: 2;
}

.faq-waves-left {
  top: 18px;
  left: 3px;
}

.faq-waves-right {
  right: 3px;
  bottom: 16px;
  top: -22%;
}

.faq-ref-lower {
  width: 70%;
  margin: 21px 0 0 26px;
}

.faq-ref-q5 { margin: 0 0 15px; }
.faq-ref-q6 { /*max-width: 365px;*/ margin-left: 10%; }

.faq-retailer-section {
  min-height: 500px;
  display: grid;
  grid-template-columns: 70% 30%;
  background: #fff;
}

.faq-retailer-copy {
  padding: 24px 10px 22px 21%;
  position: relative;
}

.faq-retailer-copy h2 {
  margin-bottom: 4px;
  color: #0d83bf;
}

.faq-retailer-image {
  width: 90%;
  height: 90%;
  background: url("RetailersLogoFAQ.jpg") center/contain no-repeat;
}

.faq-retailer-copy > strong {
  display: block;
  width: 90%;
  text-align: right;
  color: #007fbe;
  font-size: 1.25vw;
  margin-top: -1px;
}

.faq-retailer-photo {
  min-width: 50%;
  width: 100%;
  height: 100%;
  background: url("OrganiqueFAQ.jpg") center center/cover no-repeat;
}

.faq-reference-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
}

@media (max-width: 900px) {
  .faq-reference { padding-bottom: 70px; }
  .faq-reference-top { min-height: auto; }
  .faq-reference-content {
    width: 84%;
    padding: 104px 0 30px;
  }
  .faq-reference-content > h1 { font-size: 26px; }
  .faq-reference-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .faq-ref-item,
  .faq-ref-right,
  .faq-ref-left,
  .faq-ref-q1,
  .faq-ref-q2,
  .faq-ref-q3 {
    justify-self: start;
    margin: 0;
    max-width: 100%;
  }
  .faq-ref-item p {
	  font-size: 10px;
  }
  .faq-ref-item h2 {
	  font-size: 2.25vw;
  }  
  .faq-ref-q2 { margin-left: 15%; }
  .faq-ref-highlight {
    min-height: 170px;
    padding: 24px 14% 24px 20%;
  }
  .faq-ref-highlight-copy { max-width: 100%; }
  .faq-ref-lower { width: 100%; margin: 22px 0 0; }
  .faq-retailer-section { grid-template-columns: 1fr; }
  .faq-retailer-copy { padding: 24px 12%; }
  .faq-retailer-image { width: 100%; height: 190px; }
  .faq-retailer-copy > strong { width: 100%; }
  .faq-retailer-copy h2 { font-size: 2.25vw; }
  .faq-retailer-photo { min-height: 260px; }
  .faq-reference-bottom { height: 70px; }
}

/* ================= COMMUNITY REFERENCE PAGE =================
   Added only: existing styles above remain untouched. */
.community-reference {
  background: #edf4f7;
  color: #17252d;
  overflow: hidden;
}

.community-reference-inner {
  position: relative;
  width: 100%;
    min-height: calc(150vh);
/*  min-height: calc(100vh - 90px);*/
  margin: 0 auto;
  padding: 89px 0 170px;
}

.community-collage {
  position: relative;
  width: 72%;
  height: 620px;
  margin: auto;
}

.community-card {
  position: absolute;
  margin: 0;
}

.community-image {
  overflow: hidden;
  background: #d8e0e4;
}

.community-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-copy h2 {
  margin: 0 0 4px;
  color: #0087c9;
  font-size: 15px;
  line-height: 1.05;
  font-weight: 800;
}

.community-copy h2 small {
  color: #28353b;
  font-size: 8px;
  font-weight: 500;
}

.community-copy p {
  margin: 0;
  color: #26353b;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 500;
}

.community-card-ade {
  left: 0;
  top: 0;
  width: 410px;
  display: grid;
  grid-template-columns: 214px 1fr;
  gap: 16px;
}

.community-card-ade .community-image {
  width: 214px;
  height: 321px;
}

.community-card-ade .community-copy {
  padding-top: 0;
}

.community-card-family {
  left: 0;
  top: 338px;
  width: 214px;
}

.community-card-family .community-image {
  width: 214px;
  height: 282px;
}

.community-card-deasy {
  left: 226px;
  top: 156px;
  width: 210px;
}

.community-card-deasy .community-image {
  width: 210px;
  height: 374px;
}

.community-card-deasy .community-copy {
  padding-top: 8px;
}

.community-card-party {
  left: 447px;
  top: 0;
  width: 158px;
}

.community-card-party .community-image {
  width: 158px;
  height: 158px;
}

.community-banner {
  margin-top: 9px;
  color: #0087c9;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.community-card-edi {
  left: 616px;
  top: 0;
  width: 158px;
}

.community-card-edi .community-image {
  width: 158px;
  height: 158px;
}

.community-card-edi .community-copy {
  padding-top: 6px;
}

.community-card-edi .community-copy h2 {
  font-size: 11px;
}

.community-card-edi .community-copy h2 small,
.community-card-edi .community-copy p {
  font-size: 7px;
}

.community-card-linawati {
  left: 447px;
  top: 209px;
  width: 158px;
}

.community-card-linawati .community-image {
  width: 158px;
  height: 280px;
}

.community-card-linawati .community-copy {
  padding-top: 7px;
}

.community-card-linawati .community-copy h2 {
  font-size: 11px;
}

.community-card-linawati .community-copy h2 small,
.community-card-linawati .community-copy p {
  font-size: 7px;
}

.community-card-homebrew {
  left: 616px;
  top: 231px;
  width: 158px;
}

.community-card-homebrew .community-image {
  width: 158px;
  height: 188px;
}

.community-card-hendra {
  left: 449px;
  top: 506px;
  width: 325px;
  min-height: 115px;
  background: #1596d0;
  color: #fff;
  padding: 22px 28px;
}

.community-card-hendra .community-copy h2,
.community-card-hendra .community-copy h2 small,
.community-card-hendra .community-copy p {
  color: #fff;
}

.community-card-hendra .community-copy h2 {
  font-size: 16px;
  margin-bottom: 13px;
}

.community-card-hendra .community-copy h2 small {
  font-size: 8px;
}

.community-card-hendra .community-copy p {
  font-size: 10px;
  line-height: 1.25;
  max-width: 245px;
}

.community-waves {
  position: absolute;
  width: 150px;
  display: grid;
  gap: 6px;
  z-index: 5;
}

.community-waves-left {
  left: -55px;
  top: 22px;
}

.community-waves-right {
  right: -53px;
  bottom: 50px;
}

.community-reference-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 135px;
}

@media (max-width: 900px) {
  .community-reference-inner {
    width: 90%;
    padding: 100px 0 90px;
  }

  .community-collage {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .community-card,
  .community-card-ade,
  .community-card-family,
  .community-card-deasy,
  .community-card-party,
  .community-card-edi,
  .community-card-linawati,
  .community-card-homebrew,
  .community-card-hendra {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }

  .community-card-ade {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(145px, 45%) 1fr;
    gap: 12px;
  }

  .community-card-ade .community-image,
  .community-card-family .community-image,
  .community-card-deasy .community-image,
  .community-card-party .community-image,
  .community-card-edi .community-image,
  .community-card-linawati .community-image,
  .community-card-homebrew .community-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.15;
  }

  .community-card-ade .community-image { aspect-ratio: 214 / 321; }
  .community-card-family .community-image { aspect-ratio: 214 / 282; }
  .community-card-deasy .community-image { aspect-ratio: 210 / 374; }
  .community-card-party .community-image,
  .community-card-edi .community-image { aspect-ratio: 1; }
  .community-card-linawati .community-image { aspect-ratio: 158 / 280; }
  .community-card-homebrew .community-image { aspect-ratio: 158 / 188; }

  .community-card-hendra {
    grid-column: 1 / -1;
    min-height: 120px;
  }

  .community-copy h2 { font-size: 13px; }
  .community-copy p { font-size: 8px; }

  .community-waves-left { left: -15px; top: 22px; width: 105px; }
  .community-waves-right { right: -12px; bottom: 45px; width: 105px; }
  .community-reference-bottom { height: 70px; }
}

/* =========================================================
   PRODUCTS — REFERENCE LAYOUT ADD-ON
   Added without removing or changing existing CSS rules.
   ========================================================= */
.products-section {
  background: #edf4f7;
  color: #243039;
  overflow: hidden;
}

.products-reference-inner {
  position: relative;
  width: 100%;
  height: 83vh;
  /* min-height: 700px; */
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: start;
  padding-top: 157px;
}

.products-reference-visual {
  width: 100%;
  height: 522px;
  background: #fff;
  overflow: hidden;
  padding-left:25%;
}

.products-reference-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.products-reference-shop {
  height: 522px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*padding-top: 53px;*/
  position: relative;
  z-index: 2;
}

.products-order-button {
  width: 294px;
  height: 61px;
  border-radius: 34px;
  background: #1796d2;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-family: Lexend, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .3px;
  transition: transform .2s ease, filter .2s ease;
}

.products-order-button:hover {
  transform: translateY(-2px);
  filter: brightness(.96);
}

.products-whatsapp-icon {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  transform: rotate(-25deg);
}

.products-or {
  margin-top: 33px;
  margin-bottom: 18px;
  font-family: Lexend, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.products-marketplaces {
  display: block;
  width: 295px;
  height: 397px;
  object-fit: cover;
  object-position: center top;
}

.products-reference-waves {
  position: absolute;
  width: 230px;
  display: grid;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}

.products-reference-waves-top {
  left: -5px;
  top: 35px;
}

.products-reference-waves-bottom {
  right: -4px;
  bottom: 20px;
}

.products-section > .next-arrow {
  display: none;
}

.products-section > .bottom-bar {
  height: 11vh;
  z-index: 3;
}

.products-section > .bottom-bar .gray-section {
  flex: 4;
}

.products-section > .bottom-bar .blue-section {
  flex: 1;
}

@media (max-width: 900px) {
  .products-reference-inner {
    height: auto;
    min-height: 100svh;
    grid-template-columns: 1fr;
    padding-top: 100px;
    padding-bottom: 110px;
  }

  .products-reference-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 739 / 522;
  padding-left:0%;	
  }

  .products-reference-shop {
    height: auto;
    min-height: 430px;
    padding: 35px 20px 100px;
  }

  .products-order-button {
    width: min(294px, 82vw);
    height: 55px;
    font-size: 20px;
  }

  .products-marketplaces {
    width: min(295px, 80vw);
    height: 397px;
    max-width: 100%;
  }

  .products-reference-waves {
    width: 115px;
    gap: 6px;
  }

  .products-reference-waves-top {
    left: -8px;
    top: 18px;
  }

  .products-reference-waves-bottom {
    right: -8px;
    bottom: 74px;
  }

  .products-section > .bottom-bar {
    height: 70px;
  }
}

/* =========================================================
   ABOUT V2 — exact compact layout from the supplied reference.
   Existing CSS above is intentionally preserved.
   ========================================================= */
.about-reference-v2 {
  background:#edf4f7;
  color:#596166;
  min-height:100vh;
  height:auto;
  overflow:hidden;
  position:relative;
}
.about-v2-top {
  position:relative;
  height:39vh;
  min-height:360px;
  display:grid;
  grid-template-columns:49% 51%;
  z-index:1;
}
.about-v2-left {
  background:#edf4f7;
  padding-top:63px;
  min-width:0;
}
.about-v2-title {
  height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding-right:4px;
}
.about-v2-title h1 {
  margin:0;
  color:#1685c2;
  font-size:clamp(17px,2vw,27px);
  line-height:1;
  font-weight:800;
}
.about-v2-waves,.about-v2-corner-waves {
  width:74px;
  display:grid;
  gap:4px;
}
.about-v2-compare {
  background:rgba(255,255,255,.97);
  width:100%;
  height:calc(100vh - 38px);
/*  min-height:322px;*/
  padding:7px 9px 8px 12px;
}
.about-v2-row {
  display:grid;
  grid-template-columns:25% 43% 32%;
  align-items:center;
  min-height:28px;
  text-align:center;
  margin-bottom: 3%;
}
.about-v2-row > span {/*font-size:6.5px*/;font-weight:800;line-height:1.3;color:#4f585d;}
.about-v2-row > b {/*font-size:6.5px*/;line-height:1.35;color:#1685c2;font-weight:800;}
.about-v2-row > em {font-style:normal;/*font-size:6.2px*/;line-height:1.35;color:#969c9f;font-weight:700;}
.about-v2-heading {min-height:48px;margin-bottom:2px;}
.about-v2-heading > span {visibility:hidden;}
.about-v2-heading > em {font-size:8px;line-height:1.15;}
.about-v2-logo {
  display:inline-block;
/*  border:1.5px solid #596166;
  border-radius:4px 7px 7px 4px; */
  padding:4px 7px;
  color:#1685c2;
  font-size:7px;
  font-weight:500;
  letter-spacing:.4px;
  position:relative;
}
.about-v2-logo sup {font-size:4px;}
.about-v2-photo {
  min-width:0;
  height:39vh;
  min-height:360px;
  background:#f7f7f5 url("about-bottles-reference.jpg") center top/cover no-repeat;
}
.about-v2-story {
  position:relative;
  z-index:4;
  width:67%;
  min-height:15.5vh;
  margin-top:-7.5vh;
  background:#565c60;
  color:#fff;
  padding:18px 5% 16px 7.5%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-v2-story p {
  margin:0 0 12px;
  font-size:9px;
  line-height:1.18;
  color:#fff;
}
.about-v2-story p:last-child {margin-bottom:0;}
.about-v2-sterilization {
  position:relative;
  z-index:2;
  min-height:16.2vh;
  background:#d1d2d3;
  padding:14px 8% 12px;
}
.about-v2-section-title {
  display:flex;
  align-items:center;
  gap:16px;
}
.about-v2-section-title > span {flex:1;border-top:1px solid #71879a;}
.about-v2-section-title > div {text-align:center;}
.about-v2-section-title h2 {margin:0;color:#1685c2;font-size:11px;line-height:1.1;letter-spacing:.4px;}
.about-v2-section-title p {margin:2px 0 0;color:#6d7376;font-size:6.5px;line-height:1.1;}
.about-v2-stages {
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
  gap:7px;
  margin-top:12px;
}
.about-v2-stage {text-align:center;}
.about-v2-stage img {/*width:100%;*/height:17vw;filter:grayscale(1);display:block;margin:0 auto 2px;}
.about-v2-stage h3 {margin:0;color:#1685c2;font-size:7px;line-height:1.15;font-weight:800;}
.about-v2-stage p {margin:3px 0 0;color:#303b40; /*font-size:5.5px;*/ line-height:1.15;}
.about-v2-arrow {color:#527487;font-size:17px;text-align:center;}
.about-v2-video {
  position:relative;
  height:27.3vh;
  min-height:250px;
  background:#edf4f7;
  display:grid;
  place-items:center;
}
.about-v2-video-box {
  width:56%;
  height:20vh;
  min-height:190px;

  border:0;
  background:#9ea2a4;
  cursor:pointer;
  position:relative;
}
.about-v2-video-box span {
  position:absolute;
  left:50%;top:50%;
  transform:translate(-40%,-50%);
  width:0;height:0;
  border-top:22px solid transparent;
  border-bottom:22px solid transparent;
  border-left:36px solid #fff;
}
.about-v2-corner-waves {
  position:absolute;
  right:0;
  bottom:32px;
  width:75px;
}
.about-reference-v2 .bottom-bar {height:74px;z-index:10;}
.about-reference-v2 .next-arrow {display:none;}

@media (max-width:900px) {
  .about-v2-top {height:auto;min-height:0;grid-template-columns:1fr;}
  .about-v2-left {padding-top:82px;}
  .about-v2-title {padding-right:12px;}
  .about-v2-title h1 {font-size:21px;}
  .about-v2-compare {height:auto;min-height:0;padding:8px 5px 12px;}
  .about-v2-row {min-height:29px;grid-template-columns:24% 43% 33%;}
  .about-v2-row > span,.about-v2-row > b,.about-v2-row > em {font-size:10px;}
  .about-v2-photo {height:58vw;min-height:250px;background-size:cover;}
  .about-v2-story {width:100%;margin-top:0;min-height:auto;padding:20px 9%;}
  .about-v2-story p {font-size:9px;}
  .about-v2-sterilization {padding:16px 5%;}
  .about-v2-stages {grid-template-columns:1fr;gap:7px;}
  .about-v2-arrow {transform:rotate(90deg);}
  .about-v2-video {height:300px;min-height:300px;}
  .about-v2-video-box {width:78%;height:190px;min-height:190px;}
  .about-reference-v2 .bottom-bar {height:28px;}
}


/* Wave image replacement for all decorative wave groups.
   Container positioning/sizing remains controlled by each page's existing CSS. */
.wave-image {
  display: block;
  width: min(165px, 28vw);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}
.wave-image-bawah {
  display: block;
  width: min(165px, 28vw);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  margin-left: auto;
  margin-right:3px;
}


/* =========================================================
   COMMUNITY — DESKTOP REFERENCE MATCH V2
   Scoped only to .community-reference-v2 so other pages remain untouched.
   ========================================================= */
@media (min-width: 769px) {
  .community-reference-v2 {
    background: #edf4f7;
    min-height: 100vh;
    height: auto;
    overflow: hidden;
  }

  .community-reference-v2 .community-reference-inner {
    width: 100%;
    min-height: 835px;
    height: 835px;
    padding: 92px 0 135px;
    position: relative;
    margin: 0;
  }

  .community-reference-v2 .community-collage {
    position: relative;
    width: 774px;
    height: 620px;
    margin: 0 auto;
  }

  .community-reference-v2 .community-card {
    position: absolute;
    margin: 0;
  }

  .community-reference-v2 .community-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .community-reference-v2 .community-copy h2 {
    margin: 0 0 4px;
    color: #0087c9;
    font-size: 15px;
    line-height: 1.05;
    font-weight: 800;
  }

  .community-reference-v2 .community-copy h2 small {
    color: #28353b;
    font-size: 8px;
    font-weight: 500;
  }

  .community-reference-v2 .community-copy p {
    margin: 0;
    color: #26353b;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 500;
  }

  /* The following coordinates mirror the supplied desktop reference. */
  .community-reference-v2 .community-card-ade {
    left: 0;
    top: 0;
    width: 410px;
    display: grid;
    grid-template-columns: 214px 1fr;
    gap: 16px;
  }
  .community-reference-v2 .community-card-ade .community-image { width: 214px; height: 321px; }

  .community-reference-v2 .community-card-family { left: 0; top: 338px; width: 214px; }
  .community-reference-v2 .community-card-family .community-image { width: 214px; height: 282px; }

  .community-reference-v2 .community-card-deasy { left: 226px; top: 156px; width: 210px; }
  .community-reference-v2 .community-card-deasy .community-image { width: 210px; height: 374px; }
  .community-reference-v2 .community-card-deasy .community-copy { padding-top: 8px; }

  .community-reference-v2 .community-card-party { left: 447px; top: 0; width: 158px; }
  .community-reference-v2 .community-card-party .community-image { width: 158px; height: 158px; }
  .community-reference-v2 .community-banner {
    margin-top: 9px;
    color: #0087c9;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .community-reference-v2 .community-card-edi { left: 616px; top: 0; width: 158px; }
  .community-reference-v2 .community-card-edi .community-image { width: 158px; height: 158px; }
  .community-reference-v2 .community-card-edi .community-copy { padding-top: 25px; }
  .community-reference-v2 .community-card-edi .community-copy h2 { font-size: 11px; }
  .community-reference-v2 .community-card-edi .community-copy h2 small,
  .community-reference-v2 .community-card-edi .community-copy p { font-size: 7px; }

  .community-reference-v2 .community-card-linawati { left: 447px; top: 209px; width: 158px; }
  .community-reference-v2 .community-card-linawati .community-image { width: 158px; height: 280px; }
  .community-reference-v2 .community-card-linawati .community-copy { padding-top: 7px; }
  .community-reference-v2 .community-card-linawati .community-copy h2 { font-size: 11px; }
  .community-reference-v2 .community-card-linawati .community-copy h2 small,
/*  .community-reference-v2 .community-card-linawati .community-copy p { font-size: 7px; } */

  .community-reference-v2 .community-card-homebrew { left: 616px; /*top: 231px;*/ top: 35%; width: 158px; }
  .community-reference-v2 .community-card-homebrew .community-image { width: 158px; height: 188px; }

  .community-reference-v2 .community-card-hendra {
    left: 449px;
    top: 506px;
    width: 325px;
    min-height: 80px;
    background: #1596d0;
    color: #fff;
    padding: 22px 28px;
  }
  .community-reference-v2 .community-card-hendra .community-copy h2,
  .community-reference-v2 .community-card-hendra .community-copy h2 small,
  .community-reference-v2 .community-card-hendra .community-copy p { color: #fff; }
  .community-reference-v2 .community-card-hendra .community-copy h2 { font-size: 16px; margin-bottom: 13px; }
  .community-reference-v2 .community-card-hendra .community-copy h2 small { font-size: 8px; }
  .community-reference-v2 .community-card-hendra .community-copy p { font-size: 10px; line-height: 1.25; max-width: 245px; }

  .community-reference-v2 .community-waves {
    position: absolute;
    width: 150px;
    display: block;
    z-index: 5;
  }
  .community-reference-v2 .community-waves .wave-image {
    display: block;
    width: 150px;
    height: auto;
  }
  .community-reference-v2 .community-waves-left { left: 0; top: 22px; }
  .community-reference-v2 .community-waves-right { right: 0; bottom: 42px; }

  .community-reference-v2 .community-reference-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 135px;
  }
}

@media (max-width: 768px) {
  .community-reference-v2 .community-reference-inner {
    min-height: calc(150vh);
    height: auto;
  }
}


/* =========================================================
   COMMUNITY — RESPONSIVE DESKTOP WIDTH V3
   Reference: approximately 6.2% left whitespace and 0% right
   whitespace at the supplied 883px desktop reference width.
   Only .community-reference-v2 is affected.
   ========================================================= */
@media (min-width: 769px) {
  .community-reference-v2 {
    --community-v3-scale: clamp(0.86, calc(94vw / 830px), 1.75);
    overflow: hidden;
  }

  .community-reference-v2 .community-reference-inner {
    width: 100%;
    height: calc(92px + (620px * var(--community-v3-scale)) + 115px);
    min-height: 0;
    padding: 0;
    position: relative;
  }

  .community-reference-v2 .community-collage {
    position: absolute;
    left: 6.2%;
    top: 92px;
    width: 830px;
    height: 620px;
    margin: 0;
    transform: scale(var(--community-v3-scale));
    transform-origin: left top;
  }

  /* Keep the reference proportions while allowing the complete collage
     to grow/shrink with the desktop viewport. */
  .community-reference-v2 .community-card-hendra {
    box-sizing: content-box;
  }

  .community-reference-v2 .community-waves-left {
    left: 0;
    top: 22px;
  }

  .community-reference-v2 .community-waves-right {
    right: 0;
    bottom: 142px;
  }

  .community-reference-v2 .community-reference-bottom {
    height: 135px;
  }
}

/* =========================================================
   COMMUNITY — DESKTOP V4 MICRO ADJUSTMENTS
   Only .community-reference-v2 is affected.
   ========================================================= */
@media (min-width: 769px) {
  .community-reference-v2 {
    /* Fill the available desktop width from the 6.2% left edge
       all the way to the right edge, without a desktop max-cap. */
    --community-v4-scale: clamp(0.86, calc(93.8vw / 830px), 2.40);
  }

  .community-reference-v2 .community-reference-inner {
    /* Keep a deliberate breathing space before the gray/blue bottom bar. */
    height: calc(96px + (725px * var(--community-v4-scale)) + 265px);
  }

  .community-reference-v2 .community-collage {
    transform: scale(var(--community-v4-scale));
  }

  /* Prevent Hendra from covering Linawati's text block. */
  .community-reference-v2 .community-card-hendra {
    top: 600px;
  }

  /* Keep the bottom bar visually separated from the Hendra card. */
  .community-reference-v2 .community-reference-bottom {
    height: 135px;
    bottom: 0;
  }
}