/* OVARA - FORTIS HOSPITAL INDIA - RESPONSIVE. @media queries only. Breakpoints: 1200 / 1024 / 991 / 767 / 575 / 425 / 375 / 320, plus min-width 768. Section padding 80px, 64px below 1024, 48px below 767. */

/* ---- <= 1200px : small desktop ---- */
@media (max-width: 1200px) {
  .hero-trust-row {
    gap: .8rem 1rem;
    font-size: .82rem;
  }

  .counter-label {
    font-size: .8rem;
  }
}

/* ---- <= 1024px : tablet landscape ---- */
@media (max-width: 1024px) {
  :root {
    --sec-space: 64px;
  }

  html {
    scroll-padding-top: 82px;
  }

  .sec-head {
    margin-bottom: 36px;
  }

  .cv-hero {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .help-cta {
    margin-top: 36px;
  }
}

/* ---- <= 991px : tablet portrait (Bootstrap lg down) ---- */
@media (max-width: 991.98px) {
  .cv-hero {
    text-align: center;
  }

  /* Back to plain block flow so the hero reads in source order: headline, photo,
     form, then the copy - which is the order the client's change note asks for. */
  .hero-row {
    display: block;
  }

  .hero-copy {
    margin-top: 30px;
  }

  /* Hospital photo right under the headline (FEHI, New Delhi - Kolkata's
     Anandapur was dropped at the client's request). Reuses the 900px card file;
     this box is the mobile LCP element and reaches 720 CSS wide in Bootstrap's
     md container. Keep the preload in index.php in step with this URL. */
  .hero-photo {
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0 0 22px;
    border-radius: var(--radius-lg);
    background: var(--mist) url("../images/fortis-fehi-delhi.webp") center center / cover no-repeat;
  }

  .hero-lead {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-trust-row {
    justify-content: center;
  }

  /* five counters no longer fit on one row - 3 + 2 reads better than a squeeze */
  .col-fifth {
    width: 33.333%;
  }

  .talk-box {
    padding: 28px 24px;
  }

  .form-card {
    padding: 28px 24px;
  }
}

/* ---- <= 767px : mobile ---- */
@media (max-width: 767px) {
  :root {
    --sec-space: 48px;
  }

  html {
    scroll-padding-top: 74px;
  }

  /* g-5 pulls a row wider than the container and lets the page pan sideways */
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* room for the fixed bottom CTA (landing page only) */
  .lp-page {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  }

  .foot-disclaimer {margin-top:12px}

  .sec-head {
        margin-bottom: 20px;
    }

  .mob-cta {
    display: flex;
  }

  .cv-header {
    padding: calc(9px + env(safe-area-inset-top, 0px)) 0 9px;
  }

  .cv-logo-img {
    height: 34px;
  }

  /* both header CTAs stay, as icon-only circles */
  .cv-header .btn-sm {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.05rem;
    flex: 0 0 42px;
  }

  .cv-header .ic-l {
    margin-right: 0;
  }

  /* visually hidden, not removed - the link keeps its accessible name */
  .cv-header .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .cv-hero {
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .hero-title {
    font-size: 1.72rem;
  }

  .hero-lead {
    font-size: .98rem;
  }

  /* Three loose centred lines read as filler on a phone; one bordered strip scans in a glance. */
  .hero-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 22px rgba(12, 58, 79, .07);
    overflow: hidden;
  }

  .hero-trust-row span {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 5px;
    font-size: .68rem;
    line-height: 1.3;
    text-align: center;
    border-left: 1px solid var(--line);
  }

  .hero-trust-row span:first-child {
    border-left: none;
  }

  .hero-trust-row i {
    margin-right: 0;
    font-size: 1.15rem;
  }

  .hero-form-card {
    padding: 22px 18px;
  }

  /* A 100%-wide button does not need 1.8rem of side padding - it pushed the label onto two lines below ~360px. */
  .btn-block {
    padding: .9rem 1.1rem;
  }

  /* Location card is a banner over text at every width, so the phone only scales
     padding and type. */
  .hosp-body {
    padding: 20px 18px 24px;
  }

  .hosp-body h3 {
    font-size: 1.15rem;
  }

  .hosp-city {
    font-size: .9rem;
  }

  .hosp-stat {
    font-size: .74rem;
    padding: .4rem .85rem;
  }

  .hosp-note {
    margin-top: 26px;
  }

  .benefit-card {
    padding: 22px 18px;
  }

  .benefit-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.15rem;
    margin-bottom: 12px;
  }

  .benefit-card h3 {
    font-size: .98rem;
  }

  .benefit-card p {
    font-size: .87rem;
  }

  .spec-card {
    padding: 20px 18px;
  }

  .spec-card i {
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  .spec-card h3 {
    font-size: .95rem;
  }

  .spec-card p {
    font-size: .85rem;
  }

  .spec-note {
    margin-top: 26px;
  }

  /* No min-width, so the two-column table survives on phones; table-layout:fixed stops the longest cell forcing a sideways scroll. */
  table.isnot {
    min-width: 0;
    table-layout: fixed;
  }

  table.isnot th {
    font-size: .82rem;
    padding: 12px 12px;
  }

  table.isnot td {
    padding: 11px 12px;
    font-size: .8rem;
    line-height: 1.45;
    overflow-wrap: break-word;
  }

  /* Closer to 50/50 than the desktop 42/58 - once every cell wraps, an even split wastes less width. */
  table.isnot th.is-col,
  table.isnot td.is-col {
    width: 46%;
  }

  table.isnot th.isnot-col,
  table.isnot td.isnot-col {
    width: 54%;
  }

  /* Icon out of the text flow, so wrapped lines align under the first line rather than under the tick. */
  table.isnot td {
    position: relative;
    padding-left: 30px;
  }

  table.isnot td i {
    position: absolute;
    left: 11px;
    top: 13px;
    margin-right: 0;
    font-size: .85em;
  }

  /* Both step sections become a single-column timeline with a rail - the 2-up grid wrapped nearly every label and lost the order. */
  .steps-row {
    --bs-gutter-y: 1.25rem;
  }

  .steps-row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .steps-row .step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0;
  }

  .steps-row .step-num {
    grid-row: span 2;
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 1.02rem;
  }

  /* the rail runs into the gutter, where the next circle's white fill covers the join */
  .steps-row .step::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 50px;
    bottom: -20px;
    width: 2px;
    background: #CFE8F4;
  }

  .steps-row > div:last-child .step::before {
    display: none;
  }

  .steps-row .step h3 {
    font-size: .98rem;
    margin-bottom: 4px;
    padding-top: 10px;
  }

  .steps-row .step p {
    font-size: .86rem;
  }

  .trust-card {
    padding: 22px 18px;
  }

  .service-tile {
    padding: 20px 12px;
  }

  .service-tile h3 {
    font-size: .82rem;
  }

  .travel-item {
    padding: 20px 18px 20px 64px;
  }

  .travel-check {
    left: 18px;
    top: 20px;
    width: 34px;
    height: 34px;
  }

  .faq-acc .accordion-button {
    font-size: .94rem;
    padding: 15px 16px;
    /* Bootstrap's 1.25rem chevron is heavy next to a .94rem question */
    --bs-accordion-btn-icon-width: 1rem;
  }

  .faq-acc .accordion-body {
    font-size: .92rem;
  }

  .cv-footer {
    padding: 42px 0 20px;
    text-align: center;
  }

  .cv-foot-logo {
    margin: 0 auto;
  }

  .foot-about {
    margin-left: auto;
    margin-right: auto;
  }

  /* stacked on a phone, so the two blocks need a rule between them */
  .foot-contact {
    border-top: 1px solid #D3E4EC;
    padding-top: 24px;
  }

  /* centred footer: a hanging icon would sit off to one side, so the icons go inline */
  .foot-list li {
    padding-left: 0;
  }

  .foot-list li i,
  .foot-list li .ic-wa {
    position: static;
    margin-right: 8px;
  }
}

