.elementor-4503 .elementor-element.elementor-element-a4029d2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6702d0f *//* ==========================================================================
   Dr. Shrinath Viswanath — Homepage Styles
   Prefix: hp-
   Tokens (colors, fonts, spacing) are defined in index.css :root
   This file only contains component-level styles.
   Every line below has an inline comment explaining what it does.
   ========================================================================== */


/* ==========================================================================
   1. PAGE-BUILDER RESET
   Removes default Elementor/page-builder spacing so our own layout rules
   take over, scoped only inside .hp-wrap so it doesn't affect other pages.
   ========================================================================== */

.hp-wrap .elementor-section,
.hp-wrap .elementor-column,
.hp-wrap .e-con,
.hp-wrap .e-con-inner {
  padding: 0 !important;        /* kill Elementor's default inner spacing */
  margin: 0 !important;         /* kill Elementor's default outer spacing */
  max-width: 100% !important;   /* let sections use the full width available */
  min-height: unset !important; /* remove any forced minimum height */
}

.hp-wrap .elementor-widget-wrap,
.hp-wrap .elementor-widget-container {
  padding: 0 !important; /* strip widget wrapper padding so our own spacing controls layout */
}

.hp-wrap a,
.hp-wrap a:link,
.hp-wrap a:visited,
.hp-wrap a:hover,
.hp-wrap a:active,
.hp-wrap a:focus {
  text-decoration: none !important; /* no underline on links in any state */
}


/* ==========================================================================
   2. PAGE WRAPPER
   Outer container for the whole homepage: background, base typography,
   and a subtle grain texture layered behind all content.
   ========================================================================== */

.hp-wrap {
  position: relative;          /* lets the grain texture (.hp-bg-grain) position itself against this box */
  min-height: 100vh;           /* page fills at least the full viewport height */
  overflow-x: hidden;          /* prevents any horizontal scroll from off-screen elements */
  background: var(--off-white); /* base page background color, set in index.css tokens */
  font-family: var(--f-body);  /* default body font, set in index.css tokens */
  color: var(--text);          /* default text color, set in index.css tokens */
  font-size: var(--fs-body);   /* default body text size, set in index.css tokens */
  line-height: 1.6;            /* comfortable reading line spacing */
  font-weight: var(--fw-medium);            /* slightly heavier than normal (400) for readability */
}

.hp-bg-grain {
  position: absolute;   /* sits on top of/behind content, anchored to .hp-wrap */
  inset: 0;              /* stretches to cover the entire wrapper (top/right/bottom/left: 0) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); /* inline SVG noise/grain texture, no external image file needed */
  opacity: 0.04;         /* very faint — 4% opacity so it's a subtle texture, not visible noise */
  pointer-events: none;  /* purely decorative, clicks pass through to content underneath */
  z-index: 0;            /* sits behind real content (see .hp-main z-index: 1) */
}


/* ==========================================================================
   3. SHARED UTILITIES
   Reusable helpers used across multiple sections: containers, section
   headings, eyebrow labels, buttons, and scroll-reveal animation classes.
   ========================================================================== */

.hp-container {
  max-width: var(--container);              /* caps content width so it doesn't stretch too wide on large screens */
  margin-inline: auto;                      /* centers the container horizontally */
  padding-inline: clamp(1rem, 4vw, 2.5rem); /* responsive left/right padding: min 1rem, scales with viewport, max 2.5rem */
}

.hp-main { position: relative; z-index: 1; } /* keeps main content above the background grain layer */
.hp-section-white { background: var(--white); }    /* white background variant for a section */
.hp-section-pale  { background: var(--off-white); } /* off-white/pale background variant for a section */
.hp-section-dark  {
  background: var(--c2);  /* dark brand-blue background for a section */
  position: relative;     /* allows absolutely positioned glow/decoration elements inside */
  overflow: hidden;       /* clips any decorative glow that extends past the section edges */
}

/* Section heading (used both on light and dark backgrounds) */
.hp-section-h2,
.hp-cta-h2 {
  font-family: var(--f-title);    /* heading font family, set in index.css tokens */
  font-weight: var(--fw-bold);                /* bold heading weight */
  line-height: 1.1;                 /* tight line spacing typical for large headings */
  color: var(--c2);                 /* dark brand-blue text color (default, on light backgrounds) */
  margin-bottom: var(--space-4);   /* spacing gap below the heading */
  letter-spacing: 0.01em;           /* very slight extra spacing between letters */
  font-size: var(--fs-h1);         /* large heading font size, set in index.css tokens */
}

.hp-section-h2 em,
.hp-cta-h2 em {
  font-style: italic;       /* italicize any <em> highlighted word inside the heading */
  font-family: var(--f-sub); /* switches emphasized word to the secondary/script-like font */
  font-weight: var(--fw-semibold);          /* semi-bold weight for the emphasized word */
  color: var(--c3);          /* accent color for the emphasized word */
}

/* White variant of the heading, for dark section backgrounds */
.hp-h2-white,
.hp-cta-h2 { color: var(--white); } /* overrides heading color to white when used on a dark section */
.hp-h2-white em,
.hp-cta-h2 em { color: var(--c5); } /* emphasized word color on dark backgrounds */

/* ── CTA heading — matched to About's .ab-cta-h2 ──
   Section headings and CTA headings are deliberately different weights across
   this site: section headings are bold (700), the closing CTA heading is
   semibold (600). Verified on About and on every other page's *-cta-h2.
   About resolves to 25.38 / 35.2 / 40px at 375 / 768 / 1280 with line-height
   1.15 — which is exactly --fs-h2, so the token reproduces it at every width
   rather than pinning a single desktop value. */
.hp-cta-h2 {
  font-size:   var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
}

.hp-section-sub {
  font-size: var(--fs-body); /* matches base body text size */
  color: var(--body);         /* softer body text color (less contrast than headings) */
  font-weight: var(--fw-light);           /* light weight for a subtle, secondary feel */
  line-height: 1.8;           /* generous line spacing for easy reading */
  max-width: 520px;           /* keeps subtitle text from stretching too wide, improves readability */
}

.hp-section-header {
  display: flex;                    /* lays heading and any side content in a row */
  justify-content: space-between;   /* pushes heading to one side, extra content (e.g. link) to the other */
  align-items: flex-end;            /* aligns items to their bottom edge */
  margin-bottom: var(--space-7);   /* spacing below the whole header block before section content starts */
  gap: var(--space-5);             /* space between heading and any side content */
}

/* --- Eyebrow labels (small uppercase tag above headings) --- */
.hp-eyebrow {
  display: flex;                 /* lays the small line + text side by side */
  align-items: center;            /* vertically centers the line with the text */
  gap: var(--space-3);            /* space between the decorative line and the label text */
  margin-bottom: var(--space-3); /* spacing below the eyebrow, before the main heading */
}
.hp-eyebrow-line {
  inline-size: 32px;    /* width of the small decorative line (32px) */
  block-size: 1.5px;    /* height/thickness of the line (1.5px) */
  background: var(--c4); /* line color */
  flex-shrink: 0;        /* prevents the line from shrinking in a flex row */
}
.hp-eyebrow-text {
  font-size: var(--fs-small);   /* small uppercase label text size */
  letter-spacing: 0.22em;        /* wide letter spacing for a label/tag look */
  text-transform: uppercase;     /* forces uppercase styling */
  color: var(--c3);              /* accent color for the label */
  font-weight: var(--fw-bold);               /* bold weight so the small text still stands out */
}
.hp-eyebrow-line-white { background: rgba(255, 255, 255, 0.4); } /* faded white line variant for dark backgrounds */
.hp-eyebrow-text-white { color: rgba(255, 255, 255, 0.65); }      /* faded white text variant for dark backgrounds */

