:root{ --theme-ink:#0E7490; }

/* ==========================================================================
   Dr. Vicky Jain — project overrides
   Loaded AFTER main.css. Put every custom change here, never in main.css,
   so the theme's compiled CSS stays clean and upgradable.
   ========================================================================== */

/* --- Hero: mobile framing -------------------------------------------------
   hero-bg-*.jpg are 1920x841 (2.28:1). On a tall portrait viewport `cover`
   scales by height, so only a narrow horizontal slice shows. Default 50%
   lands on empty background; the subject sits nearer 64%.
   Proper fix is a dedicated portrait crop per slide (see HOMEPAGE-IMAGES).
   -------------------------------------------------------------------------- */
@media (max-width: 991px){
  /* slides still using the landscape file need the subject nudged into frame;
     slides with a -mobile.jpg portrait crop are already centred. */
  .hero-section-3 .item-img img{
    object-position: 64% center;
  }
  .hero-section-3 .item-img picture source + img,
  .hero-section-3 .item-img img[src*="-mobile"]{
    object-position: center center;
  }
  /* keep headline legible where it now overlaps a busy background */
  .hero-section-3 .hero-content{
    position: relative;
    z-index: 3;
  }
  .hero-section-3 .hero-content::before{
    content:"";
    position:absolute;
    inset:-24px -20px;
    background:linear-gradient(180deg,
      rgba(239,251,255,.90) 0%,
      rgba(239,251,255,.68) 55%,
      rgba(239,251,255,.50) 100%);
    z-index:-1;
    pointer-events:none;
  }
}

/* --- Hero: stop the eyebrow line clipping on narrow screens --------------- */
@media (max-width: 575px){
  .hero-section-3 .hero-content .sub-title,
  .hero-section-3 .sub-title{
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* --- Hero: credential line (slide 1) ------------------------------------- */
.hero-section-3 .hero-cred{
  margin-top:-6px;
  margin-bottom:26px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.2px;
  color:var(--header);
}
.hero-section-3 .hero-cred span{
  display:inline-block;
  margin:0 8px;
  color:var(--theme-ink);
  font-weight:400;
}

/* --- Hero: secondary text CTA (replaces the theme's video popup) ---------- */
.hero-section-3 .hero-secondary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-left:26px;
  font-size:15px;
  font-weight:500;
  color:var(--header);
  text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid rgba(33,33,33,.25);
  transition:color .35s ease, border-color .35s ease, gap .35s ease;
}
.hero-section-3 .hero-secondary:hover{
  color:var(--theme-ink);
  border-color:var(--theme-ink);
  gap:14px;
}
.hero-section-3 .hero-secondary i{ font-size:13px; }

/* --- Hero: the new headlines run longer than the theme's placeholder copy.
       Constrain the text column instead of hard-coding <br> positions, so it
       reflows correctly at every width. --------------------------------------- */
.hero-section-3 .hero-title{
  font-size:clamp(32px, 3.6vw, 56px);
  line-height:1.1;
  max-width:13ch;
}
.hero-section-3 .hero-text{ max-width:46ch; }
.hero-section-3 .hero-cred{ max-width:none; white-space:nowrap; }
@media (min-width:1600px){
  .hero-section-3 .hero-title{ max-width:14ch; }
}
@media (max-width: 991px){
  .hero-section-3 .hero-secondary{ margin-left:0; margin-top:14px; }
  .hero-section-3 .hero-button{ flex-wrap:wrap; }
  .hero-section-3 .hero-cred{ font-size:13px; white-space:normal; }
}

/* --- Hero: credential cards (replaced the theme's procedure tiles) --------- */
.hero-section-3 .hero-icon-wrap .icon-box .icon{
  display:flex; align-items:center; justify-content:center;
}
.hero-section-3 .hero-icon-wrap .icon-box .icon i{
  font-size:26px; color:#fff; line-height:1;
}
.hero-section-3 .hero-icon-wrap .icon-box .title{
  line-height:1.35;
}
.hero-section-3 .hero-icon-wrap .icon-box .title span{
  display:block;
  font-size:13px;
  font-weight:400;
  opacity:.82;
  margin-top:4px;
  letter-spacing:.2px;
}

/* ==========================================================================
   Hero: fit the viewport
   The theme sizes the hero from its content and pads it with a fixed
   200px/185px, which was tuned for a 1920x1080 monitor. Everywhere else the
   hero overflowed — 1.34x at 1366x768, 1.81x on a 375x667 phone. Below, the
   slide becomes viewport-height driven and the vertical rhythm scales with
   available height instead of being hard-coded.
   svh (not vh) so mobile browser chrome does not push the fold off-screen.
   ========================================================================== */
.hero-3 .hero-slider-items{
  min-height:100vh;                 /* fallback for older engines */
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(108px, 15vh, 200px);
  padding-bottom:clamp(20px, 5vh, 120px);
}

/* Breathing room inside the copy block, tied to height rather than fixed px */
.hero-section-3 .hero-text{ margin-top:clamp(12px, 2.4vh, 25px); }
.hero-section-3 .hero-button{ margin-top:clamp(18px, 3.4vh, 40px); }
.hero-section-3 .hero-cred{ margin-bottom:clamp(14px, 2.6vh, 26px); }

/* Short laptops (1366x768 and the 13" class) — the worst offenders */
@media (min-width:992px) and (max-height:820px){
  .hero-3 .hero-content .hero-title{ font-size:clamp(38px, 4.4vh, 56px); }
  .hero-section-3 .hero-text{ font-size:15px; }
  .hero-3 .hero-slider-items{ padding-top:clamp(104px, 13vh, 150px); }
}

/* Phones: the two credential cards stacked were 304px on their own.
   Side by side they cost ~96px and still read. */
@media (max-width:575px){
  .hero-section-3 .hero-icon-wrap{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .hero-section-3 .hero-icon-wrap .icon-box{ padding:12px 10px; }
  .hero-section-3 .hero-icon-wrap .icon-box .title{ font-size:13px; line-height:1.3; }
  .hero-section-3 .hero-icon-wrap .icon-box .title span{ font-size:11px; margin-top:2px; }
  .hero-section-3 .hero-icon-wrap .icon-box .icon i{ font-size:18px; }
  .hero-section-3 .hero-icon-wrap .icon-box > .content > .icon{ display:none; }
}

/* Very short viewports (landscape phones, 667px-tall phones) */
@media (max-height:700px){
  .hero-3 .hero-slider-items{ padding-top:clamp(92px, 13vh, 120px); padding-bottom:16px; }
  .hero-section-3 .hero-cred{ margin-bottom:10px; }
}

/* --- Hero fit, pass 2: close the remaining overflow -----------------------
   Measured after pass 1: 1366x768 +18px, 390x844 +25px, 375x667 +141px.
   Trimmed where it costs the least legibility, in that order.
   -------------------------------------------------------------------------- */

/* Short laptops: 18px was all that remained */
@media (min-width:992px) and (max-height:820px){
  .hero-3 .hero-slider-items{ padding-bottom:clamp(16px, 3vh, 60px); }
}

/* All phones: the credential cards were the cheapest 50px on the page */
@media (max-width:575px){
  .hero-section-3 .hero-icon-wrap .icon-box{ padding:10px 9px; }
  .hero-section-3 .hero-icon-wrap .icon-box .icon i{ font-size:16px; }
  .hero-section-3 .hero-sub{ margin-bottom:6px; }
  .hero-section-3 .hero-button{ gap:10px; }
  /* The longest eyebrow (slide 1) overran the right edge on phones: a fixed
     42px dash + 14px gap left too little width for the uppercase + tracked
     text, which clipped. Tighten type/gap and top-align the dash so the text
     wraps inside the column instead of overflowing. (Selector mirrors
     main.css's `.hero-3 .hero-content X` specificity — see note below.) */
  .hero-3 .hero-content .hero-sub{ align-items:flex-start; gap:10px; font-size:13px; letter-spacing:.08em; }
  .hero-3 .hero-content .hero-sub::before{ flex:0 0 32px; width:32px; margin-top:7px; }
}

/* Short phones (SE / 8 class, and landscape).
   NOTE: selectors below mirror the theme's own `.hero-3 .hero-content X`
   specificity (0,3,0). Anything written as `.hero-section-3 X` loses the
   cascade to main.css and silently does nothing.
   At 667px tall the hero cannot carry a four-line headline, a paragraph,
   two CTAs AND the credential cards. The cards give way: they are supporting
   proof, they repeat further down the page, and the headline plus CTA are
   what the visitor came for. */
@media (max-width:767px) and (max-height:730px){
  .hero-3 .hero-slider-items{
    padding-top:70px;
    padding-bottom:12px;
  }
  .hero-3 .hero-content .hero-title{ font-size:27px; line-height:1.06; }
  .hero-3 .hero-content .hero-text{
    font-size:14.5px;
    line-height:1.45;
    margin-top:10px;
  }
  .hero-3 .hero-content .hero-button{ margin-top:14px; }
  .hero-3 .hero-content .hero-cred{ font-size:12px; margin-bottom:6px; }
  .hero-3 .hero-content .hero-secondary{ margin-top:6px; }
  .hero-3 .hero-slider-items .hero-icon-wrap{ display:none; }
}

/* Taller phones (390x844 class) keep the credential cards, but the theme's
   card padding plus a stacked icon made the pair ~200px and pushed the hero
   77px past the fold. Drop the icon and tighten the type: the card is a
   credential, and the words carry it without a glyph above them. */
@media (max-width:575px) and (min-height:731px){
  .hero-3 .hero-slider-items .hero-icon-wrap{ gap:8px; }
  .hero-3 .hero-slider-items .hero-icon-wrap .icon-box{ padding:10px 9px; }
  .hero-3 .hero-slider-items .hero-icon-wrap .icon-box .icon{ display:none; }
  .hero-3 .hero-slider-items .hero-icon-wrap .icon-box .title{
    font-size:12px; line-height:1.25;
  }
  .hero-3 .hero-slider-items .hero-icon-wrap .icon-box .title span{
    font-size:10.5px; margin-top:2px;
  }
}

/* --- Hero: stop the header covering the subject's head ---------------------
   The header is position:absolute over the hero, and the theme's image box
   starts at top:0 — so the header's solid bar sat on the top ~100px of every
   photo, which is exactly where each subject's head is. Start the image box
   at the header's bottom edge instead. Heights: desktop nav (>=1200px) is
   100px; below that the mobile top bar is ~72px. */
:root{ --hdr-h:72px; }
@media (min-width:1200px){ :root{ --hdr-h:100px; } }
.hero-3 .item-img{
  top:var(--hdr-h);
  height:calc(100% - var(--hdr-h));
}

/* Phones 731px+ tall: top padding was clamp(108px,15vh,...) = ~121px against a
   72px header — ~50px of dead space above the eyebrow. Tie it to the measured
   header instead. Closed a 37px overflow at 375x812 and 11px at 390x844. */
@media (max-width:767px) and (min-height:731px){
  .hero-3 .hero-slider-items{
    padding-top:calc(var(--hdr-h) + 22px);
    padding-bottom:20px;
  }
}

/* --- Hero cards: legibility ----------------------------------------------
   Theme default on desktop is rgba(255,255,255,.1) — 10% white behind white
   text, which disappears over light photography (scrubs, clinic walls).
   A deep teal derived from the brand cyan, frosted, holds ~6:1 against white
   text even over a pure-white photo region. Mobile keeps the theme's solid
   cyan, which was already readable. */
@media (min-width:1200px){
  .hero-3 .hero-icon-wrap .icon-box{
    background:rgba(4, 38, 56, .72);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 12px 32px -12px rgba(2, 20, 32, .45);
  }
}
.hero-3 .hero-icon-wrap .icon-box .content .title span{ opacity:.9; }

/* --- Hero cards: size & overlap ------------------------------------------
   Theme default: max-width 690px anchored right:50px, so on desktop the left
   card reached ~x=700 and sat on top of the button row / "Consult" link.
   Narrower box + smaller cards keeps the pair clearly over the photo, right
   of the text column, at every desktop width. Copy is now single-line titles
   (shortened in markup), so cards stay short and even. */
@media (min-width:992px){
  .hero-3 .hero-icon-wrap{
    max-width:clamp(400px, 36vw, 500px);
    right:48px;
    bottom:40px;
    gap:14px;
  }
  .hero-3 .hero-icon-wrap .icon-box{
    padding:14px 16px;
    border-radius:12px;
  }
  .hero-3 .hero-icon-wrap .icon-box .content{ margin-top:12px; }
  .hero-3 .hero-icon-wrap .icon-box .content .title{ font-size:16px; line-height:1.25; }
  .hero-3 .hero-icon-wrap .icon-box .content .title span{ font-size:12.5px; margin-top:2px; }
  .hero-3 .hero-icon-wrap .icon-box .content .icon{ width:34px; height:34px; flex:0 0 34px; }
  .hero-3 .hero-icon-wrap .icon-box .content .icon i{ font-size:12px; }
}
/* 992–1199: cards are still absolute over the image but the text column is
   closer, so pull the box in a touch more. */
@media (min-width:992px) and (max-width:1199px){
  .hero-3 .hero-icon-wrap{ max-width:clamp(380px, 40vw, 460px); bottom:32px; }
}

/* ==========================================================================
   Hero refactor — reference direction (image-dominant, clean trust row,
   no floating cards, dot pagination). Overrides the theme's hero-3 content.
   ========================================================================== */

.hero-3 .hero-content{ max-width:560px; }

/* Eyebrow: horizontal rule prefix (was a vertical bar), calmer, uppercase */
.hero-3 .hero-content .hero-sub{
  border-left:0;
  padding-left:0;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5b6b78;
  margin-bottom:22px;
}
.hero-3 .hero-content .hero-sub::before{
  content:"";
  width:42px; height:1px; flex:0 0 42px;
  background:var(--theme);
}
/* Phones: the eyebrow's mobile treatment was defined earlier in the file but
   this base rule (later in source) overrode it, so on phones it fell back to
   the 15px desktop size with a fixed 42px dash and no room to spare — on a slow
   load, before the stacked layout settled, the long uppercase line could
   briefly overflow the viewport edge. Re-assert the compact treatment here so
   it wins, and let it wrap as a safety valve so it can never clip. */
@media (max-width:575px){
  .hero-3 .hero-content .hero-sub{ gap:10px; font-size:13px; letter-spacing:.08em; flex-wrap:wrap; }
  .hero-3 .hero-content .hero-sub::before{ flex:0 0 30px; width:30px; }
}

/* Headline: 54–62px desktop, up to 3 lines */
.hero-3 .hero-content .hero-title{
  font-size:clamp(40px, 4.1vw, 60px);
  line-height:1.1;
  letter-spacing:-.01em;
  max-width:12ch;
}

/* Body: generous gap, calm measure */
.hero-3 .hero-content .hero-text{
  font-size:17px;
  line-height:1.7;
  max-width:500px;
  margin-top:26px;
}

/* Trust row: inline credentials with thin dividers — NOT cards */
.hero-3 .hero-content .hero-trust{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:34px;
  flex-wrap:wrap;
}
.hero-3 .hero-content .hero-trust__item{
  display:flex;
  align-items:center;
  gap:11px;
  position:relative;
}
.hero-3 .hero-content .hero-trust__item:not(:last-child)::after{
  content:"";
  position:absolute; right:-12px; top:50%;
  transform:translateY(-50%);
  width:1px; height:30px;
  background:rgba(3,175,229,.28);
}
.hero-3 .hero-content .hero-trust__item i{
  font-size:20px; color:var(--theme-ink); flex:0 0 auto;
}
.hero-3 .hero-content .hero-trust__item strong{
  display:block; font-size:15px; font-weight:700;
  color:var(--header); line-height:1.2;
}
.hero-3 .hero-content .hero-trust__item span{
  display:block; font-size:13px; color:#6a7883; line-height:1.2;
}

/* CTA row spacing */
.hero-3 .hero-content .hero-button{ margin-top:38px; }

/* Dot pagination: subtle, bottom-centre (replaces the big arrows) */
.hero-3 .hero-dots{
  position:absolute; left:0; right:0; bottom:26px;
  display:flex; justify-content:center; gap:9px; z-index:6;
}
.hero-3 .hero-dots .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:99px;
  background:var(--theme); opacity:.3;
  transition:opacity .3s ease, width .3s ease;
}
.hero-3 .hero-dots .swiper-pagination-bullet-active{
  opacity:1; width:26px;
}

/* Mobile: trust row wraps to two rows, tighter */
@media (max-width:575px){
  .hero-3 .hero-content .hero-trust{ gap:14px 20px; margin-top:24px; }
  .hero-3 .hero-content .hero-trust__item:not(:last-child)::after{ display:none; }
  .hero-3 .hero-content .hero-button{ margin-top:26px; }
}

/* Short phones (SE / 8 / landscape): the stacked trust row is ~129px tall and
   overflowed the fold. Collapse it to a compact inline row (icon + bold label
   only) so the CTAs and dots stay visible. */
@media (max-width:767px) and (max-height:730px){
  .hero-3 .hero-content .hero-trust{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
    margin-top:16px;
  }
  .hero-3 .hero-content .hero-trust__item{ gap:7px; }
  .hero-3 .hero-content .hero-trust__item span{ display:none; }
  .hero-3 .hero-content .hero-trust__item strong{ font-size:13px; }
  .hero-3 .hero-content .hero-trust__item i{ font-size:15px; }
  .hero-3 .hero-content .hero-button{ margin-top:16px; }
}

/* --- Hero: lock copy to a consistent top across slides --------------------
   The three slides have different content heights (slide 1 has the trust row
   + a 4-line headline; slide 3 is a 2-line headline). Vertically centring
   them made the eyebrow/headline start at a different Y on each slide, so the
   copy appeared to jump when flipping slides. Top-anchoring at a fixed offset
   keeps the eyebrow and headline in the same place on all three. Desktop only;
   mobile keeps its own tuned layout. */
@media (min-width:992px){
  .hero-3 .hero-slider-items{
    justify-content:flex-start;
    padding-top:clamp(120px, 18vh, 200px);
  }
}
/* Short desktop/laptop heights: pull the anchor up so the tallest slide
   (slide 1, ~557px of copy) still clears the fold. */
@media (min-width:992px) and (max-height:820px){
  .hero-3 .hero-slider-items{ padding-top:clamp(104px, 14vh, 150px); }
}

/* ==========================================================================
   Featured Procedures marquee — dark band, per-procedure icons, star dividers
   Continuous, slow, seamless, pause on hover/focus, reduced-motion safe.
   ========================================================================== */
.dvj-marquee-section{
  background:#14181d;                       /* dark charcoal band */
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dvj-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.dvj-marquee__track{
  display:flex; width:max-content;
  animation:dvj-marquee-scroll 60s linear infinite;
  will-change:transform;
}
.dvj-marquee:hover .dvj-marquee__track,
.dvj-marquee:focus-within .dvj-marquee__track{ animation-play-state:paused; }

.dvj-marquee__group{
  display:flex; align-items:center; flex:0 0 auto;
  list-style:none; margin:0; padding:0;
}
.dvj-marquee__group li{ display:flex; align-items:center; }
.dvj-marquee__group a{
  position:relative;
  display:inline-flex; align-items:center; gap:11px;
  height:64px; padding:0 30px;
  font-size:15px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;                               /* white text on dark band */
  text-decoration:none; white-space:nowrap;
  transition:color .3s ease, opacity .3s ease;
}
/* brand-blue star divider between items (matches the reference band) */
.dvj-marquee__group a::after{
  content:"\f005";                          /* fa-star */
  font-family:"Font Awesome 6 Pro"; font-weight:900;
  font-size:9px; color:var(--theme);
  position:absolute; right:0; top:50%; transform:translate(50%,-50%);
}
.dvj-marquee__ico{ font-size:15px; color:var(--theme); flex:0 0 auto; }
.dvj-marquee__group a:hover{ color:var(--theme); }
.dvj-marquee__group a:focus-visible{
  outline:2px solid var(--theme); outline-offset:-4px; border-radius:6px;
}

@keyframes dvj-marquee-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

@media (max-width:575px){
  .dvj-marquee__group a{ height:54px; padding:0 22px; font-size:13px; gap:9px; letter-spacing:.07em; }
  .dvj-marquee__ico{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .dvj-marquee{ -webkit-mask-image:none; mask-image:none; }
  .dvj-marquee__track{ animation:none; overflow-x:auto; scrollbar-width:thin; }
  .dvj-marquee__group[aria-hidden="true"]{ display:none; }
}

/* ==========================================================================
   About Dr. Vicky Jain — two images + credential columns (no cards/badges)
   ========================================================================== */
.dvj-about-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.dvj-about-media__img{
  margin:0;
  aspect-ratio:615 / 684;
  border-radius:16px;
  overflow:hidden;
  background:#e8f4fb;
}
.dvj-about-media__img img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Content spacing (generous, per brief) */
.about-section-three .about-content .section-title h2{ margin-top:16px; }
.about-section-three .about-content .about-text{ margin-top:0; }
.about-section-three .about-content .about-text + .about-text{ margin-top:14px; }
.about-section-three .about-content .about-text:first-of-type{ margin-top:30px; }

/* Credential columns with subtle vertical dividers — not cards */
.dvj-about-creds{
  display:flex;
  gap:0;
  margin-top:34px;
}
.dvj-about-creds__item{
  padding:0 26px;
  position:relative;
}
.dvj-about-creds__item:first-child{ padding-left:0; }
.dvj-about-creds__item:not(:first-child)::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:1px; background:rgba(3,175,229,.22);
}
.dvj-about-creds__item strong{
  display:block;
  font-family:"Urbanist",sans-serif;
  font-size:19px; font-weight:700; line-height:1.2;
  color:var(--header);
}
.dvj-about-creds__item span{
  display:block;
  font-size:13.5px; color:#5f6d78; line-height:1.35;
  margin-top:5px; max-width:16ch;
}

.about-section-three .about-content .about-button{ margin-top:36px; }

/* Tablet / mobile */
@media (max-width:991px){
  .dvj-about-media{ margin-bottom:36px; }
}
@media (max-width:575px){
  .dvj-about-media{ gap:14px; }
  .dvj-about-media__img{ border-radius:12px; }
  .dvj-about-creds{ flex-wrap:wrap; gap:18px 0; }
  .dvj-about-creds__item{ flex:0 0 50%; padding:0 18px; }
  .dvj-about-creds__item:nth-child(1){ padding-left:0; }
  .dvj-about-creds__item:nth-child(odd)::before{ display:none; }
  .dvj-about-creds__item:nth-child(3){ flex:0 0 100%; padding-left:0; margin-top:4px; }
  .dvj-about-creds__item:nth-child(3)::before{ display:none; }
}

/* ==========================================================================
   About section — reference polish (icons, taller equal images, blue accent)
   ========================================================================== */
/* Taller, more prominent images — kept equal in size, with soft depth */
.dvj-about-media__img{
  aspect-ratio:7 / 10;
  border-radius:18px;
  box-shadow:0 24px 48px -24px rgba(9,54,84,.35);
}

/* Eyebrow icon (target dot) */
.about-section-three .about-content .sub-title{ display:inline-flex; align-items:center; gap:9px; }
.about-section-three .about-content .sub-title i{ color:var(--theme-ink); font-size:15px; }

/* Blue accent period on the headline */
.about-section-three .about-content .split-title .dvj-dot{
  color:var(--theme-ink);
  font-family:"Instrument Serif",serif; font-style:italic;
}

/* Credentials: small blue icon + text, subtle dividers (not cards) */
.dvj-about-creds__item{
  display:flex; align-items:flex-start; gap:12px;
  padding:0 24px;
}
.dvj-about-creds__item:first-child{ padding-left:0; }
.dvj-about-creds__item > i{
  color:var(--theme-ink); font-size:20px; line-height:1; margin-top:3px; flex:0 0 auto;
}
.dvj-about-creds__txt strong{
  display:block; font-family:"Urbanist",sans-serif;
  font-size:18px; font-weight:700; line-height:1.2; color:var(--header);
}
.dvj-about-creds__txt span{
  display:block; font-size:13px; color:#5f6d78; line-height:1.35; margin-top:5px; max-width:15ch;
}

@media (max-width:575px){
  .dvj-about-media__img{ aspect-ratio:3 / 4; border-radius:14px; }
  .dvj-about-creds__item{ padding:0 14px; gap:9px; }
  .dvj-about-creds__item > i{ font-size:17px; }
}

/* About: open up the gap between the images column and the content column
   (was a tight 24px, so the text hugged the photos). */
@media (min-width:992px){
  .about-section-three .about-content{ padding-left:clamp(32px, 4.2vw, 76px); }
}
@media (min-width:992px) and (max-width:1199px){
  .about-section-three .about-content{ padding-left:32px; }
}

/* Slide 1 (consultation image): stronger pale-blue scrim on the LEFT so the
   copy stays readable over the monitor, fading to clear over Dr. Jain on the
   right. Scoped to slide 1 only — slides 2 & 3 are untouched. */
.hero-3 .item-img.hero-img--consult::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(233,244,251,.94) 0%,
    rgba(233,244,251,.86) 26%,
    rgba(233,244,251,.55) 46%,
    rgba(233,244,251,0) 64%);
}
@media (max-width:991px){
  .hero-3 .item-img.hero-img--consult::after{
    background:linear-gradient(180deg,
      rgba(233,244,251,.93) 0%,
      rgba(233,244,251,.82) 44%,
      rgba(233,244,251,.34) 64%,
      rgba(233,244,251,0) 100%);
  }
}

/* ==========================================================================
   Services (stacked cards) — category label + CTA link added to each card
   ========================================================================== */
.service-section-three .service-box-items .content .service-cat{
  display:inline-block;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--theme-ink);
  margin:6px 0 12px;
}
.service-section-three .service-box-items .content .service-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px;
  font-size:15px; font-weight:600; color:var(--header);
  text-decoration:none;
  transition:gap .3s ease, color .3s ease;
}
.service-section-three .service-box-items .content .service-cta:hover{ color:var(--theme-ink); gap:13px; }
.service-section-three .service-box-items .content .service-cta i{ font-size:13px; color:var(--theme-ink); }
@media (max-width:575px){
  .service-section-three .service-box-items .content .service-cta{ margin-top:18px; font-size:14px; }
}