/* ---- <= 575px : small mobile ---- */
@media (max-width: 575px) {
  .col-fifth {
    width: 50%;
  }

  /* Five stats over two columns stranded a cell; one divided panel with the last row full width removes the orphan. */
  .counters-row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 22px rgba(12, 58, 79, .07);
    overflow: hidden;
  }

  .counters-row .col-fifth {
    padding: 16px 10px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .counters-row .col-fifth:nth-child(1),
  .counters-row .col-fifth:nth-child(2) {
    border-top: none;
  }

  .counters-row .col-fifth:nth-child(odd) {
    border-left: none;
  }

  /* Swap the 3rd and 5th stats so the widest number gets the full-width last row. Flex order only - DOM order, and so reading order, is unchanged. */
  /* The left column is still cells {1,3,5}, so the :nth-child borders above still line up. */
  .counters-row .col-fifth:nth-child(1) {
    order: 1;
  }

  .counters-row .col-fifth:nth-child(2) {
    order: 2;
  }

  .counters-row .col-fifth:nth-child(5) {
    order: 3;
  }

  .counters-row .col-fifth:nth-child(4) {
    order: 4;
  }

  /* now the last row, so it takes the full width */
  .counters-row .col-fifth:nth-child(3) {
    order: 5;
    width: 100%;
  }

  .counters-row .counter-num {
    font-size: 1.5rem;
  }

  .counters-row .counter-label {
    margin-top: 5px;
    font-size: .76rem;
    line-height: 1.35;
  }

  /* Full width, so the default side padding only eats the label - same fix as
     .btn-block above. Both button classes are listed per wrapper so a CTA that
     flips between Call and WhatsApp needs no change here. */
  .final-btns .btn-pink,
  .final-btns .btn-line,
  .help-cta .btn-pink,
  .help-cta .btn-wa,
  .spec-cta .btn-pink,
  .spec-cta .btn-wa,
  .services-cta .btn-pink,
  .services-cta .btn-wa,
  .trust-cta .btn-pink,
  .trust-cta .btn-wa,
  .hosp-cta .btn-pink,
  .hosp-cta .btn-wa {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .form-card,
  .hero-form-card,
  .talk-box,
  .hosp-card {
    border-radius: 20px;
  }

  .benefit-card,
  .trust-card,
  .spec-card {
    border-radius: 18px;
  }

  /* One card per row left a dead column beside the icon; giving the icon its own grid column cuts about a third off each card. */
  .benefit-card,
  .spec-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px 16px;
  }

  .benefit-icon {
    grid-row: span 2;
    margin-bottom: 0;
  }

  /* The speciality glyph has no tile behind it, so it needs nudging onto the
     cap-height of the heading beside it rather than sitting on the grid edge. */
  .spec-card i {
    grid-row: span 2;
    margin-bottom: 0;
    padding-top: 2px;
    text-align: center;
  }

  .benefit-card h3,
  .spec-card h3 {
    margin-bottom: 5px;
  }

  .isnot-wrap {
    border-radius: 18px;
  }

  .compliance-pill {
    font-size: .76rem;
  }
}