/* --- Buttons: shared base styles, then per-variant colors --- */
:is(.btn-primary, .btn-whatsapp, .hp-btn-wa,
    .btn-outline-dark, .hp-btn-outline, .hp-btn-white) {
  display: inline-flex;             /* button content (icon + text) sits inline and can be centered */
  align-items: center;              /* vertically centers icon/text inside the button */
  justify-content: center;          /* horizontally centers icon/text inside the button */
  gap: var(--space-2);              /* space between icon and text if both present */
  padding: var(--space-3) 1.25rem; /* vertical/horizontal button padding */
  border-radius: var(--radius-md); /* rounded corners, medium radius token */
  font-size: var(--fs-small);      /* button label text size */
  font-weight: var(--fw-bold);                  /* bold button label (overridden to 800 later in section 16) */
  letter-spacing: 0.06em;            /* slight letter spacing for a more "buttony" label feel */
  text-decoration: none !important; /* no underline even though buttons may be <a> tags */
  cursor: pointer;                   /* shows a pointer cursor on hover to indicate clickability */
  min-height: 44px;                  /* ensures button meets a comfortable minimum tap target size */
  transition: all 0.3s;              /* smooth animation for hover states (background, transform, shadow) */
  border: none;                      /* no default border, styling handled per-variant below */
  font-family: var(--f-body);       /* uses body font for button labels */
}

.btn-primary,
.btn-whatsapp,
.hp-btn-wa { color: var(--white); } /* white text for solid/filled buttons */
.btn-outline-dark,
.hp-btn-outline,
.hp-btn-white { color: var(--c2); } /* dark brand-blue text for outline/white buttons */

.btn-primary { background: var(--c2); } /* solid brand-blue background for the primary button */
.btn-primary:hover {
  background: #eaf4fb;                                  /* lightens background on hover */
  transform: translateY(-2px);                          /* lifts button up slightly on hover */
  box-shadow: 0 10px 30px rgba(15, 76, 129, 0.25);      /* soft blue glow shadow on hover */
}

:is(.btn-whatsapp, .hp-btn-wa) {
  background: #25D366; /* WhatsApp brand green background */
  min-width: 220px;     /* ensures the WhatsApp button is wide enough to read comfortably */
}
:is(.btn-whatsapp, .hp-btn-wa):hover {
  background: #1ebe5a;                                   /* slightly darker green on hover */
  transform: translateY(-2px);                           /* lifts button up slightly on hover */
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.25);      /* green glow shadow on hover */
}

:is(.btn-outline-dark, .hp-btn-outline) {
  background: transparent;                          /* no fill, just an outline */
  border: 1.5px solid rgba(15, 76, 129, 0.35);      /* semi-transparent brand-blue border */
}
:is(.btn-outline-dark, .hp-btn-outline):hover {
  border-color: var(--c2);  /* border becomes solid brand-blue on hover */
  background: var(--pale);  /* very light background fill appears on hover */
}

.hp-btn-white { background: var(--white); text-transform: uppercase; } /* solid white button, uppercase label */
.hp-btn-white:hover { background: var(--pale); transform: translateY(-2px); } /* light tint + lift on hover */

/* --- Scroll-reveal animation (fade + slide up as elements enter view) --- */
.hp-reveal {
  opacity: 0;                        /* starts invisible before it scrolls into view */
  transform: translateY(28px);       /* starts shifted down 28px before it scrolls into view */
  transition: opacity 0.7s ease calc(var(--rd, 0s)),      /* fades in over 0.7s, optionally delayed via --rd variable */
              transform 0.7s ease calc(var(--rd, 0s));    /* slides up over 0.7s, same optional delay */
}
.hp-revealed { opacity: 1; transform: translateY(0); } /* final visible/settled state once revealed (JS adds this class) */

/* Stagger delays used with .hp-reveal for sequential animations */
.delay-05 { --rd: 0.05s; } /* 0.05s reveal delay */
.delay-08 { --rd: 0.08s; } /* 0.08s reveal delay */
.delay-1  { --rd: 0.1s;  } /* 0.1s reveal delay */
.delay-11 { --rd: 0.11s; } /* 0.11s reveal delay */
.delay-15 { --rd: 0.15s; } /* 0.15s reveal delay */
.delay-2  { --rd: 0.2s;  } /* 0.2s reveal delay */
.delay-25 { --rd: 0.25s; } /* 0.25s reveal delay */
.delay-3  { --rd: 0.3s;  } /* 0.3s reveal delay */
.delay-35 { --rd: 0.35s; } /* 0.35s reveal delay */


/* ==========================================================================
   4. HERO SECTION
   Two-column hero: text/CTA on the left, doctor photo + credential
   card on the right, plus trust stats below the text.
   ========================================================================== */

.hero {
  background: var(--white);       /* hero section background color */
  /* The section owns the hero's vertical rhythm. Generous outside spacing is
     what separates the copy cluster from the nav above and the stat strip
     below; the cluster's own internal gaps stay tight so it reads as ONE
     group rather than a stack of separate lines. */
  padding-block-start: var(--hero-pad-block-start);  /* 64px–112px */
  padding-block-end:   var(--hero-pad-block-end);    /* 48px–80px  */
                                   /* 50px top margin on desktop */
}

.hero-top {
  display: grid;
  /* CONTAINER, not full-bleed. The reference wraps the hero grid in the same
     capped, centred container the rest of the page uses, which is what makes
     the two columns read as one composition instead of two islands drifting
     apart on wide screens. These three declarations are deliberately identical
     to .hp-container — the trust strip below is already inside one, so hero
     grid and strip now share a left and right edge at every width. */
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);

  /* minmax(0, …), NOT bare 1fr. A bare `1fr` track is minmax(auto, 1fr), so its
     content's min-content width can force it wider than its share — the CTA row
     (three nowrap buttons) was doing exactly that, blowing the split to 60.9/39.1
     at 1024px. minmax(0, …) pins the ratio at every width. */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-col-split)); /* 53.76 / 46.24 */
  column-gap: var(--hero-col-gap);   /* 32px–72px */
  row-gap: var(--hero-col-gap);      /* only ever applies once collapsed to one column */

  /* start, not stretch: each column is sized by its own content. The portrait
     column is taller than the copy column by design — see the reference, where
     the copy sits at the top of a much taller photo panel. */
  align-items: start;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;  /* Equal space around each item */
  padding: 0;
}

/* Staggered entrance animation for hero text elements */
.hero-anim-1 { animation: hp-fadeUp 0.8s ease 0.20s both; } /* eyebrow fades/slides up first, 0.20s delay */
.hero-anim-2 { animation: hp-fadeUp 0.8s ease 0.40s both; } /* headline animates next, 0.40s delay */
.hero-anim-3 { animation: hp-fadeUp 0.8s ease 0.55s both; } /* sub-headline animates next, 0.55s delay */
.hero-anim-4 { animation: hp-fadeUp 0.8s ease 0.70s both; } /* body text animates next, 0.70s delay */
.hero-anim-5 { animation: hp-fadeUp 0.8s ease 0.85s both; } /* action buttons animate next, 0.85s delay */
.hero-anim-6 { animation: hp-fadeUp 0.8s ease 1.00s both; } /* trust stats animate last, 1.00s delay */

