@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --forest:#20372C; --forest-deep:#152720; --gold:#C9A227; --gold-soft:#E4C97A;
    --clay:#B97A56; --cream:#F6F1E6; --cream-deep:#EDE4CF; --ink:#2B2620;
    --serif:'EB Garamond', Georgia, serif; --sans:'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--sans); color:var(--ink); background:var(--cream); line-height:1.6; overflow-x:hidden;}
  a{color:inherit; text-decoration:none;}
  svg{display:block; flex-shrink:0;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  ul{list-style:none;}

  .wrap{max-width:1220px; margin:0 auto; padding:0 32px;}
  .eyebrow{font-size:12px; font-weight:700; letter-spacing:2.2px; color:var(--clay); text-transform:uppercase; display:inline-block; margin-bottom:14px;}
  .eyebrow.on-dark{color:var(--gold-soft);}
  h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--forest); letter-spacing:-0.01em;}
  h2{font-size:clamp(28px,4vw,42px); line-height:1.15;}
  h3{font-size:20px;}
  p{color:var(--ink); opacity:0.8;}
  .section{padding:100px 0;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:30px; font-size:14px; font-weight:600;}
  .btn-gold{background:var(--gold); color:var(--forest-deep); transition:transform .25s;}
  .btn-gold:hover{transform:translateY(-2px);}
  .btn-outline{background:transparent; border:1px solid rgba(43,38,32,0.25); color:var(--forest); transition:transform .25s, border-color .25s;}
  .btn-outline:hover{border-color:var(--forest); transform:translateY(-2px);}
  .btn-outline.on-dark{border-color:rgba(246,241,230,0.4); color:var(--cream);}

  /* placeholder "photo" blocks — abstract, branded, not fake stock photography */
  .ph{background:linear-gradient(150deg,var(--cream-deep),var(--forest) 140%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  .ph::before{content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 30% 25%, rgba(228,201,122,0.35), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(185,122,86,0.3), transparent 50%);}
  .ph .mono{font-family:var(--serif); color:rgba(246,241,230,0.85); font-size:15px; letter-spacing:1px; position:relative; z-index:1; text-align:center;}
  .ph .mono span{display:block; font-size:11px; letter-spacing:2px; opacity:0.7; margin-top:4px;}
  .ph img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; z-index:2;}

  /* Fallback program card cover image */
  .ph.program-photo, .ph.pphoto {
    background-image: url('images/skin_category.png');
    background-size: cover;
    background-position: center;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 8px 0;
    background: #FAF5F0;
    box-shadow: 0 2px 12px rgba(43, 38, 32, 0.05);
    border-bottom: 1px solid rgba(43, 38, 32, 0.04);
    transition: padding 0.3s ease;
  }
  header.solid {
    padding: 4px 0;
  }

  nav{display:flex; align-items:center; justify-content:space-between;}
  .brand {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 48px;
    width: 280px;
    overflow: hidden;
    transition: opacity 0.25s ease;
  }
  .brand:hover {
    opacity: 0.85;
  }
  .logo-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 180px;
    width: auto;
    display: block;
    transition: filter 0.3s, height 0.3s;
  }
  
  .navlinks{display:none; gap:26px; font-size:13.5px; font-weight:500; color:var(--forest);}
  .navlinks a{opacity:0.75; position:relative; padding-bottom:4px;} .navlinks a:hover{opacity:1;}
  .navlinks a.active{opacity:1;}
  .navlinks a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--forest);}
  
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 200;
  }
  @media(max-width: 540px) {
    .header-cta {
      display: none !important;
    }
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(32, 55, 44, 0.15);
    color: var(--forest);
    background: transparent;
    cursor: pointer;
    z-index: 210;
    transition: border-color 0.3s, color 0.3s;
  }
  .menu-toggle:hover {
    border-color: var(--forest);
  }
  @media(min-width: 880px) {
    .menu-toggle {
      display: none;
    }
  }

  /* Hamburger Icon Line Transformations */
  .menu-toggle svg line {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    transform-origin: center;
  }
  .menu-toggle.active .line-mid {
    opacity: 0;
    transform: scaleX(0);
  }
  .menu-toggle.active .line-top {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-toggle.active .line-bot {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Responsive Drawer Overlay */
  @media(max-width: 879px) {
    .navlinks {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 290px;
      background: var(--cream);
      box-shadow: -10px 0 40px rgba(20, 37, 44, 0.09);
      display: flex;
      flex-direction: column;
      padding: 110px 40px;
      gap: 26px;
      z-index: 105;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .navlinks.open {
      transform: translateX(0);
      display: flex;
    }
    .navlinks a {
      font-family: var(--serif);
      font-size: 19px;
      opacity: 0.85;
      padding: 0;
    }
    .navlinks a.active::after {
      display: none; /* Hide bottom line inside vertical drawer */
    }
    .navlinks a.active {
      color: var(--clay);
      opacity: 1;
    }
  }

  @media(min-width:880px){.navlinks{display:flex;}}


  /* HERO */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    background: radial-gradient(ellipse 700px 500px at 90% 0%, rgba(201,162,39,0.08), transparent 65%), var(--cream);
    overflow: hidden;
  }
  .hero .wrap {
    position: relative;
    z-index: 3;
  }
  .hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
  }
  
  .hero h1 {
    font-size: clamp(36px, 4.8vw, 54px);
    line-height: 1.12;
    margin-bottom: 20px;
    color: var(--forest);
    font-family: var(--serif);
    max-width: 760px;
  }
  .hero h1 .accent-italic {
    font-style: italic;
    color: var(--clay);
    font-weight: inherit;
  }
  .hero p.lede {
    font-size: 16.5px;
    line-height: 1.6;
    max-width: 640px;
    margin-bottom: 16px;
    opacity: 0.8;
  }
  .hero-trust-micro {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .trust-star {
    color: var(--gold);
    font-size: 15px;
  }
  .hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
  }
  .btn-hero {
    padding: 16px 36px !important;
    font-size: 15px !important;
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.15);
  }
  
  .hero-photo-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .hero-doctor-img {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 4/5;
    border-radius: 24px;
    object-fit: cover;
    border: 1px solid rgba(246, 241, 230, 0.6);
    box-shadow: 0 16px 40px rgba(32, 55, 44, 0.12);
  }
  @media(min-width:900px) {
    .hero-doctor-img {
      max-width: 440px;
    }
  }

  /* Floating Shop & Booking Actions */
  /* Floating Booking Action (Mobile only) */
  .floating-booking {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .floating-booking.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .floating-booking .btn {
    box-shadow: 0 10px 25px rgba(20, 39, 32, 0.18);
    border: 1px solid rgba(246, 241, 230, 0.2);
    padding: 14px 28px;
    font-size: 13.5px;
  }
  .floating-booking .btn:hover {
    background: var(--gold-soft);
  }

  /* Responsive Display Rules */
  @media (min-width: 801px) {
    .floating-booking {
      display: none !important;
    }
  }
  @media (max-width: 800px) {
    .floating-booking {
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(21, 39, 32, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 16px 24px;
      border-top: 1px solid rgba(246, 241, 230, 0.08);
      box-shadow: 0 -8px 30px rgba(21, 39, 32, 0.15);
      transform: translateY(100%);
      width: 100%;
      border-radius: 0;
    }
    .floating-booking.visible {
      transform: translateY(0);
    }
    .floating-booking .btn {
      width: 100%;
      justify-content: center;
      padding: 15px 30px;
      font-size: 14px;
      box-shadow: none;
    }
  }

  /* MILESTONES */
  .milestones{background:var(--forest); padding:56px 0; overflow:hidden;}
  .milestones-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
  @media(min-width:760px){
    .milestones-grid{grid-template-columns:repeat(4,1fr);}
    /* Hide duplicate loop items on desktop */
    .milestones-grid .milestone[aria-hidden="true"] {
      display: none !important;
    }
  }
  .milestone{text-align:center; color:var(--cream);}
  .milestone .n{font-family:var(--serif); font-size:clamp(28px,3.6vw,38px); color:var(--gold-soft);}
  .milestone .l{font-size:12.5px; opacity:0.75; margin-top:4px;}

  /* Milestone marquee scrolling animation */
  @keyframes milestoneTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Mobile horizontal loop scrolling layout */
  @media(max-width: 759px) {
    .milestones {
      padding: 24px 0; /* Reduced height on mobile */
    }
    .milestones .wrap {
      max-width: none;
      padding: 0;
      width: 100%;
    }
    .milestones-grid {
      display: flex !important;
      gap: 60px;
      width: max-content;
      animation: milestoneTicker 11s linear infinite; /* Faster movement speed */
    }
    .milestone {
      flex: 0 0 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    /* Pause loop scroll on tap/hold for better readability */
    .milestones:active .milestones-grid, .milestones:hover .milestones-grid {
      animation-play-state: paused;
    }
  }

  /* PHILOSOPHY REDESIGN */
  .phil-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media(min-width:900px) {
    .phil-grid {
      grid-template-columns: 1fr 1fr;
      gap: 64px;
    }
  }
  
  /* Left column: layered overlapping images */
  .phil-image-group {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 440px;
    margin: 0 auto;
  }
  @media(max-width: 500px) {
    .phil-image-group {
      height: 380px;
    }
  }
  .square-badge {
    width: 60px;
    height: 60px;
    background: var(--forest);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -12px;
    left: 8%;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(32, 55, 44, 0.16);
  }
  .main-img-wrapper {
    width: 82%;
    height: 85%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 30px 180px 30px 30px;
    overflow: hidden;
    border: 1px solid var(--cream-deep);
    box-shadow: 0 16px 40px rgba(32, 55, 44, 0.08);
  }
  .main-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sub-img-wrapper {
    width: 44%;
    aspect-ratio: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid var(--cream);
    box-shadow: 0 12px 32px rgba(32, 55, 44, 0.12);
    z-index: 2;
  }
  .sub-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .floating-experience-badge {
    position: absolute;
    bottom: 8%;
    right: 6%;
    background: #ffffff;
    border: 1px solid var(--cream-deep);
    border-radius: 16px;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    box-shadow: 0 12px 28px rgba(32, 55, 44, 0.08);
  }
  .exp-num {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
  }
  .exp-text {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--forest);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.25;
  }

  /* Right column: content layouts */
  .phil-content-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .phil-check-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0 32px;
    width: 100%;
  }
  .phil-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.5;
  }
  .check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.12);
    color: var(--gold);
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .check-text {
    color: var(--ink);
    opacity: 0.85;
  }
  .check-text strong {
    color: var(--forest);
    font-weight: 600;
  }
  
  .phil-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
    flex-wrap: wrap;
  }
  .phil-award-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cream-deep);
    padding: 12px 20px;
    border-radius: 16px;
    border: 1px solid rgba(246, 241, 230, 0.4);
    min-width: 190px;
  }
  .award-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(32, 55, 44, 0.04);
    flex-shrink: 0;
  }
  .award-text .n {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--forest);
    line-height: 1.1;
  }
  .award-text .l {
    font-family: var(--sans);
    font-size: 11px;
    opacity: 0.7;
    color: var(--ink);
    font-weight: 500;
  }

  /* DOCTORS */
  .doctors-grid{display:grid; grid-template-columns:1fr; gap:24px; margin-top:50px;}
  @media(min-width:760px){.doctors-grid{grid-template-columns:1fr 1fr;}}
  .team-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media(min-width:900px) {
    .team-grid-3 {
      grid-template-columns: repeat(3,1fr);
    }
  }
  @media(max-width:899px) {
    .team-grid-3 {
      display: flex;
      overflow-x: auto;
      gap: 16px;
      padding: 10px 20px;
      margin: 0 -20px 20px -20px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .team-grid-3::-webkit-scrollbar {
      display: none;
    }
    .team-grid-3 .doctor-card {
      flex: 0 0 calc(80% - 16px);
      scroll-snap-align: start;
    }
  }
  .doctor-card{background:#fff; border:1px solid var(--cream-deep); border-radius:20px; overflow:hidden; display:flex; flex-direction:column;}
  .doctor-photo{width:100%; aspect-ratio:16/11;}
  .doctor-body{padding:26px 28px;}
  .doctor-role{font-size:12.5px; color:var(--clay); font-weight:600; margin:3px 0 14px;}
  .tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
  .tag{font-size:11.5px; padding:5px 11px; border-radius:20px; background:var(--cream-deep); color:var(--forest); font-weight:600;}
  .doctors-banner{margin-top:24px; background:var(--forest); color:var(--cream); border-radius:16px; padding:16px 26px; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:500;}
  .featured-on{padding:16px 28px 4px; display:flex; flex-wrap:wrap; align-items:center; gap:14px;}
  .featured-on .lab{font-size:10.5px; font-weight:700; letter-spacing:1px; color:var(--clay); text-transform:uppercase; width:100%;}
  .featured-on .logo{font-size:11.5px; font-weight:700; color:#9a9384; letter-spacing:0.3px;}
  .team-subhead{margin:52px 0 8px; display:flex; align-items:center; gap:14px;}
  .team-subhead h3{font-size:20px; color:var(--forest); white-space:nowrap;}
  .team-subhead .line{flex:1; height:1px; background:var(--cream-deep);}
  .team-card.soon{opacity:0.55; border-style:dashed;}
  .team-card.soon .doctor-photo{display:flex; align-items:center; justify-content:center; background:var(--cream-deep); aspect-ratio: 2.2/1;}
  .team-card.soon .doctor-photo span{font-size:11px; color:var(--clay); font-weight:700; letter-spacing:0.5px;}

  /* PROGRAMS */
  .programs-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:50px;}
  @media(min-width:700px){.programs-row{grid-template-columns:repeat(4,1fr);}}
  @media(min-width:1080px){.programs-row{grid-template-columns:repeat(4,1fr);}}
  .program-card{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--cream-deep); transition:transform .25s;}
  .program-card:hover{transform:translateY(-4px);}
  .program-photo{width:100%; aspect-ratio:3/4;}
  .program-label{padding:14px 12px 4px; text-align:center; font-size:13.5px; font-weight:600; color:var(--forest);}
  .program-concerns{padding:0 12px 16px; text-align:center; font-size:11px; color:var(--clay); line-height:1.4;}
  .program-card.soon{opacity:0.6;}
  .programs-more{display:none;}
  .programs-more.show{display:contents;}

  /* JOURNEY */
  .journey{background:var(--forest-deep); color:var(--cream);}
  .journey h2{color:var(--cream);}
  .journey-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px 10px; margin-top:56px; position:relative;}
  .journey-row::before{content:""; position:absolute; top:25px; left:6%; right:6%; border-top:2px dotted rgba(228,201,122,0.35); display:none;}
  @media(min-width:900px){.journey-row::before{display:block;}}
  .journey-item{flex:1 1 120px; text-align:center; min-width:100px; position:relative;}
  .journey-ic{width:50px; height:50px; border-radius:50%; background:var(--forest-deep); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; position:relative; z-index:1;}
  .journey-item .jnum{font-size:10px; color:var(--gold-soft); font-weight:700; letter-spacing:1px; margin-top:2px; margin-bottom:5px;}
  .journey-item h3{color:var(--cream); font-size:13.5px;}
  .journey-cta{text-align:center; margin-top:50px;}

  /* Mobile vertical dotted connector between journey steps */
  @media(max-width:899px) {
    .journey-row {
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .journey-item {
      flex: none;
      width: 100%;
      max-width: 240px;
      padding-bottom: 28px;
      position: relative;
    }
    .journey-item:last-child {
      padding-bottom: 0;
    }
    /* Vertical dotted line between steps */
    .journey-item::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 28px;
      border-left: 2px dotted rgba(228, 201, 122, 0.4);
    }
    .journey-item:last-child::after {
      display: none;
    }
  }

  /* VISIA */
  .visia-grid{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
  @media(min-width:900px){.visia-grid{grid-template-columns:1fr 1fr;}}
  .visia-device{background:var(--forest-deep); border-radius:14px 14px 6px 6px; padding:20px 20px 14px; box-shadow:0 30px 60px -30px rgba(32,55,44,0.4); position:relative; margin-bottom:34px;}
  .visia-device::after{content:""; position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); width:70px; height:28px; background:var(--forest-deep); clip-path:polygon(30% 0, 70% 0, 100% 100%, 0% 100%);}
  .visia-screen{background:var(--cream); border-radius:10px; padding:14px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
  .visia-face{grid-column:1/3; grid-row:1/3; border-radius:8px; overflow:hidden; position:relative;}
  .visia-face .ph{width:100%; height:100%; aspect-ratio:auto;}
  .visia-face .mono{font-size:11px;}
  .visia-tile{aspect-ratio:1; border-radius:8px; display:flex; align-items:flex-end; padding:6px; font-size:9.5px; font-weight:700; color:#fff;}
  .visia ul{margin-top:22px; display:flex; flex-direction:column; gap:11px;}
  .visia li{display:flex; gap:9px; font-size:14.5px;}
  .visia li::before{content:"✓"; color:var(--gold); font-weight:700;}
  .stats-belt{margin-top:70px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; background:#fff; border:1px solid var(--cream-deep); border-radius:20px; padding:34px;}
  @media(min-width:700px){.stats-belt{grid-template-columns:repeat(4,1fr);}}
  .stat{text-align:center;}
  .stat .n{font-family:var(--serif); font-size:30px; color:var(--forest);}
  .stat .l{font-size:11.5px; color:var(--clay); font-weight:700; letter-spacing:0.4px; margin-top:2px;}

  /* WELLNESS */
  .wellness-split{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
  @media(min-width:900px){.wellness-split{grid-template-columns:1fr 1fr;}}
  .wellness-photo{width:100%; aspect-ratio:4/3; border-radius:20px;}
  .check-list{display:flex; flex-direction:column; gap:12px; margin:22px 0 28px;}
  .check-list li{display:flex; gap:10px; font-size:14.5px;}
  .check-list li::before{content:"✓"; color:var(--gold); font-weight:700;}

  /* SPAZA */
  .spaza-split{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
  @media(min-width:900px){.spaza-split{grid-template-columns:1fr 1fr;}}
  .spaza-photo{width:100%; aspect-ratio:1/1; border-radius:20px;}
  .spaza-photo-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .spaza-photo-row .ph{aspect-ratio:1/1; border-radius:16px;}
  .feat-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 28px;}
  .feat{font-size:13px;}
  .feat .t{font-weight:700; color:var(--forest); display:block; margin-bottom:2px;}
  .spaza-paths{display:flex; gap:12px; flex-wrap:wrap;}

  /* WHY */
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:50px;}
  @media(min-width:760px){.why-grid{grid-template-columns:repeat(4,1fr);}}
  .why-card{background:#fff; border:1px solid var(--cream-deep); border-radius:16px; padding:22px 18px; text-align:center;}
  .why-card .ic{width:38px; height:38px; border-radius:10px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
  .why-card h3{font-size:13.5px;}

  /* MY LUEUR APP PANEL */
  .app-panel-section{padding:80px 0;}
  .app-panel{background:#17241D; border-radius:28px; padding:64px 56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; overflow:hidden;}
  @media(min-width:1100px){.app-panel{padding:72px 64px; gap:64px;}}

  /* Phone column */
  .app-phone-col{display:flex; justify-content:center; align-items:center;}
  .app-phone-float{position:relative; transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .app-phone-float:hover{transform:translateY(-8px) rotate(1deg);}
  .app-phone-float img{width:260px; height:auto; display:block; border-radius:28px; transform:rotate(-3deg);}
  @media(min-width:900px){.app-phone-float img{width:300px;}}
  @media(min-width:1100px){.app-phone-float img{width:340px;}}

  /* Content column */
  .app-content-col{color:var(--cream);}
  .app-icon-wrap{width:52px; height:52px; border-radius:14px; background:rgba(246,241,230,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
  .app-coming-soon{display:inline-block; background:rgba(201,162,39,0.15); border:1px solid rgba(201,162,39,0.4); color:var(--gold); padding:5px 14px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px;}
  .app-content-col h2{font-size:clamp(24px,3vw,34px); line-height:1.25; margin-bottom:18px;}
  .app-content-col h2 em{color:var(--clay); font-style:italic;}
  .app-content-col p{color:var(--cream); opacity:0.75; font-size:15px; line-height:1.65; margin-bottom:30px; max-width:460px;}
  .app-btns{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px;}
  .app-btns .btn{padding:14px 28px; font-size:14px;}
  .app-store-line{font-size:12.5px; color:var(--gold-soft); opacity:0.65;}

  /* Mobile: stack vertically */
  @media(max-width:899px){
    .app-panel{grid-template-columns:1fr; gap:44px; padding:60px 36px; text-align:center; background:#17241D;}
    .app-content-col{order:1;}
    .app-phone-col{order:2;}
    .app-icon-wrap{margin:0 auto 20px;}
    .app-content-col p{max-width:100%; font-size:16px;}
    .app-content-col h2{font-size:clamp(26px,5vw,36px);}
    .app-btns{justify-content:center;}
    .app-btns .btn{width:100%; justify-content:center; padding:18px 24px; font-size:15px;}
    .app-store-line{margin-top:6px;}
    .app-phone-float img{width:300px; transform:rotate(0deg); margin:0 auto;}
  }
  @media(max-width:400px){
    .app-panel{padding:48px 28px; border-radius:22px;}
    .app-phone-float img{width:260px;}
    .app-content-col h2{font-size:clamp(24px,5.5vw,32px);}
  }

  /* BOOK / FOOTER */
  .book{background:var(--forest-deep); color:var(--cream); text-align:center;}
  .book h2{color:var(--cream);} .book p{color:var(--cream); opacity:0.7; max-width:500px; margin:14px auto 36px;}
  .book-actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
  footer{background:var(--forest-deep); color:var(--cream); padding:60px 0 30px; border-top:1px solid rgba(246,241,230,0.1);}
  .footer-grid{display:grid; grid-template-columns:1fr; gap:32px;}
  @media(min-width:800px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
  .footer-brand {
    display: block;
    margin-bottom: 12px;
  }
  .logo-img-footer {
    height: 128px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
  }
  .footer-sub{font-size:12.5px; opacity:0.6; margin-top:10px; max-width:260px;}
  .social-row{display:flex; gap:12px; margin-top:18px;}
  .social-row a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(246,241,230,0.25); display:flex; align-items:center; justify-content:center; opacity:0.8;}
  .social-row a:hover{opacity:1; border-color:var(--gold-soft);}
  .footer-col h3{color:var(--gold-soft); font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; font-family:var(--sans); font-weight:700;}
  .footer-col a{display:block; font-size:13.5px; opacity:0.75; margin-bottom:9px;}
  .footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(246,241,230,0.1); font-size:12px; opacity:0.45; text-align:center;}

  @media(prefers-reduced-motion: reduce){*{transition:none !important;}}
/* ---------- SHARED INNER-PAGE COMPONENTS ---------- */
.page-hero {
  position: relative;
  padding: 160px 0 80px;
  background: linear-gradient(135deg, var(--forest-deep) 0%, #0c1813 100%);
  color: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 241, 230, 0.08);
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(228, 201, 122, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .wrap, .detail-hero .wrap {
  animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.breadcrumb {
  font-size: 12.5px;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.breadcrumb a {
  color: var(--cream);
  opacity: 0.75;
  transition: opacity 0.2s;
}
.breadcrumb a:hover {
  opacity: 1;
}
.page-hero h1 {
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.1;
  color: var(--cream);
}
.page-hero p.lede {
  font-size: 16.5px;
  max-width: 560px;
  margin-top: 16px;
  color: var(--cream);
  opacity: 0.8;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media(min-width: 900px) {
  .page-hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
  }
}
.hero-text-col {
  width: 100%;
}
.hero-image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}
.hero-display-img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(246, 241, 230, 0.15);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.hero-display-img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.45);
}

.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 6px;}
.chip{padding:9px 18px; border-radius:20px; border:1px solid var(--cream-deep); font-size:13px; font-weight:600; color:var(--forest); background:#fff; cursor:pointer; transition:.2s;}
.chip.active{background:var(--forest); color:var(--cream); border-color:var(--forest);}
.chip:hover{border-color:var(--gold);}

.program-grid-full{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:36px;}
@media(min-width:700px){.program-grid-full{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1060px){.program-grid-full{grid-template-columns:repeat(4,1fr);}}
.pcard{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--cream-deep); transition:transform .25s; display:block;}
.pcard:hover{transform:translateY(-4px);}
.pcard .pphoto{width:100%; aspect-ratio:3/4;}
.pcard .plabel{padding:14px 14px 3px; font-size:14px; font-weight:600; color:var(--forest);}
.pcard .pconcern{padding:0 14px 16px; font-size:11px; color:var(--clay); line-height:1.4;}
.pcard .pcat{display:inline-block; margin:10px 14px 0; font-size:10px; font-weight:700; letter-spacing:0.4px; color:var(--gold); text-transform:uppercase;}

.detail-hero {
  position: relative;
  padding: 160px 0 70px;
  background: linear-gradient(135deg, var(--forest-deep) 0%, #0c1813 100%);
  color: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid rgba(246, 241, 230, 0.08);
}
.detail-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(228, 201, 122, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.detail-hero .breadcrumb a{color:var(--gold-soft); opacity:0.85;}
.detail-hero h1{color:var(--cream); font-size:clamp(30px,4.6vw,46px);}
.detail-hero .tag-row{margin-top:18px;}
.detail-hero .tag{background:rgba(246,241,230,0.12); color:var(--cream);}

.detail-grid{display:grid; grid-template-columns:1fr; gap:50px;}
@media(min-width:960px){.detail-grid{grid-template-columns:1.5fr 1fr;}}
.detail-block{margin-bottom:44px;}
.detail-block h2{font-size:24px; margin-bottom:14px;}
.included-item{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--cream-deep);}
.included-item .num{font-family:var(--serif); font-size:20px; color:var(--gold); flex-shrink:0; width:30px;}
.included-item h3{font-size:16px; margin-bottom:4px;}
.included-item p{font-size:13.5px;}
.booklet-list{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.booklet-list li{display:flex; gap:8px; font-size:13.5px;}
.booklet-list li::before{content:"✦"; color:var(--gold); font-size:11px; margin-top:3px;}

.side-card{background:#fff; border:1px solid var(--cream-deep); border-radius:16px; padding:24px; margin-bottom:20px;}
.side-card h3{font-size:15px; margin-bottom:10px;}
.mode-row{display:flex; gap:16px; width: 100%;}
.mode-item{
  flex:1; 
  text-align:center; 
  padding:16px 12px; 
  background-color: var(--gold); 
  border:1px solid var(--gold);
  border-radius:10px; 
  font-size:14px; 
  font-weight:700; 
  color:var(--forest);
  box-shadow: 0 4px 15px rgba(228, 201, 122, 0.15);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, box-shadow 0.3s;
}
.mode-item:hover {
  transform: translateY(-3px);
  background-color: var(--gold-soft);
  box-shadow: 0 10px 25px rgba(228, 201, 122, 0.3);
}

.disclaimer-box{background:var(--cream-deep); border-radius:14px; padding:20px 22px; font-size:12px; color:var(--ink); opacity:0.75; line-height:1.6; margin-top:20px;}

.contact-grid{display:grid; grid-template-columns:1fr; gap:44px;}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;}}
.form-mock{background:#fff; border:1px solid var(--cream-deep); border-radius:20px; padding:30px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:12.5px; font-weight:600; color:var(--forest); margin-bottom:6px;}
.form-input{width:100%; border:1px solid var(--cream-deep); border-radius:10px; padding:12px 14px; font-size:14px; font-family:var(--sans); background:var(--cream);}
.contact-info-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--cream-deep);}
.contact-info-item .ic{width:38px; height:38px; border-radius:10px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-info-item h3{font-size:14.5px; margin-bottom:2px;}
.contact-info-item p{font-size:13px;}
.map-ph{width:100%; aspect-ratio:16/9; border-radius:16px; margin-top:20px;}

.category-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:36px;}
@media(min-width:760px){.category-grid{grid-template-columns:repeat(4,1fr);}}
.cat-card{background:#fff; border:1px solid var(--cream-deep); border-radius:16px; padding:22px; text-align:center;}
.cat-card .ic{width:44px; height:44px; border-radius:50%; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}

.feature-strip{display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px;}
@media(min-width:640px){.feature-strip{grid-template-columns:repeat(4,1fr);}}

.doctor-avatar{border-radius:50%; background:var(--forest); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:var(--serif); flex-shrink:0;}

/* Responsive Header Optimizations to prevent button wrapping */
header .wrap.nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media (max-width: 600px) {
  header .wrap {
    padding: 0 16px;
  }
  .brand {
    height: 38px;
    width: 210px;
  }
  .logo-img {
    height: 130px;
  }
  header .btn {
    padding: 8px 16px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 400px) {
  .brand small {
    display: none; /* Hide subtitle on very small viewports */
  }
}

.accordion-section {
  background: var(--forest-deep);
  padding: 80px 0 0;
  color: var(--cream);
  overflow: hidden;
}
.accordion-container {
  display: flex;
  gap: 0;
  width: 100%;
  height: 520px;
  margin-top: 40px;
}
.accordion-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(246, 241, 230, 0.1);
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.45, 1), transform 0.3s ease;
  cursor: pointer;
}
.accordion-panel:last-child {
  border-right: none;
}
.accordion-panel:hover {
  flex: 3.5;
}
.panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: transform 0.6s ease;
}
.accordion-panel:hover .panel-bg {
  transform: scale(1.05);
}
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(21, 39, 32, 0.15) 0%, rgba(21, 39, 32, 0.4) 40%, rgba(21, 39, 32, 0.95) 100%);
  z-index: 2;
}
.panel-dot {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 3;
}
.panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  z-index: 4;
}
.panel-title {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.25;
  white-space: nowrap;
}
.panel-subtitle {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 12px;
  white-space: nowrap;
}
.panel-detail {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cream);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
}
.panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--gold);
  color: var(--forest-deep);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, background-color 0.2s ease;
}
.panel-btn:hover {
  background: var(--gold-soft);
}

/* Expansion reveal state */
.accordion-panel:hover .panel-detail {
  opacity: 0.85;
  max-height: 90px;
  margin-bottom: 16px;
  transition: opacity 0.5s ease 0.2s, max-height 0.5s ease 0.2s, margin-bottom 0.5s ease 0.2s;
}
.accordion-panel:hover .panel-btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.25s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

/* Mobile responsive accordion behavior */
@media (max-width: 800px) {
  .accordion-container {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 480px;
    gap: 16px;
    padding: 0 20px; /* Side padding so first card aligns and next one peeks */
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }
  .accordion-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }
  .accordion-panel {
    flex: 0 0 calc(100% - 40px); /* Exactly covers screen width minus margins, leaving next card peeking */
    height: 100%;
    scroll-snap-align: start;
    border-radius: 24px; /* Beautiful rounded corners like the mockup */
    border: 1px solid rgba(246, 241, 230, 0.08);
    transition: transform 0.3s ease;
  }
  .accordion-panel:hover, .accordion-panel:active {
    flex: 0 0 calc(100% - 40px); /* Maintain size on active state */
  }
  .panel-content {
    padding: 28px 24px;
  }
  .panel-dot {
    top: 24px;
    left: 24px;
  }
  .panel-title {
    font-size: 24px;
  }
  .panel-subtitle {
    font-size: 11px;
    margin-bottom: 12px;
  }
  /* Keep description and learn more button always visible on mobile */
  .accordion-panel .panel-detail {
    opacity: 0.85;
    max-height: 120px;
    margin-bottom: 20px;
  }
  .accordion-panel .panel-btn {
    opacity: 1;
    transform: translateY(0);
  }
  .panel-btn {
    padding: 8px 18px;
    font-size: 12px;
  }
}

/* FEATURED LOGOS TICKER */
.featured-ticker-section {
  background: #ffffff;
  padding: 24px 0;
  border-bottom: 1px solid rgba(43, 38, 32, 0.06);
  overflow: hidden;
}
.featured-ticker-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0.7;
  margin-bottom: 16px;
}
.featured-ticker-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.featured-ticker-track {
  display: flex;
  gap: 60px;
  width: max-content;
  align-items: center;
  animation: logoTicker 25s linear infinite;
}
.ticker-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.ticker-item img {
  height: 100%;
  max-width: 180px;
  object-fit: contain;
  opacity: 1;
  filter: none;
}
@keyframes logoTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Custom logo sizing for Hindustan Times and Lifestyle Asia */
.featured-ticker-track img[src*="hindustantimes"],
.featured-ticker-track img[src*="lifestyleasia"] {
  transform: scale(1.25);
}

/* TRANSFORMATION STORIES */
.story-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 0 20px 24px 20px;
  margin: 0 -20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.story-grid::-webkit-scrollbar {
  display: none;
}
.story-card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  background: #ffffff;
  border: 1px solid var(--cream-deep);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(20, 37, 44, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media(min-width:900px) {
  .story-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .story-card {
    flex: none;
  }
  .story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(20, 37, 44, 0.08);
  }
}

.story-image-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.story-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(21, 39, 32, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(228, 201, 122, 0.2);
}
.story-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.story-duration {
  font-size: 11px;
  color: var(--clay);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.story-body h3 {
  font-size: 21px;
  color: var(--forest);
  font-family: var(--serif);
  margin: 0 0 12px 0;
  line-height: 1.3;
}
.story-concern {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 4px;
}
.story-protocol {
  font-size: 13px;
  line-height: 1.4;
  color: var(--forest);
  opacity: 0.8;
  margin-bottom: 8px;
}
.story-note {
  font-size: 12.5px;
  font-weight: 600;
  color: #c97f27;
  margin-bottom: 8px;
}
.story-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--forest);
  opacity: 0.85;
  margin: 8px 0 16px 0;
}
.story-disclaimer {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--clay);
  font-style: italic;
  border-top: 1px solid var(--cream-deep);
  padding-top: 12px;
  margin-bottom: 20px;
  flex-grow: 1;
}
.btn-video {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Video Modal Popup Styles */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 37, 32, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.video-modal-content {
  background: var(--forest-deep);
  border: 1px solid rgba(228, 201, 122, 0.2);
  width: 90%;
  max-width: 580px;
  border-radius: 24px;
  padding: 40px 30px;
  position: relative;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.video-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  color: var(--cream);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.video-modal-close:hover {
  opacity: 1;
}
.video-wrapper {
  width: 100%;
}
.video-placeholder-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.video-placeholder-display svg {
  margin-bottom: 20px;
  animation: pulseGold 2s infinite;
}
.video-placeholder-display h3 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--cream);
  margin: 0 0 10px 0;
}
.video-placeholder-display p {
  font-size: 14px;
  color: var(--cream);
  opacity: 0.75;
  max-width: 440px;
  margin: 0 0 24px 0;
  line-height: 1.5;
}
@keyframes pulseGold {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* ---------- OUR STORY COLLAGE REDESIGN ---------- */
.story-redesign-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}
@media(min-width: 900px) {
  .story-redesign-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
.story-collage-col {
  width: 100%;
}
.story-collage-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 380px;
}
.story-img-main {
  width: 68%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(32, 55, 44, 0.12);
  display: block;
}
.story-img-overlap {
  position: absolute;
  bottom: -30px;
  right: 0;
  width: 60%;
  aspect-ratio: 16/11;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(32, 55, 44, 0.2);
  border: 8px solid #FAF5F0; /* blends with the section background */
  z-index: 2;
}
.story-badge-sticker {
  position: absolute;
  top: 30px;
  right: 22%;
  width: 96px;
  height: 96px;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(185, 122, 86, 0.25));
}
@keyframes rotateSticker {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.story-content-col {
  width: 100%;
}
.story-content-col h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-family: var(--serif);
  color: var(--forest-deep);
  line-height: 1.2;
  margin: 12px 0 20px 0;
}
.story-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 24px;
}
.story-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.story-check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--forest);
}
.story-check-list svg {
  flex-shrink: 0;
  color: var(--forest);
}
.story-cta-row {
  display: flex;
  gap: 16px;
}

