/* =============================================================
   ROOT & RESET
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --green: #347A00; --black: #313131; --dark: #000000; --gray: #616161; --light-gray: #F1F1F1; --mid-gray: #9C9C9C; --white: #FFFFFF; --border: #CBCBCB; --placeholder:#A5A5A5; --shadow-card: 0 4px 24px rgba(0,0,0,0.10); --nav-bar-h: 100px; --brand-icon-filter: brightness(0) saturate(100%) invert(33%) sepia(67%) saturate(1479%) hue-rotate(59deg) brightness(94%) contrast(89%); }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Outfit', sans-serif; font-size: 16px; color: var(--black); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; max-width: 100%; }
picture > img { width: auto; height: auto; }
a { text-decoration: none; }
ul { list-style: none; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 3000;
  transform: translateY(-140%);
  background: #ffffff;
  color: #000000;
  border: 2px solid var(--green);
  border-radius: 4px;
  padding: 10px 14px;
  font-weight: 600;
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
/* Performance: below-the-fold sections are skipped by the browser until needed. */
.about-us,
.services,
.wsua,   
.our-work,
.pricing,
.download-app,
.blog,
.fr-section,
.fq-section,
.sl-section,
.ft {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
.pricing { contain-intrinsic-size: 1400px; }
.ft { contain-intrinsic-size: 700px; }
/* =============================================================
   TOP STRIP  (Figma: layout_RJEUYE → w:1440, h:50, fill:#313131)
============================================================= */

/* Strip wrapper — Figma: h:50, bg:#313131, padding x:79 */
.ts { width: 100%; min-height: 50px; background: #313131; display: flex; align-items: center; overflow-x: clip; }
.ts-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 79px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; box-sizing: border-box; min-width: 0; }
.ts-ltext { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: #ffffff; line-height: 18px; min-width: 0; flex: 1 1 auto; }
.ts-rgroup { display: flex; align-items: center; justify-content: flex-end; gap: 66px; flex-shrink: 0; min-width: 0; }
.ts-rtext { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: #ffffff; line-height: 18px; min-width: 0; flex-shrink: 1; }
.ts-soc-links { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.ts-soc-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; min-width: 29px; min-height: 29px; background: #FFFFFF; border-radius: 50%; color: #313131; text-decoration: none; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; }
.ts-soc-link::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.ts-soc-link:hover { opacity: 0.85; }
.ts-soc-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ts-soc-link svg { display: block; flex-shrink: 0; pointer-events: none; position: relative; z-index: 1; }
/* Top Strip — desktop single row (Figma 1440) */
@media (min-width: 1100px) {  .ts { height: 50px; min-height: 50px; }
.ts-inner { flex-wrap: nowrap; padding: 0 79px; min-height: 50px; gap: 0; }
.ts-ltext { white-space: nowrap; flex: 0 1 auto; }
.ts-rtext { white-space: nowrap; flex-shrink: 0; }
.ts-rgroup { margin-left: auto; gap: 66px; }}
/* Top Strip — tablet */
@media (max-width: 1099px) and (min-width: 769px) {  .ts-inner { padding: 10px 40px; justify-content: center; gap: 8px 24px; }
.ts-ltext { flex: 1 1 100%; text-align: center; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
.ts-rgroup { flex: 1 1 auto; width: 100%; justify-content: center; gap: 24px; margin-left: 0; }
.ts-rtext { white-space: nowrap; }}
/* Top Strip — mobile */
@media (max-width: 768px) {  .ts { height: auto; min-height: 0; }
.ts-inner { flex-direction: column; align-items: center; padding: 10px 16px; gap: 8px; text-align: center; }
.ts-ltext { flex: none; width: 100%; max-width: 100%; text-align: center; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }
.ts-rgroup { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; gap: 10px 16px; }
.ts-rtext { white-space: normal; text-align: center; flex: 1 1 auto; max-width: 100%; }
.ts-soc-link { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
.ts-soc-link svg { width: 14px; height: 14px; }}
@media (max-width: 480px) {  .ts-inner { padding: 8px 14px; gap: 6px; }
.ts-ltext, .ts-rtext { font-size: 12px; line-height: 16px; }
.ts-rgroup { gap: 8px 12px; }
.ts-soc-links { gap: 10px; }
.ts-soc-link { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.ts-soc-link svg { width: 13px; height: 13px; }}
/* =============================================================
   NAVBAR   (height: 100px, sticky glass effect)
============================================================= */
.navbar { position: relative; top: auto; z-index: 1; width: 100%; max-width: 100%; height: var(--nav-bar-h); min-height: var(--nav-bar-h); overflow-x: clip; background: rgba(255, 255, 255, 0.76); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: box-shadow 0.3s; }
.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.12); }
/* Fixed nav shell — desktop + mobile (top offset via JS below top strip) */
.nav-sticky-wrap { display: block; position: fixed; left: 0; right: 0; width: 100%; height: var(--nav-bar-h); min-height: var(--nav-bar-h); z-index: 1002; }
/* In-flow height reserve so content does not sit under fixed nav */
.nav-mobile-spacer { display: block; height: var(--nav-bar-h); width: 100%; flex-shrink: 0; pointer-events: none; }
.nav-inner { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 62px; height: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 49px; min-width: 0; }
.nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; flex-grow: 0; min-width: 162px; max-width: 262px; line-height: 0; z-index: 2; }
.nav-logo picture { display: inline-flex; align-items: center; width: auto; height: 70px; line-height: 0; }
.nav-logo img { display: block; height: 70px; width: auto; min-height: 54px; max-height: 70px; min-width: 140px; object-fit: contain; object-position: left center; }
.nav-links { display: flex; align-items: center; gap: 32px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nav-links li { flex-shrink: 0; }
.nav-link { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; text-transform: uppercase; color: var(--gray); letter-spacing: 0.02em; transition: color 0.2s; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.btn-myaccount { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--green); border: 1px solid var(--green); border-radius: 5px; padding: 9px 20px; background: transparent; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.btn-myaccount:hover { background: var(--green); color: #fff; }
.btn-pickup { display: flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--white); background: var(--green); border-radius: 5px; padding: 9px 20px; transition: background 0.2s; white-space: nowrap; }
.btn-pickup:hover { background: #2B6500; }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--black); transition: all 0.3s; }
/* Mobile nav overlay — hidden on desktop */
.nav-overlay { display: none; }
/* =============================================================
   HERO SECTION  (Figma: w:1440, h:720, layout_ZQ6UKK)
============================================================= */
.hero { position: relative; width: 100%; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; display: block; }
.hero-content { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 64px 80px 43px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-label { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #347A00; line-height: 20px; margin: 0 0 29px 25px; }
.hero-heading { font-family: 'Playfair Display', serif; font-size: 80px; font-weight: 700; line-height: 80px; margin: 0 0 29px 0; display: flex; flex-direction: column; }
.hh-dark { color: #000000; display: block; }
.hh-green { color: #347A00; display: block; }
.hh-mobile-line { display: flex; flex-direction: column; }
.hero-subtitle { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 400; color: #616161; line-height: 28px; margin: 0 0 59px 0; }
/* ---- Badge card ------------------------------------------------ */
.hbc-card { display: flex; align-items: center; width: 642px; height: 87px; background: #FFFFFF; border-radius: 10px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15); margin: 0 0 51px 0; }
.hbc-item { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.hbc-s1 { width: 221px; padding-left: 21px; gap: 15px; }
.hbc-s2 { width: 202px; padding-left: 9px; gap: 19px; }
.hbc-s3 { width: 217px; padding-left: 8px; gap: 17px; }
.hbc-ic { display: block; flex-shrink: 0; object-fit: contain; }
.hbc-s1 .hbc-ic { width: 54px; height: 54px; }
.hbc-s2 .hbc-ic { width: 50px; height: 50px; }
.hbc-s3 .hbc-ic { width: 52px; height: 52px; }
.hbc-txt { display: flex; flex-direction: column; gap: 2px; }
/* ts3: Outfit Medium 500, 16px, black */
.hbc-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 500; color: #000000; line-height: 1.2; white-space: nowrap; }
/* ts4: Outfit Regular 400, 14px, #616161 */
.hbc-sub { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: #616161; line-height: 1.3; white-space: nowrap; }
.hbc-divider { width: 1px; height: 63px; background: rgba(52, 122, 0, 0.3); flex-shrink: 0; align-self: center; margin-top: 5px; }
/* ---- Buttons --------------------------------------------------- */
.hero-btns { display: flex; align-items: center; gap: 40px; }
.hbtn-primary { display: flex; align-items: center; justify-content: space-between; width: 208px; height: 42px; background: #347A00; border-radius: 5px; padding: 0 10px; text-decoration: none; flex-shrink: 0; transition: background 0.2s; }
.hbtn-primary:hover { background: #2B6500; }
.hbtn-primary span { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #FFFFFF; line-height: 1; }
.hbtn-primary img { width: 27px; height: 27px; display: block; flex-shrink: 0; }
.hbtn-outline { display: flex; align-items: center; justify-content: space-between; width: 214px; height: 42px; background: transparent; border: 1px solid #347A00; border-radius: 5px; padding: 0 10px; text-decoration: none; flex-shrink: 0; transition: background 0.2s; }
.hbtn-outline:hover { background: rgba(52, 122, 0,0.08); }
.hbtn-outline span { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #347A00; line-height: 1; }
.hbtn-outline img { width: 27px; height: 27px; display: block; flex-shrink: 0; }
/* =============================================================
   ABOUT US  (Figma: w:1440, h:716, layout_5POGHJ)
============================================================= */
.about-us { position: relative; width: 100%; overflow: hidden; }
/* Mobile banner — hidden on desktop */
.about-mobile-banner { display: none; }
.about-mobile-banner picture { width: 100%; height: auto; }
.about-image { position: absolute; inset: 0; z-index: 0; }
.about-image picture { width: 100%; height: 100%; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.about-inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 94px 129px 93px 80px; display: flex; justify-content: flex-end; }
.about-content { position: relative; width: 472px; /* Frame 2 w:472 */ display: flex; flex-direction: column; padding-left: 24px; background: transparent; }
.about-badge { display: inline-flex; align-items: center; gap: 2px; background: rgba(52, 122, 0, 0.1); border-radius: 8px; width: 128px; height: 31px; padding-left: 10px; margin-bottom: 27px; flex-shrink: 0; }
.about-badge-leaf { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.about-badge-text { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; color: #347A00; line-height: 1; }
.about-heading { font-family: 'Playfair Display', serif; font-size: 60px; font-weight: 700; line-height: 70px; margin: 0 0 27px 0; display: flex; flex-direction: column; }
.au-h-dark { color: #000000; display: block; }
.au-h-green { color: #347A00; display: block; }
.au-mobile-line { display: flex; flex-direction: column; }
.about-desc { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; color: #616161; line-height: 24px; margin: 0 0 24px 0; }
.about-desc strong { font-weight: 600; color: #616161; }
.about-sep { display: block; width: 219px; height: 11px; object-fit: contain; margin: 0 0 24px 0; flex-shrink: 0; }
.about-btn { display: flex; align-items: center; justify-content: space-between; width: 233px; height: 48px; background: #347A00; border-radius: 5px; padding: 0 22px 0 23px; text-decoration: none; flex-shrink: 0; transition: background 0.2s; }
.about-btn:hover { background: #2B6500; }
.about-btn span { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #FFFFFF; line-height: 1; }
.about-btn img { width: 27px; height: 27px; display: block; flex-shrink: 0; }
/* =============================================================
   SERVICES   (height: 1012px, bg: white)
============================================================= */
.services { background: #FFFFFF; padding: 20px 80px 33px; width: 100%; }
.section-tag-wrap { margin-bottom: 16px; }
.section-tag-wrap.center { text-align: center; }
.section-tag { display: inline-block; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--green); letter-spacing: 0.06em; background: rgba(52, 122, 0,0.1); padding: 4px 14px; border-radius: 4px; }
.section-tag.light { background: rgba(255,255,255,0.15); color: var(--white); }
.section-heading-outfit { font-family: 'Outfit', sans-serif; font-size: 60px; font-weight: 700; line-height: 70px; margin-bottom: 48px; color: var(--black); }
.section-heading-outfit .dark { color: var(--black); }
.section-heading-outfit .green { color: var(--green); }
.section-heading-outfit.center { text-align: center; display: block; }
.section-heading-playfair { font-family: 'Playfair Display', serif; font-size: 50px; font-weight: 700; line-height: 60px; margin-bottom: 16px; color: var(--dark); }
.section-heading-playfair .green { color: var(--green); }
.section-heading-playfair.center { text-align: center; }
/* Services section header */
.svc-header { text-align: center; margin-bottom: 22px; }
.svc-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.svc-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 9px 0; }
.svch-green { color: #347A00; }
.svc-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 30px; color: #616161; text-transform: capitalize; margin: 0; }
.svc-eco { font-weight: 600; color: #347A00; }
.svc-carousel-wrap { width: 100%; }
/* Services grid */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px 30px; }
/* Service card */
.svc-card { position: relative; background: #F3F3F3; border-radius: 10px; height: 336px; overflow: hidden; }
.svc-photo { position: absolute; top: 0; left: 0; right: 0; height: 176px; border-radius: 10px 10px 10px 100px; overflow: hidden; }
.svc-photo picture { width: 100%; height: 100%; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-circle { position: absolute; top: 137px; left: 24px; width: 66px; height: 66px; border-radius: 50%; background: #FFFFFF; border: 2px solid #347A00; display: flex; align-items: center; justify-content: center; z-index: 2; }
.svc-circle img { width: 42px; height: 42px; object-fit: contain; display: block; }
/* Card text body */
.svc-body { position: absolute; top: 217px; left: 0; right: 0; padding: 0 24px; }
.svc-name { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 18px; line-height: 23px; color: #000000; text-transform: capitalize; margin: 0 0 9px 0; }
.svc-text { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; color: #616161; text-transform: capitalize; margin: 0 0 9px 0; }
.svc-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px; color: #347A00; text-transform: capitalize; text-decoration: none; }
.svc-link svg { flex-shrink: 0; }
/* =============================================================
   OUR DIFFERENCE / WHAT SETS US APART  (Figma: 1440×778, content-based height)
============================================================= */
.wsua { position: relative; width: 100%; overflow: hidden; }
/* Mobile banner — hidden on desktop */
.wsua-mobile-banner { display: none; }
.wsua-mobile-banner picture { width: 100%; height: auto; }
.wsua-bg { position: absolute; inset: 0; z-index: 0; }
.wsua-bg picture { width: 100%; height: 100%; }
.wsua-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.wsua-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 71px 80px 71px; box-sizing: border-box; }
.wsua-body { position: relative; width: 100%; max-width: 601px; }
.wsua-pill { display: inline-flex; align-items: center; gap: 2px; height: 31px; background: rgba(52, 122, 0,0.1); border-radius: 8px; padding: 0 9px 0 10px; margin-bottom: 33px; }
.wsua-pill-ic { width: 18px; height: 18px; object-fit: cover; display: block; }
.wsua-pill-text { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-left: 2px; }
.wsua-heading { font-family: 'Playfair Display', serif; font-size: 60px; font-weight: 700; line-height: 70px; text-transform: capitalize; display: flex; flex-direction: column; margin: 0 0 34px 0; }
.wsua-h-dark { color: #000000; }
.wsua-h-green { color: #347A00; }
.wsua-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #616161; text-transform: capitalize; max-width: 546px; width: 100%; margin: 0 0 33px 0; }
.wsua-brand { font-weight: 600; color: #347A00; font-style: normal; }
.wsua-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 71px; row-gap: 40px; width: 100%; max-width: 601px; margin-bottom: 45px; }
.wsua-grid::before { content: ''; position: absolute; left: calc(50% - 0.5px); top: 0; bottom: 0; width: 1px; background: #DBDBDB; pointer-events: none; }
.wsua-grid::after { content: ''; position: absolute; left: 4px; right: 4px; top: calc(50% - 0.5px); width: auto; height: 1px; background: #DBDBDB; pointer-events: none; }
.wsua-item { display: flex; align-items: flex-start; gap: 16px; }
.wsua-circle { width: 48px; min-width: 48px; height: 48px; border-radius: 50%; background: rgba(52, 122, 0,0.2); display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.wsua-circle img { object-fit: contain; display: block; }
.wsua-item:nth-child(2) .wsua-circle img { width: 30px; height: 30px; }
.wsua-item:nth-child(4) .wsua-circle img { width: 27px; height: 27px; }
.wsua-item-text { flex: 1; }
.wsua-item-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 18px; line-height: 23px; color: #000000; text-transform: capitalize; margin: 0 0 9px 0; }
.wsua-item-desc { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; color: #616161; text-transform: capitalize; margin: 0; }
.wsua-cta { display: inline-flex; align-items: center; justify-content: space-between; width: 233px; height: 48px; background: #347A00; border-radius: 5px; padding: 0 14px 0 23px; text-decoration: none; gap: 8px; cursor: pointer; }
.wsua-cta span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.01em; white-space: nowrap; }
.wsua-cta img { width: 27px; height: 27px; object-fit: contain; display: block; flex-shrink: 0; }
/* =============================================================
   OUR WORK   (height: 696px, bg: white)
============================================================= */
.our-work { background: #FFFFFF; padding: 37px 80px; width: 100%; }
.ow-header { text-align: center; margin-bottom: 35px; }
.ow-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.ow-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 6px 0; }
.ow-h-green { color: #347A00; }
.ow-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #616161; text-transform: capitalize; margin: 0; }
.ow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ow-card { background: #F3F3F3; border-radius: 15px; height: 443px; overflow: hidden; cursor: pointer; }
.ow-card picture { width: 100%; height: 100%; }
.ow-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ow-card:hover img { transform: scale(1.04); }
.ow-carousel-wrap { width: 100%; }
/* =============================================================
   PRICING & PACKAGES   (height: 1406px, bg: white)
============================================================= */
.pricing { background: #FFFFFF; padding: 20px 80px 92px; width: 100%; }
.pr-header { text-align: center; margin-bottom: 25px; }
.pr-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.pr-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 14px; }
.pr-h-green { color: #347A00; }
.pr-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #616161; text-transform: capitalize; margin: 0 0 16px; }
.pr-gst-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #347A00; border-radius: 100px; padding: 4px 14px 4px 12px; background: transparent; }
.pr-gst-ic { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.pr-gst-txt { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 400; color: #616161; text-transform: capitalize; white-space: nowrap; }
.pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.pr-row1 { margin-bottom: 58px; }
.pr-row2 { align-items: start; }
.pr-carousel-wrap { width: 100%; }
/* ═══════════════════════════════════════════
   ROW 1 – Category pricing cards
═══════════════════════════════════════════ */
.pr-cat-card { background: #F3F3F3; border-radius: 10px; height: 466px; position: relative; overflow: hidden; }
/* Photo (top 176px) */
.pr-cat-photo { width: 100%; height: 176px; overflow: hidden; border-radius: 10px 10px 0 0; }
.pr-cat-photo picture { width: 100%; height: 100%; }
.pr-cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-cat-circle { position: absolute; top: 137px; left: 50%; transform: translateX(-50%); width: 66px; height: 66px; background: #FFFFFF; border: 2px solid #347A00; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pr-cat-circle img { object-fit: contain; width: revert-layer !important; }
.pr-cat-body { padding: 36px 25px 0 8px; }
.pr-cat-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 28px; color: #000000; text-align: center; text-transform: capitalize; margin: 0 0 6px; }
.pr-cat-line { width: 67px; height: 2px; background: #347A00; margin: 0 auto 9px; }
.pr-item-table { width: 100%; }
.pr-item-row { display: flex; justify-content: space-between; align-items: center; padding: 0 0; height: 28px; border-bottom: 1px dashed #D9D9D9; }
.pr-item-row.pr-last { border-bottom: none; }
.pr-item-name { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-transform: capitalize; }
.pr-item-name::before { content: "• "; color: #616161; }
.pr-item-price { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; }
.pr-price-list-card { display: flex; flex-direction: column; align-items: center; padding: 35px 28px 0; overflow: visible; }
.pr-pl-icon { width: 108px; height: 108px; margin-bottom: 14px; flex-shrink: 0; }
.pr-pl-icon img { width: 100%; height: 100%; object-fit: contain; }
.pr-pl-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 28px; letter-spacing: -0.02em; text-align: center; color: #000000; text-transform: capitalize; margin: 0 0 16px; line-height: 1.25; }
.pr-pl-line { width: 66px; height: 1px; background: #616161; margin: 0 auto 12px; opacity: 0.4; }
.pr-pl-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #616161; text-align: center; text-transform: capitalize; margin: 0 0 30px; }
.pr-pl-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; width: 242px; height: 48px; background: #347A00; border-radius: 5px; text-decoration: none; margin-bottom: 30px; transition: opacity 0.2s; }
.pr-pl-btn:hover { opacity: 0.9; }
.pr-pl-btn-txt { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.5px; }
.pr-pl-btn-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; }
.pr-trust-row { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
.pr-trust-item { display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 14px; color: #616161; text-transform: capitalize; white-space: nowrap; }
.pr-trust-item img { width: 16px !important; height: 16px; display: block; flex-shrink: 0; }
.pr-trust-sep { width: 1px; height: 16px; background: #D1D1D1; }
/* ═══════════════════════════════════════════
   ROW 2 – Package cards
═══════════════════════════════════════════ */
.pr-pkg-wrapper { position: relative; padding-top: 0px; }
.pr-popular-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: #347A00; border-radius: 5px; padding: 4px 10px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; z-index: 3; }
/* Base package card */
.pr-pkg-card { background: #F3F3F3; border-radius: 10px; height: 551px; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 25px; }
.pr-pkg-popular { border: 1.5px solid #347A00; }
/* Icon circle */
.pr-pkg-circle { width: 66px; height: 66px; background: #FFFFFF; border: 2px solid #347A00; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; }
.pr-pkg-circle img { object-fit: contain; width: revert-layer !important; }
.pr-pkg-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 28px; color: #000000; text-align: center; text-transform: capitalize; margin: 0 0 13px; line-height: 1.32; }
.pr-pkg-sep { width: 67px; height: 2px; background: #347A00; margin-bottom: 7px; }
.pr-pkg-price { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 35px; color: #000000; text-align: center; text-transform: capitalize; margin: 0 0 14px; }
.pr-pkg-discount-box { width: 100%; display: flex; flex-direction: column; align-items: center; border-top: 1px dashed #D9D9D9; border-bottom: 1px dashed #D9D9D9; border-radius: 0; padding: 0 0 10px; opacity: 1; position: relative; margin-bottom: 11px; }
.pr-pkg-pct { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 80px; color: #000000; line-height: 1.05; text-align: center; text-shadow: 0px 4px 2px rgba(52, 122, 0, 0.5); text-transform: capitalize; display: block; }
.pr-pkg-pct-label { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-align: center; text-transform: capitalize; display: block; }
.pr-pkg-worth { display: flex; flex-direction: column; align-items: center; margin-bottom: 17px; }
.pr-pkg-worth-amt { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 35px; color: #347A00; text-align: center; text-transform: capitalize; display: block; line-height: 1.2; }
.pr-pkg-worth-label { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 18px; color: #616161; text-align: center; text-transform: capitalize; display: block; }
/* CTA Buttons */
.pr-pkg-btn { width: 242px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; }
.pr-pkg-btn-outline { border: 1.5px solid #347A00; color: #000000; background: transparent; }
.pr-pkg-btn-outline:hover { background: #347A00; color: #FFFFFF; }
.pr-pkg-btn-solid { background: #347A00; border: 1.5px solid #347A00; color: #FFFFFF; }
.pr-pkg-btn-solid:hover { background: #285F00; }
/* =============================================================
   DOWNLOAD APP / HASSLE FREE CARE  (Figma: 1440×729, content-based height)
============================================================= */
.download-app { position: relative; width: 100%; overflow: hidden; }
/* Mobile banner — hidden on desktop */
.da-mobile-banner { display: none; }
.da-mobile-banner picture { width: 100%; height: auto; }
.da-bg { position: absolute; inset: 0; z-index: 0; }
.da-bg picture { width: 100%; height: 100%; }
.da-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; }
.da-inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 50px 80px 80px; box-sizing: border-box; }
.da-content { position: relative; width: 100%; max-width: 504px; }
.da-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(52, 122, 0, 0.1); border-radius: 8px; height: 31px; min-width: 202px; padding: 0 8px 0 10px; margin-bottom: 23px; }
.da-badge img { flex-shrink: 0; }
.da-badge span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; line-height: 1; }
.da-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 60px; line-height: 70px; color: #000000; text-transform: capitalize; margin: 0 0 23px; }
.da-h-green { color: #347A00; }
.da-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #616161; text-transform: capitalize; max-width: 435px; width: 100%; margin: 0 0 40px; }
.da-features { width: 100%; max-width: 504px; margin-bottom: 47px; }
.da-features picture { width: 100%; max-width: 504px; }
.da-features img { width: 100%; max-width: 504px; height: 68px; display: block; object-fit: contain; object-position: left center; }
.da-dl-btn { display: block; width: 218px; height: 48px; margin-bottom: 45px; transition: opacity 0.2s; }
.da-dl-btn picture { width: 100%; height: 100%; }
.da-dl-btn:hover { opacity: 0.88; }
.da-dl-btn img { width: 100%; height: 100%; display: block; }
.da-available-label { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 18px; color: #616161; text-transform: capitalize; margin: 0 0 17px; }
.da-store-badges { display: flex; align-items: center; gap: 21px; }
.da-store-link { display: block; transition: opacity 0.2s; }
.da-store-link:hover { opacity: 0.85; }
.da-store-link img { width: 138px; height: 46px; display: block; object-fit: contain; }
/* =============================================================
   BLOG   (1440 × 798px, white)
============================================================= */
.blog { background: #FFFFFF; padding: 50px 80px; width: 100%; }
/* ── Section header ── */
.bl-header { text-align: center; margin-bottom: 41px; }
.bl-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.bl-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 14px; }
.bl-h-green { color: #347A00; }
.bl-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #616161; text-transform: capitalize; margin: 0; }
.bl-carousel-wrap { display: contents; }
.bl-sm-row { display: contents; }
.bl-grid { display: grid; grid-template-columns: 479px repeat(3, 1fr); gap: 17px; align-items: start; margin-bottom: 41px; }
/* ══════════════════════════════════════
   FEATURED CARD (479 × 416px)
══════════════════════════════════════ */
.bl-feat-card { position: relative; width: 479px; height: 416px; border-radius: 10px; overflow: hidden; cursor: pointer; }
.bl-feat-card picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-feat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.bl-feat-card:hover .bl-feat-photo { transform: scale(1.03); }
.bl-feat-grd { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.55) 45%, transparent 75%); z-index: 1; }
.bl-most-pop { position: absolute; top: 10px; left: 15px; display: inline-flex; align-items: center; gap: 5px; background: #347A00; border-radius: 50px; width: 136px; height: 22px; padding: 0 10px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; z-index: 3; }
.bl-feat-body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
.bl-feat-meta { position: absolute; top: 222px; left: 15px; display: flex; align-items: center; gap: 0; }
.bl-feat-cat { display: inline-flex; align-items: center; background: #347A00; border-radius: 50px; height: 18px; padding: 0 8px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 11px; text-transform: uppercase; color: #FFFFFF; margin-right: 12px; }
.bl-feat-sep { width: 1px; height: 18px; background: rgba(97,97,97,0.3); margin-right: 12px; }
.bl-feat-date { display: inline-flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 11px; color: #FFFFFF; }
/* Title (y:257) */
.bl-feat-title { position: absolute; top: 257px; left: 15px; width: 360px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 25px; line-height: 30px; color: #FFFFFF; text-transform: capitalize; margin: 0; }
/* Description (y:329) */
.bl-feat-desc-txt { position: absolute; top: 329px; left: 15px; width: 282px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 12px; line-height: 15px; color: #616161; margin: 0; }
/* "Read More" link (y:375) */
.bl-feat-read { position: absolute; top: 375px; left: 15px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #347A00; }
.bl-feat-read:hover { text-decoration: underline; }
/* ══════════════════════════════════════
   SMALL CARD (250 × 416px)
══════════════════════════════════════ */
.bl-sm-card { position: relative; height: 416px; border-radius: 10px; border: 1px solid #D1D1D1; background: #FFFFFF; overflow: hidden; }
/* Photo area – top 169px */
.bl-sm-photo-wrap { position: relative; width: 100%; height: 169px; overflow: hidden; flex-shrink: 0; }
.bl-sm-photo-wrap picture { width: 100%; height: 100%; }
.bl-sm-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px 10px 0 0; transition: transform 0.4s; }
.bl-sm-card:hover .bl-sm-photo-wrap img { transform: scale(1.04); }
.bl-sm-cat { position: absolute; top: 160px; left: 20px; display: inline-flex; align-items: center; background: #347A00; border-radius: 50px; height: 18px; padding: 0 8px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 11px; text-transform: uppercase; color: #FFFFFF; z-index: 2; white-space: nowrap; }
.bl-sm-body { padding: 0 20px; padding-top: 44px; }
.bl-sm-date { display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 11px; color: #616161; margin-bottom: 11px; }
.bl-sm-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18px; line-height: 24px; color: #000000; text-transform: capitalize; margin: 0 0 13px; }
.bl-sm-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 12px; line-height: 15px; color: #616161; margin: 0 0 16px; }
.bl-sm-read { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #347A00; }
.bl-sm-read:hover { text-decoration: underline; }
.bl-sm-read img { flex-shrink: 0; width: 18px!important; }
/* ══════════════════════════════════════
   "EXPLORE ALL BLOGS" CTA
══════════════════════════════════════ */
.bl-cta-wrap { display: flex; justify-content: center; }
.bl-cta-btn { display: block; width: 242px; height: 48px; transition: opacity 0.2s; }
.bl-cta-btn picture { width: 100%; height: 100%; }
.bl-cta-btn:hover { opacity: 0.85; }
.bl-cta-btn img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* =============================================================
   FRANCHISE   (dark image bg)
============================================================= */
.fr-section { position: relative; width: 100%; background: transparent; overflow: hidden; }
.fr-bg { position: absolute; inset: 0; z-index: 0; }
.fr-bg picture { width: 100%; height: 100%; }
.fr-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Mobile banner — hidden on desktop */
.fr-mobile-banner { display: none; }
.fr-mobile-banner picture { width: 100%; height: auto; }
.fr-inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 56px 129px 56px 80px; display: flex; justify-content: flex-end; }
.fr-panel { position: relative; width: 494px; flex-shrink: 0; }
.fr-badge { display: inline-flex; align-items: center; gap: 8px; height: 31px; padding: 0 12px; background: rgba(52, 122, 0, 0.10); border-radius: 8px; margin-bottom: 15px; }
.fr-badge img { width: 18px; height: 18px; flex-shrink: 0; }
.fr-badge span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; line-height: 1; white-space: nowrap; }
.fr-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 60px; line-height: 70px; color: #000000; margin: 0 0 18px 0; width: 457px; }
.fr-h-green { color: #347A00; }
.fr-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #616161; text-transform: capitalize; margin: 0 0 43px 0; width: 315px; }
.fr-d-green { color: #347A00; font-weight: 600; }
.fr-feats { list-style: none; padding: 0; margin: 0 0 50px 0; display: flex; flex-direction: column; gap: 16px; }
.fr-feat { display: flex; align-items: center; gap: 15px; }
.fr-feat img { width: 25px; height: 25px; flex-shrink: 0; }
.fr-feat span { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-transform: capitalize; }
.fr-bottom { display: flex; align-items: center; gap: 68px; }
.fr-enquire { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 202px; height: 48px; background: #347A00; border-radius: 5px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; color: #ffffff; text-decoration: none; flex-shrink: 0; letter-spacing: 0.3px; }
.fr-enquire:hover { background: #2B6500; }
.fr-boss { display: flex; align-items: center; gap: 5px; }
.fr-boss img { width: 37px; height: 37px; flex-shrink: 0; }
.fr-boss-txt { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 14px; color: #616161; line-height: 1.4; text-transform: uppercase; }
.fr-boss-grn { color: #347A00; }
/* =============================================================
   STORE LOCATION   (bg: rgba(97,97,97,0.05) ≈ very light gray)
============================================================= */
.sl-section { width: 100%; background: rgba(97, 97, 97, 0.05); padding: 35px 80px 71px; }
.sl-header { text-align: center; margin-bottom: 25px; }
.sl-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.sl-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 14px 0; }
.sl-h-green { color: #347A00; }
.sl-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-transform: capitalize; line-height: 1.5; }
.sl-panels { display: flex; gap: 20px; align-items: flex-start; max-width: 1280px; margin: 0 auto; }
.sl-map { position: relative; width: 630px; height: 475px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.sl-map picture { width: 100%; height: 100%; }
.sl-map-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.sl-map-expand { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; cursor: pointer; }
.sl-map-expand img { width: 30px; height: 30px; }
.sl-list-panel { width: 630px; height: 475px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column; }
.sl-search-row { display: flex; align-items: center; gap: 39px; padding: 17px 22px 0; flex-shrink: 0; }
.sl-search-wrap { display: flex; align-items: center; width: 348px; height: 29px; border: 1px solid #D9D9D9; border-radius: 5px; padding: 0 8px; gap: 8px; flex-shrink: 0; }
.sl-search-ic { width: 15px; height: 15px; flex-shrink: 0; }
.sl-search-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #AFAFAF; text-transform: capitalize; }
.sl-dropdown-wrap { display: flex; align-items: center; justify-content: space-between; width: 199px; height: 29px; border: 1px solid #D9D9D9; border-radius: 5px; padding: 0 8px 0 10px; flex-shrink: 0; cursor: pointer; }
.sl-dropdown-txt { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; color: #000000; text-transform: capitalize; }
.sl-dropdown-ic { width: 20px; height: 20px; }
.sl-store-list { flex: 1; overflow-y: auto; padding: 13px 22px 0 32px; }
.sl-store { display: flex; align-items: flex-start; gap: 0; min-height: 49px; padding: 0; }
.sl-store-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 10px; }
.sl-store-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: #000000; text-transform: capitalize; line-height: 1.3; }
.sl-store-addr { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 12px; color: #616161; text-transform: capitalize; line-height: 1.4; }
.sl-store-right { width: 116px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; }
.sl-phone { display: flex; align-items: center; gap: 5px; }
.sl-phone img { width: 20px; height: 20px; flex-shrink: 0; }
.sl-phone span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: #000000; text-transform: capitalize; white-space: nowrap; }
.sl-direction { display: inline-flex; align-items: center; gap: 3px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 14px; color: #347A00; text-transform: capitalize; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sl-direction img { width: 12px; height: 12px; }
.sl-divider { width: 100%; height: 1px; background: #D9D9D9; margin: 8px 0 9px; }
/* =============================================================
   FAQ   (bg: rgba(217,217,217,0.4))
============================================================= */
.fq-section { position: relative; width: 100%; background: rgba(217, 217, 217, 0.40); overflow: visible; padding: 25px 80px 35px; }
.fq-inner { position: relative; max-width: 1440px; margin: 0 auto; display: flex; align-items: flex-start; gap: 32px; }
.fq-left { position: relative; flex: 1; min-width: 0; width: auto; }
.fq-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; color: #347A00; margin-bottom: 15px; }
.fq-heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 50px; line-height: 60px; color: #000000; text-transform: capitalize; margin: 0 0 14px 0; }
.fq-h-green { color: #347A00; }
.fq-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-transform: capitalize; line-height: 1.5; margin: 0 0 22px 0; }
.fq-list { display: flex; flex-direction: column; gap: 10px; }
.fq-item { background: #ffffff; border-radius: 10px; overflow: hidden; }
.fq-btn { display: flex; align-items: center; width: 100%; height: 50px; padding: 0 18px 0 14px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.2s; }
.fq-btn:hover { background: rgba(52, 122, 0,0.03); }
.fq-num { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: #347A00; width: 20px; flex-shrink: 0; line-height: 1; }
.fq-vline { display: block; width: 1.5px; height: 25px; background: #A5A5A5; flex-shrink: 0; margin: 0 14px 0 15px; }
.fq-circle { display: none; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #EEEEEE; flex-shrink: 0; }
.fq-ic-minus { display: inline-flex; align-items: center; justify-content: center; }
.fq-ic-minus svg { display: block; width: 14px; height: 14px; }
.fq-q-text { flex: 1; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 18px; color: #000000; text-transform: capitalize; line-height: 1.3; min-width: 0; }
.fq-ic-right { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; margin-left: 12px; }
.fq-ic-plus, .fq-ic-up { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; }
.fq-ic-plus svg, .fq-ic-up svg { display: block; width: 20px; height: 20px; }
.fq-ic-up { display: none; }
.fq-open .fq-ic-plus { display: none; }
.fq-open .fq-ic-up { display: inline-flex; }
.fq-open .fq-btn { padding: 0 18px 0 12px; height: 50px; }
.fq-open .fq-num { display: none; }
.fq-open .fq-vline { display: none; }
.fq-open .fq-circle { display: inline-flex; margin-right: 14px; }
.fq-ans { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; padding: 0 18px 0 64px; }
.fq-open .fq-ans { max-height: 120px; padding: 0 18px 12px 64px; }
.fq-ans p { font-family: 'Outfit', sans-serif; font-weight: 300; font-size: 16px; color: #616161; text-transform: capitalize; line-height: 1.5; }
.fq-right { position: relative; width: 405px; flex-shrink: 0; margin-top: 90px; }
.fq-help { position: relative; width: 405px; height: 371px; border-radius: 10px; background: linear-gradient(136deg, #347A00 0%, #01AFF3 100%); overflow: hidden; margin-bottom: 38px; }
.fq-hp-icon { position: absolute; left: 285px; top: 13px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.fq-hp-icon img { display: block; width: 96px; height: 96px; }
.fq-help-line { position: absolute; left: 38.5px; top: 165.5px; width: 76px; height: 1.5px; background: rgba(255, 255, 255, 0.7); }
.fq-help-title { position: absolute; left: 34px; top: 102px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 35px; line-height: 60px; color: #ffffff; text-transform: capitalize; width: 276px; }
.fq-help-desc { position: absolute; left: 34px; top: 189px; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #ffffff; text-transform: capitalize; line-height: 1.5; width: 265px; }
.fq-contact-btn { position: absolute; left: 34px; top: 290px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 202px; height: 48px; background: #ffffff; border-radius: 5px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; color: #01AFF3; text-decoration: none; letter-spacing: 0.3px; }
.fq-contact-ic { width: 27px; height: 27px; flex-shrink: 0; display: block; }
.fq-pickup { position: relative; width: 405px; height: 142px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10); display: flex; align-items: center; padding: 0; }
.fq-pu-circle { position: absolute; left: 22px; top: 35px; width: 72px; height: 72px; border-radius: 50%; background: #EEEEEE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fq-pu-phone { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.fq-pu-phone img { display: block; width: 50px; height: 50px; }
.fq-pu-body { position: absolute; left: 131px; top: 0; height: 142px; display: flex; flex-direction: column; justify-content: center; padding: 0; }
.fq-pu-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 25px; line-height: 30px; color: #000000; text-transform: capitalize; margin-bottom: 6px; }
.fq-pu-line { width: 36px; height: 1.5px; background: linear-gradient(90deg, #347A00 0%, #01AFF3 100%); margin-bottom: 8px; }
.fq-pu-desc { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; color: #616161; text-transform: capitalize; line-height: 1.5; width: 203px; }
/* =============================================================
   FOOTER  (Figma: h:700, bg:#F1F1F1)
============================================================= */
.ft { background: #F1F1F1; width: 100%; font-family: 'Outfit', sans-serif; padding-bottom: 28px; }
.ft-main { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 21px; padding: 49px 80px 34px; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.ft-col:not(.ft-col-card) { flex: 0 0 267px; width: 267px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; min-width: 0; }
.ft-col:nth-child(3) { margin-right: 9px; /* 21px flex gap + 9px = 30px before newsletter (Figma) */
; }
.ft-col-h { font-size: 20px; font-weight: 600; color: #000; margin-bottom: 0; padding-bottom: 0; margin-top: 16px; height: 25px; line-height: 25px; }
/* Footer accordion — desktop/tablet: panels always visible, icons hidden */
.ft-acc-trigger { display: block; width: 100%; border: none; background: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: default; color: inherit; }
.ft-acc-trigger .ft-col-h { display: block; margin-top: 16px; }
.ft-acc-icon { display: none; }
.ft-acc-plus, .ft-acc-minus { display: inline-flex; align-items: center; justify-content: center; }
.ft-acc-plus svg, .ft-acc-minus svg { display: block; width: 20px; height: 20px; }
.ft-acc-panel { display: block; }
.ft-info-desc { font-size: 16px; font-weight: 400; color: #616161; line-height: 26px; margin-top: 34px; margin-bottom: 0; }
.ft-feats { display: flex; flex-direction: column; margin-top: 26px; gap: 21px; }
.ft-feat { display: flex; align-items: center; gap: 12px; }
.ft-feat-ic { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-feat-ic img, .ft-feat-ic svg { display: block; width: 27px; height: 27px; }
.ft-feat-txt { display: flex; flex-direction: column; }
.ft-feat-txt strong { font-size: 16px; font-weight: 600; color: #000; line-height: 26px; }
.ft-feat-txt span { font-size: 16px; font-weight: 400; color: #616161; line-height: 26px; }
.ft-contacts { display: flex; flex-direction: column; margin-top: 34px; gap: 45px; }
.ft-contact { display: flex; align-items: center; gap: 12px; }
.ft-contact-ic { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-contact-ic img, .ft-contact-ic svg { display: block; width: 27px; height: 27px; }
.ft-contact-txt { display: flex; flex-direction: column; }
.ft-contact-txt strong { font-size: 16px; font-weight: 600; color: #000; line-height: 26px; display: block; }
.ft-contact-txt span { font-size: 16px; font-weight: 400; color: #616161; line-height: 26px; }
.ft-svc-list { list-style: none; padding: 0; margin: 24px 0 0 0; }
.ft-svc-list li { font-size: 16px; font-weight: 400; color: #000000; line-height: 40px; padding-left: 0px; border-bottom: 1px dashed #D9D9D9; cursor: pointer; transition: color 0.2s; }
.ft-svc-list li:last-child { border-bottom: none; }
.ft-svc-list li:hover { color: #347A00; }
.ft-col-card { flex: 0 0 407px; width: 407px; max-width: 407px; align-self: flex-start; box-sizing: border-box; }
.ft-nws-card { background: #FFFFFF; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; width: 407px; max-width: 100%; height: 400px; box-sizing: border-box; }
.ft-nws-doodle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ft-nws-doodle picture { width: 100%; height: 100%; }
.ft-nws-doodle img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.ft-nws-icon { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; z-index: 1; pointer-events: none; }
.ft-nws-icon img { width: 90px; height: 90px; object-fit: contain; display: block; }
.ft-nws-text { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); width: 248px; z-index: 2; text-align: center; }
.ft-nws-title { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 600; color: #000000; line-height: 1.3; margin: 0 0 10px; }
.ft-nws-sub { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; color: #616161; line-height: 1.5; margin: 0; }
.ft-nws-offer { font-size: 16px; font-weight: 500; color: #347A00; }
.ft-nws-form { position: absolute; top: 261px; left: 50%; transform: translateX(-50%); width: 364px; max-width: calc(100% - 44px); height: 60px; z-index: 2; display: flex; align-items: center; border: 1px solid #CBCBCB; border-radius: 10px; background: #FFFFFF; overflow: hidden; box-sizing: border-box; }
.ft-nws-input { flex: 1; border: none; outline: none; padding: 0 14px 0 20px; height: 100%; font-family: 'Outfit', sans-serif; font-size: 16px; color: #000; background: transparent; min-width: 0; }
.ft-nws-input::placeholder { color: #A5A5A5; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; }
.ft-nws-send { width: 54px; height: 100%; flex-shrink: 0; background: transparent; border: none; border-left: 1px solid #CBCBCB; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0; }
.ft-nws-send img { display: block; }
.ft-nws-send:hover { background: rgba(52, 122, 0, 0.06); }
.ft-nws-agree { position: absolute; top: 349px; left: 50%; transform: translateX(-50%); width: 272px; max-width: calc(100% - 44px); z-index: 2; display: flex; align-items: center; justify-content: flex-start; gap: 19px; cursor: pointer; }
.ft-nws-chk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ft-nws-chk-box { width: 24px; height: 24px; flex-shrink: 0; border: 1.5px solid #CBCBCB; border-radius: 4px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; }
.ft-nws-chk:checked + .ft-nws-chk-box { background: #347A00; border-color: #347A00; }
.ft-nws-chk-mark { display: none; }
.ft-nws-chk:checked + .ft-nws-chk-box .ft-nws-chk-mark { display: block; }
.ft-nws-agree-lbl { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; color: #616161; line-height: 1; white-space: nowrap; user-select: none; }
.ft-social { width: 1062px; max-width: calc(100% - 160px); margin: 0 auto; background: #347A00; border-radius: 20px; height: 111px; display: flex; align-items: center; overflow: hidden; box-sizing: border-box; }
.ft-soc-logo { width: 333px; flex-shrink: 0; padding-left: 45px; display: flex; align-items: center; height: 100%; }
.ft-soc-logo img { width: 258px; height: 100px; object-fit: contain; object-position: left center; display: block; }
.ft-soc-line { width: 1px; height: 49px; background: rgba(255, 255, 255, 0.20); flex-shrink: 0; }
.ft-soc-right { flex: 1; display: flex; align-items: center; padding-left: 30px; gap: 30px; }
.ft-soc-label { font-size: 16px; font-weight: 600; color: #FFFFFF; white-space: nowrap; display: block; }
.ft-soc-lnk { display: flex; align-items: center; gap: 5px; text-decoration: none; transition: opacity 0.2s; height: 27px; white-space: nowrap; }
.ft-soc-lnk:hover { opacity: 0.80; }
.ft-soc-lnk:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 4px; }
.ft-soc-ic-wrap { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex-shrink: 0; background: #FFFFFF; border-radius: 50%; }
.ft-soc-ic-wrap svg { display: block; flex-shrink: 0; }
.ft-soc-lnk-txt { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; color: #FFFFFF; line-height: 1; }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 32px; margin-top: 34px; padding: 0 80px; }
.ft-nav a { font-size: 16px; font-weight: 400; color: #000; text-decoration: none; transition: color 0.2s; line-height: 1; }
.ft-nav a:hover { color: #347A00; }
.ft-nav a,
.ft-soc-lnk {
  -webkit-tap-highlight-color: transparent;
}
.ft-copy { font-size: 16px; font-weight: 400; color: #9C9C9C; text-align: center; margin-top: 23px; padding: 0 80px; }
/* Utility */
.dark { color: var(--black); }
.green { color: var(--green); }
.white { color: var(--white); }
.center { text-align: center; }
/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1280px) {  .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 16px; }
.svc-heading { font-size: 44px; line-height: 54px; }
.hero-heading { font-size: 64px; line-height: 68px; }
.hbc-card { width: 580px; }
.hbc-s1 { width: 200px; }
.hbc-s2 { width: 185px; }
.hbc-s3 { width: 193px; }
.ft-main { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 32px; flex-wrap: wrap; gap: 32px; padding: 48px 60px 32px; max-width: none; }
.ft-col:not(.ft-col-card) { flex: none; width: auto; padding-left: 0; padding-right: 0; }
.ft-col:nth-child(3) { margin-right: 0; }
.ft-col-card { flex: none; width: 100%; max-width: 100%; }
.ft-nws-card { width: 100%; }
.ft-nws-agree { left: 68px; transform: none; }
.ft-nws-text, .ft-nws-form { transform: none; left: 80px; }
.ft-nws-form { left: 22px; }
.ft-social { width: calc(100% - 120px); max-width: none; }
.ft-soc-right { gap: 20px; padding-left: 20px; }
.ft-soc-label { display: none; }
/* ── FAQ & Franchise: tighter horizontal padding ── */
.fq-section { padding: 40px 60px 60px; }
.fq-help { width: 100%; }
.fq-pickup { width: 100%; }
.fr-inner { padding: 56px 60px 56px 40px; }
.about-inner { padding: 80px 60px 80px 40px; }
.wsua-inner { padding: 71px 60px 71px 40px; }
.da-inner { padding: 50px 60px 70px 40px; }
.hero-content { padding: 64px 60px 43px; }
/* Navbar — laptop (1025px–1280px) */
.nav-inner { padding: 0 48px; gap: 32px; }
.nav-links { gap: 20px; }
.nav-link { font-size: 14px; }
.btn-myaccount, .btn-pickup { font-size: 14px; padding: 8px 16px; }}
@media (min-width: 1025px) {  .nav-links { position: static; top: auto; left: auto; right: auto; width: auto; flex: 1; flex-direction: row; align-items: center; background: transparent; padding: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; max-height: none; overflow: visible; }
.nav-links li { border-bottom: none; }
.nav-link { display: inline; padding: 0; }
.nav-cta { display: flex; }
.nav-toggle { display: none; }}
/* Navbar — small laptop (1025px–1200px): tighter link spacing */
@media (max-width: 1200px) and (min-width: 1025px) {  .nav-inner { padding: 0 40px; gap: 24px; }
.nav-links { gap: 14px; }
.nav-link { font-size: 13px; letter-spacing: 0; }
.btn-myaccount, .btn-pickup { font-size: 13px; padding: 8px 14px; }}
@media (max-width: 1024px) {  /* Navbar — tablet/mobile menu (Figma hamburger layout) */
.nav-inner { padding: 0 40px; gap: 16px; justify-content: space-between; }
.nav-logo { min-width: 140px; }
.nav-logo img { height: 60px; min-height: 48px; max-height: 60px; min-width: 120px; }
.nav-links { position: fixed; top: 150px; left: 0; right: 0; width: 100%; flex: none; min-width: 0; background: rgba(255, 255, 255, 0.98); flex-direction: column; align-items: stretch; padding: 20px; gap: 0; transform: translateY(-110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; z-index: 999; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); max-height: calc(100vh - 150px); overflow-y: auto; }
.nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.nav-links li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.nav-link { display: block; padding: 14px 0; font-size: 15px; }
.nav-cta { display: none; }
.nav-toggle { display: flex; }
.svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
.services { padding: 20px 40px 33px; }
.wsua-inner { padding: 60px 40px; }
.wsua-body { max-width: 100%; }
.wsua-desc { max-width: 100%; }
.wsua-grid { max-width: 100%; column-gap: 40px; }
.pr-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pr-row1 { margin-bottom: 30px; }
.pr-cat-card { height: auto; }
.pr-pkg-card { height: auto; padding-bottom: 24px; }
.pr-pkg-discount-box { padding-bottom: 8px; }
.pricing { padding: 20px 40px 60px; }
.bl-grid { grid-template-columns: 1fr 1fr; }
.bl-feat-card { width: 100%; height: auto; min-height: 360px; }
.bl-feat-title { position: static; font-size: 22px; }
.bl-feat-meta { position: static; padding-top: 12px; }
.bl-feat-desc-txt { position: static; width: 100%; }
.bl-feat-read { position: static; }
.bl-feat-body { position: static; padding: 0 15px 15px; display: flex; flex-direction: column; justify-content: flex-end; height: 180px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.bl-sm-card { height: auto; }
/* Store Location – 1024px tablet */
.sl-section { padding: 40px; }
.sl-panels { flex-direction: column; }
.sl-map { width: 100%; }
.sl-list-panel { width: 100%; }
.sl-search-row { gap: 16px; }
.sl-search-wrap { flex: 1; width: auto; }
.sl-dropdown-wrap { width: 160px; }
/* FAQ – 1024px tablet: stacked columns */
.fq-section { padding: 40px; margin-bottom: 60px; }
.fq-inner { display: block; }
.fq-left { width: 100%; flex: none; }
.fq-right { width: 100%; margin-top: 40px; }
.fq-help { width: 100%; }
.fq-pickup { width: 100%; }
/* About & Franchise – 1024px tablet */
.about-inner { padding: 80px 40px; justify-content: stretch; }
.about-content { width: 420px; max-width: 100%; }
.fr-inner { padding: 40px; justify-content: center; }
.fr-panel { width: 460px; max-width: 100%; }
.da-inner { padding: 50px 40px 60px; }
.da-content { max-width: 504px; }
.da-desc { max-width: 100%; }
.fr-heading { font-size: 48px; line-height: 58px; width: auto; }
.fr-desc { width: auto; }
.ft-main { padding: 40px; }
.ow-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 768px) {  /* ── Mobile typography & spacing (768px) — affected sections only ── */
.our-work, .pricing, .blog, .hero, .download-app, .fr-section, .fq-section, .ft { -webkit-text-size-adjust: 100%; box-sizing: border-box; }
.our-work *, .pricing *, .blog *, .hero *, .download-app *, .fr-section *, .fq-section *, .ft * { box-sizing: border-box; }
.ow-header, .pr-header, .bl-header, .da-content, .fr-panel, .wsua-body, .about-content, .fq-left, .ft-main { min-width: 0; max-width: 100%; }
/* Mobile typography scale (Figma) */
:root { --m-h1-size: 32px; --m-h1-lh: 40px; --m-h2-size: 22px; --m-h2-lh: 28px; --m-h3-size: 18px; --m-h3-lh: 24px; }
.hero-heading, .about-heading, .svc-heading, .wsua-heading, .ow-heading, .pr-heading, .da-heading, .bl-heading, .fr-heading, .fq-heading, .sl-heading, .section-heading-outfit, .section-heading-playfair { font-size: var(--m-h1-size); line-height: var(--m-h1-lh); word-wrap: break-word; overflow-wrap: break-word; }
.pr-cat-title, .pricing .pr-pl-heading, .pricing .pr-pkg-title, .bl-feat-title, .fq-help-title, .fq-pu-title, .ft-nws-title { font-size: var(--m-h2-size); line-height: var(--m-h2-lh); }
.ft-col-h, .ft-acc-trigger .ft-col-h { font-size: var(--m-h3-size); line-height: var(--m-h3-lh); }
.ow-label, .pr-label, .bl-label, .fq-label { font-size: 14px; line-height: 18px; letter-spacing: 0.02em; }
.ow-desc, .pr-desc, .bl-desc, .da-desc, .fr-desc, .fq-desc, .ft-info-desc { font-size: 15px; line-height: 24px; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
.ow-desc br, .pr-desc br, .bl-desc br, .da-desc br, .fr-desc br, .fq-desc br { display: none; }
/* Navbar — mobile fixed header (compact Figma height) */
:root { --nav-bar-h: 64px; --mobile-nav-h: 64px; --mobile-logo-h: 50px; /* 262×101 aspect, ~78% of 64px bar */
; }
.nav-mobile-spacer { height: var(--nav-bar-h); }
.nav-sticky-wrap { height: var(--nav-bar-h); min-height: var(--nav-bar-h); flex-shrink: 0; overflow: visible; }
body.nav-open .nav-sticky-wrap { top: 0 !important; }
.navbar { position: relative; top: auto; height: var(--nav-bar-h); min-height: var(--nav-bar-h); z-index: 1; overflow: visible; background: #ffffff; backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: none; }
.navbar.scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); }
.nav-inner { padding: 0 16px; gap: 12px; height: var(--nav-bar-h); min-height: var(--nav-bar-h); justify-content: space-between; align-items: center; overflow: visible; }
.nav-logo { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; flex-shrink: 0; flex-grow: 0; width: auto; min-width: 0; max-width: none; height: 100%; margin: 0; padding: 0; overflow: visible; line-height: 0; z-index: 2; }
.nav-logo picture { height: var(--mobile-logo-h); max-height: var(--mobile-logo-h); }
.nav-logo img { display: block; height: var(--mobile-logo-h); width: auto; max-width: none; max-height: var(--mobile-logo-h); min-width: 0; min-height: 0; flex-shrink: 0; object-fit: contain; object-position: left center; }
.nav-toggle { width: 36px; height: 36px; gap: 4px; padding: 6px; flex: 0 0 auto; flex-shrink: 0; margin-left: auto; }
.nav-toggle span { width: 20px; height: 2px; }
/* Mobile nav — full-width right drawer + backdrop */
.nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; }
.nav-overlay.open { opacity: 1; visibility: visible; pointer-events: none; }
html.nav-open, body.nav-open { overflow: hidden; overscroll-behavior: none; }
body.nav-open { position: fixed; width: 100%; left: 0; right: 0; }
.nav-links { top: 0; left: auto; right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: none; padding: 80px 24px 32px; transform: translateX(100%); opacity: 1; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease; z-index: 1001; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: stretch; }
.nav-links.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.nav-link { padding: 12px 0; font-size: 14px; }
.nav-toggle { position: relative; z-index: 1003; }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
/* Hero – 768px mobile: banner top, content below (Figma mobile layout) */
.hero { overflow-x: clip; overflow-y: visible; height: auto; min-height: 0; display: flex; flex-direction: column; }
.hero-media { position: relative; inset: auto; width: 100%; flex-shrink: 0; line-height: 0; z-index: 1; aspect-ratio: 768 / 480; }
.hero-media picture { width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; max-width: 100%; display: block; object-fit: contain; object-position: center top; }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 100%; padding: 24px 20px 32px; background: linear-gradient(180deg, #ffffff 0%, #F8FBF6 100%); box-sizing: border-box; align-items: flex-start; text-align: left; min-width: 0; }
.hero-label { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; max-width: 100%; font-size: 13px; line-height: 17px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; padding: 6px 12px; color: #347A00; background: rgba(52, 122, 0, 0.10); border-radius: 999px; text-align: left; }
.hero-heading { font-family: 'Playfair Display', serif; font-weight: 700; margin: 0 0 10px; letter-spacing: 0; width: 100%; max-width: 360px; text-align: left; }
.hero-heading .hh-dark:first-child { display: block; }
.hero-heading .hh-mobile-line { display: inline-flex; flex-direction: row; gap: 0.22em; white-space: nowrap; }
.hero-heading .hh-mobile-line .hh-dark, .hero-heading .hh-mobile-line .hh-green { display: inline; }
.hero-subtitle { font-size: 15px; line-height: 22px; font-weight: 400; color: #616161; margin: 0 0 18px; max-width: 300px; width: 100%; word-wrap: break-word; overflow-wrap: break-word; text-align: left; }
.hero-subtitle br { display: none; }
.hero .hbc-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 420px; height: auto; min-height: 0; padding: 12px; margin: 0 auto 18px; align-items: stretch; gap: 8px; box-sizing: border-box; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.hero .hbc-item { min-width: 0; width: auto; height: auto; padding: 0; gap: 7px; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; }
.hero .hbc-s1, .hero .hbc-s2, .hero .hbc-s3 { width: auto; padding-left: 0; gap: 7px; }
.hero .hbc-s1 .hbc-ic, .hero .hbc-s2 .hbc-ic, .hero .hbc-s3 .hbc-ic { width: 30px; height: 30px; }
.hero .hbc-txt { gap: 2px; min-width: 0; align-items: center; text-align: center; }
.hero .hbc-divider { display: none; }
.hero .hbc-title { white-space: normal; font-size: 13px; line-height: 16px; font-weight: 600; }
.hero .hbc-sub { white-space: normal; font-size: 11px; line-height: 14px; font-weight: 400; }
.hero-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; width: 100%; max-width: 420px; }
.hero .hbtn-primary, .hero .hbtn-outline { width: 100%; max-width: none; min-width: 0; min-height: 46px; height: auto; padding: 10px 9px 10px 11px; box-sizing: border-box; gap: 6px; justify-content: space-between; }
.hero .hbtn-primary span, .hero .hbtn-outline span { font-size: 12px; line-height: 1.15; letter-spacing: 0; white-space: normal; text-align: left; }
.hero .hbtn-primary img, .hero .hbtn-outline img { width: 24px; height: 24px; }
/* About Us – 768px mobile: banner top, content below */
.about-us { overflow-x: clip; overflow-y: visible; height: auto; min-height: 0; }
.about-image { display: none; }
.about-mobile-banner { display: block; width: 100%; flex-shrink: 0; line-height: 0; }
.about-mobile-banner img { width: 100%; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: center top; }
.about-inner { padding: 0; display: flex; flex-direction: column; align-items: stretch; max-width: 100%; width: 100%; justify-content: flex-start; }
.about-content { width: 100%; max-width: 100%; padding: 28px 20px 40px 24px; background: #f8f9f8; box-sizing: border-box; }
.about-badge { margin-bottom: 16px; height: auto; min-height: 31px; padding: 6px 12px 6px 10px; }
.about-badge-text { font-size: 16px; line-height: 1.25; white-space: normal; }
.about-heading { margin-bottom: 12px; max-width: 100%; }
.about-heading .au-mobile-line { display: inline-flex; flex-direction: row; gap: 0.22em; white-space: nowrap; }
.about-heading .au-mobile-line .au-h-dark { display: inline; }
.about-desc { font-size: 15px; line-height: 24px; max-width: 100%; margin-bottom: 20px; word-wrap: break-word; overflow-wrap: break-word; }
.about-sep { width: 100%; max-width: 219px; height: auto; margin-bottom: 20px; }
.about-btn { width: 100%; max-width: 233px; }
.services { padding: 20px 24px 33px; overflow-x: clip; }
.services .svc-header { margin-bottom: 22px; padding: 0 4px; }
.services .svc-label { font-size: 16px; line-height: 1.25; margin-bottom: 12px; }
.services .svc-heading { margin-bottom: 10px; }
.services .svc-desc { font-size: 15px; line-height: 24px; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
.services .svc-desc br { display: none; }
.services .svc-carousel-wrap { width: 100%; max-width: 100%; padding: 0 16px; }
.services .svc-grid:not(.owl-loaded) { display: grid; grid-template-columns: 1fr; gap: 16px; }
.services .svc-grid:not(.owl-loaded) .svc-card { width: 100%; max-width: 100%; height: 336px; margin: 0 auto; }
/* Our Services – Owl Carousel active */
.services.svc-is-carousel .svc-carousel-wrap { overflow: hidden; }
.services.svc-is-carousel .svc-grid.owl-carousel { display: block; width: 100%; max-width: 100%; margin: 0; }
.services.svc-is-carousel .svc-grid .owl-stage-outer { overflow: hidden; border-radius: 10px; }
.services.svc-is-carousel .owl-item { padding: 0 6px; height: auto; }
.services.svc-is-carousel .svc-card { width: 100%; max-width: 100%; height: 336px; min-height: 336px; margin: 0 auto; box-sizing: border-box; border-radius: 10px; }
.services.svc-is-carousel .svc-photo { border-radius: 10px 10px 10px 100px; }
.services.svc-is-carousel .svc-circle { width: 66px; height: 66px; top: 137px; left: 24px; }
.services.svc-is-carousel .svc-circle img { width: 42px; height: 42px; }
.services.svc-is-carousel .svc-body { top: 217px; padding: 0 24px; }
.services.svc-is-carousel .svc-name { font-size: 18px; line-height: 23px; }
.services.svc-is-carousel .svc-text { font-size: 14px; line-height: 18px; word-wrap: break-word; overflow-wrap: break-word; }
.services.svc-is-carousel .svc-text br { display: none; }
.services.svc-is-carousel .svc-link { font-size: 14px; }
.services.svc-is-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; line-height: 1; }
.services.svc-is-carousel .owl-dot { display: inline-flex; }
.services.svc-is-carousel .owl-dot span { width: 8px; height: 8px; margin: 0; background: #D9D9D9; border-radius: 50%; transition: background 0.25s ease, transform 0.25s ease; }
.services.svc-is-carousel .owl-dot.active span, .services.svc-is-carousel .owl-dot:hover span { background: #347A00; transform: scale(1.1); }
.services.svc-is-carousel .owl-nav { display: none; }
/* Our Difference – 768px mobile: banner top, content below */
.wsua { overflow-x: clip; overflow-y: visible; height: auto; min-height: 0; }
.wsua-bg { display: none; }
.wsua-mobile-banner { display: block; width: 100%; flex-shrink: 0; line-height: 0; }
.wsua-mobile-banner img { width: 100%; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: center top; }
.wsua-inner { padding: 0; display: flex; flex-direction: column; align-items: stretch; max-width: 100%; width: 100%; }
.wsua-body { width: 100%; max-width: 100%; padding: 28px 20px 40px; background-color: #f9f9f9; box-sizing: border-box; }
.wsua-pill-text { font-size: 16px; line-height: 1.25; }
.wsua-heading { margin-bottom: 12px; }
.wsua-desc { font-size: 15px; line-height: 24px; max-width: 100%; margin-bottom: 24px; word-wrap: break-word; overflow-wrap: break-word; }
.wsua-desc br { display: none; }
.wsua-grid { grid-template-columns: 1fr; row-gap: 24px; column-gap: 0; max-width: 100%; margin-bottom: 32px; }
.wsua-grid::before, .wsua-grid::after { display: none; }
.wsua-pill { margin-bottom: 16px; max-width: 100%; height: auto; min-height: 31px; padding: 6px 12px; }
.wsua-pill-text { white-space: normal; }
.wsua-item { min-width: 0; max-width: 100%; }
.wsua-item-title { font-size: 16px; line-height: 22px; word-wrap: break-word; overflow-wrap: break-word; }
.wsua-item-desc { font-size: 14px; line-height: 20px; word-wrap: break-word; overflow-wrap: break-word; }
.wsua-item-desc br { display: none; }
.wsua-cta { width: 100%; max-width: 233px; }
/* Our Work – 768px mobile (fallback stack before Owl init) */
.our-work { overflow-x: clip; padding: 40px 20px 48px; }
.our-work .ow-header { margin-bottom: 24px; padding: 0 4px; }
.our-work .ow-label { margin-bottom: 12px; }
.our-work .ow-heading { margin-bottom: 10px; }
.our-work .ow-carousel-wrap { width: 100%; max-width: 100%; padding: 0 16px; }
.our-work .ow-grid:not(.owl-loaded) { display: grid; grid-template-columns: 1fr; gap: 16px; }
.our-work .ow-grid:not(.owl-loaded) .ow-card { height: 380px; width: 100%; }
/* Our Work – Owl Carousel active */
.our-work.ow-is-carousel { padding: 40px 20px 48px; }
.our-work.ow-is-carousel .ow-carousel-wrap { width: 100%; max-width: 100%; padding: 0 16px; overflow: hidden; }
.our-work.ow-is-carousel .ow-grid.owl-carousel { display: block; width: 100%; max-width: 100%; margin: 0; }
.our-work.ow-is-carousel .ow-grid .owl-stage-outer { overflow: hidden; border-radius: 15px; }
.our-work.ow-is-carousel .ow-card { height: 380px; width: 100%; max-width: 100%; border-radius: 15px; margin: 0; }
.our-work.ow-is-carousel .ow-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.our-work.ow-is-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; line-height: 1; }
.our-work.ow-is-carousel .owl-dot { display: inline-flex; }
.our-work.ow-is-carousel .owl-dot span { width: 8px; height: 8px; margin: 0; background: #D9D9D9; border-radius: 50%; transition: background 0.25s ease, transform 0.25s ease; }
.our-work.ow-is-carousel .owl-dot.active span, .our-work.ow-is-carousel .owl-dot:hover span { background: #347A00; transform: scale(1.1); }
.our-work.ow-is-carousel .owl-nav { display: none; }
/* Pricing – 768px mobile (fallback before Owl init) */
.pricing { overflow-x: clip; padding: 32px 20px 56px; }
.pricing .pr-header { margin-bottom: 24px; padding: 0 4px; }
.pricing .pr-label { margin-bottom: 12px; }
.pricing .pr-heading { margin-bottom: 10px; }
.pricing .pr-gst-badge { max-width: 100%; flex-wrap: wrap; justify-content: center; height: auto; min-height: 31px; padding: 6px 14px; }
.pricing .pr-gst-txt { white-space: normal; font-size: 11px; line-height: 1.3; }
.pricing .pr-grid:not(.owl-loaded) { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
.pricing .pr-row1:not(.owl-loaded) { margin-bottom: 24px; }
.pricing .pr-cat-card, .pricing .pr-pkg-card { height: auto; width: 100%; max-width: 100%; }
.pricing .pr-pl-desc { font-size: 15px; line-height: 22px; margin-bottom: 24px; }
.pricing .pr-item-name, .pricing .pr-item-price { font-size: 15px; line-height: 22px; }
.pricing .pr-pkg-price, .pricing .pr-pkg-worth-amt { font-size: 28px; line-height: 1.2; }
.pricing .pr-pkg-pct-label, .pricing .pr-pkg-worth-label { font-size: 15px; line-height: 22px; }
.pricing .pr-pkg-card { padding-bottom: 24px; }
.pricing .pr-pkg-pct { font-size: 56px; line-height: 1.05; }
/* MOST POPULAR badge — room above card, no overlap with content */
.pricing .pr-pkg-wrapper > .pr-popular-badge { top: 0; left: 50%; transform: translateX(-50%); z-index: 5; }
.pricing .pr-trust-row { flex-wrap: wrap; gap: 8px 12px; justify-content: center; padding: 0 8px; }
.pricing .pr-trust-item { font-size: 13px; line-height: 1.3; white-space: normal; }
.pricing .pr-pl-btn, .pricing .pr-pkg-btn, .pricing.pr-is-carousel .pr-pl-btn, .pricing.pr-is-carousel .pr-pkg-btn { width: 100%; max-width: 242px; margin-left: auto; margin-right: auto; }
/* Pricing – Owl Carousel active */
.pricing.pr-is-carousel { padding: 32px 20px 56px; }
.pricing.pr-is-carousel .pr-carousel-wrap { width: 100%; max-width: 100%; padding: 0 16px; overflow-x: clip; overflow-y: visible; }
.pricing.pr-is-carousel .pr-carousel-wrap--row1 { margin-bottom: 24px; }
.pricing.pr-is-carousel .pr-grid.owl-carousel { display: block; width: 100%; max-width: 100%; margin: 0; }
.pricing.pr-is-carousel .pr-row1.owl-carousel .owl-stage-outer { overflow: hidden; }
.pricing.pr-is-carousel .pr-row1.owl-carousel .owl-item { padding: 0 6px; height: auto; box-sizing: border-box; }
.pricing.pr-is-carousel .pr-row1.owl-carousel .owl-item > .pr-cat-card { width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.pricing.pr-is-carousel .pr-cat-card { height: auto; min-height: 0; border-radius: 10px; }
.pricing.pr-is-carousel .pr-price-list-card { overflow: visible; padding-bottom: 24px; }
/* prCarouselRow2 — mobile: one full slide, same behavior as row1 */
.pricing.pr-is-carousel .pr-carousel-wrap--row2 { margin-bottom: 0; overflow-x: hidden; }
.pricing.pr-is-carousel .pr-row2.owl-carousel { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; gap: 0; overflow: hidden; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-stage-outer { overflow: hidden; width: 100%; max-width: 100%; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item { padding: 0 6px; height: auto; box-sizing: border-box; min-width: 0; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item > .pr-pkg-card, .pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item > .pr-pkg-wrapper { width: 100%; max-width: 100%; min-width: 0; margin: 0; box-sizing: border-box; transform: none; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item .pr-pkg-card { height: auto; min-height: 0; border-radius: 10px; width: 100%; max-width: 100%; padding-bottom: 24px; margin-top: 24px; transform: none; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item > .pr-pkg-wrapper { box-sizing: border-box; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item .pr-popular-badge { top: -10px; left: 50%; transform: translateX(-50%); z-index: 5; }
.pricing.pr-is-carousel .pr-row2.owl-carousel .owl-item .pr-pkg-discount-box { max-width: 100%; min-width: 0; }
.pricing.pr-is-carousel .pr-pkg-pct { font-size: 56px; line-height: 1.05; }
.pricing.pr-is-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; line-height: 1; }
.pricing.pr-is-carousel .owl-dot span { width: 8px; height: 8px; margin: 0; background: #D9D9D9; border-radius: 50%; transition: background 0.25s ease, transform 0.25s ease; }
.pricing.pr-is-carousel .owl-dot.active span, .pricing.pr-is-carousel .owl-dot:hover span { background: #347A00; transform: scale(1.1); }
.pricing.pr-is-carousel .owl-nav { display: none; }
/* Download App – 768px mobile: banner top, content below */
.download-app { overflow-x: clip; background-color: #FFFFFF; }
.da-bg { display: none; }
.da-mobile-banner { display: block; width: 100%; flex-shrink: 0; line-height: 0; }
.da-mobile-banner img { width: 100%; height: auto; max-width: 100%; display: block; object-fit: cover; object-position: center top; }
.da-inner { padding: 0; display: flex; flex-direction: column; align-items: stretch; max-width: 100%; width: 100%; }
.da-content { width: 100%; max-width: 100%; padding: 28px 20px 40px; background-color: #f2efe7; }
.da-badge { min-width: 0; width: auto; max-width: 100%; height: auto; min-height: 31px; margin-bottom: 16px; padding: 6px 12px; }
.da-badge span { white-space: normal; line-height: 1.25; }
.da-heading { margin-bottom: 14px; }
.da-desc { margin-bottom: 24px; }
.da-features { width: 100%; max-width: 100%; margin-bottom: 28px; }
.da-features img { width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
.da-dl-btn { width: 100%; max-width: 218px; height: auto; margin-bottom: 28px; }
.da-dl-btn img { width: 100%; height: auto; max-height: 48px; object-fit: contain; object-position: left center; }
.da-available-label { font-size: 16px; margin-bottom: 14px; }
.da-store-badges { flex-wrap: wrap; gap: 14px; width: 100%; }
.da-store-link img { width: 130px; height: auto; max-height: 46px; }
/* Blog – 768px mobile */
.blog { overflow-x: clip; padding: 40px 20px 48px; }
.bl-header { margin-bottom: 28px; padding: 0 4px; }
.bl-label { margin-bottom: 12px; }
.bl-heading { margin-bottom: 12px; }
.bl-grid { grid-template-columns: 1fr; gap: 20px; width: 100%; max-width: 100%; margin-bottom: 32px; }
.bl-feat-card { width: 100%; max-width: 100%; height: auto; min-height: 340px; box-sizing: border-box; }
.bl-feat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-feat-grd { z-index: 1; }
.bl-most-pop { top: 12px; left: 12px; z-index: 3; }
.bl-feat-body { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: auto; min-height: 200px; padding: 120px 16px 20px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100% ); box-sizing: border-box; z-index: 2; }
.bl-feat-meta { position: static; padding-top: 0; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.bl-feat-title { position: static; width: 100%; max-width: 100%; margin: 0 0 8px; word-wrap: break-word; }
.bl-feat-desc-txt { position: static; width: 100%; max-width: 100%; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.92); margin: 0 0 12px; }
.bl-feat-read { position: static; align-self: flex-start; font-size: 15px; line-height: 20px; }
.bl-sm-card { width: 100%; max-width: 100%; height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; box-sizing: border-box; }
.bl-sm-photo-wrap { position: relative; width: 100%; height: 180px; flex-shrink: 0; overflow: hidden; border-radius: 10px 10px 0 0; }
.bl-sm-photo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px 10px 0 0; }
.bl-sm-cat { position: absolute; top: 171px; /* 180px photo − 9px overlap (matches desktop 169−9) */ bottom: auto; left: 50%; right: auto; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 8px; border-radius: 50px; font-size: 11px; z-index: 3; white-space: nowrap; flex-shrink: 0; }
.bl-sm-body { position: relative; padding: 44px 16px 20px; flex: 1; min-width: 0; box-sizing: border-box; }
.bl-sm-date { margin-bottom: 10px; }
.bl-sm-title { font-size: 18px; line-height: 24px; margin-bottom: 10px; word-wrap: break-word; overflow-wrap: break-word; }
.bl-sm-desc { font-size: 14px; line-height: 20px; margin-bottom: 14px; word-wrap: break-word; overflow-wrap: break-word; }
.bl-sm-date { font-size: 11px; line-height: 16px; }
.bl-sm-read { font-size: 15px; line-height: 20px; }
.bl-cta-wrap { width: 100%; }
.bl-cta-btn { width: 100%; max-width: 242px; margin: 0 auto; }
/* Blog – mobile carousel (3 small cards only) */
.bl-carousel-wrap { display: block; width: 100%; max-width: 100%; padding: 0; overflow: hidden; }
.bl-sm-row:not(.owl-loaded) { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
.blog.bl-is-carousel .bl-carousel-wrap { overflow: hidden; }
.blog.bl-is-carousel .bl-sm-row.owl-carousel { display: block; width: 100%; max-width: 100%; margin: 0; }
.blog.bl-is-carousel .bl-sm-row .owl-stage-outer { overflow: hidden; }
.blog.bl-is-carousel .owl-item { padding: 0; height: auto; }
.blog.bl-is-carousel .bl-sm-card { position: relative; width: 100%; max-width: 100%; margin: 0 auto; overflow: hidden; box-sizing: border-box; border-radius: 10px; }
.blog.bl-is-carousel .bl-sm-photo-wrap { position: relative; width: 100%; height: 180px; flex-shrink: 0; overflow: hidden; border-radius: 10px 10px 0 0; transform: none; -webkit-transform: none; }
.blog.bl-is-carousel .bl-sm-photo-wrap img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; transform: none !important; transition: none; border-radius: 10px 10px 0 0; image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.blog.bl-is-carousel .bl-sm-card:hover .bl-sm-photo-wrap img { transform: none !important; }
.blog.bl-is-carousel .bl-sm-cat { top: 171px; left: 15%; transform: translateX(-50%); }
.blog.bl-is-carousel .bl-sm-body { padding-top: 44px; }
.blog.bl-is-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; line-height: 1; }
.blog.bl-is-carousel .owl-dot { display: inline-flex; }
.blog.bl-is-carousel .owl-dot span { width: 8px; height: 8px; margin: 0; background: #D9D9D9; border-radius: 50%; transition: background 0.25s ease, transform 0.25s ease; }
.blog.bl-is-carousel .owl-dot.active span, .blog.bl-is-carousel .owl-dot:hover span { background: #347A00; transform: scale(1.1); }
.blog.bl-is-carousel .owl-nav { display: none; }
/* Franchise – 768px mobile: banner top, content below */
.fr-section { overflow-x: clip; background-image: none; background-color: #F5F5F0; }
.fr-bg { display: none; }
.fr-mobile-banner { display: block; width: 100%; flex-shrink: 0; line-height: 0; }
.fr-mobile-banner img { width: 100%; height: auto; max-width: 100%; display: block; object-fit: cover; object-position: center top; }
.fr-inner { padding: 0; justify-content: flex-start; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; }
.fr-panel { position: relative; width: 100%; max-width: 100%; flex-shrink: 0; box-sizing: border-box; margin: 0; padding: 28px 20px 36px; background-color: #F5F5F0; }
.fr-badge { max-width: 100%; height: auto; min-height: 31px; padding: 6px 12px; margin-bottom: 12px; }
.fr-badge span { white-space: normal; font-size: 16px; line-height: 1.25; }
.fr-heading { width: 100%; max-width: 100%; margin-bottom: 14px; }
.fr-desc { width: 100%; max-width: 100%; margin-bottom: 28px; }
.fr-feat-txt strong { font-size: 16px; line-height: 24px; }
.fr-feats { margin-bottom: 32px; gap: 14px; width: 100%; }
.fr-feat { align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
.fr-feat span { font-size: 15px; line-height: 22px; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; }
.fr-bottom { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.fr-enquire { width: 100%; max-width: 220px; flex-shrink: 0; }
.fr-boss { width: 100%; max-width: 100%; align-items: flex-start; gap: 8px; min-width: 0; }
.fr-boss-txt { font-size: 12px; line-height: 1.4; flex: 1; min-width: 0; }
/* Store Location – 768px mobile */
.sl-section { padding: 40px 24px; }
.sl-map { width: 100%; height: 300px; }
.sl-list-panel { width: 100%; height: auto; max-height: 500px; }
.sl-search-row { flex-wrap: wrap; gap: 10px; padding: 14px 14px 0; }
.sl-search-wrap { width: 100%; flex: none; }
.sl-dropdown-wrap { width: 100%; flex: none; }
.sl-store-list { padding: 10px 14px 0 20px; }
.sl-phone span { font-size: 13px; }
.sl-store-right { width: 100px; }
/* FAQ – 768px mobile */
.fq-section { overflow-x: clip; padding: 32px 20px 48px; margin-bottom: 0px; box-sizing: border-box; }
.fq-inner { flex-direction: column; gap: 28px; width: 100%; max-width: 100%; }
.fq-left { width: 100%; min-width: 0; margin-bottom: 20px; }
.fq-label { margin-bottom: 12px; }
.fq-heading { margin-bottom: 12px; }
.fq-desc { margin-bottom: 20px; }
.fq-list { width: 100%; gap: 8px; }
.fq-item { width: 100%; min-width: 0; }
.fq-btn { height: auto; min-height: 50px; padding: 12px 12px 12px 10px; align-items: center; gap: 0; box-sizing: border-box; }
.fq-open .fq-btn { height: auto; min-height: 50px; padding: 12px 12px 12px 10px; }
.fq-num { width: 22px; font-size: 14px; }
.fq-vline { height: 22px; margin: 0 10px; }
.fq-item:not(.fq-open) .fq-circle { display: none !important; }
.fq-open .fq-circle { display: inline-flex; margin-right: 10px; width: 24px; height: 24px; min-width: 24px; }
.fq-q-text { font-size: 15px; line-height: 22px; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; }
.fq-ic-right { width: 20px; height: 20px; min-width: 20px; margin-left: 8px; flex-shrink: 0; align-self: center; }
.fq-ic-plus svg, .fq-ic-up svg { width: 20px; height: 20px; }
.fq-ans { padding: 0 14px 0 48px; }
.fq-open .fq-ans { max-height: 600px; padding: 4px 14px 16px 48px; }
.fq-ans p { font-size: 15px; line-height: 1.5; max-width: 100%; }
.fq-right { width: 100%; max-width: 100%; margin-top: 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fq-help { position: relative; width: 100%; max-width: 100%; height: auto; min-height: 0; margin-bottom: 0; padding: 24px 20px 28px; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; overflow: hidden; }
.fq-hp-icon { position: absolute; top: 12px; right: 12px; left: auto; width: 72px; height: 72px; }
.fq-hp-icon img { width: 72px; height: 72px; object-fit: contain; }
.fq-help-title { position: static; width: auto; max-width: calc(100% - 80px); margin: 0 0 12px; }
.fq-help-line { position: static; width: 76px; margin: 0 0 12px; }
.fq-help-desc { position: static; width: auto; max-width: 100%; font-size: 15px; line-height: 1.5; margin: 0; }
.fq-help-desc br { display: none; }
.fq-contact-btn { position: static; margin-top: 20px; width: auto; min-width: 202px; max-width: 100%; height: 48px; flex-shrink: 0; }
.fq-contact-ic { width: 27px; height: 27px; }
.fq-pickup { position: relative; width: 100%; max-width: 100%; height: auto; min-height: 120px; display: flex; align-items: center; gap: 16px; padding: 20px 16px; box-sizing: border-box; }
.fq-pu-circle { position: static; left: auto; top: auto; width: 64px; height: 64px; flex-shrink: 0; }
.fq-pu-phone img { width: 44px; height: 44px; }
.fq-pu-body { position: static; left: auto; top: auto; height: auto; flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.fq-pu-title { margin-bottom: 6px; }
.fq-pu-desc { width: auto; max-width: 100%; font-size: 15px; line-height: 1.5; }
.fq-pu-desc br { display: none; }
/* Footer — mobile only */
.ft { overflow-x: clip; padding-bottom: 24px; }
.ft-main { display: grid; grid-template-columns: 1fr; row-gap: 0; column-gap: 0; flex-wrap: wrap; gap: 0; padding: 32px 20px 24px; max-width: 100%; }
.ft-col:not(.ft-col-card) { flex: none; width: 100%; }
.ft-col:nth-child(3) { margin-right: 0; }
.ft-col { width: 100%; min-width: 0; }
.ft-acc { border-bottom: 1px solid #D9D9D9; }
.ft-acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ft-acc-trigger .ft-col-h { margin-top: 0; height: auto; flex: 1; min-width: 0; word-wrap: break-word; }
.ft-info-desc { font-size: 15px; line-height: 24px; }
.ft-feat-txt strong { font-size: 16px; line-height: 24px; }
.ft-feat-txt span { font-size: 15px; line-height: 22px; }
.ft-contact-txt strong { font-size: 16px; line-height: 24px; }
.ft-contact-txt span { font-size: 15px; line-height: 22px; }
.ft-svc-list li { font-size: 15px; line-height: 40px; }
.ft-acc-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.ft-acc-minus { display: none; }
.ft-acc-plus { display: inline-flex; }
.ft-acc.ft-acc-open .ft-acc-plus { display: none; }
.ft-acc.ft-acc-open .ft-acc-minus { display: inline-flex; }
.ft-acc-panel { display: none; padding: 0 0 16px; overflow: hidden; }
.ft-acc.ft-acc-open .ft-acc-panel { display: block; }
.ft-info-desc { margin-top: 0; max-width: 100%; }
.ft-feats { margin-top: 20px; gap: 18px; }
.ft-contacts { margin-top: 0; gap: 28px; }
.ft-svc-list { margin-top: 0; width: 100%; }
.ft-svc-list li { line-height: 40px; border-bottom: 1px dashed #D9D9D9; }
.ft-svc-list li:last-child { border-bottom: none; }
.ft-col-card { width: 100%; max-width: 100%; margin-left: 0; align-self: stretch; margin-top: 24px; border-bottom: none; }
.ft-col:not(.ft-col-card) { padding-left: 0; padding-right: 0; }
.ft-nws-card { height: auto; min-height: 0; padding: 24px 16px 20px; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; }
.ft-nws-doodle { position: absolute; inset: 0; width: 100%; height: 100%; }
.ft-nws-icon { position: relative; top: auto; left: auto; transform: none; width: 72px; height: 72px; margin: 0 auto 12px; flex-shrink: 0; }
.ft-nws-icon img { width: 72px; height: 72px; }
.ft-nws-text { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 280px; margin: 0 auto 16px; text-align: center; z-index: 2; }
.ft-nws-title { margin-bottom: 8px; }
.ft-nws-sub { font-size: 15px; line-height: 22px; }
.ft-nws-form { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 100%; height: 52px; margin: 0 0 16px; z-index: 2; box-sizing: border-box; }
.ft-nws-input { font-size: 15px; padding: 0 12px 0 16px; }
.ft-nws-input::placeholder { font-size: 14px; }
.ft-nws-send { width: 48px; }
.ft-nws-agree { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 0 4px; z-index: 2; justify-content: flex-start; align-items: center; gap: 12px; box-sizing: border-box; }
.ft-nws-chk { width: 44px; height: 44px; left: -10px; top: 50%; transform: translateY(-50%); cursor: pointer; pointer-events: auto; }
.ft-nws-agree-lbl { white-space: normal; line-height: 1.4; flex: 1; min-width: 0; font-size: 14px; }
.ft-social { width: 100%; max-width: 100%; margin: 0; border-radius: 12px 12px 0 0; height: auto; min-height: 0; padding: 20px; flex-direction: column; align-items: flex-start; box-sizing: border-box; }
.ft-soc-logo { width: 100%; padding-left: 0; margin-bottom: 14px; height: auto; }
.ft-soc-logo img { width: 160px; height: auto; max-height: 62px; object-fit: contain; }
.ft-soc-line { display: none; }
.ft-soc-right { width: 100%; flex-wrap: wrap; gap: 12px 20px; padding-left: 0; align-items: center; }
.ft-soc-label { display: block; width: 100%; margin-bottom: 4px; font-size: 15px; }
.ft-soc-lnk { flex: 0 0 auto; min-height: 44px; padding: 0 4px; height: auto; }
.ft-nav { gap: 10px 14px; padding: 0 20px; margin-top: 20px; justify-content: center; }
.ft-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.ft-copy { margin-top: 14px; padding: 0 20px; font-size: 13px; line-height: 1.4; }}
@media (max-width: 480px) {  /* ── Mobile typography (480px) — affected sections ── */
:root { --m-h1-size: 28px; --m-h1-lh: 34px; --m-h2-size: 20px; --m-h2-lh: 26px; --m-h3-size: 17px; --m-h3-lh: 22px; }
.ow-desc, .pr-desc, .bl-desc, .da-desc, .fr-desc, .fq-desc, .ft-info-desc { font-size: 14px; line-height: 22px; }
.ow-label, .pr-label, .bl-label, .fq-label, .da-badge span, .fr-badge span { font-size: 15px; }
/* Navbar — 480px */
:root { --nav-bar-h: 56px; --mobile-nav-h: 56px; --mobile-logo-h: 44px; }
.nav-mobile-spacer { height: var(--nav-bar-h); }
.navbar { height: var(--nav-bar-h); min-height: var(--nav-bar-h); }
body.nav-open .navbar { height: var(--nav-bar-h); min-height: var(--nav-bar-h); }
body.nav-open .nav-sticky-wrap { height: var(--nav-bar-h); min-height: var(--nav-bar-h); }
.nav-inner { padding: 0 14px; gap: 10px; height: 56px; min-height: 56px; }
.nav-toggle { width: 32px; height: 32px; padding: 5px; }
.nav-toggle span { width: 18px; }
.nav-links { width: 100%; max-width: 100%; padding: 72px 20px 24px; }
.nav-link { padding: 11px 0; font-size: 13px; }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); }
/* Hero keeps the same composition across mobile widths. */
/* About Us – 480px */
.about-content { padding: 24px 16px 36px 20px; }
.about-heading { margin-bottom: 10px; }
.about-badge { margin-bottom: 14px; }
.about-badge-text { font-size: 15px; }
.about-desc { font-size: 14px; line-height: 22px; margin-bottom: 18px; }
.about-sep { margin-bottom: 18px; }
/* Our Services – 480px */
.services { padding: 20px 16px 28px; }
.services .svc-carousel-wrap, .services.svc-is-carousel .svc-carousel-wrap { padding: 0 12px; }
.services .svc-desc { font-size: 14px; line-height: 22px; }
.services .svc-label { font-size: 15px; }
.services.svc-is-carousel .owl-dots { margin-top: 16px; }
/* Our Work – 480px */
.our-work, .our-work.ow-is-carousel { padding: 32px 16px 0px; }
.our-work .ow-carousel-wrap, .our-work.ow-is-carousel .ow-carousel-wrap { padding: 0 12px; }
.our-work .ow-grid:not(.owl-loaded) .ow-card, .our-work.ow-is-carousel .ow-card { height: 320px; }
.our-work.ow-is-carousel .owl-dots { margin-top: 16px; }
/* Blog – 480px */
.blog { padding: 32px 16px 40px; }
.blog.bl-is-carousel .owl-dots { margin-top: 16px; }
.bl-header { margin-bottom: 24px; }
.bl-grid { gap: 16px; margin-bottom: 28px; }
.bl-feat-card { min-height: 300px; }
.bl-feat-body { min-height: 180px; padding: 100px 14px 16px; }
.bl-feat-desc-txt { font-size: 12px; }
.bl-sm-photo-wrap { height: 160px; }
.bl-sm-cat { top: 151px; /* 160px photo − 9px overlap */ left: 50%; transform: translateX(-50%); font-size: 11px; height: 18px; padding: 0 8px; }
.blog.bl-is-carousel .bl-sm-photo-wrap { height: 160px; }
.blog.bl-is-carousel .bl-sm-cat { top: 151px; }
.bl-sm-body { padding: 44px 14px 18px; }
.bl-sm-title { font-size: 16px; line-height: 1.3; }
.bl-sm-desc { font-size: 12px; }
.bl-sm-read { font-size: 14px; }
.bl-cta-btn { max-width: 100%; height: auto; }
.bl-cta-btn img { width: 100%; height: auto; max-height: 48px; object-fit: contain; }
/* Franchise – 480px */
.fr-panel { padding: 24px 16px 32px; }
.fr-badge { padding: 6px 10px; margin-bottom: 10px; }
.fr-desc { margin-bottom: 24px; }
.fr-feats { margin-bottom: 28px; gap: 12px; }
.fr-feat span { font-size: 14px; }
.fr-bottom { gap: 14px; }
.fr-enquire { max-width: 100%; height: 44px; font-size: 14px; }
.fr-boss-txt { font-size: 11px; }
/* Footer — 480px */
.ft-main { padding: 28px 16px 20px; }
.ft-acc-trigger { padding: 14px 0; }
.ft-nws-sub, .ft-nws-agree-lbl { font-size: 14px; line-height: 20px; }
.ft-nws-card { padding: 20px 12px 16px; }
.ft-nws-form { height: 48px; }
.ft-nws-input::placeholder { font-size: 13px; }
.ft-nws-agree-lbl { font-size: 13px; }
.ft-social { padding: 16px; border-radius: 10px 10px 0 0; }
.ft-soc-logo img { width: 140px; max-height: 54px; }
.ft-soc-right { gap: 10px 14px; }
.ft-soc-lnk { font-size: 14px; }
.ft-soc-label { font-size: 14px; }
.ft-nav { gap: 8px 12px; padding: 0 16px; }
.ft-nav a { font-size: 13px; }
.ft-copy { padding: 0 16px; font-size: 12px; }
/* FAQ – 480px small mobile */
.fq-section { padding: 28px 16px 40px; margin-bottom: 0px; }
.fq-desc { font-size: 14px; }
.fq-btn { min-height: 48px; padding: 10px 10px 10px 8px; }
.fq-num { width: 20px; font-size: 13px; }
.fq-vline { margin: 0 8px; height: 20px; }
.fq-q-text { font-size: 14px; }
.fq-ans { padding: 0 12px 0 42px; }
.fq-open .fq-ans { padding: 4px 12px 14px 42px; }
.fq-ans p { font-size: 14px; }
.fq-help { padding: 20px 16px 24px; }
.fq-hp-icon { width: 60px; height: 60px; top: 10px; right: 10px; }
.fq-hp-icon img { width: 60px; height: 60px; }
.fq-help-title { max-width: calc(100% - 68px); }
.fq-help-desc { font-size: 14px; }
.fq-contact-btn { min-width: 0; width: 100%; max-width: 220px; font-size: 14px; }
.fq-pickup { padding: 16px 14px; gap: 12px; }
.fq-pu-circle { width: 56px; height: 56px; }
.fq-pu-phone img { width: 40px; height: 40px; }
.fq-pu-desc { font-size: 14px; }
/* Pricing – 480px */
.pricing, .pricing.pr-is-carousel { padding: 28px 16px 48px; }
.pricing .pr-grid:not(.owl-loaded), .pricing.pr-is-carousel .pr-carousel-wrap { padding: 0 0px; }
.pricing.pr-is-carousel .pr-carousel-wrap--row1 { margin-bottom: 20px; }
.pricing.pr-is-carousel .pr-pkg-pct, .pricing .pr-pkg-pct { font-size: 48px; }
.pricing .pr-pkg-price, .pricing .pr-pkg-worth-amt { font-size: 24px; }
.pricing.pr-is-carousel .owl-dots { margin-top: 14px; }
/* Our Difference – 480px */
.wsua-body { padding: 24px 16px 36px; }
.wsua-heading { margin-bottom: 10px; }
.wsua-pill { margin-bottom: 14px; }
.wsua-desc { font-size: 14px; line-height: 22px; margin-bottom: 20px; }
.wsua-pill-text { font-size: 15px; }
.wsua-grid { row-gap: 20px; margin-bottom: 28px; }
.wsua-item-title { font-size: 15px; line-height: 20px; }
.wsua-item-desc { font-size: 13px; line-height: 18px; }
/* Download App – 480px */
.da-content { padding: 24px 16px 36px; }
.da-desc { margin-bottom: 20px; }
.da-badge { margin-bottom: 14px; }
.da-features { margin-bottom: 24px; }
.da-dl-btn { max-width: 100%; margin-bottom: 24px; }
.da-available-label { font-size: 15px; margin-bottom: 12px; }
.da-store-badges { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.da-store-link img { width: 120px; max-height: 42px; }}

/* Brand-colored UI icons (single-color PNG icons) */
.hbc-ic, .about-badge-leaf, .wsua-pill-ic, .pr-gst-ic, .svc-circle img, .wsua-circle img, .pr-cat-circle img, .pr-pkg-circle img, .pr-pl-icon img, .sl-search-ic, .sl-dropdown-ic, .da-badge img, .fr-badge img, .ft-feat-ic img:not([src$=".svg"]), .ft-contact-ic img:not([src$=".svg"]) { filter: var(--brand-icon-filter); }

/* ============================================================
   Schedule Pickup modal (Figma: EDxB932V2OgmyLorW7ftSF · 371:2)
   ============================================================ */
.sp-overlay { position: fixed; inset: 0; z-index: 3100; display: none; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; background: #EEEEEE; -webkit-overflow-scrolling: touch; }
.sp-overlay.is-open { display: flex; }
html.sp-modal-open, body.sp-modal-open { overflow: hidden; }
body.sp-modal-open { position: fixed; width: 100%; }
.sp-card { --sp-green: #347A00; --sp-green-hover: #2B6500; position: relative; width: 100%; max-width: min(353px, calc(100vw - 40px)); margin: auto; padding: 52px 31px 24px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); flex-shrink: 0; box-sizing: border-box; overflow: hidden; }
.sp-close { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0; z-index: 2; }
.sp-close img { width: 18px; height: 18px; object-fit: contain; display: block; filter: var(--brand-icon-filter); }
.sp-logo { display: block; width: 50px; height: 50px; margin: 0 auto 3px; object-fit: contain; filter: var(--brand-icon-filter); }
.sp-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; line-height: 25px; color: #000000; text-align: center; margin: 0 0 3px; }
.sp-subtitle { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 400; line-height: 15px; color: #000000; text-align: center; margin: 0 0 26px; }
.sp-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 291px; margin: 0 auto; min-width: 0; }
.sp-field { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; min-height: 57px; }
.sp-field--half { flex: 1 1 0; min-width: 0; max-width: 140px; }
.sp-row { display: flex; gap: 11px; width: 100%; max-width: 291px; margin: 0 auto; align-items: flex-start; min-width: 0; }
.sp-label { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 400; line-height: 15px; color: #000000; padding-left: 12px; }
.sp-label-opt { color: #CBCBCB; }
.sp-input-wrap { position: relative; width: 100%; height: 40px; min-width: 0; }
.sp-field-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; object-fit: contain; pointer-events: none; z-index: 1; filter: var(--brand-icon-filter); }
.sp-input { width: 100%; min-width: 0; height: 40px; padding: 0 12px 0 40px; border: 1px solid #EBEBEB; border-radius: 5px; background: #FFFFFF; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 400; line-height: 15px; color: #000000; outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; }
.sp-input::placeholder { color: #DBDBDB; }
.sp-input:focus { border-color: var(--sp-green); }
.sp-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23347A00' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.sp-select:invalid { color: #DBDBDB; }
.sp-select:valid { color: #000000; }
.sp-select option { color: #000000; }
.sp-input--date { color: #DBDBDB; }
.sp-input--date:valid, .sp-input--date:focus { color: #000000; }
.sp-input--date::-webkit-calendar-picker-indicator { opacity: 0.85; cursor: pointer; margin-right: 2px; filter: var(--brand-icon-filter); }
.sp-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 291px; height: 37px; margin: 8px auto 0; padding: 0 10px 0 14px; border: none; border-radius: 5px; background: var(--sp-green); cursor: pointer; transition: background 0.2s; box-sizing: border-box; }
.sp-submit span { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0; }
.sp-submit img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); }
.sp-submit:hover { background: var(--sp-green-hover); }
.sp-trust { list-style: none; display: flex; align-items: flex-start; justify-content: center; gap: 0; width: 100%; max-width: 291px; margin: 22px auto 0; padding: 0; min-width: 0; }
.sp-trust-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 2px; }
.sp-trust-item img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: var(--brand-icon-filter); }
.sp-trust-item span { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 400; line-height: 11px; color: #9C9C9C; max-width: 100%; }
.sp-trust-divider { width: 1px; height: 26px; background: #D9D9D9; flex-shrink: 0; align-self: center; margin-top: 6px; }
.sp-field--error .sp-input { border-color: #C0392B; }
.sp-field--error .sp-label { color: #C0392B; }
.sp-field-error { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 400; line-height: 14px; color: #C0392B; padding-left: 12px; margin: 2px 0 0; }
.sp-form.is-submitted .sp-input:invalid { border-color: #C0392B; }

@media (max-height: 740px) {
  .sp-card { padding: 44px 24px 20px; }
  .sp-logo { width: 44px; height: 44px; }
  .sp-subtitle { margin-bottom: 18px; }
  .sp-form { gap: 6px; }
  .sp-field { min-height: 54px; }
  .sp-input-wrap, .sp-input { height: 38px; }
  .sp-submit { height: 36px; margin-top: 6px; }
  .sp-trust { margin-top: 16px; }
}

@media (max-width: 360px) {
  .sp-overlay { padding: 12px; }
  .sp-card { max-width: calc(100vw - 24px); padding: 48px 20px 20px; }
  .sp-form, .sp-row, .sp-trust, .sp-submit { max-width: 100%; }
  .sp-field--half { max-width: none; }
  .sp-row { gap: 8px; }
}

@media (min-width: 1024px) {
  .sp-overlay { padding: 32px 48px; align-items: center; }
  .sp-card { width: 100%; max-width: min(580px, calc(100vw - 80px)); padding: 48px 30px 36px; }
  .sp-title { font-size: 22px; line-height: 28px; margin-bottom: 4px; }
  .sp-subtitle { font-size: 13px; line-height: 18px; margin-bottom: 24px; max-width: none; }
  .sp-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: none; margin: 0; min-width: 0; }
  .sp-field { min-height: 0; gap: 4px; width: 100%; max-width: none; }
  .sp-field--half { flex: 1 1 0; max-width: none; min-width: 0; }
  .sp-row { display: flex; gap: 16px; width: 100%; max-width: none; margin: 0; align-items: flex-start; }
  .sp-label { font-size: 13px; line-height: 16px; padding-left: 12px; max-width: none; }
  .sp-input-wrap { height: 42px; width: 100%; max-width: none; }
  .sp-input { height: 42px; font-size: 13px; line-height: 17px; padding: 0 14px 0 40px; width: 100%; max-width: none; }
  .sp-field-ic { left: 12px; width: 20px; height: 20px; }
  .sp-submit { width: 100%; max-width: none; height: 42px; margin: 4px 0 0; padding: 0 14px 0 18px; }
  .sp-submit span { font-size: 15px; line-height: 19px; white-space: nowrap; }
  .sp-trust { width: 100%; max-width: none; margin: 24px 0 0; padding: 0 4px; gap: 0; }
  .sp-trust-item { gap: 6px; padding: 0 8px; max-width: none; }
  .sp-trust-item span { font-size: 11px; line-height: 13px; max-width: none; white-space: normal; }
  .sp-trust-divider { height: 30px; margin-top: 4px; }
}

/* ============================================================
   Thank You page
   ============================================================ */
.ty-body { min-height: 100vh; display: flex; flex-direction: column; }
.ty-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px 56px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FBF6 100%); box-sizing: border-box; }
.ty-card { width: 100%; max-width: min(480px, calc(100vw - 40px)); margin: 0 auto; padding: 48px 32px 40px; background: #FFFFFF; border-radius: 20px; box-shadow: var(--shadow-card); text-align: center; box-sizing: border-box; }
.ty-icon-wrap { width: 72px; height: 72px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(52, 122, 0, 0.1); color: var(--green); }
.ty-icon { display: block; }
.ty-title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; line-height: 1.15; color: var(--black); margin: 0 0 12px; }
.ty-message { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--gray); margin: 0 auto 32px; max-width: 36ch; }
.ty-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 208px; height: 42px; padding: 0 10px 0 20px; background: var(--green); border-radius: 5px; transition: background 0.2s; box-sizing: border-box; }
.ty-btn:hover { background: #2B6500; }
.ty-btn span { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--white); line-height: 1; }
.ty-btn svg { flex-shrink: 0; color: var(--white); }
.ty-footer { padding: 24px 20px 32px; background: var(--light-gray); text-align: center; }
.ty-footer-copy { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; color: var(--mid-gray); margin: 0; }

@media (max-width: 768px) {
  .ty-page { padding: 32px 16px 48px; }
  .ty-card { max-width: min(400px, calc(100vw - 32px)); padding: 40px 24px 32px; border-radius: 16px; }
  .ty-icon-wrap { width: 64px; height: 64px; margin-bottom: 16px; }
  .ty-icon { width: 34px; height: 34px; }
  .ty-title { font-size: 28px; }
  .ty-message { font-size: 15px; line-height: 22px; margin-bottom: 28px; }
  .ty-btn { width: 100%; max-width: 280px; min-height: 46px; height: auto; padding: 12px 14px 12px 18px; }
  .ty-btn span { font-size: 14px; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .ty-card { max-width: 440px; padding: 44px 36px 36px; }
  .ty-title { font-size: 32px; }
}

@media (min-width: 1024px) {
  .ty-page { padding: 56px 48px 72px; }
  .ty-card { max-width: 520px; padding: 56px 48px 44px; }
  .ty-title { font-size: 40px; margin-bottom: 14px; }
  .ty-message { font-size: 17px; line-height: 26px; margin-bottom: 36px; }
  .ty-btn { min-width: 220px; height: 44px; }
}