.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: var(--hero-eyebrow-gap); } /* 20px, measured from the reference (was 8px) */
.hero-eyebrow-line { inline-size: 40px; block-size: 1.5px; background: var(--c4); } /* short decorative line before the eyebrow text */
.hero-eyebrow-text {
  font-size: var(--fs-small);   /* small label text size */
  letter-spacing: 0.22em;        /* wide tracking for a tag-like look */
  text-transform: uppercase;     /* forces uppercase */
  color: var(--c3);               /* accent color */
  font-weight: var(--fw-bold);                /* bold weight */
}

.hero-headline {
  font-family: var(--f-sub);      /* headline uses the secondary/display font */
  font-size: var(--hero-sub-size); /* SAME token as .hero-sub — the headline and the
                                      sub are two halves of one sentence and must match
                                      in size at every width (see PDF: "All text to be of
                                      same font size and weight, even though they are 2
                                      sentences"). Do not give either its own size. */
  font-weight: var(--fw-bold);                /* bold weight */
  line-height: 1;                   /* tight line height for the two-line display headline */
  color: var(--c2);                 /* dark brand-blue color */
  /* ZERO bottom margin. .hero-left is a flex column, so margins do NOT collapse —
     this margin was ADDING to .hero-sub's margin-block-start, making the real
     sentence break 42.8px at 1440 instead of the intended 0.45em. The reference
     h1 carries margin:0 and lets the sub own the gap; matched here. */
  margin: 0;
}
.hero-headline em { font-style: italic; color: var(--c3); } /* emphasized word in headline: italic + accent color */

.hero-sub {
  font-family: var(--f-sub);
  font-size: var(--hero-sub-size);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: #3076a7;
  
  margin-block-start: var(--hero-sentence-gap);
  margin-block-end: -89.944px;
  margin-inline: 0;
}

.hero-body {
  font-size: var(--fs-body);  /* standard body text size */
  line-height: 1.5;             /* compact but readable line height so the CTAs remain in view */
  color: var(--body);           /* muted body text color */
  max-inline-size: 480px;     /* caps line length for readability    */
  font-weight: var(--fw-light);              /* light weight for a softer paragraph feel */
  margin-block-start: 0;   /* kills the unwanted gap above the body copy */
  margin-block-end: var(--hero-lede-gap);   /* = the 1em+1em default you just removed, so CTA position is unchanged */
}

.hero-actions {
  display: flex;                  /* lays the CTA buttons in a row */
  /* wrap, NOT nowrap. The copy column is now pinned to 53.76% by minmax(0, 1fr),
     so it can no longer stretch to fit three nowrap buttons — at 1024px the row
     would overflow its track. The reference's CTA row wraps at every width. */
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, var(--space-3)); /* responsive gap so the three buttons fit comfortably */
  align-items: center;            /* vertically aligns buttons with different border styles */
}

.hero-actions :is(.btn-primary, .btn-whatsapp, .btn-outline-dark) {
  min-width: 0;                   /* overrides wider generic button minimums inside the hero */
  padding-inline: clamp(0.85rem, 1.15vw, 1.1rem); /* trims horizontal padding enough to fit three buttons */
  white-space: nowrap;            /* prevents button labels from splitting onto two lines */
}

/* Trust stats row (e.g. years of experience, patients treated) */
/* Authority strip. It is now a marquee viewport (.hp-marquee supplies the
   scrolling); layout of the items themselves lives on .hp-marquee-track, so
   this rule no longer sets display/gap — doing both would fight the track. */
.hero-trust {
  inline-size: 100%;                    /* takes full width of the hero-left column */
  margin-block-start: var(--hero-panel-gap); /* explicit clearance from the portrait panel above */
  padding: var(--space-3) 0 var(--space-3) ; /* tighter vertical padding above/below the row */
  border-block-start: 1px solid rgba(15, 76, 129, 0.1); /* faint top divider line separating it from body text */
}
/* ══════════════════════════════════════════════════════════════════════════
   MARQUEE — shared by the authority strip and the hospital logo strip
   ══════════════════════════════════════════════════════════════════════════
   Scroll-driven, not a transform animation: the JS advances scrollLeft, so a
   user swipe interrupts and resumes on the same axis with no snap-back.
   Speed lives in the markup (data-speed, px/sec) so it is retunable without
   editing CSS or JS: authority strip 45px/s left-to-right, logo strip 35px/s
   right-to-left. Under prefers-reduced-motion the JS never starts, and these
   rules degrade to an ordinary horizontally scrollable row. */
.hp-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;              /* must NOT be smooth — JS sets scrollLeft each frame */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;  /* momentum swipe on iOS */
  overscroll-behavior-x: contain;     /* a swipe here must not scroll the page */
}
.hp-marquee::-webkit-scrollbar { display: none; }

.hp-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-7);                /* equal spacing between every item */
  inline-size: max-content;           /* track is as wide as its contents, so it can scroll */
}
.hp-marquee-track > * { flex: 0 0 auto; } /* items never shrink — keeps spacing even */

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the JS already refuses to start, this guarantees no
     CSS-side motion either. Strip stays manually scrollable. */
  .hp-marquee { scroll-behavior: auto; }
  .hp-marquee-track { animation: none; transition: none; }
}

.trust-stat { display: flex; flex-direction: column; font-family: 'EB Garamond', serif; } /* each stat: number stacked above label, serif font */
.trust-number,
.trust-label { font-family: inherit; } /* both inherit the serif font set on .trust-stat */
.trust-number { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c2); line-height: 1; } /* large bold number, e.g. "15+" */
.trust-number span { color: var(--c3); } /* accent color for a highlighted part of the number, e.g. the "+" symbol */
.trust-label {
  font-size: var(--fs-small);   /* small label text below the number */
  color: var(--muted);            /* muted/grey color */
  letter-spacing: 0.1em;          /* slight tracking for a label feel */
  text-transform: uppercase;      /* forces uppercase, e.g. "YEARS EXPERIENCE" */
  margin-block-start: 4px;        /* small gap between number and label */
  font-weight: var(--fw-semibold);                /* semi-bold weight */
}

/* Right side: doctor photo panel with floating credential card */
/* ── Hero portrait panel ──
   Design taken from hp-HOME-styles (1).css (rounded portrait + centred
   credential card), retokenised: the old file's hardcoded values that now have
   tokens (--white, --c2, --c3, --f-title, --radius-lg) reference those instead. */
.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;                        /* portrait stacked above the credential card */
  align-items: center;                           /* both centred horizontally */
  justify-content: flex-start;                   /* portrait starts at the panel's top edge */
  /* No padding and no min-block-size. The reference's photo panel has neither:
     the portrait fills the track edge to edge and its aspect-ratio, plus the
     card's negative top margin, are the only things that decide the height.
     The shadow reserve that used to live here as padding-block-end is now
     carried by --hero-panel-gap's max() floor, so it is guaranteed by the gap
     to the strip rather than by extra height inside the panel. */
  padding: 0;
  opacity: 0;                                    /* starts invisible for the fade-in entrance */
  animation: hp-fadeIn 1s ease 0.4s forwards;   /* fades in over 1s, starting after a 0.4s delay */
}

