/* ============================================================
   SKINPASE — Responsive Overrides (v2)
   Loaded AFTER style.css — do not edit style.css or HTML.
   Organized desktop → tablet → mobile, large breakpoints first.
   ============================================================ */

/* ── 0. GLOBAL SAFETY NET ────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

*, *::before, *::after {
  max-width: 100%;
}

.container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 60px);
  width: 100%;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.btn,
.sp2-arr,
.spw-btn,
.btn--branch-call,
.btn--branch-dir,
.btn--doctor-book,
.float-btn,
.mobile-nav-link,
.mobile-dropdown-toggle {
  min-height: 44px;
  box-sizing: border-box;
}

/* ── 0.1 Safe-area support (notch / home-indicator) ──────────
   NOTE: requires <meta name="viewport" content="width=device-width,
   initial-scale=1.0, viewport-fit=cover"> — see "Required HTML
   Changes" at the end. Falls back to 0px harmlessly if absent. */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
}
.floating-actions {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
}

/* ── 0.2 Scroll offset for fixed header ──────────────────────
   Keeps #about, #treatments, #branches, #contact (and any
   future id-anchored section) from being hidden under the
   fixed header when navigated to via in-page links. */
section[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 1024px) {
  section[id] {
    scroll-margin-top: 88px;
  }
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 76px;
  }
}

/* ============================================================
   1. HERO — fluid height + fluid typography (all breakpoints)
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh;   /* fallback for browsers without svh/dvh */
  min-height: 560px;
}

@supports (height: 100svh) {
  .hero-section { height: 100svh; }
}
@supports (height: 100dvh) {
  .hero-section { height: 100dvh; }
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


.hero-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    min-width:100%;
    min-height:100%;

    -webkit-transform: translateZ(0) scale(1.02);
transform: translateZ(0) scale(1.02);
backface-visibility:hidden;
}

/* On very tall/narrow phones the crop is most aggressive —
   nudge focal point upward slightly so faces/subjects near the
   top third of the frame stay in view. */
@media (max-width: 480px) and (min-aspect-ratio: 1/2) {
  .hero-video {
    object-position: center 30%;
  }
}

.hero-content{

    position:relative;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:80px;

    padding-bottom:160px;

}
/* Fluid hero typography — scales smoothly across every width
   instead of jumping at fixed breakpoints. */