/* Services stacked cards: trim height so all 6 fit within the pinned stack
   (they were ~617px; the pin offsets are now tighter — see main.js). */
.service-section-three .service-box-items{ padding:22px; }
.service-section-three .service-box-items .thumb img{
  height:430px; object-fit:cover; width:100%;
}
.service-section-three .service-box-items .content{ padding:8px 26px 8px 12px; }
.service-section-three .service-box-items .content .service-cat{ margin:2px 0 10px; }
.service-section-three .service-box-items .content p{ margin-bottom:0; }
.service-section-three .service-box-items .content ul{ margin:16px 0 0; }
.service-section-three .service-box-items .content ul li{ margin-bottom:8px; }
.service-section-three .service-box-items .content .service-cta{ margin-top:18px; }
@media (max-width:991px){
  .service-section-three .service-box-items .thumb img{ height:auto; }
}

/* ==========================================================================
   "Your Surgical Journey" (redesigned process section) — light, conversion-led
   ========================================================================== */
.journey-section{
  background:#eaf5fd url("../img/home-3/process-bg-soft.jpg") center/cover no-repeat;
}
.journey-section .section-title .sub-title{ color:var(--theme-ink); }
.journey-section .section-title .sub-title i{ color:var(--theme-ink); margin-right:7px; font-size:14px; }
.journey-section .section-title h2{ color:var(--header); max-width:22ch; margin-inline:auto; }
.journey-section .journey-intro{
  max-width:62ch; margin:18px auto 0; color:var(--text); font-size:17px; line-height:1.7;
}