.hero-doctor-img {
  position: relative;                 /* in flow, so the flex parent can centre it */
  z-index: 2;                          /* above the panel background, below the credential card */
  /* FILLS the track — no cap. The reference's portrait is 100% of its column
     (536 x 630 at 1440); the previous min(100%, 360px) left the photo floating
     in ~290px of empty panel, which is the single biggest visual difference
     called out on the reference. The copy column being shorter than the photo
     column is intended, not a void to be engineered away. */
  inline-size: 80%;
  block-size: auto;
  aspect-ratio: var(--hero-portrait-aspect);  /* 4 / 4.7 — measured from the reference (was 3 / 4) */
  object-fit: cover;                   /* fills the portrait box, cropping rather than letterboxing */
  object-position: center top;         /* keeps the face in frame when cropped */
  border-radius: var( --radius-xl);     /* 24px, measured from the reference (was 16px) */
  display: block;
}

.hero-cred {
  /* IN FLOW, not absolute. This is the structural fix: an absolutely-positioned
     card contributes zero height, so the panel could not know about it and the
     card (and its shadow) escaped downward into the stat strip. In flow, the
     panel's height includes the card and grows automatically if it wraps.
     Horizontal centring now comes from the parent's align-items: center. */
  position: relative;
  margin-block-start: calc(-1 * var(--hero-cred-overlap));    /* -64px, measured from the reference */
  /* 88% of the panel — and the portrait is now 100% of the panel, so this is
     88% of the photo, exactly as the reference reads. The old min(85%, 400px)
     hit its 400px cap while the photo was only 360px wide, leaving the card
     WIDER than the picture it was supposed to sit on (111%). */
  inline-size: var(--hero-cred-width);
  z-index: 10;                                                 /* above the portrait */
  background: var(--white);
  border: 1px solid rgba(15, 76, 129, 0.12);                  /* faint border outline */
  border-radius: var(--radius-sm);                             /* tokenised (was a literal 6px) */
  padding: 1.25rem 2rem;
  text-align: center;                                          /* centred content to match the centred card */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);                /* from hp-HOME-styles */
  opacity: 0;
  animation: hp-fadeUp 0.8s ease 1.1s forwards;               /* rises into place; the card is now
                                                                 centred by flex, so the keyframe no
                                                                 longer has to carry translateX(-50%) */
}
.hero-cred-label { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c3); margin-bottom: 5px; font-weight: var(--fw-bold); } /* small uppercase label, e.g. "CONSULTANT" */
.hero-cred-name  { font-family: var(--f-title); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--c1); } /* doctor's name — Cinzel bold in imperial blue, per the brief */
.hero-cred-deg   { font-size: var(--fs-small); color: var(--c3); margin-block-start: 3px; font-weight: var(--fw-semibold); } /* degree line — was a hardcoded #3076a7, which IS --c3 */


/* ==========================================================================
   5. REASSURANCE BAND
   Dark horizontal strip with trust logos/items, scrollable on mobile
   with an arrow button hint.
   ========================================================================== */

.hp-re-band {
  background: var(--c2);                          /* solid dark brand-blue background for the band */
  padding-block: 1.25rem;
  /* Content capped to --container while the BACKGROUND stays full-bleed —
     the same relationship the stats strip has with .hp-container inside .hero.
     Whichever is larger wins: the normal responsive gutter on narrow screens,
     or the gutter needed to centre a --container-wide content box on wide ones.
     Bounding the marquee viewport (W) is what keeps the required repeat
     interval (W + widest item) — and so the logo gap — sane at 1920. */
  padding-inline: max(clamp(1rem, 4vw, 3.75rem), calc((100% - var(--container)) / 2));
  display: flex;                                    /* lays label, divider, and items row side by side */
  align-items: center;                              /* vertically centers all children */
  justify-content: space-between;                   /* spreads label and items across the full width */
  gap: var(--space-5);                              /* spacing between label/divider/items */
  overflow: hidden;                                  /* clips content so nothing spills outside the band */
  position: relative;                                /* lets the mobile arrow button position against this band */
  z-index: 1;                                        /* keeps the band above the page background grain */
}

.hp-re-label { font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase; color: white; white-space: nowrap; flex-shrink: 0; font-weight: var(--fw-bold); } /* e.g. "TRUSTED BY" label, never wraps or shrinks */
.hp-re-div   { inline-size: 1px; block-size: 40px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } /* thin vertical divider line between label and logos */
/* Logo strip viewport. Spacing/layout now come from .hp-marquee-track, which
   applies gap: var(--space-7) uniformly — that is what gives every logo equal
   spacing. The old justify-content:space-between produced UNEVEN gaps whenever
   logo widths differed, which is the spacing problem this replaces. */
.hp-re-items { flex: 1; min-width: 0; }
.hp-re-item  { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: white; font-size: var(--fs-small); } /* single item; flex:0 0 auto comes from .hp-marquee-track > * */
.hp-re-logo  { inline-size: clamp(120px, 12vw, 160px); block-size: auto; display: block; } /* logo image width responsive between 120px–160px, height auto-scales */
.hp-re-dot   { color: var(--c6); font-size: 1.5rem; } /* light blue separator dot between items */

/* The "scroll for more" arrow button and its styles were removed with the
   marquee conversion — the strip auto-rolls and swipe is handled natively. */


/* ==========================================================================
   6. JOURNEY STEPS
   Numbered step-by-step process (e.g. consult → diagnosis → treatment).
   ========================================================================== */

.hp-journey        { padding-block: clamp(3.75rem, 7vw, 6.25rem); } /* responsive vertical section padding */
.hp-journey-header  { max-inline-size: 680px; margin-bottom: var(--space-8); } /* caps header width, spacing before the steps row */
.hp-steps           { display: flex; align-items: flex-start; gap: 0; } /* lays steps in a row (stacks on mobile via media query), no gap since arrows fill the space */

.hp-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-4); flex: 1; } /* each step: centered number/title/desc, equal width columns */
.hp-step-num {
  inline-size: 72px;                       /* circle width */
  block-size: 72px;                        /* circle height (equal to width = perfect circle) */
  border-radius: 50%;                      /* makes the box a circle */
  border: 1.5px solid rgba(15, 76, 129, 0.2); /* faint blue outline */
  background: var(--white);                /* white circle background */
  display: flex;                            /* centers the number inside the circle */
  align-items: center;                      /* vertically centers the number */
  justify-content: center;                  /* horizontally centers the number */
  font-family: var(--f-title);             /* heading font for the step number */
  font-size: var(--fs-h3);                 /* medium heading size for the number */
  font-weight: var(--fw-bold);                          /* bold number */
  color: var(--c2);                          /* dark brand-blue number color */
  margin-bottom: var(--space-4);            /* spacing below before the step title */
  box-shadow: var(--shadow-sm);             /* subtle drop shadow for depth */
  transition: 0.3s;                          /* smooth animation for the hover state below */
}
.hp-step:hover .hp-step-num {
  background: var(--c2);         /* circle fills with brand-blue on hover */
  color: white;                    /* number turns white for contrast on hover */
  border-color: var(--c2);        /* border matches the new fill color */
  box-shadow: var(--shadow-lg);   /* shadow deepens on hover for a lifted effect */
}

