/* ================================================================
   MPHG International — 2026 Premium Design System
   Modern · Dynamic · Energetic · Corporate Red
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,opsz,wght@0,6..30,300;0,6..30,400;0,6..30,500;0,6..30,600;0,6..30,700;0,6..30,800;0,6..30,900;1,6..30,400&display=swap');

/* ── Tokens ── */
:root {
  --red:          #C8302A;
  --red-h:        #A82420;
  --red-light:    #E84040;
  --red-10:       rgba(200,48,42,.10);
  --red-18:       rgba(200,48,42,.18);

  --navy:         #0B1B3F;
  --navy-2:       #162B5C;
  --navy-3:       #1E3A7A;

  --white:        #FFFFFF;
  --bg:           #F7F8FC;
  --bg-2:         #EEF0F7;
  --surface:      #FFFFFF;

  --tx-1:         #0D1117;
  --tx-2:         #4A5568;
  --tx-3:         #9AA5B4;

  --bdr:          #E4E8F0;
  --bdr-s:        #EFF2F8;

  --sh-xs:  0 1px 3px rgba(0,0,0,.05);
  --sh-sm:  0 2px 10px rgba(0,0,0,.06);
  --sh-md:  0 6px 28px rgba(0,0,0,.08);
  --sh-lg:  0 16px 56px rgba(0,0,0,.11);
  --sh-xl:  0 28px 80px rgba(0,0,0,.14);
  --sh-red: 0 8px 32px rgba(200,48,42,.28);

  --font:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --max:    1300px;
  --px:     clamp(1rem, 4vw, 2.5rem);
  --r-s:    8px;
  --r:      14px;
  --r-l:    20px;
  --r-xl:   30px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.4,0,.2,1);
  --eout:   cubic-bezier(0,.55,.45,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--font);color:var(--tx-1);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
::selection{background:var(--red);color:#fff}

/* ================================================================
   HEADER
   ================================================================ */
.hdr {
  position: sticky; top: 0; z-index: 500;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.hdr--transparent {
  background: linear-gradient(to bottom, rgba(11,27,63,.97) 0%, rgba(11,27,63,.92) 70%, rgba(11,27,63,.78) 100%);
  border-bottom: 1px solid transparent;
}
.hdr--solid {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--bdr-s);
  box-shadow: var(--sh-sm);
}

/* Top bar */
.hdr-topbar {
  background: var(--navy);
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hdr-topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .45rem var(--px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hdr-topbar a { color: rgba(255,255,255,.7); transition: color .15s }
.hdr-topbar a:hover { color: #fff }
.hdr-topbar-left, .hdr-topbar-right { display: flex; align-items: center; gap: 1.25rem }
.hdr-topbar-item { display: flex; align-items: center; gap: .4rem }
.hdr-topbar-item svg { opacity: .7 }

/* Main bar */
.hdr-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.hdr-logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0 }
.logo-img { height: 46px; width: auto; max-width: 180px; object-fit: contain; display: block }
.logo-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .88rem;
  box-shadow: 0 4px 16px rgba(200,48,42,.35);
  transition: transform .2s var(--ease);
}
.hdr-logo:hover .logo-mark { transform: scale(1.05) }
.logo-text { line-height: 1.15 }
.logo-text span { display: block; font-size: .7rem; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .12em }
.logo-text strong { display: block; font-size: 1.05rem; font-weight: 900; color: var(--navy); letter-spacing: -.02em }

/* Nav */
.hdr-nav { display: flex; align-items: center; gap: .05rem; flex: 1; justify-content: center }
.hdr-nav > a {
  position: relative;
  padding: .5rem .9rem;
  font-size: .82rem; font-weight: 700;
  color: var(--tx-2);
  border-radius: var(--r-s);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.hdr-nav > a:hover { color: var(--tx-1); background: var(--bg) }
.hdr-nav > a.active { color: var(--red) }
.hdr-nav > a.active::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; background: var(--red); border-radius: var(--r-pill);
}

/* Header transparent override */
.hdr--transparent .hdr-nav > a { color: rgba(255,255,255,.88) }
.hdr--transparent .hdr-nav > a:hover { color: #fff; background: rgba(255,255,255,.12) }
.hdr--transparent .logo-text strong { color: #fff }
.hdr--transparent .logo-text span { color: rgba(255,255,255,.55) }
.hdr--transparent .lang-sel-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: #fff }
.hdr--transparent .lang-sel-btn:hover { border-color: var(--red); color: var(--red) }
.hdr--transparent .hdr-cta { background: var(--red); color: #fff }

/* Actions */
.hdr-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0 }

/* Lang selector */
.lang-sel { position: relative }
.lang-sel-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem;
  border-radius: var(--r-s);
  border: 1px solid var(--bdr);
  background: var(--surface);
  font-size: .78rem; font-weight: 700;
  color: var(--tx-2);
  transition: all .15s;
}
.lang-sel-btn:hover { border-color: var(--red); color: var(--red) }
.lang-sel-btn span:first-child { font-size: 1rem }
.lang-sel-dd {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: var(--r-l);
  box-shadow: var(--sh-xl);
  z-index: 600;
  overflow: hidden;
  padding: .4rem;
}
.lang-sel.open .lang-sel-dd { display: block; animation: dropIn .18s var(--ease) }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1;transform:none} }
.lang-sel-opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .85rem; border-radius: var(--r-s);
  font-size: .83rem; font-weight: 500; color: var(--tx-2);
  transition: background .12s;
}
.lang-sel-opt:hover { background: var(--bg) }
.lang-sel-opt.is-active { color: var(--red); font-weight: 800; background: var(--red-10) }
.lang-sel-opt .chk { margin-left: auto; color: var(--red) }

.hdr-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .58rem 1.25rem;
  border-radius: var(--r);
  background: var(--red); color: #fff;
  font-size: .82rem; font-weight: 800;
  box-shadow: 0 3px 12px rgba(200,48,42,.22);
  transition: all .15s;
}
.hdr-cta:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: var(--sh-red) }

/* Burger */
.hdr-burger {
  width: 40px; height: 40px; border-radius: var(--r-s);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s;
}
.hdr-burger:hover { background: var(--bg) }
.hdr-burger span { width: 19px; height: 1.5px; background: var(--tx-1); border-radius: var(--r-pill); transition: all .22s var(--ease) }
.hdr-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hdr-burger.is-open span:nth-child(2) { opacity: 0 }
.hdr-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }
.hdr--transparent .hdr-burger span { background: #fff }

/* Mobile nav */
.mob-nav {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 490;
  padding: 90px 1.5rem 2rem; overflow-y: auto;
  flex-direction: column; gap: .2rem;
}
.mob-nav.open { display: flex }
.mob-nav a { padding: .85rem 1rem; border-radius: var(--r-s); font-size: .95rem; font-weight: 700; color: var(--tx-1); transition: background .12s }
.mob-nav a:hover { background: var(--bg) }
.mob-lang { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.25rem 0; border-top: 1px solid var(--bdr); margin-top: .5rem }
.mob-lang a { padding: .4rem .9rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--bg) }
.mob-lang a.is-active { background: var(--red); color: #fff }
.mob-cta { display: block; text-align: center; padding: .95rem; border-radius: var(--r); background: var(--red); color: #fff; font-weight: 800; margin-top: .5rem }

.hide-mob { display: inline-flex }
.hide-desk { display: none }
@media(max-width:960px){.hdr-nav{display:none}.hide-mob{display:none}.hide-desk{display:flex}}
@media(max-width:520px){
  .hdr-main{height:auto;padding:.55rem var(--px);gap:1rem;align-items:center;justify-content:space-between}
  .hdr-logo{flex-wrap:wrap;gap:.2rem .55rem;align-items:center;flex:1 1 auto;min-width:0}
  .logo-img{max-width:110px;height:38px}
  .logo-mark{width:36px;height:36px;font-size:.78rem;border-radius:10px}
  .logo-text{flex-basis:100%;line-height:1.1;min-width:0}
  .logo-text span{display:none}
  .logo-text strong{font-size:.9rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hdr-actions{gap:.4rem;flex-shrink:0;margin-left:auto}
}

/* ================================================================
   HERO SLIDER
   ================================================================ */
.hero {
  position: relative;
  height: 75svh; min-height: 520px; max-height: 720px;
  overflow: hidden;
  display: flex; align-items: center;
}

/* Hero inner layout: slider + form side by side */
.hero-inner-wrap {
  position: relative; z-index: 5;
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--px);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: center;
}
.hero-inner-wrap .hero-slider-col {
  position: relative;
}
.hero-inner-wrap .hero-form-col {
  position: relative; z-index: 10;
}
@media (max-width: 1024px) {
  .hero-inner-wrap {
    grid-template-columns: 1fr;
  }
  .hero-form-col {
    display: none !important;
  }
}

.slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.slide.active { opacity: 1 }
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.08);
  transition: transform 10s cubic-bezier(.25,.46,.45,.94);
}
.slide.active .slide-bg { transform: scale(1) }
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(11,27,63,.92) 0%, rgba(11,27,63,.6) 45%, rgba(11,27,63,.25) 100%);
}

