/* ==================== DESIGN TOKENS ==================== */
      :root {
        --terracotta: #c4714f;
        --terracotta-light: #d4896a;
        --terracotta-dark: #a85a38;
        --cream: #f9f3ee;
        --cream-deep: #f2e8df;
        --parchment: #ede0d4;
        --brown-dark: #2c1a0e;
        --brown-mid: #5c3d28;
        --brown-light: #8c6548;
        --white: #ffffff;
        --text-primary: #2c1a0e;
        --text-secondary: #5c3d28;
        --text-muted: #8c6548;
        --border: rgba(196, 113, 79, 0.18);
        --shadow-sm: 0 2px 12px rgba(44, 26, 14, 0.08);
        --shadow-md: 0 8px 32px rgba(44, 26, 14, 0.12);
        --shadow-lg: 0 20px 60px rgba(44, 26, 14, 0.16);
        --shadow-xl: 0 32px 80px rgba(44, 26, 14, 0.2);
        --radius-sm: 8px;
        --radius-md: 16px;
        --radius-lg: 24px;
        --radius-xl: 32px;
        --radius-full: 9999px;
        --section-padding: 80px 0;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }



@font-face {
  font-family: "Prohibition";
  src: url("./ProhibitionTest-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
      /* ==================== RESET & BASE ==================== */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        font-size: 16px;
      }
      body {
        /* font-family: 'Georgia', serif; */
        /* font-family: "geller-text", serif; */
        font-family: "Poppins", sans-serif;
        background: var(--cream);
        /* background: #FABE33; */
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
      }
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      a {
        text-decoration: none;
        color: inherit;
      }

      /* ==================== TYPOGRAPHY ==================== */
      .eyebrow {
        /* font-family: "geller-text", serif; */
        font-family: "Poppins", sans-serif;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--terracotta);
        display: inline-block;
        margin-bottom: 16px;
        margin-top: 35px;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Prohibition";
        line-height: 1;
      }
      h1 {
        color: #000;
        font-size: clamp(36px, 5vw, 72px);
        font-weight: 400;
        margin-bottom: 20px;
        line-height: 0.9;
      }
      h2 {
        font-size: clamp(28px, 3.5vw, 48px);
        font-weight: 400;
      }
      h3 {
        font-size: clamp(20px, 2.5vw, 32px);
        font-weight: 400;
      }
      h4 {
        font-size: clamp(16px, 1.8vw, 22px);
        font-weight: 400;
      }
      p {
        font-size: 16px;
        line-height: 1.3;
        color: var(--text-secondary);
      }

      /* ==================== CONTAINER ==================== */
      .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 50px ;
      }
      @media (max-width: 768px) {
        .container {
          padding: 0 20px;
        }
      }

      /* ==================== BUTTONS ==================== */
      .btn-primary {
        /* font-family: "geller-text", serif; */
        font-family: "Poppins", sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        /* background: var(--terracotta); */
        background: #fff4ea;
        /* color: var(--white); */
        color: #000;
        font-weight: 500;
        padding: 10px 32px;
        border-radius: var(--radius-full);
        font-size: 16px;
        letter-spacing: 0.05em;
        /* font-family: 'Georgia', serif; */
        transition: var(--transition);
        border: none;
        cursor: pointer;
      }
      .btn-primary:hover {
        background: var(--terracotta-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .btn-outline {
        /* font-family: "geller-text", serif; */
        font-family: "Poppins", sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        color: var(--terracotta);
        padding: 14px 30px;
        border-radius: var(--radius-full);
        font-size: 16px;
        letter-spacing: 0.05em;
        /* font-family: 'Georgia', serif; */
        transition: var(--transition);
        border: 2px solid var(--terracotta);
        cursor: pointer;
      }
      .btn-outline:hover {
        background: var(--terracotta);
        color: var(--white);
        transform: translateY(-2px);
      }
      .btn-arrow::after {
        content: "→";
      }

      /* ==================== SECTION BASE ==================== */
      section {
        padding: var(--section-padding);
        position: relative;
      }

      /* ==================== NAV (PRESERVED) ==================== */
      /* nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(249, 243, 238, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
      
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1280px;
        margin: 0 auto;
        
      } */
      /* .nav-logo {
  font-size: 22px;
  font-family: 'Georgia', serif;
  color: var(--brown-dark);
  font-style: italic;
} */
      .nav-cta {
        font-size: 16px;
        color: #ffffff;
        font-weight: 400;
      }

      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(26, 13, 7, 0.92);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(212, 160, 23, 0.15);
        padding: 14px 0;
        overflow: visible;
      }
      .nav-inner {
        max-width: 1280px;
        margin: 13px auto;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
      }
      /* Logo floats out of navbar: 40% inside navbar, 60% extends below */
      .nav-logo {
        position: absolute;
        left: 40px;
        bottom: -40px; /* 60% of 120px logo */
        z-index: 1002;
        display: flex;
        align-items: flex-start;
        background-color: #f9f3ee;
        border-radius: 10px;
        height: 102px;
      }
      .nav-logo img {
        height: 120px;
        width: auto;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.28));
      }
      /* ==================== SECTION 1: HERO (PRESERVED) ==================== */
      #section-1 {
        padding: 50px 0 50px;
        background: #c4714f;
      }
      .hero-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--parchment);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        padding: 8px 18px;
        font-size: 12px;
        color: var(--brown-mid);
        margin-bottom: 24px;
      }
      .hero-badge span {
        width: 6px;
        height: 6px;
        background: var(--terracotta);
        border-radius: 50%;
      }
      .hero-title em {
        /* font-family: "geller-text", serif; */
          /* font-family: "Poppins", sans-serif; */
          font-family: "Prohibition";
        font-style: regualr;
        color: #fff;
      }
      .hero-title-mobile {
        display: none;
      }
      .hero-desc {
        max-width: 480px;
        margin-bottom: 36px;
        color: #fff;
      }
      .hero-cta-row {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 48px;
      }
      .hero-metrics {
        display: flex;
        gap: 32px;
        padding-top: 32px;
        border-top: 1px solid var(--border);
      }
      .hero-metric-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--terracotta);
        font-family: "Georgia", serif;
      }
      .hero-metric-label {
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        margin-top: 4px;
      }
      .hero-image-wrap {
        height: 450px; /* adjust as needed */
        overflow: hidden;
        border-radius: 24px;
      }

      .hero-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .hero-float-badge {
        position: absolute;
        bottom: 32px;
        left: -24px;
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        box-shadow: var(--shadow-lg);
        min-width: 180px;
      }
      .hero-float-badge .big {
        font-size: 32px;
        font-weight: 700;
        color: var(--terracotta);
      }
      .hero-float-badge .label {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
      }

      /* ==================== SECTION 2: ANCIENT GRAINS ==================== */
      #section-2 {
        background: var(--brown-dark);
        color: var(--white);
        padding: 10px 0 40px;
        overflow: hidden;
      }
      .s2-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .s2-left .eyebrow {
        color: var(--terracotta-light);
      }
      .s2-left h2 {
        color: var(--white);
        margin-bottom: 18px;
        /* font-family: "geller-text", serif; */
       font-family: "prohibition";
      }
      .s2-left p {
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 22px;
      }
      .s2-mobile {
        display: none;
      }
      .s2-features {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
      }
      .s2-feature-item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 20px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        transition: var(--transition);
      }
      .s2-feature-item:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(4px);
      }
      .s2-feature-icon {
        width: 60px;
        height: 60px;
        background: var(--terracotta);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 18px;
      }
      .s2-feature-title {
        font-size: 15px;
        color: var(--white);
        margin-bottom: 4px;
        font-family: "Poppins", serif;
      }
      .s2-feature-desc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.5;
      }
      .s2-right {
        position: relative;
      }
      .s2-image-main {
        height: 580px; /* adjust as needed */
        overflow: hidden;
        border-radius: 24px;
      }

      .s2-image-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .s2-float-card {
        position: absolute;
        top: 40px;
        left: -40px;
        background: var(--terracotta);
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 24px;
        width: 200px;
        box-shadow: var(--shadow-xl);
      }
      .s2-float-card .big {
        font-size: 36px;
        font-weight: 700;
      }
      .s2-float-card .label {
        font-size: 12px;
        opacity: 0.85;
        margin-top: 4px;
        line-height: 1.4;
      }
      .s2-float-card2 {
        position: absolute;
        bottom: 48px;
        right: -24px;
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        width: 180px;
        box-shadow: var(--shadow-xl);
      }
      .s2-float-card2 .big {
        font-size: 28px;
        font-weight: 700;
        color: var(--terracotta);
      }
      .s2-float-card2 .label {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
      }

      /* ==================== SECTION 3: INDIA BUILT A BILLION CAFES ==================== */
      #section-3 {
        background: var(--cream);
        padding: 40px 0;
        padding-bottom: 50px;
      }
      .s3-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 45px;
      }
      .s3-header h2 {
        margin-bottom: 20px;
      }
      .s3-header p {
        color: var(--text-secondary);
      }
      .s3-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--white);
        box-shadow: var(--shadow-lg);
      }
      .s3-main-image {
        position: relative;
        min-height: 480px;
        overflow: hidden;
      }
      .s3-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
      }
      .s3-main-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(44, 26, 14, 0.7) 0%,
          transparent 60%
        );
      }
      .s3-main-image-caption {
        position: absolute;
        bottom: 32px;
        left: 32px;
        color: var(--white);
      }
      .s3-main-image-caption h3 {
        font-size: 24px;
        margin-bottom: 8px;
      }
      .s3-main-image-caption p {
        font-size: 13px;
        opacity: 0.8;
        color: rgba(255, 255, 255, 0.8);
      }
      .s3-image-card {
        position: relative;
        overflow: hidden;
        border-left: 1px solid var(--border);
        min-height: 480px;
      }
      .s3-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
        transition: transform 0.5s ease;
      }
      .s3-image-card:hover img {
        transform: scale(1.05);
      }
      .s3-image-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(44, 26, 14, 0.65) 0%,
          transparent 50%
        );
      }
      .s3-image-card-label {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: var(--white);
        font-size: 13px;
        font-style: italic;
      }
      .s3-stats-bar {
        display: flex;
        justify-content: center;
        gap: 0;
        margin-top: 48px;
        background: var(--brown-dark);
        border-radius: var(--radius-xl);
        overflow: hidden;
      }
      .s3-stat-item {
        flex: 1;
        padding: 40px 32px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        transition: var(--transition);
      }
      .s3-stat-item:last-child {
        border-right: none;
      }
      .s3-stat-item:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      .s3-stat-value {
        font-size: clamp(28px, 3vw, 44px);
        color: var(--terracotta-light);
        margin-bottom: 8px;
        font-family: "Times New Roman", Times, serif;
        font-weight: 400;
      }
      .s3-stat-label {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.4;
      }
      .s3-credit {
        text-align: center;
        margin-top: 24px;
        font-size: 16px;
        color: #000;
        font-style: italic;
      }

      /* ==================== SECTION 4: PLACEHOLDER (PRESERVED) ==================== */
      #section-4 {
        background: var(--cream-deep);
        padding: 80px 0;
      }
      .s4-label {
        text-align: center;
        margin-bottom: 40px;
      }
      .s4-mosaic {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-bottom: 24px;
      }
      .s4-mosaic-item {
        border-radius: var(--radius-md);
        overflow: hidden;
        aspect-ratio: 3/4;
        background: var(--parchment);
        position: relative;
      }
      .s4-mosaic-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .s4-caption {
        text-align: center;
        margin-top: 16px;
        font-size: 13px;
        color: var(--text-muted);
        font-style: italic;
      }

      /* ==================== SECTION 5: MARKET CAUGHT UP ==================== */
      #section-5 {
        background: var(--cream);
        padding: 45px 0;
      }
      .s5-header {
        text-align: center;
        margin-bottom: 10px;
      }
      .s5-header .eyebrow {
        display: block;
      }
      .s5-header h2 {
        margin-bottom: 16px;
      }
      .s5-header p {
        max-width: 560px;
        margin: 0 auto;
        color: var(--text-secondary);
      }
      .s5-panorama {
        position: relative;
        border-radius: var(--radius-xl);
        overflow: hidden;
        aspect-ratio: 21/9;
        background: var(--parchment);
        margin-bottom: 0;
      }

      .s5-panorama img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .s5-panorama-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(44, 26, 14, 0.6) 0%,
          rgba(44, 26, 14, 0.1) 60%,
          transparent 100%
        );
      }
      .s5-cards-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: -60px;
        position: relative;
        z-index: 2;
        padding: 0 40px;
      }
      .s5-stat-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 17px 19px;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
        text-align: center;
        transition: var(--transition);
      }
      .s5-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
      }
      .s5-stat-value {
        font-size: clamp(32px, 4vw, 52px);
        color: var(--terracotta);
        font-family: "Times New Roman", Times, serif;
        font-weight: 400;
      }
      .s5-stat-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 8px;
        line-height: 1.4;
      }
      .s5-feature-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
        justify-content: center;
        margin-top: 35px;
      }
      .s5-chip {
        padding: 10px 24px;
        background: var(--parchment);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        font-size: 15px;
        color: var(--text-secondary);
        transition: var(--transition);
        font-family: "Poppins", serif;
        /* font-style: italic; */
      }
      .s5-chip:hover {
        background: var(--terracotta);
        color: var(--white);
        border-color: var(--terracotta);
      }
      .s5-break {
        flex-basis: 6%;
        height: 0;
      }
      /* ==================== SECTION 6: PRESERVED ==================== */
      #section-6 {
        background: var(--cream-deep);
        padding: 80px 0;
      }

      /* ==================== SECTION 7: CUSTOMERS STAY LONGER ==================== */
      #section-7 {
        background: var(--white);
        padding: 40px 0;
      }
      .s7-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .s7-image-wrap {
        position: relative;
      }
      .s7-image-main {
        border-radius: var(--radius-xl);
        overflow: hidden;
        aspect-ratio: 4/5;
        background: var(--parchment);
      }
      .s7-image-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .s7-mobile-img {
        display: none;
      }
      .s7-float-badge {
        position: absolute;
        top: 40px;
        right: -24px;
        background: var(--terracotta);
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 24px 28px;
        box-shadow: var(--shadow-xl);
        text-align: center;
      }
      .s7-float-badge .big {
        font-size: 40px;
        font-weight: 700;
        font-style: italic;
      }
      .s7-float-badge .label {
        font-size: 12px;
        opacity: 0.9;
        margin-top: 4px;
        line-height: 1.4;
      }
      .s7-float-card {
        position: absolute;
        bottom: 40px;
        left: -24px;
        background: var(--brown-dark);
        color: var(--white);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        box-shadow: var(--shadow-xl);
        max-width: 220px;
      }
      .s7-float-card .text {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        font-style: italic;
      }
      .s7-float-card .sub {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 8px;
      }
      .s7-right .eyebrow {
        display: block;
      }
      .s7-right h2 {
        margin-bottom: 24px;
      }
      .s7-right > p {
        margin-bottom: 20px;
      }
      .s7-price-block {
        background: var(--brown-dark);
        color: var(--white);
        border-radius: var(--radius-xl);
        padding: 18px;
        margin-bottom: 22px;
        line-height: 1;
      }
      .s7-price {
        font-size: clamp(36px, 5vw, 58px);
        color: var(--terracotta-light);
        font-family: "Times New Roman", Times, serif;
        font-weight: 400;
        margin-bottom: 12px;
      }
      .s7-price-desc {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
      }
      .s7-checklist {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 36px;
      }
      .s7-check-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }
      .s7-check-icon {
        width: 22px;
        height: 22px;
        background: var(--terracotta);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: white;
        font-size: 12px;
        margin-top: 2px;
      }
      .s7-check-text {
        font-size: 15px;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      /* ==================== SECTION 8: THREE WAYS TO ENTER ==================== */
      #section-8 {
        background: var(--cream);
        padding: 0 0 40px;
      }
      .s8-header {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 50px;
      }
      .s8-header h2 {
        margin-bottom: 16px;
      }
      .s8-header p {
        color: var(--text-secondary);
      }
      .s8-comparison-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .s8-card {
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        position: relative;
      }
      .s8-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
      }
      .s8-card.featured {
        border-color: var(--terracotta);
        box-shadow:
          0 0 0 3px rgba(196, 113, 79, 0.2),
          var(--shadow-lg);
        background: var(--brown-dark);
      }
      .s8-card-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background: var(--terracotta);
        color: white;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: var(--radius-full);
      }
      .s8-card-header {
        padding: 40px 36px 32px;
      }
      .s8-card-label {
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--terracotta);
        margin-bottom: 12px;
        display: block;
      }
      .s8-card.featured .s8-card-label {
        color: var(--terracotta-light);
      }
      .s8-card-title {
        font-size: 28px;
        color: var(--text-primary);
        margin-bottom: 8px;
        font-family: "geller-text", serif;
      }
      .s8-card.featured .s8-card-title {
        color: var(--white);
      }
      .s8-card-subtitle {
        font-size: 15px;
        color: var(--text-muted);
      }
      .s8-card.featured .s8-card-subtitle {
        color: rgba(255, 255, 255, 0.6);
      }
      .s8-card-price-block {
        padding: 0px 36px;
        background: var(--parchment);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .s8-card.featured .s8-card-price-block {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.1);
      }
      .s8-card-price {
        font-size: 60px;
        color: var(--terracotta);
        font-family: "Times New Roman", Times, serif;
        font-weight: 600;
      }
      .s8-card.featured .s8-card-price {
        color: var(--terracotta-light);
      }
      .s8-card-price-note {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
      }
      .s8-card.featured .s8-card-price-note {
        color: rgba(255, 255, 255, 0.5);
      }
      .s8-card-features {
        padding: 32px 36px;
      }
      .s8-feature-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
      }
      .s8-card.featured .s8-feature-row {
        border-color: rgba(255, 255, 255, 0.1);
      }
      .s8-feature-row:last-child {
        border-bottom: none;
      }
      .s8-feature-label {
        color: var(--text-muted);
      }
      .s8-card.featured .s8-feature-label {
        color: rgba(255, 255, 255, 0.6);
      }
      .s8-feature-val {
        font-size: 18px;
        color: var(--text-primary);
        font-weight: 600;
        font-family: "Times New Roman", Times, serif;
      }
      .s8-card.featured .s8-feature-val {
        color: var(--white);
      }
      .s8-card-cta {
        padding: 0px 36px 36px;
      }
      .s8-card-cta .btn-primary {
        width: 100%;
        justify-content: center;
      }
      .s8-card-cta .btn-outline {
        width: 100%;
        justify-content: center;
      }

      /* ==================== SECTION 9: MORE THAN A CAFÉ ==================== */
      #section-9 {
        background: var(--cream-deep);
        padding: 40px 0;
      }
      .s9-header {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 64px;
      }
      .s9-header h2 {
        margin-bottom: 16px;
      }
      .s9-header p {
        color: var(--text-secondary);
      }
      .s9-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }
      .s9-card {
        background: var(--white);
        border-radius: var(--radius-xl);
        padding: 40px 32px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }
      .s9-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--terracotta);
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition);
      }
      .s9-card:hover::before {
        transform: scaleX(1);
      }
      .s9-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
      }
      .s9-card-number {
        position: absolute;
        top: 24px;
        right: 24px;
        font-size: 60px;
        color: var(--parchment);
        font-family: "Georgia", serif;
        font-weight: 700;
        line-height: 1;
        transition: var(--transition);
      }
      .s9-card:hover .s9-card-number {
        color: rgba(196, 113, 79, 0.15);
      }
      .s9-card-icon {
        width: 52px;
        height: 52px;
        background: var(--parchment);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 24px;
        transition: var(--transition);
      }
      /* .s9-card:hover .s9-card-icon { background: var(--terracotta); } */
      .s9-card-title {
        font-size: 18px;
        margin-bottom: 12px;
        color: var(--text-primary);
      }
      .s9-card-desc {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.6;
      }

      /* ==================== SECTION 10: YOU WRITE THE CHEQUE ==================== */
      #section-10 {
        background: var(--brown-dark);
        padding: 80px 0;
        color: var(--white);
      }
      .s10-header {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 64px;
      }
      .s10-header .eyebrow {
        color: var(--terracotta-light);
      }
      .s10-header h2 {
        color: var(--white);
        margin-bottom: 16px;
      }
      .s10-header p {
        color: rgba(255, 255, 255, 0.65);
      }
      .s10-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(420px, 520px));
        justify-content: center;
        gap: 50px;
        margin: 0 auto 64px;
      }

      .s10-col-label {
        text-align: center;
      }

      .s10-checklist {
        max-width: 520px;
        margin: 0 auto;
      }
      .s10-col-label {
        text-align: left;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--terracotta-light);
        margin-bottom: 24px;
        display: block;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .s10-checklist {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .s10-check-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .s10-check-row:last-child {
        border-bottom: none;
      }
      .s10-check-icon {
        color: var(--terracotta-light);
        font-size: 14px;
        margin-top: 2px;
        flex-shrink: 0;
      }
      .s10-check-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.5;
      }
      .s10-timeline {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 64px;
        margin-top: 0;
      }
      .s10-timeline-label {
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--terracotta-light);
        margin-bottom: 40px;
        display: block;
      }
      .s10-timeline-row {
        display: flex;
        gap: 0;
        position: relative;
      }
      .s10-timeline-row::before {
        content: "";
        position: absolute;
        top: 16px;
        left: 32px;
        right: 32px;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        z-index: 0;
      }
      .s10-timeline-step {
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .s10-step-dot {
        width: 32px;
        height: 32px;
        background: var(--terracotta);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: white;
        margin: 0 auto 16px;
      }
      .s10-step-label {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        font-family: "Times New Roman", Times, serif;
      }
      .s10-step-title {
        font-size: 14px;
        color: var(--white);
        margin-bottom: 6px;
        font-family: "Georgia", serif;
      }

      /* ==================== SECTION: STORIES BY OKG GROUP ==================== */
      #section-stories {
        background: var(--parchment);
        padding: 80px 0;
      }
      .s-stories-header {
        text-align: center;
        max-width: 680px;
        margin: 0 auto 64px;
      }
      .s-stories-header h2 {
        margin-bottom: 16px;
      }
      .s-stories-header p {
        color: var(--text-secondary);
      }
      .s-stories-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .s-stories-card {
        background: var(--white);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        transition: var(--transition);
      }
      .s-stories-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
      }
      .s-stories-card-image {
        aspect-ratio: 16/9;
        background: var(--parchment);
        overflow: hidden;
      }
      .s-stories-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      .s-stories-card:hover .s-stories-card-image img {
        transform: scale(1.05);
      }
      .s-stories-card-body {
        padding: 28px;
      }
      .s-stories-card-cat {
        font-size: 11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--terracotta);
        margin-bottom: 10px;
        display: block;
      }
      .s-stories-card-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: var(--text-primary);
        line-height: 1.3;
      }
      .s-stories-card-desc {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.6;
      }

      /* ==================== SECTION: FIRST CITIES ==================== */
      #section-cities {
        background: var(--cream);
        padding: 80px 0;
      }
      .s-cities-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .s-cities-left h2 {
        margin-bottom: 20px;
      }
      .s-cities-left p {
        margin-bottom: 36px;
      }
      .s-cities-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 36px;
      }
      .s-city-chip {
        padding: 10px 20px;
        background: var(--parchment);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        font-size: 13px;
        text-align: center;
        color: var(--text-secondary);
        transition: var(--transition);
      }
      .s-city-chip:hover {
        background: var(--terracotta);
        color: var(--white);
        border-color: var(--terracotta);
      }
      .s-cities-right {
        position: relative;
        border-radius: var(--radius-xl);
        overflow: hidden;
        aspect-ratio: 4/5;
        background: var(--parchment);
        width: 100%;
        max-width: 500px; /* adjust as needed */
        height: 450px; /* adjust as needed */
        overflow: hidden;
        border-radius: 20px; /* optional */
      }
      .s-cities-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* ==================== FORM SECTION ==================== */
      #section-form {
        background: var(--brown-dark);
        padding: 40px 0;
      }
      .form-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
      }
      .form-left .eyebrow {
        color: var(--terracotta-light);
      }
      .form-left h2 {
        color: var(--white);
        margin-bottom: 24px;
        font-size: clamp(28px, 3vw, 44px);
      }
      .form-left p {
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 28px;
      }
      .form-highlights {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .form-highlight-item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .form-highlight-icon {
        width: 44px;
        height: 44px;
        background: rgba(196, 113, 79, 0.2);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--terracotta-light);
        font-size: 20px;
        flex-shrink: 0;
      }
      .form-highlight-title {
        font-size: 15px;
        color: var(--white);
        margin-bottom: 4px;
        font-family: "Poppins", serif;
      }
      .form-highlight-desc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.5;
      }
      .form-card {
        background: var(--cream);
        border-radius: var(--radius-xl);
        padding: 48px 40px;
        box-shadow: var(--shadow-xl);
      }
      .form-card-heading {
        font-size: 24px;
        color: var(--text-primary);
        margin-bottom: 8px;
        /* font-family: "geller-text", serif; */
        font-family: "Poppins", sans-serif;
      }
      .form-card-sub {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 36px;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }
      .form-row.full {
        grid-template-columns: 1fr;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .form-group label {
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        padding: 14px 18px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--white);
        font-family: "Poppins", serif;
        font-size: 14px;
        color: var(--text-primary);
        transition: var(--transition);
        outline: none;
        width: 100%;
      }
      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        border-color: var(--terracotta);
        box-shadow: 0 0 0 3px rgba(196, 113, 79, 0.12);
      }
      .form-group textarea {
        resize: vertical;
        min-height: 100px;
      }
      .form-submit {
        width: 100%;
        margin-top: 8px;
        font-size: 21px;
        padding: 18px 32px;
        background-color: #c4714f;
      }
      .form-privacy {
        text-align: center;
        margin-top: 16px;
        font-size: 12px;
        color: var(--text-muted);
      }

      /* ==================== FOOTER ==================== */
      footer {
        background: var(--terracotta);
        padding: 48px 0;
      }
      .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
      }
      .footer-logo {
        font-size: 24px;
        font-style: italic;
        color: var(--white);
        font-family: "Georgia", serif;
      }
      .footer-links {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
      }
      .footer-links a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
        transition: var(--transition);
      }
      .footer-links a:hover {
        color: var(--white);
      }
      .footer-copy {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      /* ==================== MICRO-INTERACTIONS ==================== */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(24px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .fade-up {
        animation: fadeUp 0.6s ease both;
      }
      .fade-up-delay-1 {
        animation-delay: 0.1s;
      }
      .fade-up-delay-2 {
        animation-delay: 0.2s;
      }
      .fade-up-delay-3 {
        animation-delay: 0.3s;
      }

      /* =========================
   FOOTER SECTION
========================= */
      footer {
        background: #1f140f;
        padding: 10px 20px 30px;
        text-align: center;
        color: #f5f1eb;
        position: relative;
        overflow: hidden;
      }

      /* Container */
      footer .container {
        max-width: 900px;
        margin: 0 auto;
      }

      /* =========================
   LOGO
========================= */
      .logo {
        display: inline-block;
        margin-bottom: 70px;
        width: 180px;
        height: 60px;

        text-decoration: none;
      }

      .footer-logo {
        width: 200px;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        transition: transform 0.4s ease;
        margin-bottom: -50px;
        margin-top: -20px;
      }

      .footer-logo:hover {
        transform: scale(1.05);
      }

      /* =========================
   TAGLINE
========================= */
      .footer-tag {
        /* font-family: "geller-text", serif; */
          font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-size: 20px;
        color: #fff4ea;
        margin-bottom: 22px;
        letter-spacing: 0.5px;
        line-height: 1.5;
      }

      /* =========================
   LEGAL TEXT
========================= */
      .legal {
        max-width: 820px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.9;
        color: rgba(198, 193, 193, 0.72);
        font-weight: 400;
      }
      .hero-image-mobile {
        display: none;
      }

      /* ==================== RESPONSIVE ==================== */
      @media (max-width: 1280px) {
        .s9-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 1024px) {
        .hero-inner,
        .s2-inner,
        .s7-inner,
        .form-inner,
        .s-cities-inner {
          grid-template-columns: 1fr;
          gap: 48px;
        }
        .s3-grid {
          grid-template-columns: 1fr 1fr;
        }
        .s3-image-card {
          min-height: 300px;
        }
        .s3-main-image {
          min-height: 300px;
        }
        .s8-comparison-grid {
          grid-template-columns: 1fr;
          max-width: 480px;
          margin: 0 auto;
        }
        .s10-cols {
          grid-template-columns: 1fr;
        }
        .s-stories-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .s5-cards-row {
          grid-template-columns: 1fr;
          margin-top: 24px;
          padding: 0;
        }
        .s5-panorama {
          aspect-ratio: 16/9;
        }
        .hero-float-badge {
          left: 50%;
          transform: translateX(-50%);
          bottom: -20px;
        }
        .s2-float-card {
          left: 0;
          top: -20px;
        }
        .s2-float-card2 {
          right: 0;
        }
        .s7-float-badge {
          right: 0;
          top: -20px;
        }
        .s7-float-card {
          left: 0;
          bottom: -20px;
        }
        .s4-mosaic {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 768px) {
        :root {
          --section-padding: 60px 0;
        }
        .s2-right {
          display: none;
        }
        /* .s3-grid {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;

          touch-action: pan-x; 
          overscroll-behavior-x: contain;

          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          background: none;
          box-shadow: none;
          border-radius: 0;
          border: none;
        } */

        .s3-grid {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;

          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          background: none;
          box-shadow: none;
          border-radius: 0;
          border: none;

          gap: 0; /* IMPORTANT */
        }

        .s3-grid::-webkit-scrollbar {
          display: none;
        }

        /* .s3-main-image,
        .s3-image-card {
          flex: 0 0 85%;
          min-width: 85%;
          scroll-snap-align: start;
          border-radius: 32px;
        } */

        .s3-main-image,
        .s3-image-card {
          flex: 0 0 100%;
          min-width: 100%;

          min-height: 350px;
          scroll-snap-align: start;
          border-radius: 32px;
        }
        .s3-main-image-caption {
          left: 20px;
          bottom: 20px;
        }

        .s3-main-image-caption h3 {
          font-size: 20px;
        }
        .s5-cards-row {
          gap: 12px;
        }
        .s5-feature-chips {
          margin-top: 30px;
        }
        .s5-break{
          display: none;
        }
        .s7-mobile-img {
          display: block;
          border-radius: 30px;
          padding: 20px;
        }
        .s7-image-wrap {
          display: none;
        }
        .s8-comparison-grid {
          max-width: 100%;
        }
        .s9-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .s-stories-grid {
          grid-template-columns: 1fr;
        }
        .s10-timeline-row {
          flex-direction: column;
          gap: 32px;
        }
        .s10-timeline-row::before {
          display: none;
        }
        .s10-step-dot {
          margin: 0 auto;
        }

        .hero-metrics {
          flex-direction: column;
          gap: 20px;
        }
        .form-row {
          grid-template-columns: 1fr;
        }
        .form-card {
          padding: 32px 24px;
        }
        .hero-cta-row {
          flex-direction: column;
          align-items: flex-start;
        }
        .s4-mosaic {
          grid-template-columns: repeat(2, 1fr);
        }
        .s-cities-grid {
          grid-template-columns: 1fr;
        }
        .logo {
          margin-top: -28px;
        }
        .footer-inner {
          flex-direction: column;
          text-align: center;
        }
        .footer-links {
          justify-content: center;
        }
        .nav-inner {
          flex-direction: column;
          gap: 12px;
          margin: 30px auto;
        }
      }
      @media (max-width: 480px) {
        :root {
          --section-padding: 48px 0;
        }
        h1 {
          font-size: 30px;
        }
        h2 {
          font-size: 24px;
          text-align: center;
        }
        .s2-inner,
        .form-inner {
          gap: 32px;
        }
        .s7-float-badge,
        .s7-float-card,
        .s2-float-card,
        .s2-float-card2,
        .hero-float-badge {
          display: none;
        }
        .s8-card-header,
        .s8-card-features,
        .s8-card-cta {
          padding-left: 24px;
          padding-right: 24px;
          text-align: center;
        }
        .s8-card-price-block {
          padding-left: 24px;
          padding-right: 24px;
        }
        .s4-mosaic {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 375px) {
        .container {
          padding: 0 16px;
        }
        h1 {
          font-size: 26px;
        }
        h2 {
          font-size: 22px;
        }
      }
      @media (min-width: 1920px) {
        .container {
          max-width: 1600px;
        }
      }
      @media (min-width: 2560px) {
        .container {
          max-width: 2000px;
        }
        body {
          font-size: 18px;
        }
        p {
          font-size: 18px;
        }
        h1 {
          font-size: 80px;
        }
        h2 {
          font-size: 60px;
        }
      }

      /* =========================
   FEATURES RESPONSIVE
========================= */

      /* Mobile */
      @media (max-width: 768px) {
        #section-1 {
          padding: 25px 0 50px;
        }
        .btn-primary {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          font-size: 13px;
          gap: 3px;
        }
        .hero-desc {
          font-size: 22px;
          line-height: 1.2;
          /* margin-bottom: 201px; */
          margin-bottom: 15px;
          color: #fff;
        }

        .hero-badge {
          display: inline-flex !important;
          align-items: center;
          gap: 8px;
          font-size: 17px;
          /* margin:0 auto !important; */
        }
        .btn-outline {
          padding: 12px 48px;
          font-size: 18px;
        }
        .hero-left {
          display: flex !important;
          flex-direction: column;
          align-items: center !important;
          text-align: center;
        }
        .nav-cta {
          display: none;
        }

        .s2-features {
          gap: 20px;
        }

        .s2-feature-item {
          gap: 14px;
          align-items: flex-start;
        }

        .s2-feature-icon {
          width: 52px;
          height: 52px;
          min-width: 52px;
          border-radius: 14px;
        }

        .s2-feature-title {
          font-size: 16px;
          margin-bottom: 4px;
        }

        .s2-feature-desc {
          font-size: 14px;
          line-height: 1.6;
        }

        /* Grain icon */
        .grain-icon span {
          top: 10px;
          height: 30px;
        }

        /* Coffee icon */
        .coffee-icon span {
          left: 14px;
          bottom: 12px;
          width: 20px;
          height: 13px;
        }

        /* Home icon */
        .home-icon span {
          left: 17px;
          bottom: 12px;
          width: 18px;
          height: 14px;
        }
      }
      @media (max-width: 767px) {
        .hero-right {
          display: none;
        }

        .hero-image-mobile {
          display: block;
          /* margin: 24px 0; */
        }

        .hero-image-mobile img {
          width: 100%;
          border-radius: 20px;
          display: block;
        }
      }
      @media (max-width: 767px) {
        .hero-cta-row {
          margin-bottom: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 5px;
        }
        .eyebrow,
        .s2-left h2 {
          display: block;
          text-align: center;
        }
        .s2-left p {
          line-height: 1.2;
          text-align: center;
          font-size: 14px;
        }
        .s2-image-main {
          height: auto;
        }
        .s2-mobile {
          display: block;
          text-align: center;
          margin-bottom: 20px;
        }
      }
      @media (max-width: 767px) {
        .s3-grid {
          gap: 16px;
        }
        .ticket-grid {
          grid-template-columns: 1fr !important;
          gap: 16px !important;
        }
        .s7-right > p {
          text-align: center;
          font-size: 14px;
          line-height: 1.2;
        }
        #section-9 {
          padding-top: 50px;
        }
        .s9-header {
          text-align: center;
          max-width: 640px;
          margin: 0 auto 45px;
        }
        .s9-card {
          text-align: center;
        }

        .s9-card-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: fit-content;
          margin: 0 auto 20px;
        }

        .s9-card-icon img {
          display: block;
        }
        .s10-header h2 {
          text-align: center;
          font-size: 21px;
        }
        .s10-header {
          margin: 0 auto 45px;
        }
        .s-stories-header {
          margin: 0 auto 45px;
        }
        .s-cities-left p {
          text-align: center;
          margin-bottom: 20px;
        }
        .btn-primary {
          font-size: 16px;

          gap: 3px;
        }
        .form-left p {
          text-align: center;
          line-height: 1.3;
          font-size: 14px;
        }
        #section-form {
          padding-bottom: 30px;
        }
        .s-stories-card-body {
          text-align: center;
        }
        .s10-step-title {
          margin-bottom: 0px;
        }
        .s10-step-label {
          font-size: 14px;
          color: #fff;
        }
        .s10-timeline-label {
          font-size: 10px;
        }
        .s10-col-label {
          font-size: 10px;
        }
        .s8-card-price {
          font-weight: 700;
        }
        .s8-card-price {
          font-size: 53px;
        }
        .s5-chip {
          text-align: center;
          width: 100%;
        }
        h2 {
          font-size: 22px;
        }
        .s4-mosaic-item:nth-child(5) {
          display: none;
        }
        .s9-card-icon {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(196, 113, 79, 0.12); /* your circle color */
          margin: 0 auto 20px;
        }
      }

      /* Small phones */
      .s9-card-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
      }
      /* .nav-logo img {
        height: 125px;
        transform: scale(1.3);
        transform-origin: left center;
      } */
      @media (max-width: 767px) {
        .nav-logo {
          transform-origin: center;
          left: 122px;
          bottom: -75px;
          height: 108px;
        }
        .nav-logo img {
          height: 127px; /* increase this value */
          width: auto;
          transform-origin: center;
          /* height: 40px; */
        }
      }
      @media (max-width: 767px) {
        #section-1 {
          background: url("/images/mobile_screen.png") top right / cover
            no-repeat;

          padding: 48px 0 40px;
          min-height: 100vh;
        }

        .hero-right {
          display: none;
        }

        .hero-left {
          text-align: center;
          align-items: center;
          justify-content: flex-start;
        }

        .hero-title,
        .hero-desc {
          color: #fff;
        }
        .hero-title {
          display: none;
          padding: 0px 38px;
          font-size: 38px;
          color: #2c1a0e;
        }
        .hero-title-mobile {
          font-size: 40px;
          display: block;
        }
        .hero-title em {
          font-size: 38px;
          color: #2c1a0e;
        }
        .hero-desc {
          padding: 0px 38px;
          color: #a85a38;
        }
        .hero-cta-row {
          margin-top: 20px;
        }
        .s5-header {
          margin-bottom: 20px;
        }
      }
    @media (max-width: 390px) {
        #section-1 {
          background: url("/images/mobile_screen.png") top right / cover
            no-repeat;

          padding: 48px 0 40px;
          min-height: 140vh;
        }
    }


    .s9-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.s9-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 15px;
  color: var(--text-secondary);
  transition: var(--transition);
}
.s9-chip-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.s9-chip:hover {
  background: var(--terracotta);
  color: var(--white);
  /* font-family:"prohibition"; */
  border-color: var(--terracotta);
  transform: translateY(-2px);
}
.s9-chip:hover .s9-chip-icon {
  filter: brightness(0) invert(1);
}



/* #section-1 {
  padding: 80px 0;
  background: #c4714f;
}

#section-2 {
  background: var(--brown-dark);
  color: var(--white);
  padding: 60px 0;
  overflow: hidden;
}

#section-3 {
  background: var(--cream);
  padding: 60px 0;
}

#section-5 {
  background: var(--cream);
  padding: 60px 0;
}

#section-7 {
  background: var(--white);
  padding: 60px 0;
}

#section-8 {
  background: var(--cream);
  padding: 60px 0;
}

#section-9 {
  background: var(--cream-deep);
  padding: 60px 0;
}

#section-form {
  background: var(--brown-dark);
  padding: 60px 0;
} */