/* Steps: three across, subtle connecting line, small number */
.journey-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  margin:clamp(40px,5vw,66px) auto clamp(44px,5vw,70px);
  max-width:1040px;
}
.journey-step{ position:relative; }
.journey-step__num{
  display:block; font-family:"Instrument Serif",serif; font-style:italic;
  font-size:42px; line-height:1; color:var(--theme-ink); margin-bottom:14px;
}
.journey-step__title{ font-size:20px; font-weight:700; color:var(--header); margin-bottom:10px; }
.journey-step p{ color:var(--text); font-size:15px; line-height:1.65; max-width:36ch; margin:0; }
.journey-step:not(:last-child)::after{
  content:""; position:absolute; top:22px; right:-30px; width:48px; height:1px;
  background:linear-gradient(90deg, rgba(3,175,229,.55), rgba(3,175,229,0));
}

/* Consultation: form (left ~44%) + image (right) */
.journey-consult{
  display:grid; grid-template-columns:44% 1fr; gap:clamp(24px,3vw,44px);
  align-items:stretch;
}
.journey-consult__form{
  background:#fff; border:1px solid rgba(3,175,229,.16);
  box-shadow:0 26px 60px -34px rgba(9,54,84,.28);
  border-radius:20px; padding:clamp(24px,2.6vw,38px);
}
.journey-consult__title{ font-size:24px; font-weight:700; color:var(--header); margin-bottom:8px; }
.journey-consult__lead{ color:var(--text); font-size:15px; line-height:1.6; margin-bottom:22px; }
.journey-consult__form .form-clt{ position:relative; }
.journey-consult__form input,
.journey-consult__form textarea,
.journey-consult__form .form-control{
  width:100%; background:#f6fbfe; border:1px solid rgba(3,175,229,.16);
  border-radius:10px; padding:13px 16px; font-size:15px; color:var(--header);
  transition:border-color .25s, background .25s;
}
.journey-consult__form textarea{ min-height:104px; resize:vertical; }
.journey-consult__form input::placeholder,
.journey-consult__form textarea::placeholder{ color:#8a97a1; }
.journey-consult__form input:focus,
.journey-consult__form textarea:focus{ outline:none; border-color:var(--theme-ink); background:#fff; }
.journey-consult__form .input-group.date{ position:relative; }
.journey-consult__form .input-group.date input{ padding-right:44px; }
.journey-consult__form .input-group-addon{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--theme-ink); pointer-events:none;
}
.journey-consult__form .contact-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--theme-ink); color:#fff; border:0; border-radius:10px;
  padding:14px 28px; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .3s ease, gap .3s ease;
}
.journey-consult__form .contact-btn:hover{ background:#0B5F77; gap:14px; }
.journey-consult__media{
  border-radius:20px; overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(9,54,84,.28);
}
.journey-consult__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Responsive: stack; mobile order = image, then form */
@media (max-width:991px){
  .journey-steps{ grid-template-columns:1fr; gap:26px; max-width:520px; }
  .journey-step:not(:last-child)::after{ display:none; }
  .journey-consult{ display:flex; flex-direction:column; }
  .journey-consult__media{ order:1; aspect-ratio:16/11; }
  .journey-consult__form{ order:2; }
}

/* --- Journey form: labelled grid, dropdowns, phone country code (ref match) --- */
.journey-form .jf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; }
.journey-form .jf-field{ display:flex; flex-direction:column; min-width:0; }
.journey-form .jf-full{ grid-column:1 / -1; }
.journey-form .jf-field label{
  font-size:13px; font-weight:600; color:var(--header); margin-bottom:7px; letter-spacing:.01em;
}
.journey-form .jf-req{ color:#e5484d; margin-left:1px; }
.journey-form select{
  width:100%; background:#f6fbfe; border:1px solid rgba(3,175,229,.16);
  border-radius:10px; padding:13px 40px 13px 16px; font-size:15px; color:var(--header);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2303AFE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  transition:border-color .25s, background-color .25s;
}
.journey-form select:focus{ outline:none; border-color:var(--theme-ink); background-color:#fff; }
.journey-form .jf-phone{ display:flex; gap:8px; }
.journey-form .jf-phone .jf-cc{ flex:0 0 88px; width:88px; padding:13px 26px 13px 12px; background-position:right 9px center; }
.journey-form .jf-phone input{ flex:1; min-width:0; }
.journey-form .input-group.date{ display:block; position:relative; }
.journey-form .input-group.date input{ width:100%; padding-right:44px; }
.journey-form .contact-btn{ width:100%; justify-content:center; margin-top:2px; }

/* image is now landscape (Dr. Jain consultation) — fill the column */
.journey-consult__media img{ object-position:center; }
@media (max-width:575px){
  .journey-form .jf-grid{ grid-template-columns:1fr; }
  .journey-form .jf-phone .jf-cc{ flex-basis:84px; width:84px; }
}

/* ==========================================================================
   Core Expertise — tabbed pillars (image + tablist), accessible
   ========================================================================== */
.pillar-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"media head" "media tabs" "media panels";
  column-gap:clamp(28px,4vw,60px);
  align-items:start;
}
.pillar-media-wrap{ grid-area:media; align-self:start; }
.pillar-head{ grid-area:head; }
.pillar-tabs{ grid-area:tabs; }
.pillar-panels{ grid-area:panels; }

/* Image stack — fixed aspect so no layout shift, one visible at a time */
.pillar-media{
  position:relative; aspect-ratio:688 / 901;
  border-radius:18px; overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(9,54,84,.28);
}
.pillar-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .45s ease;
}
.pillar-img.is-active{ opacity:1; }