.slide-content {
  position: relative; z-index: 5;
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--px);
  width: 100%;
  min-height: 100%;
  display: flex; align-items: center;
}
.slide-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.2rem;
  background: rgba(200,48,42,.15); border: 1px solid rgba(200,48,42,.3);
  border-radius: var(--r-pill);
  color: #FFB3B3; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 1.8rem;
  opacity: 0; transform: translateY(20px);
  animation: none;
  backdrop-filter: blur(8px);
}
.slide.active .slide-eyebrow { animation: fadeUp .7s .1s var(--ease) forwards }
.slide-title {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 750px;
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(24px);
  animation: none;
  text-shadow: 0 2px 40px rgba(0,0,0,.2);
}
.slide.active .slide-title { animation: fadeUp .8s .25s var(--ease) forwards }
.slide-title em { color: #FFB3B3; font-style: normal }
.slide-subtitle {
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,.7);
  max-width: 540px;
  line-height: 1.8;
  margin-bottom: 2.8rem;
  opacity: 0; transform: translateY(24px);
  animation: none;
}
.slide.active .slide-subtitle { animation: fadeUp .8s .4s var(--ease) forwards }
.slide-btns {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: none;
}
.slide.active .slide-btns { animation: fadeUp .8s .55s var(--ease) forwards }

@keyframes fadeUp { to { opacity: 1; transform: none } }

/* Slider controls */
.hero-controls {
  position: absolute; bottom: 2.5rem; left: 0; right: 0; z-index: 20;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
  display: flex; align-items: center; gap: 1.25rem;
}
.hero-dots { display: flex; align-items: center; gap: .6rem }
.hero-dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.25); cursor: pointer;
  transition: all .4s var(--ease); border: none;
}
.hero-dot.active { background: var(--red); width: 36px; box-shadow: 0 0 12px rgba(200,48,42,.5) }
.hero-arrows { display: flex; gap: .6rem; margin-left: auto }
.hero-arrow {
  width: 48px; height: 48px; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.hero-arrow:hover { background: var(--red); border-color: var(--red); transform: scale(1.08); box-shadow: var(--sh-red) }

/* Scroll indicator */
.hero-scroll {
  position: absolute; bottom: 2.5rem; right: var(--px); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.3); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:.9;transform:scaleY(.55)} }

/* ── Hero Quick Appointment Form ── */
.hero-quick-form {
  background: rgba(255,255,255,.97);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
}
.hero-quick-form h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--navy);
  margin: 0 0 .25rem;
}
.hero-quick-form .hero-form-sub {
  font-size: .8rem; color: #64748b; margin-bottom: 1.25rem;
}
.hero-quick-form .hf-group {
  margin-bottom: .75rem;
}
.hero-quick-form .hf-group label {
  display: block; font-size: .7rem; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem;
}
.hero-quick-form .hf-group input,
.hero-quick-form .hf-group select {
  width: 100%; padding: .6rem .75rem; border: 1.5px solid #e5e7eb;
  border-radius: .6rem; font-size: .85rem; font-family: inherit;
  transition: border-color .2s;
  background: #fff;
}
.hero-quick-form .hf-group input:focus,
.hero-quick-form .hf-group select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,48,42,.1);
}
.hero-quick-form .hf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.hero-quick-form .hf-submit {
  width: 100%; padding: .7rem; border: none; border-radius: .6rem;
  background: var(--red, #C8302A); color: #fff; font-size: .9rem;
  font-weight: 700; cursor: pointer; transition: all .2s;
  margin-top: .5rem;
}
.hero-quick-form .hf-submit:hover {
  background: #a02622; transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200,48,42,.3);
}
.hero-quick-form .hf-success {
  text-align: center; padding: 2rem 1rem;
}
.hero-quick-form .hf-success .hf-check {
  width: 48px; height: 48px; border-radius: 50%; background: #dcfce7;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: #16a34a; font-size: 1.5rem;
}

/* ── Hero buttons ── */
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2.5rem;
  border-radius: var(--r);
  background: var(--red); color: #fff;
  font-size: .95rem; font-weight: 800;
  box-shadow: 0 8px 32px rgba(200,48,42,.35);
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
.btn-hero-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.btn-hero-primary:hover { background: var(--red-h); transform: translateY(-3px); box-shadow: 0 14px 44px rgba(200,48,42,.42) }
.btn-hero-primary:hover::before { opacity: 1 }
.btn-hero-outline {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2.5rem;
  border-radius: var(--r);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: .95rem; font-weight: 700;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: all .3s var(--ease);
}
.btn-hero-outline:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); transform: translateY(-2px) }

/* ================================================================
   SECTIONS COMMON
   ================================================================ */
.section { padding: clamp(3.5rem,8vw,6.5rem) var(--px) }
.section-alt { background: var(--bg) }
.section-dark { background: var(--navy); color: #fff }
.section-red { background: var(--red); color: #fff }
.container { max-width: var(--max); margin: 0 auto }

.sec-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .66rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); margin-bottom: .85rem;
}
.sec-label::before { content:''; width: 24px; height: 2px; background: var(--red); border-radius: var(--r-pill); flex-shrink: 0 }
.sec-label--white { color: rgba(255,255,255,.75) }
.sec-label--white::before { background: rgba(255,255,255,.5) }

.sec-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin-bottom: .5rem;
}