/* ---- <= 425px ---- */
@media (max-width: 425px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-title {
    font-size: 1.58rem;
  }

  .sec-title {
    font-size: 1.42rem;
  }

  .sec-sub {
    font-size: .98rem;
  }

  .hero-form-card h2 {
    font-size: 1.1rem;
  }

  .service-tile h3 {
    font-size: .78rem;
  }

  /* keeps each proof to two lines so the three cells stay short */
  .hero-trust-row span {
    font-size: .64rem;
  }

  /* Two columns inside ~390px - trim the gutters before the type, so the wording stays readable. */
  table.isnot th {
    font-size: .78rem;
    padding: 11px 10px;
  }

  table.isnot td {
    font-size: .77rem;
    padding: 10px 10px 10px 26px;
  }

  table.isnot td i {
    left: 9px;
    top: 12px;
  }
}

/* ---- <= 375px ---- */
@media (max-width: 375px) {
  .cv-logo-img {
    height: 30px;
  }

  .btn-sm {
    padding: .5rem 1rem;
    font-size: .8rem;
  }

  .hero-form-card {
    padding: 20px 15px;
  }

  /* the two-up name/country and phone/email pairs get too tight to type in */
  .hero-form-card .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mob-cta a {
    font-size: .88rem;
  }

  /* Longest label on the page, shrunk so it is not cut off. The option rule is what shrinks Chrome's popup list; the select rule alone does not reach it. */
  .form-select,
  .hero-form-card .form-select {
    font-size: .82rem;
    padding-left: .7rem;
    padding-right: 1.75rem;
  }

  .form-select option {
    font-size: .82rem;
  }

  /* 320px needs one more step down, plus a little of the card's side padding back. */
  .hosp-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hosp-stat {
    font-size: .69rem;
    padding: .38rem .6rem;
  }

  /* last of the headroom for the longest CTA labels at 320px */
  .btn-block {
    padding: .85rem .75rem;
    font-size: .92rem;
  }

  .final-btns .btn-pink,
  .final-btns .btn-line,
  .help-cta .btn-wa,
  .services-cta .btn-wa,
  .trust-cta .btn-pink,
  .hosp-cta .btn-pink {
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .9rem;
  }
}