.hp-step-title { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c2); margin-bottom: var(--space-2);text-transform: uppercase;   } /* step name, e.g. "Consultation" */
.hp-step-desc  { font-size: var(--fs-body); color: var(--text); line-height: 1.65; } /* short description under the step title */
.hp-step-arrow { color: rgba(15, 76, 129, 0.2); font-size: var(--fs-h3); margin-block-start: 26px; flex-shrink: 0; } /* faint arrow/connector between steps, aligned near the circle's vertical center */


/* ==========================================================================
   7. CONDITIONS GRID
   Card grid listing conditions treated; responsive from 1 to 3 columns.
   ========================================================================== */

.hp-conditions { padding-block: clamp(3.75rem, 7vw, 6.25rem); } /* responsive vertical section padding */

.hp-cond-grid {
  display: grid;                     /* card grid layout */
  grid-template-columns: 1fr;        /* single column by default (mobile) */
  gap: var(--space-5);               /* spacing between cards */
}
@media (min-width: 768px) {
  .hp-cond-grid { grid-template-columns: repeat(2, 1fr); } /* 2 equal columns on tablets and up */
}
@media (min-width: 1024px) {
  .hp-cond-grid { grid-template-columns: repeat(3, 1fr); } /* 3 equal columns on desktop */
}

.hp-cond-card {
  background: var(--white);                          /* white card background */
  border: 1px solid rgba(15, 76, 129, 0.08);         /* very faint border outline */
  border-radius: var(--radius-lg);                    /* large rounded corners */
  overflow: hidden;                                    /* clips the card image to the rounded corners */
  text-decoration: none !important;                   /* no underline, since the whole card is a link */
  color: inherit;                                       /* text inside inherits normal colors instead of link-blue */
  transition: 0.35s;                                    /* smooth animation for hover lift/shadow */
  box-shadow: var(--shadow-sm);                        /* subtle default shadow */
  height: 100%;                                          /* fills the grid cell height so all cards in a row match */
  display: flex;                                         /* stacks image and body vertically */
  flex-direction: column;                                /* vertical stacking direction */
}
.hp-cond-card:hover { border-color: rgba(15, 76, 129, 0.25); transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* border darkens, card lifts up, shadow deepens on hover */

.hp-cond-img { block-size: 192px; background: linear-gradient(135deg, var(--pale), var(--c6)); position: relative; overflow: hidden; } /* fixed-height image area with a gradient placeholder background */
.hp-cond-img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* image fills the area, cropped to fit without distortion */
/* Soft fade at the bottom of the image so it blends into the card body */
.hp-cond-img::after {
  content: '';                                            /* empty pseudo-element, purely decorative */
  position: absolute;                                      /* overlays the bottom of the image */
  inset-block-end: 0;                                       /* pinned to the bottom of the image area */
  inset-inline: 0;                                          /* stretches full width */
  block-size: 60px;                                         /* fade zone height */
  background: linear-gradient(to top, var(--white), transparent); /* fades from white (bottom) to transparent (top) */
}

.hp-cond-body  { padding: clamp(1rem, 2vw, 1.5rem); flex: 1; display: flex; flex-direction: column; } /* card text area, responsive padding, grows to fill remaining card height */
.hp-cond-title { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c2); margin-bottom: var(--space-2); } /* condition name heading */
.hp-cond-aka   { font-size: var(--fs-small); color: var(--muted); font-weight: var(--fw-regular); } /* alternate/common name, e.g. "(also known as...)" */
.hp-cond-desc  { font-size: var(--fs-body); color: var(--body); line-height: 1.68; font-weight: var(--fw-medium); } /* short description paragraph */
.hp-cond-link  {
  display: inline-flex;               /* lays "Read more" text and its icon side by side */
  align-items: center;                 /* vertically centers text and icon */
  gap: 5px;                             /* small gap between text and icon */
  color: var(--c3);                     /* accent color for the link */
  font-size: var(--fs-xs);                    /* small link text size */
  font-weight: var(--fw-bold);                       /* bold link text */
  letter-spacing: 0.06em;                 /* slight letter spacing */
  margin-block-start: var(--space-3);    /* spacing above, separating it from the description */
  text-transform: uppercase;              /* forces uppercase, e.g. "READ MORE" */
  margin-top: auto;                        /* pushes the link to the bottom of the card regardless of description length */
  text-decoration: none !important;        /* no underline */
}
.hp-cond-card:hover .hp-cond-link { gap: 9px; } /* gap between "Read more" text and arrow widens slightly on hover, suggesting motion */


/* ==========================================================================
   8. PROCEDURES STRIP
   Row of pill-shaped links for procedures offered.
   ========================================================================== */

.hp-proc-strip { padding-block: clamp(2.5rem, 5vw, 3.75rem); } /* responsive vertical section padding */
.hp-proc-h2    { font-family: var(--f-title); font-weight: var(--fw-semibold); color: var(--c2); margin-bottom: var(--space-5); font-size: var(--fs-h1); } /* section heading for this strip */
.hp-proc-row   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* row of pills, wraps onto multiple lines if needed */

.hp-pill {
  background: rgba(15, 76, 129, 0.07);       /* very light blue tint fill */
  border: 1.5px solid rgba(15, 76, 129, 0.2); /* faint blue border outline */
  border-radius: var(--radius-xl);            /* fully rounded pill shape */
  padding: 9px 1.25rem;                        /* vertical/horizontal padding inside the pill */
  font-size: var(--fs-body);                 /* pill label text size */
  font-weight: var(--fw-bold);                             /* bold label */
  color: var(--c2);                              /* dark brand-blue text color */
  text-decoration: none !important;              /* no underline */
  transition: 0.3s;                               /* smooth animation for hover state */
  min-height: 44px;                               /* comfortable minimum tap target height */
  display: inline-flex;                           /* centers label text inside the pill */
  align-items: center;                            /* vertical centering */
  justify-content: center;                        /* horizontal centering */
}
.hp-pill:hover { background: var(--c2); color: white; border-color: var(--c2); } /* pill fills solid brand-blue with white text on hover */

.hp-pill-link { font-size: var(--fs-xs); color: var(--c3); font-weight: var(--fw-bold); text-decoration: none !important; margin-inline-start: 8px; transition: color 0.2s; } /* small "view all" style link next to the pills */
.hp-pill-link:hover { color: var(--c2); } /* darkens on hover */


/* ==========================================================================
   9. APPROACH SECTION
   Card grid describing the doctor's approach/philosophy, each with an icon.
   ========================================================================== */

.hp-approach { padding-block: clamp(3.75rem, 7vw, 6.25rem); } /* responsive vertical section padding */

.hp-approach-grid {
  display: grid;                                          /* card grid layout */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* auto-fills as many 280px-min columns as fit, each sharing space equally */
  gap: var(--space-5);                                     /* spacing between cards */
}

.hp-approach-card {
  background: var(--off-white);                     /* light card background, distinct from pure white sections */
  border: 1px solid rgba(15, 76, 129, 0.08);        /* very faint border outline */
  border-radius: var(--radius-lg);                   /* large rounded corners */
  padding: clamp(1.5rem, 2.5vw, 2.25rem);            /* responsive inner padding */
  transition: 0.3s;                                    /* smooth animation for hover state */
  height: 100%;                                         /* fills the grid cell so cards in a row match height */
}
.hp-approach-card:hover { border-color: rgba(15, 76, 129, 0.22); box-shadow: var(--shadow-md); transform: translateY(-3px); } /* border darkens, shadow appears, card lifts slightly on hover */