.sec-title {
  font-size: clamp(1.7rem,4vw,2.75rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.08;
  color: var(--navy);
}
.sec-title--white { color: #fff }
.sec-desc { font-size: .95rem; color: var(--tx-2); line-height: 1.8; margin-top: .75rem }
.sec-desc--white { color: rgba(255,255,255,.55) }
.sec-head { margin-bottom: clamp(2rem,4vw,3.5rem) }
.sec-head-split {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2rem,4vw,3.5rem); flex-wrap: wrap;
}

/* ================================================================
   ACCREDITATIONS STRIP
   ================================================================ */
.accred {
  background: linear-gradient(180deg, #f0f4f8 0%, #e8eef5 50%, #f0f4f8 100%);
  padding: 5rem 0;
  position: relative; z-index: 1;
  overflow: hidden;
}
.accred::before,
.accred::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.accred::before {
  width: 500px; height: 500px;
  background: rgba(200,48,42,.08);
  top: -150px; left: -150px;
}
.accred::after {
  width: 400px; height: 400px;
  background: rgba(11,27,63,.06);
  bottom: -120px; right: -100px;
}
.accred-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--px);
  position: relative;
  text-align: center;
  z-index: 1;
}
.accred-more-btn {
  position: absolute;
  top: 0; left: var(--px);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.5rem;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: .78rem; font-weight: 800;
  transition: all .2s var(--ease);
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6e 100%);
  box-shadow: 0 4px 16px rgba(11,27,63,.18);
}
.accred-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,27,63,.25);
}
.accred-more-btn svg { transition: transform .2s }
.accred-more-btn:hover svg { transform: translateX(3px) }
.accred-header {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-bottom: 2rem;
  padding: .7rem 1.5rem;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(11,27,63,.08);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 20px rgba(11,27,63,.06), 0 1px 2px rgba(11,27,63,.04);
  backdrop-filter: blur(8px);
}
.accred-header-icon { font-size: 1.35rem }
.accred-header-title {
  font-size: .88rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: .01em;
}
.accred-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow:
    0 1px 2px rgba(11,27,63,.02),
    0 8px 30px rgba(11,27,63,.06),
    0 24px 80px rgba(11,27,63,.08);
}
.accred-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(11,27,63,.08) 0%, rgba(200,48,42,.08) 50%, rgba(11,27,63,.08) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.accred-carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.accred-track {
  display: flex;
  gap: 1.25rem;
  scroll-behavior: smooth;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  scrollbar-width: none;
}
.accred-track::-webkit-scrollbar { display: none }
.accred-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--bdr-s);
  border-radius: 50%;
  cursor: pointer;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(11,27,63,.1);
  transition: all .2s var(--ease);
}
.accred-arrow:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.accred-arrow--prev { left: -3rem; }
.accred-arrow--next { right: -3rem; }
@media (max-width: 640px) {
  .accred-arrow--prev { left: -1.5rem; }
  .accred-arrow--next { right: -1.5rem; }
}
.accred-item {
  flex: 0 0 calc(25% - .9375rem);
  scroll-snap-align: start;
  min-width: 0;
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem;
  background: var(--white);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r-l);
  transition: all .25s var(--ease);
  text-align: left;
  box-shadow: 0 2px 8px rgba(11,27,63,.04);
  overflow: hidden;
}
@media (max-width: 1100px) {
  .accred-item { flex: 0 0 calc(50% - .625rem) }
}
@media (max-width: 640px) {
  .accred-item { flex: 0 0 100% }
}
.accred-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transition: transform .25s var(--ease);
}
.accred-item:hover {
  border-color: var(--red-18);
  box-shadow: 0 12px 32px rgba(11,27,63,.1);
  transform: translateY(-3px);
}
.accred-item:hover::before { transform: scaleY(1) }
.accred-logo {
  width: 54px; height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--bdr-s);
  border-radius: 50%;
  overflow: hidden;
}
.accred-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .5rem;
}
.accred-logo .emoji { font-size: 1.7rem }
.accred-info h4 {
  font-size: .86rem; font-weight: 800;
  color: var(--navy); line-height: 1.35;
  margin-bottom: .2rem;
}
.accred-info p {
  font-size: .74rem; font-weight: 500;
  color: var(--tx-3);
  line-height: 1.45;
}
a.accred-item {
  text-decoration: none;
  cursor: pointer;
}
.accred-arrow-mini {
  position: absolute; right: .9rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem; font-weight: 800;
  color: var(--red);
  opacity: 0;
  transition: all .25s var(--ease);
}
.accred-item:hover .accred-arrow-mini { opacity: 1; right: 1.1rem }
.accred-info { flex: 1; min-width: 0; padding-right: 1.25rem }
@media (max-width: 1100px) {
  .accred-more-btn { position: static; margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  .accred { padding: 3.5rem 0; }
  .accred-card { padding: 1.5rem; }
}
/* ================================================================
   PATIENT STORIES CAROUSEL (Instagram / WhatsApp style tray)
   ================================================================ */
.ps-carousel {
  position: relative;
  padding: .5rem 3.25rem 0;
}
.ps-track {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1rem 0 1.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.ps-track::-webkit-scrollbar { display: none }
.ps-track:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--r) }
.ps-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.ps-track.is-dragging .ps-story { pointer-events: none }

/* One story bubble */
.ps-story {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .25s var(--ease);
}
.ps-story:hover { transform: translateY(-4px) }
.ps-story:focus-visible { outline: none; transform: translateY(-4px) }
.ps-story:focus-visible .ps-story-ring { box-shadow: 0 0 0 3px rgba(220,39,67,.3), 0 8px 24px rgba(220,39,67,.25) }

.ps-story-ring {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background-size: 200% 200%;
  animation: psRing 6s ease infinite;
  box-shadow: 0 4px 16px rgba(220,39,67,.22);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
@keyframes psRing {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.ps-story-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(220,39,67,.25);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ps-story:hover .ps-story-ring::before { opacity: 1 }

.ps-story-hole {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--white);
}
.ps-story-ph {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.ps-story-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* already viewed */
.ps-story.is-seen .ps-story-ring {
  background: #cbd5e1;
  animation: none;
  box-shadow: none;
}
.ps-story.is-seen .ps-story-label { color: var(--tx-3) }

.ps-story-badge {
  position: absolute;
  inset-inline-end: -2px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #dc2743;
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(220,39,67,.4);
}

.ps-story-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx-1);
  text-align: center;
  line-height: 1.25;
  max-width: 92px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  transition: color .3s var(--ease);
}
.ps-story-country {
  font-size: .65rem;
  font-weight: 500;
  color: var(--tx-3);
  text-align: center;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrows */
.ps-arrow {
  position: absolute;
  top: calc(50% - 3rem);
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--bdr);
  background: var(--white);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  box-shadow: var(--sh-sm);
  transition: all .25s var(--ease);
}
.ps-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: var(--sh-red);
  transform: translateY(-50%) scale(1.08);
}
.ps-arrow:disabled { opacity: .35; pointer-events: none }
.ps-arrow--prev { inset-inline-start: 0 }
.ps-arrow--next { inset-inline-end: 0 }

/* Dots */
.ps-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .25rem;
}
.ps-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--bdr);
  transition: all .35s var(--ease);
}
.ps-dots button:hover { background: var(--tx-3) }
.ps-dots button.active { background: var(--red); width: 26px }

/* Responsive */
@media (max-width: 900px) {
  .ps-carousel { padding-inline: 2.25rem }
  .ps-story { width: 88px }
  .ps-story-ring { width: 82px; height: 82px }
  .ps-story-label, .ps-story-country { max-width: 86px }
}
@media (max-width: 640px) {
  .ps-carousel { padding-inline: 0 }
  .ps-story { width: 78px; gap: .4rem }
  .ps-story-ring { width: 72px; height: 72px; padding: 2.5px }
  .ps-story-label, .ps-story-country { max-width: 76px; font-size: .68rem }
  .ps-arrow { display: none }
  .ps-track { gap: 1rem; padding-bottom: 1rem }
}
@media (prefers-reduced-motion: reduce) {
  .ps-story-ring { animation: none }
}
/* Fullscreen viewer modal */
.story-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.story-modal.active { display: flex }

.story-modal-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(14px);
}

.story-viewer {
  position: relative; z-index: 2;
  width: 100%; max-width: 440px; height: 92vh; max-height: 820px;
  background: #000; border-radius: 20px; overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
}
@media(max-width:480px) {
  .story-viewer { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0 }
}

/* Nav arrows on desktop outside/beside the viewer (Instagram style) */
.story-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10005;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.story-arrow-btn:hover {
  background: rgba(255,255,255,.38);
  transform: translateY(-50%) scale(1.08);
}
.story-arrow-prev { left: max(20px, calc(50% - 290px)); }
.story-arrow-next { right: max(20px, calc(50% - 290px)); }
@media (max-width: 580px) {
  .story-arrow-btn { display: none !important; }
}

/* Progress bar timeline */
.story-progress-bar {
  display: flex; gap: 5px; padding: 14px 14px 8px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
}
.story-progress-segment {
  flex: 1; height: 3px; background: rgba(255,255,255,.32); border-radius: 2px; overflow: hidden;
}
.story-progress-segment .fill {
  height: 100%; width: 0%; background: #fff; border-radius: 2px;
}
.story-progress-segment .fill.completed { width: 100% }
.story-progress-segment .fill.active { width: 0 }

/* Story user info header */
.story-header {
  position: absolute; top: 24px; left: 14px; right: 14px;
  z-index: 20; display: flex; align-items: center; gap: .75rem;
  padding: 6px 8px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}