.pillar-head .split-title{ margin-top:14px; }
.pillar-intro{ color:var(--text); font-size:16px; line-height:1.7; margin:16px 0 0; max-width:52ch; }

/* Tabs */
.pillar-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 24px; }
.pillar-tab{
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.3;
  color:var(--header); background:#eaf5fd;
  border:1px solid rgba(3,175,229,.2); border-radius:99px;
  padding:11px 20px; cursor:pointer; text-align:left; white-space:normal;
  transition:background .3s, color .3s, border-color .3s;
}
.pillar-tab:hover{ border-color:var(--theme-ink); }
.pillar-tab.is-active{ background:var(--theme-ink); color:#fff; border-color:var(--theme-ink); font-weight:700; }
.pillar-tab:focus-visible{ outline:2px solid var(--theme); outline-offset:3px; }

/* Panels */
.pillar-panel[hidden]{ display:none; }
.pillar-panel h3{ font-size:24px; font-weight:700; color:var(--header); margin-bottom:12px; }
.pillar-panel > p{ color:var(--text); font-size:16px; line-height:1.7; margin-bottom:20px; max-width:52ch; }
.pillar-procs{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
.pillar-procs li{ display:flex; align-items:center; gap:9px; color:var(--header); font-size:15px; }
.pillar-procs li img{ width:13px; height:13px; flex:0 0 auto; }
@media (prefers-reduced-motion:reduce){ .pillar-img{ transition:none; } }

/* Mobile: heading -> tabs -> image -> panel */
@media (max-width:991px){
  .pillar-layout{ grid-template-columns:1fr; grid-template-areas:"head" "tabs" "media" "panels"; }
  .pillar-media-wrap{ max-width:460px; margin:0 auto 6px; width:100%; }
  .pillar-media{ margin-top:8px; }
}
@media (max-width:575px){
  .pillar-procs{ grid-template-columns:1fr; gap:9px; }
  .pillar-tab{ font-size:14px; padding:10px 16px; }
}

/* --- Testimonials: text-only cards ----------------------------------------
   Live site provides verbatim patient reviews but no customer photos, so the
   cards drop the image slides and client-img; identity shows as an initial
   avatar (brand-blue) plus name + procedure. Swiper carousel unchanged.
   -------------------------------------------------------------------------- */
.testimonial-section-three .testimonial-box-items-3.testimonial-text-only{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 36px;
  border-radius: 20px;
  background: var(--white, #fff);
  border: 1px solid rgba(3,175,229,.14);
  box-shadow: 0 18px 40px rgba(3,175,229,.06);
}
.testimonial-section-three .testimonial-text-only .quote-icon{
  margin: 0;
}
.testimonial-section-three .testimonial-text-only .quote-icon img{
  width: 44px;
  height: auto;
  opacity: .9;
}
.testimonial-section-three .testimonial-text-only .text{
  flex: 1 0 auto;
  margin: 0;
  text-transform: none;
  color: var(--header, #212121);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
}
.testimonial-section-three .testimonial-text-only .client-info{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(3,175,229,.12);
}
.testimonial-section-three .testimonial-text-only .client-initial{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--body, "Urbanist", sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--theme, #03AFE5), #0288b3);
}
.testimonial-section-three .testimonial-text-only .client-content h3{
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 1.2;
}
.testimonial-section-three .testimonial-text-only .client-content span{
  color: var(--theme-ink, #0E7490);
  font-weight: 600;
  font-size: 14px;
}
/* even out slide heights so the flex cards stretch to match the tallest */
.testimonial-section-three .testimonial-slider-three .swiper-slide{
  height: auto;
}

/* --- Statistics (counter-section-three) -----------------------------------
   Light aqua background photo, charcoal numbers, cyan accent. Static numbers
   (no count-up). Equal columns on desktop with subtle vertical rules; 2x2
   grid on mobile with rules hidden. Rating links to the Google listing.
   -------------------------------------------------------------------------- */
.counter-section-three{
  padding: 90px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.counter-section-three .counter-wrapper-three{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.counter-section-three .counter-items{
  flex: 1 1 0;
  text-align: center;
  padding: 8px 24px;
}
.counter-section-three .counter-items h2{
  color: var(--header, #212121);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 12px;
}
.counter-section-three .counter-items h2 .star{
  color: var(--theme-ink, #0E7490);
  margin-left: 2px;
}
.counter-section-three .counter-items p{
  color: var(--text, #555555);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.counter-section-three .line-1{
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  min-height: 72px;
  background: rgba(3,175,229,.28);
}
/* rating link — one focusable control covering number + label */
.counter-section-three .rating-link{
  display: block;
  text-decoration: none;
  border-radius: 12px;
  padding: 4px;
  transition: transform .2s ease;
}
.counter-section-three .rating-link p{
  transition: color .2s ease;
}
.counter-section-three .rating-link:hover p{
  color: var(--theme-ink, #0E7490);
}
.counter-section-three .rating-link:focus-visible{
  outline: 3px solid var(--theme, #03AFE5) !important;
  outline-offset: 4px;
  border-radius: 12px;
}
@media (max-width: 767px){
  .counter-section-three{ padding: 56px 0; }
  .counter-section-three .counter-wrapper-three{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
    column-gap: 16px;
    align-items: start;
  }
  .counter-section-three .line-1{ display: none; }
  .counter-section-three .counter-items{ padding: 4px 8px; }
  .counter-section-three .counter-items h2{ font-size: 40px; margin-bottom: 8px; }
  .counter-section-three .counter-items p{ font-size: 15px; }
}

/* neutralize the theme's dark-bg treatment so the light stats section reads
   as charcoal-on-aqua: drop the blue/purple gradient overlay and the white
   text-stroke on the numbers. */
.counter-section-three::before{ display: none; }
.counter-section-three .counter-items h2,
.counter-section-three .counter-items h2:hover{
  -webkit-text-stroke: 0;
  -webkit-text-stroke-color: transparent;
  color: var(--header, #212121);
}

/* --- CTA banner (consultation) --------------------------------------------
   Bright clinic-interior photo background; text switches to charcoal with a
   cyan accent for legibility on the light image. A soft white centre wash
   keeps the copy readable where the photo has detail (plant / chair edges).
   -------------------------------------------------------------------------- */
.dvj-cta{
  position: relative;
  padding: 112px 0;
  background-image: url('../img/home-3/cta-clinic-light.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.dvj-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 120% at 50% 50%, rgba(255,255,255,.62), rgba(255,255,255,.18) 68%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.dvj-cta .dvj-cta-inner{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--header, #212121);
}
.dvj-cta-eyebrow{
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--body, "Urbanist", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--theme-ink, #0E7490);
}
.dvj-cta-eyebrow::before,
.dvj-cta-eyebrow::after{
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  vertical-align: middle;
  margin: 0 12px;
  background: rgba(3,175,229,.55);
}
.dvj-cta-title{
  color: var(--header, #212121);
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 16px;
}
.dvj-cta-text{
  color: var(--text, #555555);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto 34px;
  max-width: 620px;
}
.dvj-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.dvj-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dvj-cta-btn i{ font-size: 18px; }
.dvj-cta-btn--primary{
  background: var(--theme-ink, #0E7490);
  color: #fff;
  box-shadow: 0 14px 30px rgba(3,175,229,.30);
}
.dvj-cta-btn--primary i{ color: #fff; }
.dvj-cta-btn--primary:hover{
  transform: translateY(-2px);
  background: #0B5F77;
  color: #fff;
  box-shadow: 0 18px 38px rgba(3,175,229,.38);
}
.dvj-cta-btn--outline{
  background: rgba(255,255,255,.65);
  color: var(--header, #212121);
  border: 2px solid rgba(33,33,33,.28);
}
.dvj-cta-btn--outline:hover{
  transform: translateY(-2px);
  background: var(--header, #212121);
  color: #fff;
  border-color: var(--header, #212121);
}
.dvj-cta-btn:focus-visible{
  outline: 3px solid var(--theme, #03AFE5) !important;
  outline-offset: 4px;
}
@media (max-width: 767px){
  .dvj-cta{ padding: 72px 0; }
  .dvj-cta::before{ background: rgba(255,255,255,.5); }
  .dvj-cta-title{ font-size: 32px; }
  .dvj-cta-text{ font-size: 16px; }
  .dvj-cta-actions{ flex-direction: column; align-items: stretch; }
  .dvj-cta-btn{ justify-content: center; }
}

/* --- Journal / blog cards (text-only) --------------------------------------
   Mirrors the live blog, which uses no post images: category badge, title,
   excerpt and a date · read-time meta line. Equal-height cards in the slider.
   -------------------------------------------------------------------------- */
.news-section .news-slider .swiper-slide{ height: auto; }
.news-box-items.dvj-post{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(3,175,229,.14);
  box-shadow: 0 16px 38px rgba(3,175,229,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-box-items.dvj-post:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(3,175,229,.12);
}
.dvj-post-cat{
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(3,175,229,.10);
  color: var(--theme-ink, #0E7490);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.dvj-post-title{
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 700;
}
.dvj-post-title a{
  color: var(--header, #212121);
  transition: color .2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dvj-post-title a:hover{ color: var(--theme-ink, #0E7490); }
.dvj-post-excerpt{
  margin: 0 0 24px;
  color: var(--text, #555555);
  font-size: 15.5px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dvj-post-foot{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(3,175,229,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dvj-post-meta{
  color: #8a8f94;
  font-size: 13px;
  font-weight: 600;
}
.dvj-post-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-ink, #0E7490);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.dvj-post-link i{ transition: transform .2s ease; }
.dvj-post-link:hover i{ transform: translate(2px,-2px); }
.dvj-post-title a:focus-visible,
.dvj-post-link:focus-visible{
  outline: 3px solid var(--theme, #03AFE5) !important;
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 767px){
  .news-box-items.dvj-post{ padding: 24px; }
  .dvj-post-title{ font-size: 19px; }
}

/* --- Blog article pages ----------------------------------------------------
   Clean, readable long-form layout matching the site: light hero with
   breadcrumb + category + title + meta, then a centred prose column.
   -------------------------------------------------------------------------- */
.dvj-article-hero{
  padding-top: calc(var(--hdr-h, 90px) + 56px);
  padding-bottom: 40px;
  background: var(--body, #EFFBFF);
}
.dvj-article-hero .container{ max-width: 820px; }
.dvj-crumb{
  font-size: 13px;
  font-weight: 600;
  color: #8a8f94;
  margin-bottom: 22px;
}
.dvj-crumb a{ color: #5c6670; }
.dvj-crumb a:hover{ color: var(--theme-ink, #0E7490); }
.dvj-crumb span[aria-hidden]{ margin: 0 8px; opacity: .6; }
.dvj-crumb .current{ color: var(--theme-ink, #0E7490); }
.dvj-article-cat{
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(3,175,229,.10);
  color: var(--theme-ink, #0E7490);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.dvj-article-title{
  color: var(--header, #212121);
  font-size: 42px;
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 20px;
}
.dvj-article-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #6b7075;
  font-size: 15px;
  font-weight: 600;
}
.dvj-article-meta .dot{ opacity: .5; }
.dvj-article-section{ padding: 8px 0 90px; }
.dvj-article-section .container{ max-width: 820px; }
.dvj-article{ color: var(--text, #555555); }
.dvj-article > p{
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 22px;
}
.dvj-article-h2{
  color: var(--header, #212121);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  margin: 40px 0 16px;
}
.dvj-article ul{ margin: 0 0 22px; padding-left: 22px; }
.dvj-article li{ font-size: 18px; line-height: 1.7; margin-bottom: 8px; }
.dvj-article .dvj-article-note{
  margin-top: 40px;
  padding: 22px 26px;
  border-left: 3px solid var(--theme, #03AFE5);
  background: var(--body, #EFFBFF);
  border-radius: 0 12px 12px 0;
  font-size: 16px;
  color: var(--header, #212121);
}
.dvj-article .dvj-article-note a{ color: var(--theme-ink, #0E7490); font-weight: 700; }
/* tighten the CTA when it closes an article */
.dvj-article-section + .dvj-cta{ margin-top: 0; }
@media (max-width: 767px){
  .dvj-article-hero{ padding-top: calc(var(--hdr-h, 80px) + 32px); }
  .dvj-article-title{ font-size: 30px; }
  .dvj-article > p, .dvj-article li{ font-size: 16.5px; }
  .dvj-article-h2{ font-size: 22px; }
  .dvj-article-section .container, .dvj-article-hero .container{ max-width: 100%; }
}

/* --- Journal index (news.html) --------------------------------------------- */
.dvj-blog-hero{ padding-bottom: 20px; }
.dvj-blog-hero .container{ max-width: 900px; }
.dvj-blog-intro{
  color: var(--text, #555555);
  font-size: 18px;
  line-height: 1.65;
  max-width: 620px;
  margin: 6px 0 0;
}
.dvj-blog-section{ padding-top: 40px; }
.dvj-blog-section .news-box-items.dvj-post{ height: 100%; }

/* --- Blog cards: thumbnail variant ----------------------------------------- */
.news-box-items.dvj-post{ padding: 0; overflow: hidden; }
.dvj-post-thumb{ display: block; overflow: hidden; }
.dvj-post-thumb img{
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.news-box-items.dvj-post:hover .dvj-post-thumb img{ transform: scale(1.04); }
.dvj-post-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 28px 28px;
}
.dvj-post-body .dvj-post-excerpt{ flex: 1 1 auto; }
@media (max-width: 767px){
  .dvj-post-body{ padding: 22px 22px 24px; }
}

/* --- Article featured (hero) image + in-article figure --------------------- */
.dvj-article-hero-media{ padding: 8px 0 4px; }
.dvj-article-hero-media .container{ max-width: 980px; }
.dvj-article-hero-img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  box-shadow: 0 22px 50px rgba(3,175,229,.10);
}
.dvj-article-section{ padding-top: 40px; }
.dvj-article-figure{
  margin: 34px 0;
}
.dvj-article-figure img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 767px){
  .dvj-article-hero-img{ border-radius: 12px; }
  .dvj-article-hero-media .container{ max-width: 100%; }
}

/* ==========================================================================
   Procedure pages (Rhinoplasty, etc.)
   ========================================================================== */
.dvj-proc-hero{
  padding-top: calc(var(--hdr-h, 90px) + 48px);
  padding-bottom: 70px;
  background: var(--body, #EFFBFF);
}
.dvj-proc-hero .dvj-crumb{ margin-bottom: 30px; }
.dvj-proc-eyebrow{
  display: inline-block; margin-bottom: 16px;
  font-weight: 700; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--theme-ink, #0E7490);
}
.dvj-proc-title{
  color: var(--header, #212121); font-size: 54px; line-height: 1.08; font-weight: 700; margin: 0 0 18px;
}
.dvj-proc-title .style-font{ font-style: italic; }
.dvj-proc-sub{ color: var(--text, #555); font-size: 18px; line-height: 1.6; margin: 0 0 26px; }
.dvj-proc-badges{
  list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.dvj-proc-badges li{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--header, #212121); }
.dvj-proc-badges i{ color: var(--theme-ink, #0E7490); }
.dvj-proc-hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; }
.dvj-cta-btn.dvj-btn-dark{ color: var(--header, #212121); border-color: rgba(33,33,33,.28); background: #fff; }
.dvj-cta-btn.dvj-btn-dark:hover{ background: var(--header, #212121); color: #fff; border-color: var(--header,#212121); }
.dvj-proc-hero-img img{
  width: 100%; aspect-ratio: 3 / 2.05; object-fit: cover; border-radius: 22px;
  box-shadow: 0 30px 60px rgba(3,175,229,.14);
}

.dvj-proc-section{ padding: 84px 0; }
.dvj-proc-tinted{ background: var(--body, #EFFBFF); }
.dvj-proc-label{
  display: inline-block; margin-bottom: 14px;
  font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--theme-ink, #0E7490);
}
.dvj-proc-h2{ color: var(--header, #212121); font-size: 36px; line-height: 1.2; font-weight: 700; margin: 0; }
.dvj-proc-head{ max-width: 720px; margin: 0 0 44px; }
.dvj-proc-head .dvj-proc-h2{ margin-top: 6px; }
.dvj-proc-prose p{ color: var(--text, #555); font-size: 17.5px; line-height: 1.75; margin: 0 0 18px; }
.dvj-proc-prose p:last-child{ margin-bottom: 0; }
.dvj-proc-prose .dvj-proc-label{ margin-bottom: 12px; }
.dvj-proc-prose .dvj-proc-h2{ margin-bottom: 18px; }

/* approach */
.dvj-proc-approach-img{ position: relative; }
.dvj-proc-approach-img img{ width: 100%; border-radius: 20px; display: block; object-fit: cover; }
.dvj-proc-approach-cap{
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--header, #212121);
}

/* cards (indications / types) */
.dvj-proc-card{
  height: 100%; padding: 32px 30px; border-radius: 18px; background: var(--body, #EFFBFF);
  border: 1px solid rgba(3,175,229,.14); transition: transform .25s ease, box-shadow .25s ease;
}
.dvj-proc-card--light{ background: #fff; }
.dvj-proc-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(3,175,229,.10); }
.dvj-proc-num{
  display: inline-block; margin-bottom: 16px; font-family: var(--body,"Urbanist",sans-serif);
  font-size: 15px; font-weight: 800; color: var(--theme-ink, #0E7490); letter-spacing: 1px;
}
.dvj-proc-card h3{ font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--header,#212121); margin: 0 0 12px; }
.dvj-proc-card p{ font-size: 15.5px; line-height: 1.65; color: var(--text,#555); margin: 0; }

/* recovery timeline */
.dvj-timeline{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.dvj-timeline::before{ content:""; position:absolute; top: 7px; left: 6%; right: 6%; height: 2px; background: rgba(3,175,229,.25); }
.dvj-timeline-item{ position: relative; padding-top: 34px; }
.dvj-timeline-dot{ position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--theme,#03AFE5); box-shadow: 0 0 0 5px rgba(3,175,229,.16); }
.dvj-timeline-item h3{ font-size: 19px; font-weight: 700; color: var(--header,#212121); margin: 0 0 10px; }
.dvj-timeline-item p{ font-size: 15px; line-height: 1.6; color: var(--text,#555); margin: 0; }

/* stats band */
.dvj-proc-statsband{ background: linear-gradient(135deg, #024b63 0%, #036f92 52%, #039fce 100%); padding: 60px 0; }
.dvj-proc-stats{ display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.dvj-proc-stat h3{ color: #fff; font-size: 46px; font-weight: 700; line-height: 1; margin: 0 0 8px; }
.dvj-proc-stat p{ color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin: 0; }

/* testimonials */
.dvj-proc-tst{ height: 100%; display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 18px; background: var(--body,#EFFBFF); border: 1px solid rgba(3,175,229,.14); }
.dvj-proc-tst .quote-icon img{ width: 40px; }
.dvj-proc-tst .text{ flex: 1 0 auto; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--header,#212121); margin: 0; }
.dvj-proc-tst .client-info{ display: flex; align-items: center; gap: 14px; }
.dvj-proc-tst .client-initial{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 19px; background: linear-gradient(135deg, var(--theme,#03AFE5), #0288b3); }
.dvj-proc-tst .client-content h3{ margin: 0; font-size: 16px; color: var(--header,#212121); }
.dvj-proc-tst .client-content span{ color: var(--theme-ink,#0E7490); font-size: 13px; font-weight: 600; }

/* FAQ accordion */
.dvj-faq{ max-width: 860px; }
.dvj-faq-item{ border-bottom: 1px solid rgba(3,175,229,.18); }
.dvj-faq-item summary{
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 19px; font-weight: 600; color: var(--header,#212121);
}
.dvj-faq-item summary::-webkit-details-marker{ display: none; }
.dvj-faq-icon{ position: absolute; right: 4px; top: 26px; width: 16px; height: 16px; }
.dvj-faq-icon::before, .dvj-faq-icon::after{ content:""; position:absolute; background: var(--theme-ink,#0E7490); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.dvj-faq-icon::before{ top: 7px; left: 0; width: 16px; height: 2px; }
.dvj-faq-icon::after{ top: 0; left: 7px; width: 2px; height: 16px; }
.dvj-faq-item[open] .dvj-faq-icon::after{ opacity: 0; transform: rotate(90deg); }
.dvj-faq-item summary:focus-visible{ outline: 3px solid var(--theme,#03AFE5); outline-offset: 3px; border-radius: 4px; }
.dvj-faq-body{ padding: 0 40px 24px 0; }
.dvj-faq-body p{ margin: 0; color: var(--text,#555); font-size: 16.5px; line-height: 1.7; }

/* related */
.dvj-proc-related{ display: block; height: 100%; padding: 30px; border-radius: 18px; background: #fff; border: 1px solid rgba(3,175,229,.14); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.dvj-proc-related:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(3,175,229,.10); }
.dvj-proc-related h3{ font-size: 21px; font-weight: 700; color: var(--header,#212121); margin: 0 0 10px; }
.dvj-proc-related p{ font-size: 15.5px; line-height: 1.6; color: var(--text,#555); margin: 0 0 16px; }
.dvj-proc-related-link{ display: inline-flex; align-items: center; gap: 6px; color: var(--theme-ink,#0E7490); font-weight: 700; font-size: 14px; }

@media (max-width: 991px){
  .dvj-proc-title{ font-size: 40px; }
  .dvj-proc-h2{ font-size: 30px; }
  .dvj-proc-section{ padding: 60px 0; }
  .dvj-timeline{ grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .dvj-timeline::before{ display: none; }
  .dvj-proc-stats{ grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .dvj-proc-approach-img{ max-width: 420px; margin: 0 auto 10px; }
}
@media (max-width: 575px){
  .dvj-proc-title{ font-size: 34px; }
  .dvj-timeline{ grid-template-columns: 1fr; }
  .dvj-proc-stat h3{ font-size: 38px; }
  .dvj-faq-item summary{ font-size: 17px; }
}

/* ==========================================================================
   Procedure pages — layout refinements (v2)
   ========================================================================== */
/* tighter, more even section rhythm */
.dvj-proc-section{ padding: 76px 0; }
.dvj-proc-head{ margin-bottom: 40px; }

/* hero balance: give the copy a little breathing room, steady image ratio */
.dvj-proc-hero{ padding-bottom: 78px; }
.dvj-proc-hero .row{ --bs-gutter-x: 3.5rem; }
.dvj-proc-hero-img img{ aspect-ratio: 3 / 2; height: auto; box-shadow: 0 34px 70px rgba(3,175,229,.16); }
@media (min-width: 992px){
  .dvj-proc-hero .col-lg-6:first-of-type{ padding-right: 20px; }
}

/* nicer cards: circular number chip, crisp white surface, cyan hover edge */
.dvj-proc-card{
  background: #fff;
  border: 1px solid rgba(16,24,40,.08);
  box-shadow: 0 6px 20px rgba(16,24,40,.04);
  padding: 34px 32px;
}
.dvj-proc-card--light{ background: #fff; }
.dvj-proc-tinted .dvj-proc-card{ background: #fff; }
.dvj-proc-card:hover{
  transform: translateY(-6px);
  border-color: rgba(3,175,229,.45);
  box-shadow: 0 26px 50px rgba(3,175,229,.14);
}
.dvj-proc-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(3,175,229,.10); color: var(--theme-ink, #0E7490);
  font-size: 15px; font-weight: 800; letter-spacing: 0; margin-bottom: 20px;
  transition: background .25s ease, color .25s ease;
}
.dvj-proc-card:hover .dvj-proc-num{ background: var(--theme-ink, #0E7490); color: #fff; }
.dvj-proc-card h3{ font-size: 20px; margin-bottom: 12px; }
.dvj-proc-card p{ font-size: 15.5px; }

/* procedure-options cards are wider (2x2) — give the text more room to sit */
.dvj-proc-tinted .row .dvj-proc-card{ display: flex; flex-direction: column; }

/* related cards: match the same refined surface */
.dvj-proc-related{
  border: 1px solid rgba(16,24,40,.08);
  box-shadow: 0 6px 20px rgba(16,24,40,.04);
}
.dvj-proc-related:hover{ border-color: rgba(3,175,229,.45); box-shadow: 0 26px 50px rgba(3,175,229,.14); }

/* prose + headings: a touch more scale contrast */
.dvj-proc-h2{ letter-spacing: -.4px; }
.dvj-proc-prose p{ font-size: 18px; }

@media (max-width: 991px){
  .dvj-proc-section{ padding: 56px 0; }
}

/* procedure section media (overview image + full-width band) */
.dvj-proc-media img{
  width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 26px 55px rgba(3,175,229,.14);
}
.dvj-proc-band{ display: block; line-height: 0; }
.dvj-proc-band img{
  width: 100%; height: clamp(220px, 30vw, 400px); object-fit: cover; display: block;
}
@media (max-width: 991px){
  .dvj-proc-media{ max-width: 460px; margin: 0 auto; }
}

/* service/related cards with image (image-card style) */
.dvj-proc-related--img{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dvj-proc-related-thumb{ display: block; overflow: hidden; }
.dvj-proc-related-thumb img{
  width: 100%; aspect-ratio: 8 / 5; height: auto; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.dvj-proc-related--img:hover .dvj-proc-related-thumb img{ transform: scale(1.05); }
.dvj-proc-related-body{ display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 28px 28px; }
.dvj-proc-related-body .dvj-proc-related-link{ margin-top: 8px; }

/* procedure "why consider" checklist */
.dvj-proc-checklist{
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px;
}
.dvj-proc-checklist li{
  position: relative; padding-left: 34px;
  font-size: 17px; line-height: 1.55; color: var(--text, #555555);
}
.dvj-proc-checklist li::before{
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(3,175,229,.12);
}
.dvj-proc-checklist li::after{
  content: ""; position: absolute; left: 6px; top: 9px; width: 8px; height: 5px;
  border-left: 2px solid var(--theme,#03AFE5); border-bottom: 2px solid var(--theme,#03AFE5); transform: rotate(-45deg);
}
@media (max-width: 767px){ .dvj-proc-checklist{ grid-template-columns: 1fr; } }

/* Category hub pages */
.dvj-hub-hero{ padding-bottom: 40px; }
.dvj-hub-intro{ color: var(--text,#555); font-size: 19px; line-height: 1.65; max-width: 640px; margin: 4px 0 26px; }
.dvj-proc-related--img .dvj-proc-related-body h3{ margin-bottom: 6px; }

/* About portrait */
.dvj-about-portrait img{ width:100%; height:auto; border-radius:20px; display:block; box-shadow:0 30px 60px rgba(3,175,229,.16); aspect-ratio:635/900; object-fit:cover; }
@media (max-width:991px){ .dvj-about-portrait{ max-width:400px; margin:0 auto; } }
/* Contact cards */
.dvj-contact-grid .dvj-contact-card{ display:flex; flex-direction:column; gap:6px; height:100%; padding:30px 26px; border-radius:18px; background:#fff; border:1px solid rgba(16,24,40,.08); box-shadow:0 6px 20px rgba(16,24,40,.04); text-decoration:none; transition:transform .25s,box-shadow .25s,border-color .25s; }
.dvj-contact-grid > div{ display:flex; }
.dvj-contact-grid .dvj-contact-card:hover{ transform:translateY(-5px); border-color:rgba(3,175,229,.45); box-shadow:0 22px 46px rgba(3,175,229,.12); }
.dvj-contact-card > i{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(3,175,229,.1); color:var(--theme-ink,#0E7490); font-size:18px; margin-bottom:10px; }
.dvj-contact-label{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#8a8f94; }
.dvj-contact-value{ font-size:18px; font-weight:700; color:var(--header,#212121); }
.dvj-contact-note{ font-size:13px; color:var(--theme-ink,#0E7490); font-weight:600; }
.dvj-contact-hours{ display:flex; align-items:center; gap:10px; color:var(--text,#555); font-size:15px; margin:14px 0 20px; }
.dvj-contact-hours i{ color:var(--theme-ink,#0E7490); }
.dvj-contact-form .dvj-field{ display:flex; flex-direction:column; gap:7px; }
.dvj-contact-form .dvj-field span{ font-size:13px; font-weight:600; color:var(--header,#212121); }
.dvj-contact-form input,.dvj-contact-form textarea{ width:100%; padding:13px 16px; border:1px solid rgba(16,24,40,.15); border-radius:12px; background:#fff; font-family:inherit; font-size:16px; color:var(--header,#212121); }
.dvj-contact-form input:focus,.dvj-contact-form textarea:focus{ outline:none; border-color:var(--theme-ink,#0E7490); box-shadow:0 0 0 3px rgba(3,175,229,.14); }

/* contact card grid (cards are direct children, not bootstrap cols) */
.dvj-contact-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; }
.dvj-contact-grid > .dvj-contact-card{ height:100%; }
@media (max-width:991px){ .dvj-contact-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .dvj-contact-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   Touch targets, hover-gating & input zoom guard  (adapt / harden)
   ========================================================================== */
@media (pointer:coarse){
  .social-icon a{ min-width:44px; min-height:44px; }
  .dvj-crumb a,
  .footer-widget-items .gt-list-area a,
  .news-btn{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (hover:none){
  .dvj-proc-card:hover,.dvj-contact-card:hover,.dvj-proc-related:hover,
  .dvj-post:hover,.dvj-cta-btn:hover,.service-section-three .service-box-items:hover{ transform:none; }
}
@media (max-width:767px){
  input[type=text],input[type=email],input[type=tel],textarea,select,
  .dvj-contact-form input,.dvj-contact-form textarea{ font-size:16px; }
}
@supports(padding:max(0px)){
  footer,.footer-section,.footer-area{ padding-bottom:max(0px,env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   L2: contact-style hero — hub hero WITHOUT CTA buttons leaves a dead gap
   before the content; tighten hero->first-section rhythm (scoped so the
   real category hubs, which have .dvj-proc-hero-cta, are untouched).
   ========================================================================== */
.dvj-hub-hero:not(:has(.dvj-proc-hero-cta)){ padding-bottom: 10px; }
.dvj-hub-hero:not(:has(.dvj-proc-hero-cta)) + .dvj-proc-section{ padding-top: 46px; }
@media (max-width:767px){
  .dvj-hub-hero:not(:has(.dvj-proc-hero-cta)) + .dvj-proc-section{ padding-top: 34px; }
}

/* ==========================================================================
   Form validation — inline error messages (harden)
   ========================================================================== */
.dvj-field-error{ display:block; width:100%; margin-top:6px; color:#c0392b; font-size:13px; line-height:1.45; font-weight:600; }
.dvj-field input[aria-invalid="true"], .dvj-field textarea[aria-invalid="true"]{ border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.footer-section .dvj-field-error{ color:#ff9a9a; }

/* ==========================================================================
   adapt: off-canvas / mobile panels must never exceed the viewport
   (.offcanvas-menu was a fixed 450px -> clipped on every phone < 450px)
   ========================================================================== */
.offcanvas-menu{ width:min(450px, 90vw); }
.mobile-menu-area .mobile-menu-main{ width:min(300px, 88vw); }

/* ==========================================================================
   Hero: AA button contrast + desktop text-over-image legibility
   ========================================================================== */
/* Theme primary buttons were white-on-cyan (#03AFE5 = 2.54:1). Move the pill
   fill and the arrow-circle icon to --theme-ink (#0E7490 = 5.36:1). */
.theme-btn-main.style-2{ background-color: var(--theme-ink); }
.theme-btn-main.style-2 .theme-btn-arrow-left i,
.theme-btn-main.style-2 .theme-btn-arrow-right i{ color: var(--theme-ink); }

/* Desktop had NO hero scrim, so dark hero copy sat directly on busy photos
   (operating theatre, reconstructive). Add a left-anchored light wash: the
   text column always clears the image; the right side stays image-dominant. */
@media (min-width:992px){
  .hero-3 .item-img::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg,
      rgba(239,251,255,.97) 0%,
      rgba(239,251,255,.92) 18%,
      rgba(239,251,255,.55) 32%,
      rgba(239,251,255,.12) 42%,
      rgba(239,251,255,0) 50%);
  }
  /* keep the hero copy in the left panel so it never sits on the doctor */
  .hero-3 .hero-content{ max-width:460px; }
  .hero-section-3 .hero-text{ max-width:40ch; }
  .hero-3 .hero-content .hero-trust{ max-width:430px; }
}

/* ==========================================================================
   Hero — MOBILE stacked layout (<=991px)
   The full-bleed image + overlaid text hid the subject's face behind the copy.
   On mobile, stack instead: the portrait photo (1024x1536 crops) sits on top,
   fully visible, and the text block sits below it. No overlay, no scrim.
   Desktop (>=992px) keeps the image-dominant overlay treatment.
   ========================================================================== */
@media (max-width:991px){
  .hero-3 .hero-slider-items{
    min-height:100svh;
    justify-content:flex-start;
    padding:var(--hdr-h) 0 24px !important;
    gap:22px;
  }
  /* image: in-flow, contained, on top */
  .hero-3 .item-img{
    position:static !important;
    top:auto; right:auto; bottom:auto; left:auto;
    width:100%;
    height:min(46vh, 420px);
    flex:0 0 auto;
    border-radius:0 0 28px 28px;
    overflow:hidden;
    box-shadow:0 18px 40px -20px rgba(2,20,32,.35);
  }
  .hero-3 .item-img picture{ display:block; width:100%; height:100%; }
  .hero-3 .item-img img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 12%;   /* keep faces + headroom in frame */
  }
  /* text block below the image — remove the overlay scrim entirely */
  .hero-section-3 .hero-content::before{ display:none !important; }
  .hero-3 .hero-content{ position:static; }
  .hero-3 .hero-slider-items > .container{ flex:1 1 auto; display:flex; align-items:flex-start; }
  /* short viewports (landscape phones): shrink the photo so text still fits */
  @media (max-height:640px){
    .hero-3 .item-img{ height:38vh; }
  }
}

/* Mobile stacked hero — polish: kill the theme's light wash over the now-
   standalone photo, and keep the text compact so the CTA stays near the fold */
@media (max-width:991px){
  .hero-3 .item-img::after{ display:none !important; }   /* theme light gradient off */
  .hero-3 .item-img{ height:min(56vh, 500px); }
  .hero-3 .hero-content .hero-title{ font-size:clamp(30px, 7.4vw, 40px); line-height:1.1; }
  .hero-3 .hero-content .hero-text{ margin-top:12px; }
}

/* Desktop hero: keep CTA pills on one line (longer slide labels were wrapping) */
@media (min-width:992px){
  .hero-3 .hero-button .theme-btn,
  .hero-3 .hero-secondary{ white-space:nowrap; }
}

/* Consultation form select (appointment page) — match input styling */
.dvj-contact-form select{ width:100%; padding:13px 16px; border:1px solid rgba(16,24,40,.15); border-radius:12px; background:#fff; font-family:inherit; font-size:16px; color:var(--header,#212121); -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230E7490' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }

/* ===== Web3Forms submit status message ===== */
.dvj-form-status{
  margin:14px 0 0;
  padding:12px 16px;
  border-radius:10px;
  font-size:15px;
  line-height:1.45;
  font-weight:500;
}
.dvj-form-status.is-ok{
  color:#0b6b3a;
  background:#e7f6ee;
  border:1px solid #bfe6cf;
}
.dvj-form-status.is-err{
  color:#9a2020;
  background:#fdecec;
  border:1px solid #f3c2c2;
}

/* ===== Signature Procedures band (homepage Surgical Expertise) ===== */
.dvj-signature{ margin:6px 0 56px; }
.dvj-signature__head{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.dvj-signature__eyebrow{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#0e7490;
}
.dvj-signature__title{
  font-size:clamp(22px,2.4vw,30px); line-height:1.22; margin:0;
  color:#10323a; max-width:40ch;
}
.dvj-signature__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.dvj-sig-card{
  display:flex; flex-direction:column; gap:12px;
  padding:30px 26px 26px; border-radius:18px;
  background:linear-gradient(160deg,#0e7490 0%,#0b5f77 100%);
  color:#ffffff; text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(14,116,144,.18);
  transition:transform .3s ease, box-shadow .3s ease;
}
.dvj-sig-card:hover,.dvj-sig-card:focus-visible{
  transform:translateY(-6px); box-shadow:0 18px 44px rgba(14,116,144,.30);
  outline:none;
}
.dvj-sig-card:focus-visible{ box-shadow:0 0 0 3px #ffffff,0 0 0 6px #0e7490; }
.dvj-sig-card__tag{
  align-self:flex-start; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.18); color:#eafbff;
  padding:5px 13px; border-radius:999px;
}
.dvj-sig-card__name{ font-size:24px; line-height:1.15; margin:4px 0 0; color:#fff; }
.dvj-sig-card__desc{ font-size:15px; line-height:1.55; margin:0; flex:1; color:rgba(255,255,255,.90); }
.dvj-sig-card__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:600; font-size:15px; color:#fff; }
.dvj-sig-card__cta i{ transition:transform .3s ease; }
.dvj-sig-card:hover .dvj-sig-card__cta i{ transform:translateX(5px); }
@media (max-width:991px){
  .dvj-signature{ margin-bottom:40px; }
  .dvj-signature__grid{ grid-template-columns:1fr; gap:16px; }
}
@media (min-width:992px) and (max-width:1199px){ .dvj-signature__grid{ gap:16px; } }

/* ===== Accessibility: cyan (#03afe5) text fails WCAG AA on light (2.5:1).
   Use the accessible brand teal --theme-ink (#0E7490 ≈ 5.4:1) for eyebrow
   labels and the footer email-submit icon. Bright cyan stays for accents. ===== */
.section-title .sub-title,
.section-title-2 .sub-title,
.sub-title.tz-sub-tilte,
.sub-title {
  color: var(--theme-ink, #0E7490);
}
.footer-widget-wrapper .footer-left-item form .email-btn,
.email-btn { color: var(--theme-ink, #0E7490); }

/* ===== Explore Procedures: proper outlined pill button (was a text link) ===== */
.hero-section-3 .hero-secondary{
  margin-left:18px;
  padding:13px 26px;
  border:1.5px solid var(--theme-ink,#0E7490);
  border-radius:999px;
  color:var(--theme-ink,#0E7490);
  font-weight:600;
  background:transparent;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hero-section-3 .hero-secondary:hover{
  background:var(--theme-ink,#0E7490);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(14,116,144,.25);
}
.hero-section-3 .hero-secondary i{ transition:transform .25s ease; }
.hero-section-3 .hero-secondary:hover i{ transform:translateX(4px); }
@media (max-width:575px){ .hero-section-3 .hero-secondary{ margin-left:0; } }

/* ===== Hero stat highlights (17+ Years / 20,000+ / 4.9 Google) ===== */
.hero-3 .hero-content .hero-trust--stats .hero-trust__item strong{ font-size:20px; letter-spacing:-.01em; }
.hero-3 .hero-content .hero-trust--stats .hero-trust__item i{ color:var(--theme-ink,#0E7490); font-size:20px; }
.hero-3 .hero-content .hero-trust--stats .hero-trust__item .fa-star{ color:#f5a623; }

/* ==========================================================================
   Hero: equal slide heights
   Slide 1 carries a trust-stats row that slides 2 & 3 don't. At the 460px
   hero-copy width it wrapped to three lines (~103px + 34px margin), so slide 1
   ran ~63px taller than the other slides on laptop-height screens — the hero
   appeared to grow and shrink as it auto-rotated. Slides 2 & 3 already sit at
   exactly 100svh; the goal is simply to keep slide 1's content within 100svh
   too, so all three settle at the same height. Compact the stats row + slide-1
   rhythm, and tighten further where vertical space is tight.
   ========================================================================== */
.hero-3 .hero-content .hero-trust--stats{ gap:10px 22px; margin-top:22px; }
.hero-3 .hero-content .hero-trust--stats .hero-trust__item strong{ font-size:18px; line-height:1.15; }
/* Laptop-height screens: the stats row + slide-1 rhythm need to give back more. */
@media (min-width:992px) and (max-height:900px){
  .hero-3 .hero-content .hero-trust--stats{ gap:7px 20px; margin-top:14px; }
  .hero-3 .hero-content .hero-trust--stats .hero-trust__item strong{ font-size:16px; }
  .hero-3 .hero-content .hero-trust--stats .hero-trust__item span{ font-size:12px; }
  .hero-3 .hero-content .hero-trust--stats .hero-trust__item i{ font-size:17px; }
  .hero-3 .hero-content .hero-button{ margin-top:22px; }
  .hero-3 .hero-slider-items{ padding-top:clamp(90px, 11.5vh, 140px); }
}

/* ===== Contact page embedded map ===== */
.dvj-map{ margin-top:20px; border-radius:16px; overflow:hidden; box-shadow:0 12px 32px rgba(14,116,144,.14); line-height:0; }
.dvj-map iframe{ display:block; width:100%; }

/* ==========================================================================
   Footer — reveal + legibility (polish pass)
   The footer lives inside #smooth-content under GSAP ScrollSmoother, so
   WOW.js never fires its scroll reveal: every footer .wow element stays at
   the inline `visibility:hidden` WOW sets on init, and the ENTIRE footer
   (newsletter form, nav columns, address, logo, social, copyright) is
   invisible to real visitors. Force them visible. Then lift the two
   accent-cyan text runs off the pale footer — bright --theme cyan there is
   only ~2.4:1; the ink tone clears WCAG AA.
   ========================================================================== */
.footer-section .wow{ visibility:visible !important; }
/* Match main.css's own selectors so these win on source order, not on an
   inflated specificity hack. */
.footer-widget-wrapper .footer-left-item ul,
.footer-widget-wrapper .footer-left-item ul li{ color:var(--theme-ink,#0E7490); }
.footer-widget-wrapper .footer-left-item ul li a{ color:var(--theme-ink,#0E7490); }
.footer-bottom .footer-bottom-wrapper p b{ color:var(--theme-ink,#0E7490); }
.footer-widget-wrapper .footer-left-item ul li a:hover{ color:#0b5f77; }
/* Newsletter pill: white text/placeholder on the cyan input is only ~2.5:1,
   so the email a visitor types back reads poorly. Keep the cyan pill, darken
   the text to a navy ink (~5.4:1). */
.footer-widget-wrapper .footer-left-item form input{ color:#0b3a47; }
.footer-widget-wrapper .footer-left-item form input::placeholder{ color:rgba(11,58,71,.72); }

/* ==========================================================================
   Browser surfaces — theme the parts the template left as browser defaults
   (text selection, the caret, form-control accent, the scrollbar) so they
   carry the brand instead of the OS blue.
   ========================================================================== */
::selection{ background:rgba(14,116,144,.20); color:#0b2a33; }
:root{ accent-color:var(--theme-ink,#0E7490); caret-color:var(--theme-ink,#0E7490); }
/* Firefox */
html{ scrollbar-color:var(--theme-ink,#0E7490) rgba(3,175,229,.10); }
/* WebKit / Chromium */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(3,175,229,.08); }
::-webkit-scrollbar-thumb{ background:var(--theme-ink,#0E7490); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#0b5f77; }

/* ==========================================================================
   Legal pages (Privacy Policy, Terms & Conditions) — a readable, constrained
   long-form prose column. Reuses the .dvj-proc-hero banner; .dvj-legal only
   styles the body, so no other page is affected.
   ========================================================================== */
.dvj-legal{ max-width: 820px; }
.dvj-legal-meta{
    display:inline-flex; align-items:center; gap:8px;
    margin: 0 0 34px; padding: 8px 16px;
    font-size: 13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
    color: var(--theme-ink,#0E7490);
    background: rgba(3,175,229,.08);
    border: 1px solid rgba(14,116,144,.22);
    border-radius: 999px;
}
.dvj-legal > h2{
    color: var(--header,#212121);
    font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing:-.3px;
    margin: 46px 0 14px; scroll-margin-top: 110px;
}
.dvj-legal > h2:first-of-type{ margin-top: 0; }
.dvj-legal h3{
    color: var(--header,#212121);
    font-size: 18.5px; line-height:1.4; font-weight: 700;
    margin: 28px 0 10px;
}
.dvj-legal p{ color: var(--text,#555); font-size: 17.5px; line-height: 1.78; margin: 0 0 18px; }
.dvj-legal ul, .dvj-legal ol{ margin: 0 0 18px; padding-left: 24px; list-style-position: outside; }
.dvj-legal ul{ list-style: disc; }
.dvj-legal ol{ list-style: decimal; }
.dvj-legal li{ color: var(--text,#555); font-size: 17.5px; line-height: 1.7; margin: 0 0 9px; padding-left: 4px; }
.dvj-legal li::marker{ color: var(--theme-ink,#0E7490); }
.dvj-legal strong{ color: var(--header,#212121); font-weight: 700; }
.dvj-legal a{ color: var(--theme-ink,#0E7490); text-decoration: underline; text-underline-offset: 2px; }
.dvj-legal a:hover{ color:#0b5f77; }
.dvj-legal-callout{
    margin: 26px 0 30px; padding: 22px 24px;
    background: rgba(3,175,229,.06);
    border: 1px solid rgba(14,116,144,.24);
    border-radius: 12px;
}
.dvj-legal-callout p{ margin: 0; }
.dvj-legal-callout p + p{ margin-top: 12px; }
.dvj-legal-callout strong{ display:block; margin-bottom: 6px; color: var(--theme-ink,#0E7490); letter-spacing:.01em; }
@media (max-width: 575px){
    .dvj-legal > h2{ font-size: 22px; }
    .dvj-legal p, .dvj-legal li{ font-size: 16.5px; }
    .dvj-legal-callout{ padding: 18px 18px; }
}