.hp-approach-icon {
  inline-size: 52px;                              /* icon box width */
  block-size: 52px;                               /* icon box height (square) */
  background: var(--pale);                        /* light tinted background behind the icon */
  border: 1px solid rgba(15, 76, 129, 0.12);     /* faint border outline around the icon box */
  border-radius: var(--radius-sm);                /* small rounded corners */
  display: flex;                                    /* centers the icon inside the box */
  align-items: center;                              /* vertical centering */
  justify-content: center;                          /* horizontal centering */
  color: var(--c2);                                 /* icon color */
  margin-bottom: var(--space-4);                   /* spacing below before the card title */
}
.hp-approach-icon svg  { inline-size: 24px; block-size: 24px; } /* actual icon graphic size inside the box */
.hp-approach-title     { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c2); margin-bottom: var(--space-2); } /* card heading, e.g. "Personalized Care" */
.hp-approach-desc      { font-size: var(--fs-body); color: var(--body); line-height: 1.78; } /* card description paragraph */


/* ==========================================================================
   10. PATHWAYS SECTION
   Dark section with 3 highlighted "pathway" cards (glassy translucent style).
   ========================================================================== */

.hp-pathways { padding-block: clamp(3.75rem, 7vw, 6.25rem); } /* responsive vertical section padding */

.hp-pathways-glow {
  position: absolute;                                                              /* decorative glow, positioned against the dark section */
  inset-inline-end: -100px;                                                        /* pushed partly off the right edge */
  inset-block-start: -100px;                                                       /* pushed partly off the top edge */
  inline-size: 500px;                                                              /* glow width */
  block-size: 500px;                                                               /* glow height */
  background: radial-gradient(circle, rgba(144, 202, 238, 0.06) 0%, transparent 70%); /* soft light-blue circular glow fading to transparent */
  pointer-events: none;                                                             /* purely decorative, doesn't block clicks */
}

.hp-pathways-grid {
  display: grid;                          /* card grid layout */
  grid-template-columns: 1fr;             /* single column by default (mobile) */
  gap: var(--space-5);                    /* spacing between cards */
  margin-block-start: var(--space-7);    /* spacing above, separating grid from the section heading */
}
@media (min-width: 992px) {
  .hp-pathways-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } /* 3 equal columns with larger gap on desktop */
}

.hp-pathway-card {
  background: rgba(255, 255, 255, 0.06);       /* very subtle translucent white fill (glassy effect on dark bg) */
  border: 1px solid rgba(255, 255, 255, 0.1); /* faint white border outline */
  border-radius: var(--radius-lg);              /* large rounded corners */
  padding: clamp(1.5rem, 2.5vw, 2.25rem);       /* responsive inner padding */
  transition: 0.3s;                               /* smooth animation for hover state */
  height: 100%;                                    /* fills the grid cell so cards in a row match height */
  display: flex;                                   /* stacks number/title/desc/link vertically */
  flex-direction: column;                          /* vertical stacking direction */
}
.hp-pathway-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); } /* fill and border brighten, card lifts on hover */

.hp-pathway-num   { font-family: var(--f-title); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: white; margin-bottom: var(--space-4); opacity: 0.4; } /* large faded step number, e.g. "01" */
.hp-pathway-title { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: white; margin-bottom: var(--space-3); } /* pathway heading */
.hp-pathway-desc  { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.65); line-height: 1.78; margin-bottom: var(--space-5); } /* description, slightly faded white */
.hp-pathway-link  { color: var(--c5); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; margin-top: auto; display: inline-block; } /* "Learn more" link pinned to the bottom of the card */
.hp-pathway-link:hover { color: var(--c6); } /* link color shifts on hover */


/* ==========================================================================
   11. TESTIMONIALS
   Patient review cards with star/smiley rating, quote, and avatar.
   ========================================================================== */

.hp-testi { padding-block: clamp(3.75rem, 7vw, 6.25rem); } /* responsive vertical section padding */

/* ── CAROUSEL ──
   Replaces the former .hp-testi-grid. Built on native scroll-snap rather than
   JS transforms so that: touch/trackpad swipe works with no code, and with JS
   disabled the track degrades to a plain horizontally-scrollable row instead of
   breaking. JS only calls scrollBy()/scrollTo() and tracks the active page.

   --per-view drives everything. The slide width is derived from it, so adding
   testimonials needs no CSS change at all.
   Breakpoints are the project-standard 1024 / 768 (the old grid used 992 / 640).  */
.hp-testi-carousel {
  --per-view: 3;                              /* desktop: 3 cards visible   */
  --testi-gap: var(--space-5);                /* gap between slides         */
  position: relative;
}
@media (max-width: 1023px) { .hp-testi-carousel { --per-view: 2; } }              /* tablet: 2 visible */
@media (max-width:  767px) { .hp-testi-carousel { --per-view: 1; --testi-gap: var(--space-4); } } /* mobile: 1 visible, tighter gap */

.hp-testi-track {
  display: flex;
  gap: var(--testi-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: none;                      /* Firefox: hide the scrollbar, still scrollable */
  -ms-overflow-style: none;
}
.hp-testi-track::-webkit-scrollbar { display: none; }   /* WebKit: same */

.hp-testi-slide {
  /* n cards + (n-1) gaps must fill the viewport exactly */
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--testi-gap)) / var(--per-view));
  scroll-snap-align: start;
  display: flex;                              /* let the card stretch to equal height */
}
.hp-testi-slide > .hp-testi-card { inline-size: 100%; }

/* ── Controls — hidden by default; JS reveals them only when pages > 1 ── */
.hp-testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.hp-testi-controls[hidden] { display: none; } /* [hidden] must beat display:flex */

/* NOTE ON THE RESETS BELOW — these are not decorative.
   Astra styles every bare `button` element: main.min.css sets
   `padding: .6em 1em .4em` and `border-radius: 2px`, and the theme's inline
   CSS adds `border-radius: 4px`, a `box-shadow`, and a
   `background-color: var(--ast-global-color-0)` that appears on click/focus.
   Because `.hp-testi-btn` is (0,1,0) and bare `button` is (0,0,1) we win on
   every property we actually declare — but anything we DON'T declare is
   inherited from Astra. Previously we never set `padding`, so Astra's ~56px of
   horizontal padding applied: `min-width:auto` on the flex item then floored
   the button at 58px wide (an oval, not a circle) and the padding consumed the
   content box, collapsing the SVG — a shrinkable flex child — to 0px wide, so
   the arrow was invisible. Hence the explicit padding/box-shadow/appearance
   resets and `flex: 0 0 auto` on both the button and the icon. */