.story-user-img {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
  background-size: cover; background-position: center; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.story-user-info { display: flex; flex-direction: column; overflow: hidden; }
.story-user-info strong { color: #fff; font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.story-user-info span { color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.story-header-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.story-pause-btn {
  background: none; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; transition: background .2s;
}
.story-pause-btn:hover { background: rgba(255,255,255,.2); }
.story-close-btn {
  background: none; border: none;
  color: #fff; font-size: 1.8rem; cursor: pointer; line-height: 1;
  padding: 0 .4rem; display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.story-close-btn:hover { transform: scale(1.15); }

/* Content */
.story-content {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0b0f19;
}
.story-media-blur {
  position: absolute; inset: -20px;
  background-size: cover; background-position: center;
  filter: blur(30px) brightness(0.35);
  transform: scale(1.2);
  z-index: 1;
}
.story-media-main {
  position: relative; z-index: 2;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Tap zones for left/right tapping like Instagram / WhatsApp */
.story-tap-zone {
  position: absolute; top: 70px; bottom: 85px; z-index: 15; cursor: pointer;
}
.story-tap-left { left: 0; width: 35%; }
.story-tap-right { right: 0; width: 65%; }

/* Caption */
.story-caption {
  position: absolute; bottom: 75px; left: 16px; right: 16px;
  z-index: 20; color: #fff; font-size: .88rem; font-weight: 500;
  line-height: 1.45; text-align: center;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 12px;
  pointer-events: none;
  max-height: 100px; overflow-y: auto;
}
.story-caption:empty { display: none }

/* Swipe up / Action link */
.story-swipe-up {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3);
  padding: 8px 18px; border-radius: 50px;
  color: #fff; text-decoration: none; font-size: .8rem; font-weight: 700;
  transition: all .25s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.story-swipe-up:hover {
  background: #fff; color: #111;
  transform: translateX(-50%) translateY(-2px);
}
.swipe-arrow { font-size: .75rem; }

/* ================================================================
   ABOUT
   ================================================================ */
.about-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem,6vw,6rem);
  align-items: center;
}
.about-media { position: relative }
.about-img-main {
  width: 100%; height: 560px; object-fit: cover;
  border-radius: var(--r-xl);
}
.about-img-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--red);
  border-radius: var(--r-l);
  padding: 1.75rem 2rem;
  color: #fff; text-align: center;
  box-shadow: var(--sh-red);
}
.about-img-badge strong { display: block; font-size: 2.75rem; font-weight: 900; letter-spacing: -.04em; line-height: 1 }
.about-img-badge span { font-size: .7rem; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .1em }
.about-float {
  position: absolute; top: 2rem; left: -2rem;
  background: var(--white);
  border-radius: var(--r-l);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: .85rem;
}
.about-float-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--red-10);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); flex-shrink: 0;
}
.about-float-text span { display: block; font-size: .7rem; color: var(--tx-3); font-weight: 600 }
.about-float-text strong { display: block; font-size: .95rem; font-weight: 900; color: var(--navy) }

.about-content h2 { font-size: clamp(1.6rem,3.5vw,2.5rem); font-weight: 900; color: var(--navy); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 1.25rem }
.about-content p { font-size: .93rem; color: var(--tx-2); line-height: 1.85; margin-bottom: 1rem }
.about-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--bdr); border-radius: var(--r-l);
  overflow: hidden; margin: 2rem 0;
  box-shadow: var(--sh-xs);
}
.about-stat { padding: 1.35rem 1rem; text-align: center }
.about-stat:not(:last-child) { border-right: 1px solid var(--bdr) }
.about-stat strong { display: block; font-size: 2rem; font-weight: 900; color: var(--red); letter-spacing: -.04em }
.about-stat span { font-size: .67rem; font-weight: 800; color: var(--tx-3); text-transform: uppercase; letter-spacing: .1em }
.about-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 800; color: var(--red);
  margin-top: 1rem;
  transition: gap .15s;
}
.about-link:hover { gap: .85rem }

/* ================================================================
   INT'L PATIENT SERVICES
   ================================================================ */
.intl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.intl-card {
  background: var(--white);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
  transition: all .25s var(--ease);
  position: relative; overflow: hidden;
}
.intl-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.intl-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent }
.intl-card:hover::before { transform: scaleX(1) }
.intl-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-l);
  background: var(--red-10);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  margin-bottom: 1.25rem;
  transition: background .25s, transform .25s;
}
.intl-card:hover .intl-icon { background: var(--red); color: #fff; transform: scale(1.1) }
.intl-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-bottom: .5rem }
.intl-card p { font-size: .85rem; color: var(--tx-2); line-height: 1.75 }
.intl-card-num {
  position: absolute; top: 1.5rem; right: 1.75rem;
  font-size: 3.5rem; font-weight: 900; color: var(--bg-2);
  letter-spacing: -.06em; line-height: 1;
  transition: color .25s;
}
.intl-card:hover .intl-card-num { color: var(--red-10) }

/* ================================================================
   SPECIALTY CENTERS
   ================================================================ */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.5rem;
}
.specialty-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 300px;
  background: var(--navy);
  transition: transform .3s var(--ease);
}
.specialty-card:hover { transform: scale(1.01) }
.specialty-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .45;
  transition: opacity .3s, transform .5s var(--ease);
}
.specialty-card:hover .specialty-bg { opacity: .55; transform: scale(1.04) }
.specialty-body {
  position: relative; z-index: 2;
  padding: 2rem 2.25rem; width: 100%;
  background: linear-gradient(to top, rgba(11,27,63,.95) 0%, rgba(11,27,63,.4) 70%, transparent 100%);
}
.specialty-tag {
  display: inline-block;
  background: var(--red); color: #fff;
  font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  margin-bottom: .75rem;
}
.specialty-card h3 { font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: .5rem }
.specialty-card p { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 380px }
.specialty-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem; font-size: .8rem; font-weight: 800; color: rgba(255,255,255,.7);
  transition: color .15s, gap .15s;
}
.specialty-card:hover .specialty-link { color: #fff; gap: .65rem }

/* ================================================================
   MEDICAL DEPARTMENTS
   ================================================================ */
.depts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: .85rem;
}
.dept-card {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r);
  transition: all .2s var(--ease);
  color: inherit;
}
.dept-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
  border-color: rgba(200,48,42,.2);
  background: #fff;
}
.dept-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--red-10); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.dept-card:hover .dept-icon { background: var(--red); color: #fff; transform: scale(1.08) }
.dept-text h4 { font-size: .88rem; font-weight: 800; color: var(--navy); line-height: 1.2 }
.dept-text span { font-size: .73rem; color: var(--tx-3) }
.dept-arrow { margin-left: auto; color: var(--bdr); transition: color .15s, transform .15s; flex-shrink: 0 }
.dept-card:hover .dept-arrow { color: var(--red); transform: translateX(3px) }

/* ================================================================
   MEDICAL TECHNOLOGY
   ================================================================ */
.tech-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}
.tech-list { display: flex; flex-direction: column; gap: 1rem }
.tech-item {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--bdr-s);
  border-radius: var(--r-l);
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: all .2s var(--ease);
}
.tech-item:hover, .tech-item.active {
  border-color: var(--red);
  background: var(--red-10);
  box-shadow: 0 4px 20px rgba(200,48,42,.1);
}
.tech-item-num {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900; color: var(--tx-3);
  flex-shrink: 0; transition: all .2s;
}
.tech-item:hover .tech-item-num, .tech-item.active .tech-item-num {
  background: var(--red); color: #fff;
}
.tech-item-text h4 { font-size: .92rem; font-weight: 800; color: var(--navy); margin-bottom: .2rem }
.tech-item-text p { font-size: .8rem; color: var(--tx-2); line-height: 1.6 }
.tech-item-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 800; color: var(--red);
  margin-top: .45rem; text-decoration: none;
}
.tech-item-link svg { transition: transform .2s var(--ease) }
.tech-item-link:hover svg { transform: translateX(3px) }
.tech-visual {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sh-xl);
}
.tech-img-panel {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  display: flex; align-items: flex-end;
}
.tech-img-panel.active { opacity: 1; z-index: 2 }
.tech-panel-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.tech-img-panel.active .tech-panel-bg { transform: scale(1) }
.tech-panel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,27,63,.98) 0%, rgba(11,27,63,.82) 35%, rgba(11,27,63,.25) 70%, transparent 100%);
}
.tech-panel-content {
  position: relative; z-index: 3;
  padding: 2rem;
  width: 100%;
  color: #fff;
}
.tech-panel-cat {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .85rem;
}
.tech-panel-content h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: .75rem;
  letter-spacing: -.03em;
}
.tech-panel-desc {
  font-size: .88rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-height: 5.8rem;
  overflow: hidden;
}
.tech-panel-features {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.tech-panel-features li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.92);
}
.tech-panel-features li::before {
  content: '✓';
  color: var(--red);
  font-weight: 900;
  font-size: .8rem;
}

/* ================================================================
   PAYMENT OPTIONS
   ================================================================ */