/* ---- <= 320px ---- */
@media (max-width: 320px) {
  .hero-title {
    font-size: 1.42rem;
  }

  .sec-title {
    font-size: 1.28rem;
  }

  .eyebrow {
    font-size: .68rem;
    letter-spacing: 1.4px;
  }

  .hero-trust-row span {
    padding: 10px 3px;
    font-size: .62rem;
  }

  .hero-trust-row i {
    font-size: 1.05rem;
  }

  /* "3,000,000" is the widest figure - it has to stay on one line */
  .counters-row .counter-num {
    font-size: 1.32rem;
  }

  .counters-row .col-fifth {
    padding: 14px 6px;
  }

  .counters-row .counter-label {
    font-size: .72rem;
  }

  /* ~288px for both columns - the last tightening before words would break mid-word. */
  table.isnot th {
    font-size: .72rem;
    padding: 10px 8px;
    letter-spacing: -.01em;
  }

  table.isnot td {
    font-size: .72rem;
    padding: 9px 8px 9px 23px;
    line-height: 1.4;
  }

  table.isnot td i {
    left: 7px;
    top: 11px;
  }

  .travel-item {
    padding: 18px 14px 18px 58px;
  }

  .travel-check {
    left: 14px;
  }

  .mob-cta {
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  .mob-cta a {
    gap: 6px;
    font-size: .82rem;
    padding: .78rem .25rem;
  }
}

/* ---- >= 768px : desktop / tablet - no bottom bar, no body offset ---- */
@media (min-width: 768px) {
  .lp-page {
    padding-bottom: 0;
  }

  .mob-cta {
    display: none;
  }
}

/* THANK YOU PAGE - must fit in one viewport with no scroll. */

/* ---- <= 767px ---- */
@media (max-width: 767px) {
  .ty-page {
    padding: 18px 14px;
  }

  .ty-card {
    padding: 32px 22px;
    border-radius: 22px;
  }

  .ty-logo {
    height: 38px;
    margin-bottom: 16px;
  }

  .ty-icon {
    width: 66px;
    height: 66px;
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .ty-text {
    font-size: .95rem;
  }

  .ty-btns {
    margin-top: 22px;
  }

  .ty-btns .btn-pink {
    width: 100%;
  }

  .ty-note {
    margin-top: 20px;
    padding-top: 16px;
    font-size: .74rem;
  }
}

/* ---- short viewports: compact so nothing is pushed below the fold ---- */
@media (max-height: 720px) {
  .ty-card {
    padding: 26px;
  }

  .ty-logo {
    height: 32px;
    margin-bottom: 12px;
  }

  .ty-icon {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
    margin-bottom: 12px;
  }

  .ty-title {
    font-size: clamp(1.4rem, 4.4vw, 1.9rem);
    margin-bottom: 8px;
  }

  .ty-text {
    font-size: .92rem;
  }

  .ty-btns {
    margin-top: 18px;
    gap: 10px;
  }

  .ty-note {
    margin-top: 16px;
    padding-top: 12px;
  }
}

/* ---- very short viewports ---- */
@media (max-height: 560px) {
  .ty-logo {
    height: 28px;
    margin-bottom: 10px;
  }

  .ty-icon {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .ty-greet,
  .ty-note {
    display: none;
  }

  .ty-card {
    padding: 22px 24px;
  }
}

/* ---- landscape phones: buttons go inline so nothing drops below the fold ---- */
@media (max-height: 480px) {
  .ty-page {
    padding: 10px 12px;
  }

  .ty-card {
    padding: 16px 20px;
    border-radius: 18px;
  }

  .ty-logo {
    height: 24px;
    margin-bottom: 8px;
  }

  .ty-icon {
    width: 38px;
    height: 38px;
    font-size: .95rem;
    margin-bottom: 8px;
  }

  .ty-title {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .ty-text {
    font-size: .84rem;
    max-width: 520px;
  }

  .ty-btns {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
  }

  .ty-btns .btn-pink {
    width: auto;
    padding: .55rem 1.3rem;
    font-size: .9rem;
  }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}