.hp-testi-btn {
  -webkit-appearance: none;
  appearance: none;                           /* drop the native button chrome */
  inline-size: 44px;                          /* 44px minimum touch target */
  block-size: 44px;
  flex: 0 0 auto;                             /* never shrink or stretch in the flex row */
  min-inline-size: 0;                          /* defeat the flex `min-width:auto` floor */
  padding: 0;                                  /* MUST be set — Astra's button padding is what made it an oval */
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(15, 76, 129, 0.2);
  border-radius: 50%;
  background: var(--white);
  color: var(--c2);
  box-shadow: none;                            /* Astra adds a 1px card shadow to every button */
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
/* Deliberate interaction states — all three inherit the button's own colours so
   they read as one family with the site's other controls (--c2 / --c3). */
.hp-testi-btn:hover:not([aria-disabled="true"]) { background: var(--c2); border-color: var(--c2); color: var(--white); }
.hp-testi-btn:active:not([aria-disabled="true"]) { background: var(--c3); border-color: var(--c3); color: var(--white); }
.hp-testi-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* The icon: an explicit stroked chevron, sized and centred. flex:0 0 auto stops
   it collapsing if anything ever squeezes the button again. */
.hp-testi-btn svg {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;                      /* clean, well-formed joins at the chevron apex */
  pointer-events: none;                         /* clicks always land on the button, never the glyph */
}

.hp-testi-dots { display: flex; align-items: center; gap: var(--space-2); }

.hp-testi-dot {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 24px;                          /* 24px hit area around an 8px visual dot */
  block-size: 24px;
  flex: 0 0 auto;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;                          /* Astra sets 4px on every button — that is what made the dots rounded squares */
  background: none;
  box-shadow: none;                            /* and Astra's button shadow is what drew the little white card behind each dot */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hp-testi-dot::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: rgba(15, 76, 129, 0.25);
  transition: background 0.2s, transform 0.2s;
}
.hp-testi-dot[aria-current="true"]::after { background: var(--c2); transform: scale(1.35); }

/* Focus ring — the project otherwise only has a bare a:focus rule */
.hp-testi-btn:focus-visible,
.hp-testi-dot:focus-visible { outline: 2px solid var(--c3); outline-offset: 3px; }

/* ── Reduced motion ──
   JS also swaps scroll behaviour to 'auto'; this covers the CSS-side motion. */
@media (prefers-reduced-motion: reduce) {
  .hp-testi-track { scroll-behavior: auto; }
  .hp-testi-btn,
  .hp-testi-dot::after { transition: none; }
  .hp-testi-card:hover { transform: none; }
}

.hp-testi-card {
  background: var(--off-white);                    /* light card background */
  border: 1px solid rgba(15, 76, 129, 0.07);       /* very faint border outline */
  border-radius: var(--radius-lg);                  /* large rounded corners */
  padding: clamp(1.375rem, 2.5vw, 2rem);            /* responsive inner padding */
  transition: 0.3s;                                   /* smooth animation for hover state */
  display: flex;                                       /* stacks rating/quote/patient info vertically */
  flex-direction: column;                              /* vertical stacking direction */
  height: 100%;                                          /* fills the grid cell so cards in a row match height */
}
.hp-testi-card:hover { border-color: rgba(200, 169, 110, 0.3); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* gold-tinted border, lift, and shadow on hover */

.hp-testi-stars,
.hp-testi-smile        { color: var(--gold); font-size: var(--fs-small); margin-bottom: var(--space-3); letter-spacing: 2px; } /* star/smiley rating row, gold color */
.hp-testi-smile        { display: flex; align-items: center; gap: 8px; } /* smiley variant: lays icons in a row */
.hp-testi-smile-rating { display: inline-flex; align-items: center; gap: 4px; } /* inner grouping of smiley icons */
.hp-testi-smile-icon {
  inline-size: 20px;                          /* icon width */
  block-size: 20px;                           /* icon height */
  flex: 0 0 auto;                              /* icon keeps its fixed size, doesn't grow/shrink in the flex row */
  fill: rgba(200, 169, 110, 0.12);            /* faint gold fill inside the icon shape */
  stroke: currentColor;                        /* icon outline uses the current gold text color */
  stroke-width: 1.8;                            /* outline thickness */
  stroke-linecap: round;                        /* rounded line endings on the icon strokes */
}

.hp-testi-quote-mark { font-family: var(--f-sub); font-size: var(--fs-h2); color: rgba(200, 169, 110, 0.2); line-height: 1; margin-bottom: 4px; } /* large faded decorative quotation mark */
.hp-testi-text       { font-family: var(--f-sub); font-style: italic; color: var(--body); line-height: 1.78; margin-bottom: var(--space-5); font-size: var(--fs-body-large); flex: 1; } /* the actual testimonial quote text, italicized, grows to fill available card space */

.hp-testi-patient     { display: flex; align-items: center; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid rgba(15, 76, 129, 0.07); margin-top: auto; } /* patient name/avatar row, pinned to bottom of card with a divider above it */
.hp-testi-avatar      { inline-size: 44px; block-size: 44px; background: var(--c3); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* circular avatar placeholder */
.hp-testi-avatar img  { inline-size: 75%; block-size: 75%; object-fit: contain; filter: brightness(0) invert(1); } /* avatar icon/image, recolored to solid white via filter */
.hp-testi-name        { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c2); } /* patient name text */
.hp-testi-detail      { font-size: var(--fs-small); color: var(--muted); margin-block-start: 2px; } /* secondary detail under the name, e.g. procedure/date */

.hp-testi-tag {
  margin-inline-start: auto;                     /* pushes the tag to the far right of the patient row */
  background: var(--pale);                        /* light tinted background */
  border: 1px solid rgba(15, 76, 129, 0.1);      /* faint border outline */
  color: var(--c3);                                /* accent text color */
  font-size: var(--fs-xs);                               /* small tag text size */
  padding: 4px 10px;                                /* tight padding for a compact tag/badge look */
  border-radius: 20px;                              /* fully rounded pill/badge shape */
  white-space: nowrap;                              /* keeps tag text on one line */
}


/* ==========================================================================
   12. CTA BAND
   Final call-to-action strip, dark background with primary action button.
   ========================================================================== */

/* Symmetric vertical padding, matched to About's .ab-cta-band: 56px up to 768px,
   80px on desktop. Previously this was asymmetric (larger at the bottom), which
   is what made Home's CTA band read differently from every other page's. */
.hp-cta-band    { padding-block: clamp(3.5rem, 1.25rem + 4.69vw, 5rem); } /* 56px at <=768, 80px at 1280 — same as About */
.hp-cta-glow    { position: absolute; inset-inline-end: -80px; inset-block-start: -80px; inline-size: 400px; block-size: 400px; background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); pointer-events: none; } /* faint decorative glow in the corner, non-interactive */
.hp-cta-inner   { display: grid; grid-template-columns: 1fr minmax(240px, auto); gap: var(--space-8); align-items: center; } /* text on the left, button block on the right (min 240px wide), vertically centered */
.hp-cta-sub     { color: rgba(255, 255, 255, 0.7); font-weight: var(--fw-light); font-size: var(--fs-body); } /* supporting text under the CTA heading, slightly faded white */
.hp-cta-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; } /* stacks CTA button(s) and note vertically, full width */
.hp-cta-note    { font-size: var(--fs-small); color: var(--white); text-align: center; } /* solid white, matching About's .ab-cta-note — the previous 0.4 alpha made it near-illegible on the dark band */



/* ==========================================================================
   14. KEYFRAMES
   ========================================================================== */

@keyframes hp-fadeUp {
  from { opacity: 0; transform: translateY(24px); } /* start: invisible, shifted down 24px */
  to   { opacity: 1; transform: translateY(0); }    /* end: fully visible, in its normal position */
}

@keyframes hp-fadeIn {
  from { opacity: 0; } /* start: fully invisible */
  to   { opacity: 1; } /* end: fully visible */
}

@keyframes hp-pulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(37, 211, 102, 0.40); } /* resting glow size at the start/end of each cycle */
  50%       { box-shadow: 0 6px 44px rgba(37, 211, 102, 0.65); } /* glow expands and brightens at the midpoint of each cycle */
}