.payment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.payment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-l);
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
}
.payment-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--red-18) }
.payment-icon {
  width: 68px; height: 68px; border-radius: var(--r-l);
  background: var(--red-10);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--red); font-size: 2rem;
  transition: all .25s;
}
.payment-card:hover .payment-icon { background: var(--red); color: #fff; transform: scale(1.08) }
.payment-card h3 { font-size: .95rem; font-weight: 800; color: var(--navy); margin-bottom: .5rem }
.payment-card p { font-size: .82rem; color: var(--tx-2); line-height: 1.7; flex-grow: 1 }
.payment-more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.25rem;
  font-size: .75rem; font-weight: 800; color: var(--red);
  letter-spacing: .02em;
}

/* ================================================================
   PAYMENT DETAIL PAGE
   ================================================================ */
.pay-detail-back {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .85rem; font-weight: 700; color: var(--tx-2);
  text-decoration: none; transition: color .2s;
}
.pay-detail-back:hover { color: var(--red) }
.pay-detail-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: clamp(2rem,4vw,3.5rem);
  box-shadow: var(--sh-md);
}
.pay-detail-head {
  display: flex; align-items: center; gap: 1.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 1.75rem;
}
.pay-detail-head .payment-icon { margin: 0; flex-shrink: 0 }
.pay-detail-head h2 { font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 900; color: var(--navy); letter-spacing: -.03em; margin: 0 0 .5rem }
.pay-detail-head .payment-logos { justify-content: flex-start; margin-top: 0 }
.pay-detail-body {
  font-size: .95rem; color: var(--tx-2); line-height: 1.9;
  margin-bottom: 2rem;
}
.pay-detail-cta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center }

/* ================================================================
   MAP SECTION
   ================================================================ */
.map-section {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.map-wrap { position: relative; display: grid; grid-template-columns: 1fr 2fr }
.map-info {
  background: var(--navy);
  padding: clamp(2.5rem,6vw,5rem) var(--px);
  display: flex; flex-direction: column; justify-content: center; gap: 2rem;
  position: relative; z-index: 2;
}
.map-info::after {
  content: '';
  position: absolute; top: 0; right: -1px; bottom: 0;
  width: 80px;
  background: linear-gradient(to right, var(--navy), transparent);
  z-index: 3;
}
.map-contact { display: flex; flex-direction: column; gap: 1.25rem }
.map-contact-item { display: flex; align-items: flex-start; gap: 1rem }
.map-contact-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(200,48,42,.2); color: #FFB3B3;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.map-contact-label { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .2rem }
.map-contact-value { font-size: .9rem; font-weight: 700; color: #fff }
.map-contact-value a { color: #fff; transition: color .15s }
.map-contact-value a:hover { color: #FFB3B3 }
.map-embed { position: relative }
.map-embed iframe { width: 100%; height: 100%; min-height: 500px; display: block; border: 0; filter: grayscale(.2) }

/* ================================================================
   ALERTS / PAGINATION / BUTTON BACK
   ================================================================ */
.alert { padding: .75rem 1rem; border-radius: var(--r-s); font-size: .875rem; margin-bottom: 1rem; line-height: 1.5 }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0 }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca }
.alert-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd }

.pagination { display: flex; align-items: center; gap: .4rem; margin-top: 2rem; justify-content: center }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: var(--r-s); font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .15s }
.pagination a { background: var(--white); border: 1px solid var(--bdr); color: var(--tx-2) }
.pagination a:hover { border-color: var(--red); color: var(--red); background: var(--red-10) }
.pagination span.active { background: var(--red); color: #fff; border: 1px solid var(--red) }

.btn-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--red); text-decoration: none; transition: gap .15s }
.btn-back:hover { gap: .6rem }

.form-group { margin-bottom: 1rem }
.form-group label { display: block; font-size: .8rem; font-weight: 700; color: var(--tx-1); margin-bottom: .35rem }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--bdr); border-radius: var(--r-s); font-family: var(--font); font-size: .88rem; color: var(--tx-1); background: var(--white); outline: none; transition: border-color .12s }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--red) }
.form-group textarea { resize: vertical; min-height: 100px }

/* Social icon buttons (footer) */
.social-btn {
  width: 38px; height: 38px; border-radius: var(--r-s);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); text-decoration: none;
  transition: all .15s;
}
.social-btn:hover { color: #fff }
.social-btn--wa:hover { background: #25D366 }
.social-btn--fb:hover { background: #1877f2 }
.social-btn--ig:hover { background: #E1306C }
.social-btn--yt:hover { background: #FF0000 }

/* Accreditation badges */
.accred-badge {
  display: inline-flex; padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .65rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* About page collage */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center }
.about-img-collage { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border-radius: var(--r-xl); overflow: hidden }
.about-img-collage img:first-child { grid-row: 1 / 3; height: 100%; min-height: 380px; object-fit: cover; width: 100% }
.about-img-collage img:nth-child(2),
.about-img-collage img:nth-child(3) { height: 186px; object-fit: cover; width: 100% }
.about-stats-card {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin: 2rem 0; padding: 1.5rem;
  background: var(--white); border-radius: var(--r-l);
  box-shadow: var(--sh-sm);
}
.about-stat-item { text-align: center }
.about-stat-value { font-size: 1.8rem; font-weight: 900; color: var(--red) }
.about-stat-label { font-size: .75rem; color: var(--tx-3); font-weight: 600 }
.about-stat-item--border { border-left: 1px solid var(--bdr-s); border-right: 1px solid var(--bdr-s) }
.about-title { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; color: var(--navy); line-height: 1.2; margin-bottom: 1.5rem }
.about-body-text { color: var(--tx-2); line-height: 1.8; margin-bottom: 1rem; font-size: .95rem }

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem }
  .about-img-collage img:first-child { min-height: 260px }
  .about-stats-card { grid-template-columns: 1fr; gap: 1rem }
  .about-stat-item--border { border: none }
}

/* ================================================================
   CARDS / UTILS
   ================================================================ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.25rem }
.card {
  background: var(--white); border-radius: var(--r-l);
  overflow: hidden; border: 1px solid var(--bdr-s);
  transition: all .25s var(--ease); display: block;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent }
.card-img { position: relative; height: 210px; overflow: hidden; background: var(--bg) }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.card:hover .card-img img { transform: scale(1.06) }
.card-badge {
  position: absolute; top: .85rem; left: .85rem;
  padding: .22rem .65rem; border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
}
.card-body { padding: 1.35rem }
.card-cat { font-size: .65rem; font-weight: 900; color: var(--red); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .45rem }
.card h3 { font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1.35 }
.card p { font-size: .82rem; color: var(--tx-2); line-height: 1.65; margin-top: .4rem }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.75rem;
  border-radius: var(--r);
  font-family: var(--font); font-size: .84rem; font-weight: 800;
  cursor: pointer; transition: all .18s var(--ease);
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 3px 14px rgba(200,48,42,.22) }
.btn-primary:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: var(--sh-red) }
.btn-ghost { border: 1.5px solid var(--bdr); color: var(--tx-2); background: var(--white) }
.btn-ghost:hover { border-color: var(--red); color: var(--red); background: var(--red-10) }
.btn-navy { background: var(--navy); color: #fff }
.btn-navy:hover { background: var(--navy-2); transform: translateY(-1px) }
.btn-white { background: #fff; color: var(--navy) }
.btn-white:hover { background: var(--red); color: #fff }
.btn-sm { padding: .5rem 1.1rem; font-size: .78rem }
.btn-lg { padding: 1rem 2.5rem; font-size: .92rem }

/* Backward compat */
.btn-all { display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.75rem;border-radius:var(--r);font-family:var(--font);font-size:.84rem;font-weight:800;background:var(--navy);color:#fff;transition:all .18s var(--ease) }
.btn-all:hover { background:var(--red);transform:translateY(-1px) }
.btn-all svg { transition:transform .15s }
.btn-all:hover svg { transform:translateX(3px) }
.btn-hero-primary,.hero-btn-primary { display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2.2rem;border-radius:var(--r);background:var(--red);color:#fff;font-size:.9rem;font-weight:800;box-shadow:var(--sh-red);transition:all .2s var(--ease);font-family:var(--font) }
.btn-hero-primary:hover,.hero-btn-primary:hover { background:var(--red-h);transform:translateY(-2px);box-shadow:0 12px 40px rgba(200,48,42,.38) }
.hero-btn-outline,.btn-hero-outline { display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2.2rem;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:.9rem;font-weight:700;background:rgba(255,255,255,.06);backdrop-filter:blur(4px);transition:all .2s var(--ease);font-family:var(--font) }
.hero-btn-outline:hover,.btn-hero-outline:hover { border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12) }

/* ================================================================
   FOOTER
   ================================================================ */
.ftr { background: var(--navy); color: #fff }
.ftr-upper {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: clamp(3rem,6vw,5rem) var(--px);
}
.ftr-upper-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.ftr-brand { display: flex; flex-direction: column; gap: .75rem; max-width: 300px }
.ftr-brand-logo { display: flex; align-items: center; gap: .75rem }
.ftr-brand-logo .logo-img--ftr { height: 40px; max-width: 200px }
.ftr-brand .logo-mark { width: 38px; height: 38px; font-size: .82rem }
.ftr-brand-name { font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: -.02em }
.ftr-brand p { font-size: .82rem; color: rgba(255,255,255,.38); line-height: 1.7 }
.ftr-brand-btns { display: flex; gap: .6rem; flex-wrap: wrap }
.ftr-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .58rem 1.2rem; border-radius: var(--r-s);
  font-size: .8rem; font-weight: 800;
  transition: all .15s;
}
.ftr-btn-red { background: var(--red); color: #fff }
.ftr-btn-red:hover { background: var(--red-h) }
.ftr-btn-outline { border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75) }
.ftr-btn-outline:hover { background: rgba(255,255,255,.08) }

.ftr-main {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2.5rem,5vw,4rem) var(--px);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem;
}
.ftr-col h5 {
  font-size: .65rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 1.25rem;
}
.ftr-col a {
  display: block; font-size: .82rem; color: rgba(255,255,255,.36);
  padding: .28rem 0; transition: all .12s;
}
.ftr-col a:hover { color: #fff; padding-left: 5px }
.ftr-col a.is-active { color: var(--red); font-weight: 700 }
.ftr-info { margin-bottom: 1.25rem }
.ftr-info-label { font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .3rem }
.ftr-info-text { font-size: .8rem; color: rgba(255,255,255,.38); line-height: 1.7 }
.ftr-phone { font-size: 1.15rem; font-weight: 900; color: #fff; display: block; letter-spacing: -.01em }
.ftr-email { font-size: .8rem; color: rgba(255,255,255,.3); display: block; margin-top: .15rem }

.ftr-bottom {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 1.4rem var(--px);
}
.ftr-bottom-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: .74rem; color: rgba(255,255,255,.25);
}
.ftr-bottom a { color: rgba(255,255,255,.25); transition: color .12s }
.ftr-bottom a:hover { color: rgba(255,255,255,.6) }
.ftr-bottom-links { display: flex; gap: 1.25rem }

/* Scroll top */
.scroll-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 46px; height: 46px; border-radius: var(--r-s);
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(200,48,42,.32);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: all .3s var(--ease);
}
.scroll-top.show { opacity: 1; transform: none; pointer-events: auto }
.scroll-top:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(200,48,42,.4) }

/* ================================================================
   PAGE HERO (inner pages)
   ================================================================ */
.page-hero {
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: clamp(4rem,8vw,7rem) var(--px) clamp(3rem,6vw,5rem);
  color: #fff; position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -30%; right: -5%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,48,42,.18) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.page-hero h1 { font-size: clamp(2rem,5vw,3.5rem); font-weight: 900; letter-spacing: -.04em; margin: .6rem 0 }
.page-hero p { color: rgba(255,255,255,.6); font-size: .9rem }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.45); flex-wrap: wrap }
.breadcrumb a { color: rgba(255,255,255,.45); transition: color .12s }
.breadcrumb a:hover { color: rgba(255,255,255,.9) }
.breadcrumb span { color: rgba(255,255,255,.25) }

/* ================================================================
   INNER PAGE COMPONENTS
   ================================================================ */
.doctors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem }
.doctor-card {
  background: var(--white); border-radius: var(--r-l);
  overflow: hidden; border: 1px solid var(--bdr-s);
  transition: all .25s var(--ease);
}
.doctor-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent }
.doctor-card-img { height: 240px; background: var(--bg); overflow: hidden }
.doctor-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease) }
.doctor-card:hover .doctor-card-img img { transform: scale(1.04) }
.doctor-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bdr) }
.doctor-card-body { padding: 1.25rem }
.doctor-title { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--red); margin-bottom: .2rem }
.doctor-card-body h3 { font-size: 1rem; font-weight: 900; color: var(--navy); margin: 0 0 .3rem; line-height: 1.2 }
.doctor-spec { font-size: .8rem; color: var(--tx-2); margin-bottom: .85rem }
.doctor-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 800; color: var(--red); transition: gap .15s }
.doctor-link:hover { gap: .6rem }