@media(max-width: 900px) {
  .story-collage-container {
    min-height: 320px;
    margin-bottom: 40px;
  }
  .story-badge-sticker {
    width: 80px;
    height: 80px;
    top: 20px;
    right: 25%;
  }
}

/* ---------- NEW SECTIONS FROM REFERENCE ---------- */
/* 1. MISSION GRID */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}
@media(min-width: 768px) {
  .mission-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.mission-card {
  background: #ffffff;
  border: 1px solid var(--cream-deep);
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(32, 55, 44, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(32, 55, 44, 0.08);
}
.mission-card.active {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--cream);
  box-shadow: 0 20px 45px rgba(21, 39, 32, 0.18);
}
.mission-card.active h3 {
  color: var(--cream);
}
.mission-card.active p {
  color: var(--cream);
  opacity: 0.85;
}
.mission-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(185, 122, 86, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.mission-card.active .mission-icon {
  background: rgba(246, 241, 230, 0.1);
}
.mission-card h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--forest-deep);
  margin-bottom: 12px;
}
.mission-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.75;
}

/* 2. EXCEPTIONAL CARE SECTION */
.exceptional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media(min-width: 900px) {
  .exceptional-grid {
    grid-template-columns: 1.1fr 0.8fr 1.1fr;
    gap: 40px;
  }
}
.exceptional-features-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.exceptional-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.exceptional-features-col.left .exceptional-feature {
  text-align: right;
  justify-content: flex-end;
}
.exceptional-features-col.right .exceptional-feature {
  text-align: left;
  justify-content: flex-start;
}
.feature-text h3 {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
  margin-bottom: 6px;
}
.feature-text p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.8;
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.exceptional-features-col.right .feature-icon {
  order: -1;
}
.exceptional-image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}
.exceptional-oval-wrapper {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 0.73; /* elegant vertical portrait proportion */
  overflow: hidden;
  border-radius: 150px; /* makes it a perfect vertical oval/ellipse! */
  border: 6px solid rgba(246, 241, 230, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exceptional-oval-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media(max-width: 899px) {
  .exceptional-features-col.left .exceptional-feature {
    text-align: left;
    justify-content: flex-start;
  }
  .exceptional-features-col.left .exceptional-feature .feature-icon {
    order: -1;
  }
  .exceptional-oval-wrapper {
    max-width: 240px;
    margin: 20px auto;
  }
}

/* ---------- PROCESS GRID ---------- */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media(min-width: 900px) {
  .process-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
  }
}
.process-image-col {
  width: 100%;
}
.process-content-col {
  width: 100%;
}
.process-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}
@media(min-width: 480px) {
  .process-check-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.process-check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--forest);
}
.process-check-list svg {
  flex-shrink: 0;
  color: var(--clay);
}

/* ---------- FLOATING CALL BUTTON ---------- */
.floating-call-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--clay);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(185, 122, 86, 0.35);
  z-index: 1010; /* Sit above the mobile booking bar (z-index 1000) */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, box-shadow 0.3s;
}
.floating-call-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background-color: var(--forest-deep);
  box-shadow: 0 12px 30px rgba(21, 39, 32, 0.3);
}
@media(max-width: 800px) {
  .floating-call-btn {
    bottom: 92px; /* Float cleanly above the mobile booking bar */
    left: 16px;
    right: auto;
    width: 48px;
    height: 48px;
  }
}

/* ---------- TRANSFORMATIONS GRID ---------- */
.transformation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media(min-width: 768px) {
  .transformation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.trans-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.trans-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(32, 55, 44, 0.08) !important;
}