/* hp-credRise removed: the credential card is now centred by flex rather than
   translateX(-50%), so the standard hp-fadeUp keyframe applies cleanly. */

@keyframes hp-slideRight {
  from { opacity: 0; transform: translateX(-20px); } /* start: invisible, shifted 20px to the left */
  to   { opacity: 1; transform: translateX(0); }     /* end: fully visible, in its normal position */
}


/* ==========================================================================
   15. RESPONSIVE OVERRIDES
   Breakpoints ordered from largest (min-width) to smallest (max-width).
   ========================================================================== */

@media (min-width: 576px) {
  .hero-actions { flex-direction: row; } /* CTA buttons sit side by side once there's enough width */
}

@media (min-width: 768px) {
  .hp-steps      { flex-direction: row; }   /* journey steps lay out horizontally on tablets and up */
  .hp-step-arrow { transform: none; margin: 0; } /* arrow resets to its default horizontal orientation */
}

@media (max-width: 1024px) {
  /* .hero-top no longer flattens to 1fr 1fr here. The reference holds its
     53.76 / 46.24 split all the way down to its single-column breakpoint, and
     the equal-column override was fighting that. (It also never actually
     produced 50/50 — see the minmax(0, …) note on .hero-top.) */
  .hp-cta-inner      { grid-template-columns: 1fr; gap: var(--space-6); } /* CTA band collapses to a single column */
  .hp-section-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); } /* section header stacks vertically instead of side by side */
}

/* Hero collapses to a single column at 900px, matching the reference's own
   breakpoint. It used to collapse at 768px, which left the 769–900px band in a
   two-column layout the reference renders as one. Only .hero-top moves to 900;
   the rest of the mobile hero overrides stay on the file's 768px breakpoint,
   because they are about phone ergonomics, not about the column count. */
@media (max-width: 900px) {
  .hero-top { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .hero-left       { order: 0; margin-top: 80px; } /* text block appears first once stacked */
  .hero-doctor-img { margin-top: 20px; }            /* nudge photo down once stacked */
}

@media (max-width: 768px) {
  .hero-left       { order: 0; margin-top: 25px; } /* text block appears first; the container owns the gutters now; nudged down 10px */
  /* NOTE: .hero-sub deliberately does NOT re-scope --hero-sub-size here.
     .hero-headline and .hero-sub are two halves of one sentence and must render
     at identical size/weight at every width. Both now read the single :root
     value. Re-adding a breakpoint override here would desynchronise them again. */
  /* No min-block-size any more: the panel is sized by the portrait's
     aspect-ratio. The shadow reserve that this rule used to have to protect is
     now carried by --hero-panel-gap's max() floor, so there is nothing here
     left to accidentally wipe. */
  .hero-right      { order: 1; } /* photo panel appears second */
  .hero-doctor-img { margin-top: 20px; } /* nudged down 10px on mobile; object-fit/object-position still live in the base rule */
  .hero-cred       { padding: 14px 24px; animation-delay: 0.6s; } /* card sits just inside the panel bottom, tighter padding, animates in sooner */
  /* .hero-trust no longer wraps: it is a marquee track that scrolls on one line
     at every width. flex-wrap/min-inline-size here would break the loop maths. */
  .trust-stat      { min-inline-size: 80px; } /* keeps each stat readable at narrow widths */

  /* Reassurance band: scrolling behaviour now comes from .hp-marquee, so the
     mobile-only overflow block and the arrow-button reveal are both gone. */
  .hp-re-band      { gap: var(--space-3); } /* tighter gap between label and items on mobile */

  /* Journey steps stack vertically with rotated arrows */
  .hp-steps        { flex-direction: column; align-items: center; } /* steps stack top to bottom instead of side by side */
  .hp-step         { inline-size: 100%; max-inline-size: 320px; padding: 0 0 var(--space-6); } /* each step takes full width (capped at 320px) with bottom spacing */
  .hp-step-arrow   { transform: rotate(90deg); margin: 4px 0; inline-size: 100%; text-align: center; } /* arrow rotates to point downward between stacked steps */

  .hp-cond-grid,
  .hp-approach-grid { grid-template-columns: 1fr; } /* condition and approach cards drop to a single column on mobile */

  .hp-sticky-wa    { inset-block-end: 5rem; inset-inline-end: 1.25rem; inline-size: 50px; block-size: 50px; } /* WhatsApp button moves up (clear of mobile nav bars) and shrinks slightly */
}

@media (max-width: 600px) {
  /* .hero-sub: no --hero-sub-size override — see note at the 768px breakpoint. */
  .hero-actions               { flex-direction: column; flex-wrap: nowrap; align-items: center; } /* CTA buttons stack vertically on small phones */
  .hero-actions a,
  .hero-actions button        { inline-size: 100%; justify-content: center; } /* buttons stretch to full width for easier tapping */
  /* .hero-trust: no 2-column grid here any more — it is a single-line marquee
     at every width, and grid-template-columns is inert on a non-grid element. */
  .hp-proc-row                { flex-direction: column; align-items: flex-start; } /* procedure pills stack vertically */
  .hp-pill                    { inline-size: 100%; text-align: center; } /* each pill stretches to full width */
}

@media (max-width: 375px) {
  /* .hero-sub: no --hero-sub-size override — see note at the 768px breakpoint. */
  /* .hero-right min-block-size removed — the portrait's aspect-ratio decides
     the panel height, so a fixed floor could only ever add dead space. */
  .hero-cred   { padding: 12px 16px; }     /* tighter credential card padding on very small phones */
}


/* ==========================================================================
   16. TEXT-WEIGHT OVERRIDES
   Grouped font-weight declarations, kept separate from the component
   blocks above so weight adjustments are easy to scan and tweak.
   ========================================================================== */

.hp-container,
.hp-section-sub,
.hero-body,
.hp-step-desc,
.hp-cond-desc,
.hp-approach-desc,
.hp-pathway-desc,
.hp-testi-text,
.hp-cta-sub,
.hp-re-item {
  font-weight: var(--fw-medium); /* standard body-text weight applied across all paragraph/description elements listed above */
}

/* NOTE: .hp-cta-h2 is deliberately NOT in this bold group. The closing CTA
   heading is semibold (600) across the whole site — see the .hp-cta-h2 rule
   above, matched to About's .ab-cta-h2. Adding it here would override that. */
.hp-section-h2,
.hero-headline,
.hero-sub,
.hp-step-title,
.hp-cond-title,
.hp-proc-h2,
.hp-approach-title,
.hp-pathway-title,
.hp-testi-name,
.trust-number,
.hero-cred-name {
  font-weight: var(--fw-bold); /* bold weight applied across all major headings listed above */
}

.hp-eyebrow-text,
.hp-testi-detail,
.hp-cond-aka,
.hp-testi-tag,
.hp-pill,
.hp-cond-link,
.hp-pathway-link {
  font-weight: var(--fw-semibold); /* semi-bold weight applied across small labels/links listed above */
}

.btn-primary,
.btn-whatsapp,
.hp-btn-wa,
.btn-outline-dark,
.hp-btn-outline,
.hp-btn-white {
  font-weight: var(--fw-bold); /* extra-bold weight applied to all button labels, overriding the 700 set in section 3 */
}

.hp-testi-quote-mark,
.hp-re-label {
  font-weight: var(--fw-semibold); /* semi-bold weight applied to the quote mark and reassurance band label */
}/* End custom CSS */