.hosp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 1.5rem }
.hosp-card { background: var(--white); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--bdr-s); display: flex; flex-direction: column; transition: all .25s var(--ease) }
.hosp-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent }
.hosp-img { height: 210px; overflow: hidden; background: var(--bg) }
.hosp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.hosp-card:hover .hosp-img img { transform: scale(1.04) }
.hosp-img-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: var(--bg) }
.hosp-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .7rem }
.hosp-body h2 { font-size: 1.1rem; font-weight: 900; color: var(--navy) }
.hosp-location { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--tx-3) }
.hosp-desc { font-size: .85rem; color: var(--tx-2); line-height: 1.7; flex: 1 }
.hosp-contacts { display: flex; flex-direction: column; gap: .35rem }
.hosp-contact { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--tx-2); transition: color .12s }
.hosp-contact:hover { color: var(--red) }
.hosp-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; color: var(--red); margin-top: .25rem; transition: gap .12s }
.hosp-link:hover { gap: .6rem }

.units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: .85rem }
.unit-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--white); border-radius: var(--r); border: 1px solid var(--bdr-s); transition: all .2s var(--ease); color: inherit }
.unit-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: rgba(200,48,42,.15) }
.unit-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--red-10); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0 }
.unit-card h3 { font-size: .92rem; font-weight: 800; color: var(--navy); margin: 0 0 .15rem }
.unit-card p { font-size: .78rem; color: var(--tx-3) }
.unit-arrow { margin-left: auto; color: var(--bdr); flex-shrink: 0; transition: color .12s, transform .12s }
.unit-card:hover .unit-arrow { color: var(--red); transform: translateX(2px) }
.unit-block { background: var(--bg); border-radius: var(--r); padding: 1.35rem; margin-bottom: 1rem; border: 1px solid var(--bdr) }
.unit-block h3 { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--red); margin: 0 0 .65rem }
.unit-block p { font-size: .88rem; color: var(--tx-2); line-height: 1.8 }

.hg-filter { display: flex; gap: .75rem; margin-bottom: 2.75rem; flex-wrap: wrap; background: var(--bg); padding: 1rem; border-radius: var(--r-l); border: 1px solid var(--bdr) }
.hg-filter input, .hg-filter select { flex: 1; min-width: 200px; padding: .7rem 1rem; border: 1.5px solid var(--bdr); border-radius: var(--r-s); font-family: var(--font); font-size: .86rem; background: var(--white); color: var(--tx-1); transition: border-color .12s; outline: none }
.hg-filter input:focus, .hg-filter select:focus { border-color: var(--red) }
.article-wrap { max-width: 800px; margin: 0 auto }
.article-hero-img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--r-xl); margin-bottom: 2.5rem }
.article-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.75rem }
.article-summary { font-size: 1.1rem; color: var(--tx-2); line-height: 1.8; font-weight: 500; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--bdr) }
.article-content { font-size: .95rem; color: var(--tx-1); line-height: 1.9 }
.article-content p { margin-bottom: 1rem }
.empty-state { text-align: center; padding: 5rem 0; color: var(--tx-3) }
.empty-state h3 { margin-top: 1rem; font-size: 1.2rem; color: var(--tx-2) }

/* ================================================================
   STORIES (Patient Stories Listing & Detail)
   ================================================================ */