.hero-heading {
  font-size: clamp(2rem, 6vw + 0.5rem, 6.875rem);
  line-height: 1.08;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.hero-subheading {
  font-size: clamp(0.9375rem, 1.4vw + 0.4rem, 1.1875rem);
  line-height: 1.6;
  margin-bottom: clamp(24px, 5vw, 48px);
}

.hero-badge {
  font-size: clamp(0.68rem, 1vw + 0.3rem, 0.78rem);
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.hero-actions {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
}

/* Stack hero buttons on narrow screens so they never overlap */
@media (max-width: 560px) {
  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* Tight phone band (SE → Pro Max) — balance vertical rhythm so
   heading/subtitle/buttons never crowd the stats bar below. */
@media (max-width: 430px) and (min-width: 360px) {
  .hero-content {
    gap: 0;
  }
  .hero-heading {
    line-height: 1.12;
  }
  .hero-subheading {
    max-width: 92%;
  }
}

/* ============================================================
   2. STATS BAR — 4 → 2x2 → 2x2, never overflows
   ============================================================ */
.stats-bar {
  width: 100%;
}
.stats-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.stat-item {
  flex: 1 1 0;
  min-width: 130px;
  padding: clamp(14px, 2vw, 24px) 12px;
}
.stat-number {
  font-size: clamp(1.5rem, 2.2vw + 0.8rem, 2.6rem);
}
.stat-suffix {
  font-size: clamp(1.3rem, 1.8vw + 0.7rem, 2.2rem);
}
.stat-label {
  font-size: clamp(0.64rem, 0.5vw + 0.5rem, 0.78rem);
}

/* ============================================================
   3. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  width: 100%;
}

.header-inner {
  height: 88px;
  padding-inline: clamp(16px, 3vw, 48px);
  gap: 16px;
  box-sizing: border-box;
}

.site-logo {
  height: 75px;
  width: auto;
}

/* Nav switches to hamburger below 1024px — matches when the
   mega "Treatments" dropdown also stops being usable. */
@media (max-width: 1024px) {
  .main-nav,
  .header-cta {
    display: none !important;
  }
  .mobile-toggle {
    display: flex !important;
  }
  .header-inner {
    height: 76px;
  }
  .site-logo {
    height: 62px;
  }
}

.mobile-menu {
  position: relative;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.mobile-cta {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border-radius: 12px;
  width: 100%;
}

/* Touch targets: mobile nav rows get more breathing room and a
   visible active state since touch devices have no hover. */
@media (max-width: 1024px) {
  .mobile-nav-link {
    padding: 14px 16px;
    font-size: 1rem;
  }
  .mobile-nav-link--sub {
    padding: 12px 16px 12px 32px;
  }
  .mobile-dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  .mobile-nav-link:active,
  .mobile-dropdown-toggle:active {
    background: var(--light-gray);
  }
}

/* ── Treatments mega-dropdown: never exceeds the viewport ───
   Base style.css fixes this at width:1050px which overflows
   on narrower desktop/laptop widths (1280px, 1366px). Cap it
   responsively without touching style.css. */
.treatment-dropdown {
  width: min(1050px, calc(100vw - 40px));
  max-width: 1050px;
}

@media (max-width: 1280px) {
  .treatment-dropdown {
    gap: 16px;
    padding: 22px;
  }
  .treatment-card {
    padding: 22px;
  }
  .treatment-card h3 {
    font-size: 24px;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .treatment-dropdown {
    left: auto;
    right: 0;
    transform: translateY(20px);
  }
  .treatments-menu:hover .treatment-dropdown {
    transform: translateY(0);
  }
}

/* ============================================================
   4. WHY CHOOSE SKINPASE (spw carousel)
   ============================================================ */
.spw-section {
  overflow: hidden;
  width: 100%;
}
.spw-inner {
  padding-inline: clamp(16px, 4vw, 60px);
}
.spw-viewport {
  overflow: hidden;
  width: 100%;
}
.spw-track {
  overflow: visible;
}

@media (max-width: 1366px) and (min-width: 1025px) {
  .spw-card {
    padding: 26px 22px 24px;
  }
}

/* Tablet: 2 cards per view */
@media (max-width: 1024px) {
  .spw-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .spw-section {
    padding: 72px 0 88px;
  }
}

/* Mobile: 1 card per view */
@media (max-width: 640px) {
  .spw-card {
    flex: 0 0 88%;
    padding: 28px 24px;
  }
  .spw-section {
    padding: 60px 0 72px;
  }
  .spw-hd {
    margin-bottom: 36px;
    text-align: center;
  }
  .spw-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
  .spw-nav {
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .spw-card {
    flex: 0 0 94%;
  }
  .spw-inner {
    padding-inline: 14px;
  }
}

/* ==========================
   Treatments Responsive
========================== */
/* ===== Treatments Mobile ===== */
/* 
@media (max-width:768px){

    .sp2-viewport{
        overflow:visible !important;
        width:100%;
    }

    .sp2-track{
        display:flex !important;
        flex-direction:column !important;
        gap:20px;
        width:100%;
        transform:none !important;
    }

    .sp2-card{
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
        height:380px;
    }

} */

/* ============================================================
   6. SPECIALISTS (doctor cards)
   ============================================================ */
.specialists-section {
  overflow: hidden;
  width: 100%;
}
.specialists-section .container {
  padding-inline: clamp(16px, 4vw, 60px);
}

/* Desktop laptop fine-tuning */
@media (max-width: 1440px) and (min-width: 1025px) {
  .specialists-grid {
    gap: 22px;
  }
}

/* Tablet: 2 per row */
@media (max-width: 1024px) and (min-width: 481px) {
  .specialists-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* Mobile: 1 per row */
@media (max-width: 480px) {
  .specialists-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .specialists-section {
    padding: 60px 0;
  }
  .specialists-section .section-header {
    margin-bottom: 36px;
  }
}

/* Consistent, non-stretched images at every width via
   aspect-ratio rather than relying only on the parent box. */
.doctor-img-wrap {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 5;
}
.doctor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================================
   7. BRANCHES
   ============================================================ */
.branches-section {
  overflow: hidden;
  width: 100%;
}
.branches-section .container {
  padding-inline: clamp(16px, 4vw, 60px);
}

/* Responsive sizing instead of a fixed height per breakpoint —
   aspect-ratio keeps the photo well-framed while min-height
   guards against the card becoming too short to read on
   ultra-wide rows. */
.branch-card {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 380px;
  height: auto;
}

@media (max-width: 1440px) and (min-width: 1025px) {
  .branches-grid {
    gap: 22px;
  }
}

/* Tablet: 2 per row */
@media (max-width: 1024px) and (min-width: 769px) {
  .branches-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .branch-card {
    aspect-ratio: 1 / 1;
    min-height: 420px;
  }
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
  .branches-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .branch-card {
    aspect-ratio: 4 / 5;
    min-height: 400px;
  }
  .branch-name {
    font-size: 1.7rem;
  }
  .branches-section {
    padding: 60px 0;
  }
  .branch-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .branch-actions .btn {
    flex: 1 1 120px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .branch-card {
    min-height: 360px;
  }
  .branch-body {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .branch-name {
    font-size: 1.5rem;
  }
}

@media (max-width: 380px) {
  .branch-card {
    min-height: 340px;
  }
}

.branch-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
}
.branch-address svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* ============================================================
   8. APPOINTMENT / CONTACT FORM
   ============================================================ */
.appointment-section {
  overflow: hidden;
  width: 100%;
}
.appointment-form-wrap {
  width: 100%;
  box-sizing: border-box;
}
.form-control {
  width: 100%;
  box-sizing: border-box;
}
.contact-item {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.contact-item-icon {
  flex-shrink: 0;
}

/* Tablet: stack to one column */
@media (max-width: 1024px) {
  .appointment-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 72px;
  }
  .appointment-info {
    padding-right: 0;
  }
}

/* Mobile refinements */
@media (max-width: 768px) {
  .appointment-section {
    padding-block: 60px;
  }
  .appointment-inner {
    gap: 36px;
    padding-block: 0;
  }
  .appointment-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
  .appointment-form-wrap {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-items {
    gap: 16px;
  }

  /* Prevent iOS Safari auto-zoom on focus */
  .form-control,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .appointment-form-wrap {
    padding: 24px 16px;
  }
  .btn--form-submit {
    font-size: 0.9rem;
    padding: 14px 24px;
  }
  .contact-item {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================
   9. SECTION HEADERS — shared typography scale
   ============================================================ */
.section-title,
.sp2-title,
.spw-title,
.appointment-title {
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.85rem);
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
    text-align: center;
  }
  .section-subtitle {
    font-size: 0.9375rem;
  }
  .section-padding {
    padding-block: 60px;
  }
  .sp2-hd,
  .spw-hd {
    text-align: center;
  }
  .appointment-info .section-tag {
    display: inline-block;
  }
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer {
  overflow: hidden;
  width: 100%;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .footer-top-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }
}

/* Mobile: single column */
@media (max-width: 768px) {
  .footer-top-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1;
    max-width: 100%;
  }
  .footer-top {
    padding-block: 56px 44px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* ============================================================
   11. FLOATING ACTION BUTTON
   ============================================================ */
.floating-actions {
  z-index: 9999;
}

@media (max-width: 768px) {
  .floating-actions {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
  .float-btn {
    width: 56px;
    height: 56px;
  }
  .float-btn svg {
    width: 24px;
    height: 24px;
  }
  .float-tooltip {
    display: none;
  }
}

@media (max-width: 380px) {
  .floating-actions {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* ============================================================
   12. TRUST STRIP — keep marquee from ever causing overflow
   ============================================================ */
.trust-strip {
  overflow: hidden;
  width: 100%;
}
.trust-track {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .trust-item {
    font-size: 0.78rem;
    padding: 0 20px;
  }
}

/* ============================================================
   13. LARGE DESKTOP REFINEMENTS (1440px+ / 1920px)
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  .header-inner {
    max-width: 1400px;
    margin-inline: auto;
  }
}

@media (min-width: 1600px) {
  .hero-heading {
    font-size: clamp(4rem, 5vw, 6.875rem);
  }
}

/* ============================================================
   14. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .spw-card,
  .sp2-card,
  .doctor-card,
  .branch-card,
  .float-btn,
  .trust-track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   15. KOTTAKKAL / PALA / MANNARKKAD BRANCH PAGES
   (kept from previous responsive.css — not part of index.html,
   harmless to retain for the branch sub-pages that share this
   stylesheet)
   ============================================================ */
@media (max-width: 1200px) {
  .about-redesign-inner { grid-template-columns: 1fr; gap: 50px; }
  .gr-layout { grid-template-columns: 1fr; }
  .branch-hero-content { max-width: 100%; }
}

@media (max-width: 992px) {
  .branch-hero { min-height: 700px; padding: 120px 0 80px; }
  .branch-hero-content { align-items: center; text-align: center; margin: auto; }
  .branch-hero-title { white-space: normal; font-size: 3rem; }
  .branch-hero-sub { max-width: 700px; }
  .about-heading { flex-direction: column; gap: 8px; }
  .about-redesign-inner { grid-template-columns: 1fr; }
  .about-media-frame { min-height: 380px; }
  .gr-layout { grid-template-columns: 1fr; }
  .gr-card { flex: 0 0 100%; }
}

@media (max-width: 768px) {
  .branch-hero { min-height: 650px; padding: 110px 20px 60px; }
  .branch-hero-content { text-align: center; align-items: center; }
  .branch-hero-title { font-size: 2.4rem; }
  .branch-hero-sub { font-size: 15px; line-height: 1.8; }
  .branch-hero-actions { width: 100%; flex-direction: column; }
  .branch-hero-actions .btn { width: 100%; }
  .about-heading { flex-direction: column; gap: 6px; }
  .about-redesign-inner { grid-template-columns: 1fr; gap: 35px; }
  .about-media-frame { min-height: 280px; }
  .about-badge { width: 90px; height: 90px; right: 10px; bottom: -10px; }
  .gr-layout { grid-template-columns: 1fr; }
  .gr-rating-card { padding: 25px; }
  .gr-card { flex: 0 0 100%; }
  .gr-nav-row { justify-content: center; }
}

@media (max-width: 480px) {
  .branch-hero-title { font-size: 2rem; }
  .branch-hero-sub { font-size: 14px; }
  .about-heading { font-size: 2rem; }
  .about-badge { display: none; }
  .gr-score { font-size: 2.4rem; }
  .gr-card { padding: 20px; }
}


@media (max-width:1024px){

    .sp2-arrows{
        display:flex;
        justify-content:center;
        margin-top:24px;
        gap:12px;
    }

}
.mobile-submenu{

    padding-left:16px;
    margin-top:8px;

}

.mobile-submenu li{

    margin:8px 0;

}

.mobile-submenu a{

    display:block;

    padding:8px 0;

}

.mobile-category{

    display:flex;
    justify-content:space-between;
    align-items:center;

    cursor:pointer;

    padding:10px 0;

    font-weight:500;

}
@media (max-width:768px){

.hero-section{

    height:100svh;
    min-height:100svh;

}

.hero-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
.hero-video{

    width:100%;
    height:100%;

    object-fit:cover;
   object-position:center 35%;

   transform:none;

}

}
@media (max-width:480px){

.hero-video{

    transform:none;

}

}
@media(max-width:768px){

.hero-content{

padding-top:70px;
padding-bottom:70px;

}

}
/* ==========================
   DOCTORS RESPONSIVE
========================== */

/* Tablet */
@media (max-width: 1024px) {

  .specialists-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 24px;
  }

  .doctor-card {
    max-width: 100%;
  }

}

/* Mobile */
@media (max-width: 768px) {

  .specialists-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .doctor-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .doctor-img-wrap {
    aspect-ratio: 6/ 5;
  }

}

/* Small phones */
@media (max-width: 480px) {

  .doctor-card {
    max-width: 100%;
  }

  .doctor-body {
    padding: 18px;
  }

  .doctor-name {
    font-size: 1.25rem;
  }

  .doctor-qual {
    font-size: 0.9rem;
  }

}