.stories-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto }
/* card/img/card-body flex zinciri: tum kartlar esit yukseklikte, gorseller kirpilmadan */
.stories-grid .story-card { display: flex; flex-direction: column; height: 100% }
.stories-grid .story-card .card-img { height: auto; aspect-ratio: 16/10; position: relative; flex: none }
.stories-grid .story-card .card-img img,
.stories-grid .story-card .card-img video { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block }
.stories-grid .story-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .35rem }
.stories-grid .story-card .story-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.stories-grid .story-card .story-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-card { text-decoration: none }
.story-card .card-img { aspect-ratio: 16/10; position: relative }
.story-card-video-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.story-card-placeholder {
  height: 100%; background: linear-gradient(135deg,var(--navy),var(--navy-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.story-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem }
.story-flag { font-size: 1.5rem; line-height: 1 }
.story-name { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 }
.story-country { font-size: .8rem; color: var(--tx-3) }
.story-summary { font-size: .9rem; color: var(--tx-2); line-height: 1.6 }

.story-detail-wrap { max-width: 800px; margin: 0 auto }
.story-detail-back {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--red); font-weight: 700; margin-bottom: 2rem;
  padding: .5rem 0; transition: gap .15s;
}
.story-detail-back:hover { gap: .75rem }
.story-detail-media {
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 2.5rem;
}
.story-detail-media img, .story-detail-media video {
  width: 100%; display: block;
}
.story-detail-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem }
.story-detail-flag { font-size: 2.5rem; line-height: 1 }
.story-detail-info h1 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin: 0 }
.story-detail-country { font-size: .9rem; color: var(--tx-3) }
.story-detail-body { font-size: 1.05rem; color: var(--tx-1); line-height: 1.9 }
.story-detail-cta { margin-top: 2rem }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem }
.contact-form h3, .contact-info h3 {
  font-size: 1.5rem; font-weight: 900; color: var(--navy); margin-bottom: 1.5rem;
}
.contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start }
.contact-info-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--red-10); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--red);
}
.contact-info-label { font-weight: 700; color: var(--navy); margin-bottom: .25rem }
.contact-info-value { color: var(--tx-2); font-size: .9rem; line-height: 1.6 }
.contact-phone-link { font-size: 1.2rem; font-weight: 800; color: var(--red); display: block }
.contact-email-link { color: var(--red); font-weight: 600 }
.contact-map {
  border-radius: var(--r-xl); overflow: hidden; height: 300px;
  background: var(--surface);
}
.contact-map iframe { width: 100%; height: 100%; border: 0 }

.contact-success {
  text-align: center; padding: 2rem;
}
.contact-success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: #d1fae5; display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.contact-success-text { color: #065f46; font-weight: 600 }

/* ================================================================
   APPOINTMENT PAGE
   ================================================================ */
.appointment-wrap { max-width: 800px; margin: 0 auto }
.appointment-form-card {
  background: var(--white); border-radius: var(--r-xl);
  padding: 2.5rem; box-shadow: var(--sh-md);
}
.appointment-form-card h3 {
  font-size: 1.25rem; font-weight: 800; color: var(--navy);
  margin-bottom: 1.5rem;
}
.appointment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.appointment-submit {
  width: 100%; padding: .875rem; font-size: 1rem;
}

.appointment-success {
  text-align: center; padding: 3rem 1rem;
}
.appointment-success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: #d1fae5; display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.appointment-success h2 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: .75rem }
.appointment-success p { color: var(--tx-2); line-height: 1.7 }

/* ================================================================
   KVKK / PRIVACY PAGE
   ================================================================ */
.kvkk-tabs {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--bdr);
  padding-bottom: .5rem;
}
.kvkk-tab {
  padding: .5rem 1.25rem; border-radius: var(--r);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  background: var(--bg); color: var(--tx-2);
  transition: all .15s;
}
.kvkk-tab:hover { background: var(--red-10); color: var(--red) }
.kvkk-tab.active { background: var(--red); color: #fff }
.kvkk-content {
  font-size: 1rem; color: var(--tx-1); line-height: 1.9;
}
.kvkk-empty {
  text-align: center; padding: 4rem 1rem;
}
.kvkk-empty-icon { font-size: 4rem; margin-bottom: 1rem; display: block }
.kvkk-empty h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .about-wrap { grid-template-columns: 1fr; gap: 3rem }
  .about-float { display: none }
  .tech-layout { grid-template-columns: 1fr }
  .tech-visual { aspect-ratio: 16/9 }
  .map-wrap { grid-template-columns: 1fr }
  .intl-grid { grid-template-columns: repeat(2,1fr) }
  .specialty-grid { grid-template-columns: 1fr }
  .ftr-main { grid-template-columns: repeat(2,1fr) }
  .stories-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto }
  .story-card--tall { grid-row: auto }
}
@media (max-width: 768px) {
  .hdr-topbar { display: none }
  .intl-grid { grid-template-columns: 1fr }
  .depts-grid { grid-template-columns: repeat(2,1fr) }
  .payment-grid { grid-template-columns: 1fr 1fr }
  .ftr-main { grid-template-columns: 1fr }
  .ftr-upper-inner { flex-direction: column }
  .ftr-bottom-inner { flex-direction: column; text-align: center }
  .stories-grid { grid-template-columns: 1fr }
  .specialty-grid { grid-template-columns: 1fr }
  .map-wrap { grid-template-columns: 1fr }
  .map-info::after { display: none }
  .card-grid, .doctors-grid, .hosp-grid { grid-template-columns: 1fr }
  .about-img-main { height: 360px }
  .about-img-badge { right: 1rem; bottom: 1rem }
}
@media (max-width: 480px) {
  .depts-grid, .payment-grid { grid-template-columns: 1fr }
}

/* ================================================================
   TECHNOLOGY LIST + DETAIL
   ================================================================ */
.tech-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.tech-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem; background: var(--white);
  border: 1px solid var(--bdr-s); border-radius: var(--r-l);
  text-decoration: none; color: inherit; position: relative;
  transition: all .2s var(--ease);
}
.tech-card:hover {
  border-color: var(--red); box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}
.tech-card-num {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900; color: var(--tx-3);
}
.tech-card:hover .tech-card-num { background: var(--red); color: #fff }
.tech-card-cat {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red);
  background: var(--red-10); padding: .25rem .6rem; border-radius: 6px;
}
.tech-card h3 { font-size: 1rem; font-weight: 800; color: var(--navy); margin: 0 }
.tech-card p { font-size: .82rem; color: var(--tx-2); line-height: 1.6; margin: 0; flex: 1 }
.tech-card-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 800; color: var(--red); margin-top: .4rem;
}
.tech-card-more svg { transition: transform .2s var(--ease) }
.tech-card:hover .tech-card-more svg { transform: translateX(3px) }

/* Detail */
.tech-detail-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: var(--tx-2);
  margin-bottom: 1.25rem; text-decoration: none;
}
.tech-detail-back:hover { color: var(--red) }
.tech-detail-card {
  background: var(--white); border: 1px solid var(--bdr-s);
  border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--sh-lg);
}
.tech-detail-img { border-radius: var(--r-l); overflow: hidden; margin-bottom: 1.25rem; background: #f8fafc }
.tech-detail-img img { width: 100%; height: auto; max-height: none; object-fit: contain; display: block }
.tech-detail-card .tech-card-cat { margin-bottom: 1rem }
.tech-detail-body { font-size: .95rem; color: var(--tx-2); line-height: 1.8 }
.tech-detail-features { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--bdr-s) }
.tech-detail-features h3 { font-size: .9rem; font-weight: 800; color: var(--navy); margin-bottom: .9rem }
.tech-detail-features ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem }
.tech-detail-features li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; color: var(--tx-2);
}
.tech-detail-features li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0; margin-top: .5em;
}
.tech-detail-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem }

@media (max-width: 768px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 480px) {
  .tech-grid { grid-template-columns: 1fr }
}

/* ================================================================
   PARTNERS
   ================================================================ */
.partners-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.partners-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  padding: 1.5rem; background: var(--white);
  border: 1px solid var(--bdr-s); border-radius: var(--r-l);
  transition: all .2s var(--ease);
}
.partners-card:hover {
  border-color: var(--red); box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}
.partners-logo {
  width: 100%; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 12px; padding: .75rem;
}
.partners-logo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.partners-name { font-size: .95rem; font-weight: 800; color: var(--navy); margin: 0 }
.partners-desc { font-size: .82rem; color: var(--tx-2); line-height: 1.6; margin: 0; flex: 1 }
.partners-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 800; color: var(--red);
  text-decoration: none;
}
.partners-link:hover { text-decoration: underline }
@media (max-width: 1100px) { .partners-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 860px)  { .partners-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px)  { .partners-grid { grid-template-columns: 1fr } }

/* ================================================================
   TIMELINE CAROUSEL
   ================================================================ */
.tl-carousel {
  position: relative;
  padding: 0 3.5rem;
  margin: 0 auto;
}
.tl-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2rem 0 2.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tl-track::-webkit-scrollbar { display: none }
.tl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--bdr-s, #e5e7eb);
  background: var(--white, #fff);
  color: var(--navy, #0B1B3F);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all .25s var(--ease);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.tl-arrow:hover {
  background: var(--red, #C8302A);
  border-color: var(--red, #C8302A);
  color: #fff;
  box-shadow: 0 4px 20px rgba(200,48,42,.3);
  transform: translateY(-50%) scale(1.08);
}
.tl-prev { left: 0 }
.tl-next { right: 0 }
.tl-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: -.5rem;
}
.tl-dots .tl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bdr-s, #e5e7eb);
  border: none;
  cursor: pointer;
  transition: all .3s var(--ease);
  padding: 0;
}
.tl-dots .tl-dot.active {
  background: var(--red, #C8302A);
  width: 24px;
  border-radius: 4px;
}
.tl-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  position: relative;
  background: var(--white, #fff);
  border-radius: var(--r-l, 1rem);
  border: 1px solid var(--bdr-s, #e5e7eb);
  padding: 2rem 1.5rem 1.5rem;
  transition: all .35s var(--ease);
  text-align: center;
  overflow: hidden;
}
.tl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red, #C8302A), var(--red-2, #e0b8b6));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.tl-card:hover {
  transform: translateY(-8px);
  border-color: var(--red, #C8302A);
  box-shadow: 0 12px 40px rgba(200,48,42,.15), 0 4px 16px rgba(0,0,0,.06);
}
.tl-card:hover::before { opacity: 1 }
.tl-card-year {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--red, #C8302A);
  line-height: 1;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, var(--red, #C8302A), #a02020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tl-card-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--red-10, #fef2f2);
  border: 2px solid var(--red, #C8302A);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  transition: all .3s var(--ease);
}
.tl-card:hover .tl-card-dot {
  background: var(--red, #C8302A);
  transform: scale(1.1);
}
.tl-card-icon {
  font-size: 1.2rem;
  color: var(--red, #C8302A);
  transition: color .3s var(--ease);
}
.tl-card:hover .tl-card-icon { color: #fff }
.tl-card-content h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--navy, #0B1B3F);
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.tl-card-content p {
  font-size: .82rem;
  color: var(--tx-2, #64748b);
  line-height: 1.65;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .35s var(--ease);
}
.tl-card:hover .tl-card-content p {
  max-height: 200px;
  opacity: 1;
  margin-top: .25rem;
}
.tl-card-line {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--red, #C8302A);
  border-radius: 2px;
  transition: width .3s var(--ease);
}
.tl-card:hover .tl-card-line { width: 60% }

@media (max-width: 768px) {
  .tl-carousel { padding: 0 2.5rem }
  .tl-card { flex: 0 0 240px; padding: 1.5rem 1.25rem 1.25rem }
  .tl-card-year { font-size: 1.8rem }
  .tl-card-content h3 { font-size: .88rem }
  .tl-card-content p { font-size: .78rem }
  .tl-arrow { width: 38px; height: 38px }
}
@media (max-width: 560px) {
  .tl-carousel { padding: 0 2rem }
  .tl-card { flex: 0 0 220px }
  .tl-arrow { width: 34px; height: 34px }
}

/* ================================================================
   MILESTONE SPOTLIGHT
   ================================================================ */
.ms-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4.5rem;
  background:
    radial-gradient(120% 90% at 15% 0%, #121b3a 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 100%, #2a1030 0%, transparent 60%),
    linear-gradient(160deg, #0B1B3F 0%, #0e0f2e 55%, #140a24 100%);
  color: var(--white);
}
.ms-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.ms-glow--a {
  width: 420px; height: 420px;
  top: -90px; left: 8%;
  background: radial-gradient(circle, rgba(200,48,42,.5), transparent 70%);
}
.ms-glow--b {
  width: 380px; height: 380px;
  bottom: -120px; right: 5%;
  background: radial-gradient(circle, rgba(99,102,241,.35), transparent 70%);
}
.ms-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}
.ms-container { position: relative; z-index: 2 }

.ms-stage {
  position: relative;
  margin-top: 2.5rem;
  padding: 0 4rem;
}
.ms-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ms-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.ms-slide {
  flex: 0 0 var(--ms-w, 460px);
  scroll-snap-align: center;
  padding: 1rem .2rem;
  opacity: .35;
  transform: scale(.9);
  filter: blur(1px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.ms-slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.ms-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ms-medallion {
  width: 104px; height: 104px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  position: relative;
  background:
    radial-gradient(circle at 30% 25%, #2b3057, #12163a 70%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 20px rgba(200,48,42,.35),
    0 0 0 6px rgba(255,255,255,.04),
    0 18px 50px rgba(0,0,0,.45);
}
.ms-medallion::after {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.18);
  animation: msSpin 22s linear infinite;
}
.ms-ico { font-size: 2.3rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)) }
.ms-slide.is-active .ms-medallion { box-shadow: inset 0 0 0 100px rgba(200,48,42,.20), 0 0 0 6px rgba(255,255,255,.05), 0 24px 70px rgba(200,48,42,.45) }
.ms-slide.is-active .ms-medallion::after { border-color: rgba(255,255,255,.45) }
@keyframes msSpin { to { transform: rotate(360deg) } }

.ms-year {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(135deg, #fff 0%, #ffd0cc 40%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 22px rgba(200,48,42,.35));
  margin-bottom: 1rem;
}
.ms-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: .7rem;
}
.ms-text {
  font-size: .92rem;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
}
.ms-shimmer {
  margin-top: 1.4rem;
  width: 120px; height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.ms-shimmer::before {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: msShine 2.2s ease-in-out infinite;
}
.ms-slide:not(.is-active) .ms-shimmer { display: none }
@keyframes msShine { 0%{transform:translateX(-140%)} 100%{transform:translateX(340%)} }

.ms-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.ms-nav:hover { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 30px rgba(200,48,42,.45) }
.ms-nav--prev { left: 0 }
.ms-nav--next { right: 0 }

.ms-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.ms-dots { display: flex; gap: .5rem }
.ms-dots .ms-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: all .35s var(--ease);
}
.ms-dots .ms-dot.is-active { width: 30px; background: var(--red) }
.ms-auto {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
}
.ms-auto svg { width: 14px; height: 14px }
.ms-auto.is-paused svg { opacity: .45 }
.ms-auto:hover { border-color: var(--red); color: var(--red) }

@media (max-width: 900px) {
  .ms-stage { padding: 0 }
  .ms-slide { flex-basis: var(--ms-w-m, 300px) }
  .ms-year { font-size: 4rem }
}
@media (max-width: 768px) {
  .ms-section { padding: 56px 0 48px }
  .ms-medallion { width: 88px; height: 88px }
  .ms-ico { font-size: 2rem }
  .ms-title { font-size: 1.15rem }
  .ms-text { font-size: .85rem }
  .ms-nav { width: 40px; height: 40px }
}

/* Milestone ruler (start/end range) */
.ms-ruler { position: relative; max-width: 780px; margin: 0 auto .25rem; padding: 0 .25rem }
.ms-ruler-track { position: relative; height: 26px; display: flex; align-items: center }
.ms-ruler-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(255,255,255,.14); border-radius: 2px }
.ms-ruler-fill { position: absolute; left: 0; top: 50%; height: 3px; width: 0; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, var(--red), #ffd0cc); box-shadow: 0 0 14px rgba(200,48,42,.55); transition: width .8s cubic-bezier(.22,.61,.36,1) }
.ms-ruler-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; padding: 0; border: 2px solid rgba(255,255,255,.4); background: #141c3e; cursor: pointer; z-index: 2; transition: all .3s var(--ease) }
.ms-ruler-dot:hover { transform: translate(-50%,-50%) scale(1.35); border-color: #fff }
.ms-ruler-dot.is-active { background: var(--red); border-color: #fff; transform: translate(-50%,-50%) scale(1.2); box-shadow: 0 0 0 6px rgba(200,48,42,.22), 0 0 20px rgba(200,48,42,.65) }
.ms-ruler-labels { display: flex; justify-content: space-between; align-items: baseline; margin-top: .55rem }
.ms-ruler-label { font-size: 1rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap }
.ms-ruler-label--start { color: rgba(255,255,255,.9) }
.ms-ruler-label--end { color: var(--red) }