*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --navy: #1a2e4a; --navy-mid: #2d4a6e; --blue: #3a6fa8; --blue-light: #6a9fd4; --sky: #c8ddf0; --gold: #84611f; --gold-light: #d4b88a; --cream: #f7f5f1; --cream-dark: #ece8e0; --white: #ffffff; --charcoal: #2c2c2c; --mid-grey: #5a6070; --light-grey: #646d7d; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Lato', sans-serif; font-weight: 400; background: var(--cream); color: var(--charcoal); overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--blue-light); border-radius: 2px; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; background: rgba(247,245,241,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(42,74,110,0.08); transition: padding 0.4s; }
nav.scrolled { background: rgba(247,245,241,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(42,74,110,0.08); }
.nav-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; min-width: 220px; flex-shrink: 0; }
.nav-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; color: var(--white); transition: color 0.4s; line-height: 1; white-space: nowrap; }
nav.scrolled .nav-brand-name { color: var(--navy); }
.nav-brand-title { font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-grey); white-space: nowrap; }
nav.scrolled .nav-brand-title { color: var(--light-grey); }
.nav-links { display: flex; gap: 14px; list-style: none; align-items: center; }
.nav-links a { font-size: 0.70rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 400; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.3s; white-space: nowrap; }
nav.scrolled .nav-links a { color: var(--mid-grey); }
.nav-links a:hover { color: var(--gold-light) !important; }
.nav-cta { padding: 9px 16px; border: 1px solid rgba(255,255,255,0.45); color: var(--white) !important; border-radius: 2px; transition: background 0.3s, border-color 0.3s, color 0.3s !important; }
nav.scrolled .nav-cta { border-color: var(--blue); color: var(--blue) !important; }
.nav-cta:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--white) !important; }
.lang-switcher { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.lang-switcher a { font-size: 0.70rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); text-decoration: none; padding: 4px 8px; border-radius: 2px; transition: color 0.2s, background 0.2s; font-family: 'Lato', sans-serif; }
nav.scrolled .lang-switcher a { color: var(--light-grey); }
.lang-switcher a.active, .lang-switcher a:hover { color: var(--gold-light) !important; background: rgba(184,150,96,0.12); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--navy); transition: transform 0.3s; }
nav.scrolled .hamburger span { background: var(--navy); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--navy); z-index: 199; padding: 90px 36px 40px; flex-direction: column; transform: translateY(-100%); transition: transform 0.4s ease; }
.mobile-nav.open { transform: translateY(0); }
.mobile-lang { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-lang a { font-size: 0.80rem; color: rgba(255,255,255,0.45); text-decoration: none; font-family: 'Lato', sans-serif; }
.mobile-lang a.active, .mobile-lang a:hover { color: var(--gold-light); }
.mobile-nav a { display: block; padding: 16px 0; font-size: 1.1rem; letter-spacing: 0.08em; font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color 0.2s; }
.mobile-nav a:hover { color: var(--gold-light); }
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); }
.hero-photo { position: absolute; inset: 0; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(16,29,46,0.98) 0%, rgba(26,46,74,0.85) 40%, rgba(45,74,110,0.25) 75%, rgba(45,74,110,0.05) 100%); }
.hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(200,221,240,0.08) 1px, transparent 1px); background-size: 28px 28px; }
.hero-content { position: relative; z-index: 2; padding: 120px 80px 130px; max-width: 1280px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 60px; width: 100%; }
.hero-text { max-width: 780px; }
.hero-profile-img { width: 300px; height: 400px; object-fit: cover; object-position: center top; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12); display: block; flex-shrink: 0; align-self: center; margin-right: 60px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); }
.hero-profile-fallback { width: 300px; height: 400px; background: linear-gradient(160deg, rgba(58,111,168,0.35), rgba(26,46,74,0.8)); border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-family: 'Cormorant Garamond', serif; font-size: 4rem; align-self: center; margin-right: 60px; }
.eyebrow { display: inline-flex; align-items: flex-start; gap: 14px; font-size: 0.86rem; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.03em; line-height: 1.55; color: var(--gold-light); margin-bottom: 30px; }
.eyebrow-line { width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; margin-top: 12px; }
.hero-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4.2vw, 5rem); font-weight: 400; line-height: 1.08; color: var(--white); margin-bottom: 12px; letter-spacing: -0.01em; }
.hero-name em { font-style: italic; color: var(--sky); font-weight: 400; }
.hero-credential { font-size: 0.80rem; letter-spacing: 0.12em; color: var(--blue-light); margin-bottom: 28px; line-height: 1.7; }
.hero-leadership { margin-bottom: 38px; display: flex; flex-direction: column; gap: 9px; }
.leader-item { font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.52); line-height: 1.5; }
.leader-item span { color: var(--gold-light); }
.hero-tagline { font-family: 'Cormorant Garamond', serif; font-size: 1.22rem; font-style: italic; font-weight: 400; color: rgba(255,255,255,0.62); line-height: 1.75; max-width: 500px; margin-bottom: 52px; border-left: 2px solid var(--gold); padding-left: 20px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: var(--blue); color: var(--white); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; transition: background 0.3s; border-radius: 2px; }
.btn-primary:hover { background: var(--navy-mid); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; transition: border-color 0.3s, color 0.3s; border-radius: 2px; }
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.hero-stats { position: absolute; bottom: 0; right: 0; z-index: 2; display: flex; }
.stat { padding: 26px 44px; text-align: center; background: rgba(255,255,255,0.05); border-left: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px); }
.stat:first-child { background: var(--blue); border-left: none; }
.stat-n { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 600; color: var(--white); line-height: 1; }
.stat-l { font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-top: 5px; }
.stat:first-child .stat-l { color: var(--white); }
.scroll-cue { position: absolute; left: 50%; bottom: 36px; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.3); }
.scroll-cue-label { font-size: 0.80rem; letter-spacing: 0.2em; text-transform: uppercase; writing-mode: vertical-lr; }
.scroll-cue-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); animation: scrollLine 2s ease-in-out infinite; }
.sec-label { display: inline-flex; align-items: center; gap: 12px; font-size: 0.80rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.sec-label::before { content:''; width:28px; height:1px; background:var(--gold); }
.sec-label.light { color: var(--gold-light); }
.sec-label.light::before { background: var(--gold-light); }
.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 85vh; overflow: hidden; }
.about-img-wrap { position: relative; overflow: hidden; min-height: 480px; background: var(--navy-mid); }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.88; display: block; transition: transform 0.9s ease; }
.about-img-wrap:hover img { transform: scale(1.03); }
.about-img-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background: linear-gradient(to right, transparent, var(--cream)); }
.img-caption { position: absolute; bottom: 22px; left: 24px; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.about-body { padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; background: var(--cream); }
.about-body h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; color: var(--navy); line-height: 1.22; margin-bottom: 28px; }
.about-body h2 em { font-style: italic; color: var(--blue); }
.about-body p { font-size: 1.02rem; color: var(--charcoal); line-height: 1.95; margin-bottom: 18px; font-weight: 400; }
.about-body p strong { font-weight: 700; color: var(--navy); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pill { padding: 6px 16px; border: 1px solid var(--blue-light); font-size: 0.80rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); border-radius: 100px; font-weight: 400; }
.expertise { background: var(--navy); padding: 108px 64px; position: relative; overflow: hidden; }
.expertise-ghost { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font-family: 'Cormorant Garamond', serif; font-size: min(12.4vw, 216px); font-weight: 400; letter-spacing: -0.01em; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; }
.expertise-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; }
.expertise-intro h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 400; color: var(--white); line-height: 1.16; }
.expertise-intro h2 em { font-style: italic; color: var(--sky); }
.expertise-intro p { font-size: 1.0rem; color: rgba(255,255,255,0.5); line-height: 1.9; }
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }
.exp-grid-item { display: contents; }
.exp-card { display: grid; grid-template-columns: 36px 1fr; column-gap: 18px; align-items: start; padding: 30px 30px 32px; background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)); border: 1px solid rgba(212,180,120,0.26); border-top: 2px solid var(--gold-light); position: relative; overflow: hidden; border-radius: 16px; color: inherit; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 28px 50px -24px rgba(0,0,0,0.65), 0 6px 14px -8px rgba(0,0,0,0.35); transition: background 0.4s, transform 0.4s, border-color 0.4s; }
.exp-card:hover { background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)); border-color: rgba(212,180,120,0.55); border-top-color: var(--gold-light); transform: translateY(-5px); }
.exp-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.exp-card:hover::after { transform: scaleX(1); }
.exp-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 16px; }
.exp-card-num { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 12px; font-family: 'Lato',sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; color: var(--gold-light); line-height: 1; margin-bottom: 24px; }
.exp-card-num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(212,180,120,0.5), transparent); }
.exp-icon { width: 36px; height: 36px; margin-bottom: 22px; color: var(--gold-light); flex-shrink: 0; }
.exp-card .exp-icon { margin: 0; grid-column: 1; grid-row: 2 / span 2; }
.exp-card h3 { grid-column: 2; grid-row: 2; }
.exp-card p { grid-column: 2; grid-row: 3; }
.exp-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: var(--white); margin-bottom: 6px; }
.exp-card p { font-size: 0.92rem; color: rgba(255,255,255,0.78); line-height: 1.7; font-weight: 400; }
.gynae-comparison { padding: 100px 64px; background: var(--cream-dark); }
.gynae-comparison h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 400; color: var(--navy); line-height: 1.2; margin-bottom: 18px; }
.gynae-comparison h2 em { font-style: italic; color: var(--blue); }
.gynae-comparison > p { font-size: 1rem; color: var(--mid-grey); line-height: 1.8; max-width: 640px; margin-bottom: 40px; }
.gynae-table-wrap { overflow-x: auto; }
.gynae-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; background: var(--cream); }
.gynae-table th { background: var(--navy); color: var(--white); text-align: left; padding: 16px 20px; font-weight: 600; letter-spacing: 0.04em; font-size: 0.80rem; text-transform: uppercase; }
.gynae-table td { padding: 16px 20px; border-bottom: 1px solid var(--cream-dark); color: var(--charcoal); }
.gynae-table tr:nth-child(even) td { background: var(--cream-dark); }
.gynae-table td:first-child { font-weight: 700; color: var(--navy); }
.experience { padding: 110px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; background: var(--cream); }
.exp-left h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 400; color: var(--navy); line-height: 1.18; margin-bottom: 22px; }
.exp-left h2 em { font-style: italic; color: var(--blue); }
.exp-left p { font-size: 1rem; color: var(--charcoal); line-height: 1.9; margin-bottom: 36px; font-weight: 400; }
.felicitation-block { margin-top: 36px; margin-bottom: 36px; }
.felicitation-label { font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.felicitation-label::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.felicitation-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.felicitation-img-wrap { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4/3; background: var(--navy-mid); }
.felicitation-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: saturate(0.75); }
.felicitation-img-wrap:hover img { transform: scale(1.04); filter: saturate(1); }
.felicitation-img-wrap::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(184,150,96,0.25); border-radius: 3px; pointer-events: none; }
.hosp-imgs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.hosp-imgs img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; filter: saturate(0.65); transition: filter 0.4s, transform 0.4s; }
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 0; width: 1px; background: var(--cream-dark); }
.tl-item { position: relative; margin-bottom: 42px; }
.tl-dot { position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border: 2px solid var(--cream); }
.tl-year { font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.tl-role { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--navy); margin-bottom: 4px; }
.tl-org { font-size: 0.96rem; color: var(--charcoal); line-height: 1.65; font-weight: 400; }
.robotic { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; }
.robotic-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%); }
.robotic-bg::before { content: ''; position: absolute; inset: 0; background-image: url('../img/robotic-960.webp'); background-size: cover; background-position: center; opacity: 1; animation: rotateBg 8s ease-in-out infinite; }
.robotic-bg::after { content: ''; position: absolute; inset: 0; background-image: url('../img/robotic2-960.webp'); background-size: cover; background-position: center; opacity: 0; animation: rotateBg2 8s ease-in-out infinite; }
@media (min-width: 1025px) { .robotic-bg::before { background-image: url('../img/robotic-1280.webp'); } .robotic-bg::after { background-image: url('../img/robotic2-1280.webp'); } }
@media (max-width: 640px) { .robotic-bg::before { background-image: url('../img/robotic-640.webp'); } .robotic-bg::after { background-image: url('../img/robotic2-640.webp'); } }
.robotic-overlay { position: absolute; inset: 0; background: linear-gradient(to left, rgba(26,46,74,0.88) 0%, rgba(26,46,74,0.55) 38%, rgba(26,46,74,0.10) 65%, transparent 100%); }
.robotic-body { position: relative; z-index: 2; padding: 0 100px; max-width: 620px; }
  @media (min-width: 1025px) {
    .robotic-body { margin-left: auto; text-align: right; }
    .robotic-body .sec-label { flex-direction: row-reverse; }
  }
.robotic-body h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 400; color: var(--white); line-height: 1.15; margin-bottom: 20px; }
.robotic-body p { font-size: 0.96rem; color: rgba(255,255,255,0.88); line-height: 1.9; margin-bottom: 34px; font-weight: 400; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; background: var(--gold); font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); font-weight: 700; border-radius: 2px; }
.research { padding: 110px 64px; background: var(--cream-dark); display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; }
.research-num-block { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.research-photo { width: 210px; aspect-ratio: 3/4; border-radius: 3px; overflow: hidden; border: 1px solid rgba(26,46,74,0.1); box-shadow: 0 20px 44px rgba(26,46,74,0.32); margin-bottom: 20px; }
.research-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.big-num { font-family: 'Lato',sans-serif; font-size: clamp(7rem, 12vw, 11rem); font-weight: 700; color: var(--navy); line-height: 0.95; letter-spacing: -0.04em; }
.big-num span { color: var(--blue); }
.big-num-sub { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid-grey); margin-top: 24px; font-weight: 400; }
.research-body h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 400; color: var(--navy); line-height: 1.22; margin-bottom: 22px; }
.research-body h2 em { font-style: italic; color: var(--blue); }
.research-body p { font-size: 1rem; color: var(--charcoal); line-height: 1.9; margin-bottom: 16px; font-weight: 400; }
.rtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rtag { padding: 7px 16px; background: var(--navy); font-size: 0.80rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); border-radius: 2px; font-weight: 400; }
.publications { padding: 110px 64px; background: var(--cream); }
.pub-block { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pub-block-left h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; color: var(--navy); line-height: 1.22; margin-bottom: 22px; }
.pub-block-left h2 em { font-style: italic; color: var(--blue); }
.pub-block-left p { font-size: 1rem; color: var(--charcoal); line-height: 1.9; margin-bottom: 0; font-weight: 400; }
.pub-block-right { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.pub-count-row { display: flex; gap: 56px; align-items: flex-start; }
.pub-count-item { display: flex; flex-direction: column; align-items: flex-start; }
.pub-count-n { font-family: 'Lato',sans-serif; font-size: 3.2rem; font-weight: 600; color: var(--navy); line-height: 1; height: 3.2rem; display: flex; align-items: flex-end; margin-bottom: 14px; }
.pub-count-n span { color: var(--blue); font-size: 2rem; }
.pub-count-l { font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid-grey); }
.pub-divider { width: 100%; height: 1px; background: var(--cream-dark); }
.pub-cta-text { font-size: 1.0rem; color: var(--mid-grey); line-height: 1.7; }
.btn-pub-download { display: inline-flex; align-items: center; gap: 12px; padding: 15px 34px; background: var(--navy); color: var(--white); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; border-radius: 2px; transition: background 0.3s, transform 0.2s; border: 1px solid transparent; }
.btn-pub-download:hover { background: var(--blue); transform: translateY(-2px); }
.btn-pub-download svg { flex-shrink: 0; transition: transform 0.3s; }
.btn-pub-download:hover svg { transform: translateY(2px); }
.contact { background: var(--navy); display: grid; grid-template-columns: 1fr 1fr; }
.contact-info { padding: 96px 72px; border-right: 1px solid rgba(255,255,255,0.07); }
.contact-info h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 400; color: var(--white); line-height: 1.1; margin-bottom: 52px; }
.contact-info h2 em { font-style: italic; color: var(--sky); }
.ci-items { display: flex; flex-direction: column; gap: 34px; }
.ci-row { display: flex; align-items: flex-start; gap: 20px; }
.ci-icon-box { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--gold-light); border-radius: 2px; }
.ci-label { font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 5px; }
.ci-value { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--white); }
.ci-value a { color: var(--white); text-decoration: none; }
.ci-value a:hover { color: var(--gold-light); }
.contact-quote { padding: 96px 72px; display: flex; flex-direction: column; justify-content: center; }
.contact-quote blockquote { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 400; font-style: italic; color: rgba(255,255,255,0.55); line-height: 1.75; border-left: 2px solid var(--gold); padding-left: 24px; margin-bottom: 44px; }
.linkedin-link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; border-radius: 2px; transition: border-color 0.3s, color 0.3s; width: fit-content; }
.linkedin-link:hover { border-color: var(--gold-light); color: var(--gold-light); }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; }
footer { background: #101d2e; padding: 24px 64px; display: flex; align-items: center; justify-content: space-between; }
.footer-name { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: rgba(255,255,255,0.65); }
.footer-copy { font-size: 0.80rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.62); }
.reveal, .reveal-l, .reveal-r { opacity: 0; transition: opacity 0.85s ease, transform 0.85s ease; }
.reveal { transform: translateY(36px); }
.reveal-l { transform: translateX(-36px); }
.reveal-r { transform: translateX(36px); }
.revealed { opacity: 1 !important; transform: none !important; }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }
.d4 { transition-delay: 0.42s; }
.d5 { transition-delay: 0.54s; }
.d6 { transition-delay: 0.64s; }
.floating-review { position: fixed; bottom: 30px; right: 30px; background: #856d29; color: var(--white); height: 56px; border-radius: 28px; display: flex; align-items: center; gap: 8px; padding: 0 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); z-index: 999; transition: transform 0.3s ease, background 0.3s; text-decoration: none; font-size: 0.80rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.floating-review:hover { transform: scale(1.05); background: #6d5a21; }
.blog-preview { padding: 110px 64px; background: var(--navy); position: relative; overflow: hidden; }
.blog-preview-ghost { position: absolute; top: -30px; right: -20px; font-family: 'Cormorant Garamond', serif; font-size: 16rem; font-weight: 700; letter-spacing: -0.04em; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; }
.blog-preview-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px; }
.blog-preview-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 400; color: var(--white); line-height: 1.16; }
.blog-preview-header h2 em { font-style: italic; color: var(--sky); }
.btn-all-blogs { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; transition: border-color 0.3s, color 0.3s; }
.btn-all-blogs:hover { border-color: var(--gold-light); color: var(--gold-light); }
#blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; position: relative; z-index: 1; min-height: 420px; }
.blog-preview-card { padding: 42px 34px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; transition: background 0.4s, transform 0.4s; display: flex; flex-direction: column; text-decoration: none; }
.blog-preview-card:hover { background: rgba(255,255,255,0.075); transform: translateY(-5px); }
.blog-preview-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.blog-preview-card:hover::after { transform: scaleX(1); }
.bp-category { font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px; }
.bp-date { font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.blog-preview-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--white); line-height: 1.35; margin-bottom: 14px; flex-grow: 1; }
.blog-preview-card p { font-size: 0.93rem; color: rgba(255,255,255,0.48); line-height: 1.8; margin-bottom: 24px; }
.bp-read { display: inline-flex; align-items: center; gap: 8px; font-size: 0.80rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.bp-loading { grid-column: 1/-1; padding: 60px 24px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: rgba(255,255,255,0.25); }
.video-preview { padding: 110px 64px; background: var(--cream); position: relative; overflow: hidden; }
.video-preview-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px; }
.video-preview-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 400; color: var(--navy); line-height: 1.16; }
.video-preview-header h2 em { font-style: italic; color: var(--blue); }
.btn-all-videos { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid var(--navy); color: var(--navy); text-decoration: none; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.btn-all-videos:hover { border-color: var(--gold); color: var(--white); background: var(--gold); }
#video-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; min-height: 380px; }
.vp-card { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 3px; overflow: hidden; cursor: pointer; transition: transform 0.35s, box-shadow 0.35s; position: relative; }
.vp-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(26,46,74,0.13); }
.vp-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.vp-card:hover::after { transform: scaleX(1); }
.vp-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); }
.vp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s, opacity 0.4s; opacity: 0.88; }
.vp-card:hover .vp-thumb img { transform: scale(1.04); opacity: 1; }
.vp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,46,74,0.25); transition: background 0.3s; }
.vp-card:hover .vp-play { background: rgba(26,46,74,0.1); }
.vp-play-circle { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; transition: transform 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.vp-card:hover .vp-play-circle { transform: scale(1.1); }
.vp-body { padding: 20px 22px 24px; }
.vp-date { font-size: 0.80rem; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 8px; font-family: 'Lato',sans-serif; }
.vp-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--navy); line-height: 1.35; }
.vp-loading { grid-column: 1/-1; padding: 60px 24px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: var(--light-grey); }
.lightbox-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(10,16,26,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 24px; }
.lightbox-overlay.open { opacity: 1; pointer-events: all; }
.lightbox-inner { position: relative; width: 100%; max-width: 900px; transform: scale(0.94); transition: transform 0.35s ease; }
.lightbox-overlay.open .lightbox-inner { transform: scale(1); }
.lightbox-video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 3px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.7); }
.lightbox-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.lightbox-close { position: absolute; top: -44px; right: 0; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 8px; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.2s; padding: 4px 0; }
.lightbox-close:hover { color: white; }
.lightbox-title { margin-top: 18px; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: rgba(255,255,255,0.65); line-height: 1.4; }
.reviews { padding: 110px 64px; background: var(--cream-dark); }
.reviews .sec-label { color: var(--gold); }
.reviews .sec-label::before { background: var(--gold); }
.reviews-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.reviews-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; color: var(--navy); line-height: 1.2; }
.reviews-header h2 em { font-style: italic; color: var(--blue); }
.reviews-badge { display: flex; align-items: center; gap: 10px; }
.reviews-stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.reviews-badge-text { font-size: 0.82rem; color: var(--mid-grey); letter-spacing: 0.04em; }
.reviews-list { display: flex; flex-direction: column; gap: 1px; background: var(--cream); margin-bottom: 36px; }
.review-card { background: var(--cream-dark); position: relative; overflow: hidden; transition: background 0.35s; }
.review-card:hover { background: var(--cream); }
.review-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.review-card:hover::after { transform: scaleX(1); }
.review-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 32px 36px 0; cursor: pointer; }
.review-card-meta { flex: 1; }
.review-card-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 8px; }
.review-card-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.review-card-source { font-size: 0.80rem; letter-spacing: 0.06em; color: #555e6b; font-family: 'Lato',sans-serif; }
.review-preview { padding: 16px 36px 0; font-size: 0.95rem; color: var(--mid-grey); line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.review-full { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1); }
.review-card.expanded .review-full { max-height: 2000px; }
.review-card.expanded .review-preview { display: none; }
.review-full-inner { padding: 16px 36px 0; font-size: 0.95rem; color: var(--charcoal); line-height: 1.85; white-space: pre-line; }
.review-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 20px 36px 32px; font-size: 0.80rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2f5f93; background: none; border: none; cursor: pointer; padding: 0; font-family: 'Lato', sans-serif; font-weight: 400; transition: color 0.3s; }
.review-toggle:hover { color: var(--gold); }
.review-toggle svg { transition: transform 0.35s ease; flex-shrink: 0; }
.review-card.expanded .review-toggle svg { transform: rotate(180deg); }
.reviews-loading { padding: 60px 24px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: var(--light-grey); }
.reviews-cta { text-align: center; }
.reviews-cta a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.80rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2f5f93; text-decoration: none; transition: color 0.3s; }
.reviews-cta a:hover { color: var(--gold); }
.faq { padding: 100px 64px; background: var(--cream); }
.faq-header { margin-bottom: 48px; max-width: 640px; }
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--cream-dark); border: 1px solid var(--cream-dark); }
.faq-item { background: var(--cream); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 34px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq-question h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; font-weight: 400; color: var(--navy); line-height: 1.5; margin: 0; }
.faq-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--blue); transition: transform 0.35s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--gold); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 34px 28px; font-size: 0.96rem; color: var(--charcoal); line-height: 1.9; max-width: 780px; }
.faq-item::after { content: ''; display: block; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.faq-item.open::after { transform: scaleX(1); }
#blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cream-dark); }
.article-answer { background: var(--cream-dark); border-left: 3px solid var(--blue); padding: 24px 28px; margin: 36px 0; border-radius: 0 2px 2px 0; }
.article-answer p { font-size: 1.02rem; color: var(--navy-mid); margin-bottom: 0; line-height: 1.85; }
.article-answer p + p { margin-top: 14px; }
.article-author { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--cream-dark); display: flex; align-items: flex-start; gap: 22px; }
.article-body { max-width: 820px; margin: 0 auto; padding: 80px 64px 100px; }
.article-body em { font-style: italic; }
.article-body h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; color: var(--navy); line-height: 1.25; margin-top: 56px; margin-bottom: 20px; }
.article-body h2 em { font-style: italic; color: var(--blue); }
.article-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--navy); margin-top: 36px; margin-bottom: 14px; }
.article-body li { font-size: 1.05rem; color: var(--charcoal); line-height: 1.85; margin-bottom: 10px; }
.article-body p { font-size: 1.05rem; color: var(--charcoal); line-height: 1.95; margin-bottom: 24px; font-weight: 400; }
.article-body strong { font-weight: 700; color: var(--navy); }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 24px; }
.article-callout { background: var(--cream-dark); border-left: 3px solid var(--gold); padding: 24px 28px; margin: 36px 0; border-radius: 0 2px 2px 0; }
.article-callout p { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-style: italic; color: var(--navy); margin-bottom: 0; line-height: 1.7; }
.article-cta { margin-top: 72px; padding: 52px 56px; background: var(--navy); border-radius: 3px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.article-cta-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 400; color: var(--white); margin-bottom: 8px; }
.article-cta-text p { font-size: 0.96rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 0; }
.article-disclaimer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cream-dark); }
.article-disclaimer p { font-size: 0.86rem; color: var(--light-grey); font-style: italic; line-height: 1.75; margin-bottom: 0; }
.article-divider { width: 60px; height: 1px; background: linear-gradient(to right, var(--gold), transparent); margin: 48px 0; }
.article-header { background: var(--navy); padding: 60px 64px 80px; position: relative; overflow: hidden; }
.article-header-content { position: relative; z-index: 2; max-width: 820px; }
.article-header-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(200,221,240,0.06) 1px, transparent 1px); background-size: 28px 28px; }
.article-image-block { margin: 48px 0; }
.article-image-block img { width: 100%; height: auto; border-radius: 3px; display: block; border: 1px solid var(--cream-dark); }
.article-image-caption { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--light-grey); margin-top: 12px; text-align: center; font-style: italic; }
.article-meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.article-meta-category { font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); }
.article-meta-reviewer { font-size: 0.80rem; letter-spacing: 0.02em; color: var(--sky); }
.article-meta-date { font-size: 0.80rem; letter-spacing: 0.08em; color: var(--gold); font-family: 'Lato', sans-serif; }
.article-meta-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.18); }
.article-references { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--cream-dark); }
.article-references h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--navy); margin-bottom: 18px; }
.article-references li { overflow-wrap: anywhere; } /* long URLs in references must wrap on phones */
.article-references li { font-size: 0.92rem; color: var(--mid-grey); line-height: 1.8; margin-bottom: 10px; font-family: 'Lato', sans-serif; }
.article-references li em { font-style: italic; }
.article-references ol { padding-left: 20px; }
.article-subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.55); line-height: 1.9; max-width: 680px; border-left: 2px solid var(--gold); padding-left: 22px; font-family: 'Noto Sans Bengali', sans-serif; }
.article-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.article-table td { padding: 14px 18px; border-bottom: 1px solid var(--cream-dark); color: var(--charcoal); font-family: 'Noto Sans Bengali', sans-serif; }
.article-table td:first-child { font-weight: 700; color: var(--navy); }
.article-table th { background: var(--navy); color: var(--white); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; padding: 14px 18px; }
.article-table tr:nth-child(even) td { background: var(--cream); }
.article-table-wrap { margin: 36px 0; overflow-x: auto; }
.article-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 400; color: var(--white); line-height: 1.12; margin-bottom: 24px; }
.article-title em { font-style: italic; color: var(--sky); }
.article-warning { background: #fdeef0; border-left: 3px solid #c0395a; padding: 22px 28px; margin: 36px 0; border-radius: 0 2px 2px 0; display: flex; align-items: flex-start; gap: 16px; }
.article-warning p { margin-bottom: 0; font-weight: 700; color: #8a2a42; line-height: 1.7; font-size: 1rem; font-family: 'Noto Sans Bengali', sans-serif; }
.article-warning svg { flex-shrink: 0; margin-top: 3px; color: #c0395a; }
.author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--cream-dark); flex-shrink: 0; }
.author-info-bio { font-size: 0.96rem; color: var(--mid-grey); line-height: 1.7; }
.author-info-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.author-info-title { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--light-grey); margin-bottom: 10px; font-family: 'Lato', sans-serif; }
.back-bar { margin-top: 72px; padding: 18px 64px; background: var(--navy); display: flex; align-items: center; justify-content: space-between; }
.back-bar-lang { display: flex; gap: 12px; }
.back-bar-lang a { font-size: 0.80rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); text-decoration: none; font-family: 'Lato', sans-serif; padding: 4px 8px; border-radius: 2px; transition: color 0.2s, background 0.2s; }
.back-bar-lang a.active, .back-bar-lang a:hover { color: var(--gold-light); background: rgba(212,184,138,0.12); }
.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.3s, gap 0.3s; }
.back-link:hover { color: var(--gold-light); gap: 14px; }
.blog-card { background: var(--cream); padding: 44px 38px; position: relative; overflow: hidden; transition: background 0.35s, transform 0.35s; display: flex; flex-direction: column; }
.blog-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; color: var(--navy); line-height: 1.35; margin-bottom: 16px; }
.blog-card p { font-size: 0.96rem; color: var(--mid-grey); line-height: 1.85; font-weight: 400; flex-grow: 1; }
.blog-card-num { position: absolute; top: 18px; right: 22px; font-family: 'Lato', sans-serif; font-size: 3.5rem; font-weight: 700; color: rgba(26,46,74,0.04); line-height: 1; }
.blog-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.blog-card:hover { background: var(--white); transform: translateY(-4px); }
.blog-card:hover::after { transform: scaleX(1); }
.blog-category { display: inline-block; font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; font-weight: 400; }
.blog-count { font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light-grey); white-space: nowrap; padding-bottom: 4px; }
.blog-date { font-size: 0.80rem; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 14px; font-family: 'Lato', sans-serif; }
.blog-loading { grid-column: 1 / -1; padding: 80px 40px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-style: italic; color: var(--light-grey); }
.blog-read-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.80rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); text-decoration: none; font-weight: 400; transition: color 0.3s, gap 0.3s; }
.blog-read-link svg { flex-shrink: 0; transition: transform 0.3s; }
.blog-read-link:hover { color: var(--gold); gap: 14px; }
.blog-read-link:hover svg { transform: translateX(3px); }
.blog-read-link::after { content: ''; position: absolute; inset: 0; }
.blog-card { cursor: pointer; }
.btn-lottie { display: inline-flex; flex-shrink: 0; width: 34px; height: 34px; margin: -8px -4px -8px 0; }
.btn-lottie svg { width: 100%; height: 100%; display: block; filter: brightness(0) invert(1); }
/* Light card backgrounds keep the animation in its own colours */
.blog-read-link .btn-lottie svg { filter: none; }
.blog-section { padding: 100px 64px; background: var(--cream); }
.blog-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px; gap: 20px; }
.blog-section-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; color: var(--navy); line-height: 1.2; }
.blog-section-header h2 em { font-style: italic; color: var(--blue); }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.80rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); margin-bottom: 26px; position: relative; z-index: 1; }
.breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold-light); }
.card-section { background: var(--navy); padding: 100px 64px; position: relative; overflow: hidden; }
.card-section-intro { max-width: 760px; margin-bottom: 56px; position: relative; z-index: 1; }
.card-section-intro h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 400; color: var(--white); line-height: 1.3; }
.card-section-intro h2 em { font-style: italic; color: var(--sky); }
.card-section-intro p { font-size: 0.98rem; color: rgba(255,255,255,0.55); line-height: 1.9; margin-top: 16px; }
.exp-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.faq-a { font-size: 1.0rem; color: var(--charcoal); line-height: 2; font-family: 'Noto Sans Bengali', sans-serif; }
.faq-header h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 400; color: var(--navy); line-height: 1.3; }
.faq-header h2 em { font-style: italic; color: var(--blue); }
.faq-item h3 { margin-top: 0; }
.faq-q { font-family: 'Noto Serif Bengali', serif; font-size: 1.2rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.journey { display: flex; flex-direction: column; gap: 60px; position: relative; z-index: 1; margin-top: 12px; counter-reset: stage; }
.journey-stage { position: relative; padding-left: 78px; }
.journey-stage .exp-grid { grid-template-columns: repeat(3, 1fr); }
.journey-stage-desc { font-size: 0.96rem; color: rgba(255,255,255,0.58); line-height: 1.85; }
.journey-stage-head { margin-bottom: 26px; max-width: 660px; }
.journey-stage-num { counter-increment: stage; position: absolute; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(184,150,96,0.45); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--gold-light); background: rgba(255,255,255,0.02); }
.journey-stage-num::before { content: counter(stage, decimal-leading-zero); }
.journey-stage-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--white); margin-bottom: 10px; line-height: 1.25; }
.journey-stage-who { font-size: 0.80rem; letter-spacing: 0.1em; color: var(--blue-light); margin-bottom: 6px; }
.journey-stage:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 58px; bottom: -60px; width: 1px; background: rgba(255,255,255,0.1); }
.nav-links a:hover, .nav-links a.active { color: var(--gold) !important; }
.page-hero { background: var(--navy); padding: 168px 64px 96px; position: relative; overflow: hidden; }
.page-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 400; color: var(--white); line-height: 1.14; margin-bottom: 22px; max-width: 820px; position: relative; z-index: 1; }
.page-hero h1 em { font-style: italic; color: var(--sky); }
.page-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.55); line-height: 1.9; max-width: 560px; }
.page-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.page-hero-content { position: relative; z-index: 2; max-width: 700px; }
.page-hero-ghost { position: absolute; top: -30px; right: -20px; font-family: 'Cormorant Garamond', serif; font-size: 16rem; font-weight: 700; letter-spacing: -0.04em; color: rgba(255,255,255,0.025); line-height: 1; pointer-events: none; user-select: none; white-space: nowrap; }
.page-hero-note { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.05); border-left: 2px solid var(--gold); padding: 10px 16px; margin-bottom: 40px; max-width: 620px; position: relative; z-index: 1; line-height: 1.7; }
.page-hero-note strong { color: var(--gold-light); font-weight: 600; }
.page-hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(200,221,240,0.06) 1px, transparent 1px); background-size: 28px 28px; }
.page-hero-sub { font-size: 1.02rem; color: rgba(255,255,255,0.6); line-height: 1.95; max-width: 680px; margin-bottom: 40px; position: relative; z-index: 1; }
.photo-banner { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.photo-banner-caption { position: relative; z-index: 1; padding: 48px 64px; max-width: 620px; }
.photo-banner-caption .sec-label { margin-bottom: 12px; }
.photo-banner-caption p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; font-weight: 400; color: var(--white); line-height: 1.5; }
.photo-banner-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.photo-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,29,46,0.88) 0%, rgba(16,29,46,0.35) 45%, rgba(16,29,46,0.05) 100%); }
.related-conditions { display: flex; flex-direction: column; gap: 14px; }
.related-conditions-label { font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 4px; }
.related-link { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.75); text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color 0.3s; }
.related-link:hover { color: var(--gold-light); }
.text-section { padding: 100px 64px; background: var(--cream); }
.text-section h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--navy); line-height: 1.3; margin-bottom: 22px; }
.text-section h2 em { font-style: italic; color: var(--blue); }
.text-section p { font-size: 1.02rem; color: var(--charcoal); line-height: 2; margin-bottom: 18px; font-weight: 400; }
.text-section p strong { font-weight: 700; color: var(--navy); }
.text-section ul { margin: 4px 0 20px 0; padding-left: 0; list-style: none; }
.text-section ul li { font-size: 1.0rem; color: var(--charcoal); line-height: 1.9; padding-left: 26px; position: relative; margin-bottom: 12px; }
.text-section ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.text-section-inner { max-width: 860px; }
.text-section.alt { background: var(--cream-dark); }
nav.compact { padding-top: 14px; padding-bottom: 14px; }

.crosslink-section { background: var(--navy); padding: 90px 64px; position: relative; overflow: hidden; }
.crosslink-intro { max-width: 640px; margin-bottom: 44px; position: relative; z-index: 1; }
.crosslink-intro .sec-label { color: var(--gold-light); }
.crosslink-intro .sec-label::before { background: var(--gold-light); }
.crosslink-intro h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 400; color: var(--white); line-height: 1.3; }
.crosslink-intro h2 em { font-style: italic; color: var(--sky); }
.crosslink-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; position: relative; z-index: 1; }
.crosslink-card { padding: 40px 36px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; transition: background 0.4s, transform 0.4s; text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.crosslink-card:hover { background: rgba(255,255,255,0.075); transform: translateY(-5px); }
.crosslink-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.crosslink-card:hover::after { transform: scaleX(1); }
.crosslink-card-label { font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8fb8e6; }
.crosslink-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: var(--white); line-height: 1.3; margin: 0; }
.crosslink-card p { font-size: 0.94rem; color: rgba(255,255,255,0.62); line-height: 1.75; margin: 0; }
.crosslink-card-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.80rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-top: auto; }
.crosslink-card-cta svg { flex-shrink: 0; transition: transform 0.3s; }
.crosslink-card:hover .crosslink-card-cta svg { transform: translateX(3px); }
@media (max-width: 1024px) { .crosslink-section { padding: 72px 32px; } .crosslink-grid { grid-template-columns: 1fr; } }
/* Bengali script (Noto Sans/Serif Bengali) renders visually smaller than the
   Latin body font at the same rem size, so scale the root up for bn pages.
   Every font-size on the site is set in rem/em (never px), so this alone
   lifts type sizing sitewide without touching layout padding/margins,
   which are set in px. */
html[lang="bn"] { font-size: 113%; }

html[lang="bn"] .nav-brand-name, html[lang="bn"] .mobile-nav a, html[lang="bn"] .page-hero-ghost, html[lang="bn"] .page-hero h1, html[lang="bn"] .text-section h2, html[lang="bn"] .card-section-intro h2, html[lang="bn"] .exp-card h3, html[lang="bn"] .journey-stage-title, html[lang="bn"] .photo-banner-caption p, html[lang="bn"] .faq-header h2, html[lang="bn"] .faq-question h3, html[lang="bn"] .contact-info h2, html[lang="bn"] .ci-value, html[lang="bn"] .contact-quote blockquote, html[lang="bn"] .related-link, html[lang="bn"] .footer-name { font-family: 'Noto Serif Bengali', 'Cormorant Garamond', serif; }
html[lang="hi"] .nav-brand-name, html[lang="hi"] .mobile-nav a, html[lang="hi"] .page-hero-ghost, html[lang="hi"] .page-hero h1, html[lang="hi"] .text-section h2, html[lang="hi"] .card-section-intro h2, html[lang="hi"] .exp-card h3, html[lang="hi"] .journey-stage-title, html[lang="hi"] .photo-banner-caption p, html[lang="hi"] .faq-header h2, html[lang="hi"] .faq-question h3, html[lang="hi"] .contact-info h2, html[lang="hi"] .ci-value, html[lang="hi"] .contact-quote blockquote, html[lang="hi"] .related-link, html[lang="hi"] .footer-name { font-family: 'Noto Serif Devanagari', 'Cormorant Garamond', serif; }
/* Review pill: hidden by default. main.js shows it only while the Reviews section is on screen. */
body .floating-review { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background 0.3s; }
body .floating-review.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, background 0.3s; }
body .floating-review.is-visible:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { body .floating-review, body .floating-review.is-visible { transition: none; } }

/* ===== Page-template header/nav variants =====
   Consolidated from identical per-page inline <style> overrides
   (2026-09 dedup pass). Each page in a template family gets the
   matching class on <body> instead of repeating this CSS. ===== */

/* tpl-blog-i18n — 13 pages */
@media (min-width: 1025px) {
  body.tpl-blog-i18n nav { padding: 24px 40px; }
  body.tpl-blog-i18n .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }
}
body.tpl-blog-i18n .nav-cta { padding: 9px 20px; border: 1px solid var(--blue); color: var(--blue) !important; border-radius: 2px; transition: background 0.3s, border-color 0.3s, color 0.3s !important; }
body.tpl-blog-i18n .nav-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }

/* tpl-condition-i18n — 9 pages */
body.tpl-condition-i18n nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 24px 40px; background: linear-gradient(to bottom, rgba(16, 29, 46, 0.4) 0%, transparent 100%); transition: background 0.5s, padding 0.4s, box-shadow 0.4s; }
body.tpl-condition-i18n .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: background 0.4s, transform 0.3s; }
body.tpl-condition-i18n .lang-switcher { display: flex; align-items: center; gap: 4px; margin-left: 14px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.15); }
body.tpl-condition-i18n .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }

/* tpl-blog-en — 7 pages */
@media (min-width: 1025px) {
  body.tpl-blog-en nav { padding: 24px 32px; }
  body.tpl-blog-en .nav-links { display: flex; gap: 11px; list-style: none; align-items: center; }
}
body.tpl-blog-en .nav-links a { font-size: 0.68rem; letter-spacing: 0.09em; }
body.tpl-blog-en .nav-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
/* tpl-blog-en nav now matches the site's transparent-over-hero pattern: see-through
   until scrolled, then solid cream — overrides the per-page hardcoded dark colors
   (higher specificity than the page-local unscoped rules, so no per-file edits needed). */
body.tpl-blog-en nav { background: rgba(247,245,241,0.96); }
body.tpl-blog-en nav.scrolled { background: rgba(247,245,241,0.96); }
body.tpl-blog-en .nav-brand-name { color: var(--navy); }
body.tpl-blog-en nav.scrolled .nav-brand-name { color: var(--navy); }
body.tpl-blog-en .nav-links a { color: var(--mid-grey); }
body.tpl-blog-en nav.scrolled .nav-links a { color: var(--mid-grey); }
body.tpl-blog-en .lang-switcher a { color: var(--light-grey); }
body.tpl-blog-en nav.scrolled .lang-switcher a { color: var(--light-grey); }
body.tpl-blog-en .nav-cta { padding: 9px 16px; border: 1px solid var(--blue); color: var(--blue) !important; border-radius: 2px; transition: background 0.3s, border-color 0.3s, color 0.3s !important; }
body.tpl-blog-en nav.scrolled .nav-cta { border-color: var(--blue); color: var(--blue) !important; }
body.tpl-blog-en .hamburger span { background: var(--navy); }
body.tpl-blog-en nav.scrolled .hamburger span { background: var(--navy); }

/* tpl-condition-en — 6 pages */
body.tpl-condition-en nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; background: linear-gradient(to bottom, rgba(16, 29, 46, 0.4) 0%, transparent 100%); transition: background 0.5s, padding 0.4s, box-shadow 0.4s; }
body.tpl-condition-en .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: background 0.4s, transform 0.3s; }
body.tpl-condition-en .lang-switcher { display: flex; align-items: center; gap: 3px; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.15); }
body.tpl-condition-en .nav-links { display: flex; gap: 11px; list-style: none; align-items: center; }
/* Fix: the unscrolled nav rule above ties/beats base nav.scrolled on specificity,
   so the solid cream background (and navy hamburger) never appeared post-scroll. */
body.tpl-condition-en nav.scrolled { background: rgba(247,245,241,0.96); }
body.tpl-condition-en nav.scrolled .hamburger span { background: var(--navy); }

/* tpl-patient-guide-en — 5 pages */
body.tpl-patient-guide-en nav { padding: 24px 32px; }
body.tpl-patient-guide-en .nav-links { display: flex; gap: 11px; list-style: none; align-items: center; }

/* tpl-legal-en — 2 pages */
@media (min-width: 1025px) {
  body.tpl-legal-en nav { padding: 24px 32px; }
  body.tpl-legal-en .nav-links { display: flex; gap: 11px; list-style: none; align-items: center; }
}

/* tpl-404-en — 1 page */
body.tpl-404-en nav { padding: 24px 32px; }
body.tpl-404-en .nav-links { display: flex; gap: 11px; list-style: none; align-items: center; }
body.tpl-404-en .nav-brand-name { color: var(--navy); }

/* tpl-legal-bn — 2 pages */
@media (min-width: 1025px) {
  body.tpl-legal-bn nav { padding: 24px 40px; }
  body.tpl-legal-bn .nav-links { display: flex; gap: 20px; list-style: none; align-items: center; }
}

/* ===== Global de-duplicated rules (identical across many pages, no page-specific variant) ===== */
.article-table-wrap { overflow-x: auto; margin: 36px 0; border: 1px solid var(--cream-dark); border-radius: 3px; }
.article-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.btn-primary:hover { background: var(--gold); }
@media (max-width: 1440px) { nav { padding: 24px 32px; } .nav-brand { min-width: 0; } .nav-links { gap: 10px; } .nav-cta { padding: 9px 16px; } .lang-switcher { margin-left: 6px; gap: 3px; } .lang-switcher a { padding: 4px 6px; } }
.page-hero h1 em { font-style: normal; color: var(--sky); }
.text-section h2 em { font-style: normal; color: var(--blue); }
.card-section-intro h2 em { font-style: normal; color: var(--sky); }
.faq-header h2 em { font-style: normal; color: var(--blue); }
.contact-info h2 em { font-style: normal; color: var(--sky); }
.review-stamp { display: flex; align-items: center; gap: 8px; font-size: 0.80rem; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; margin-top: 20px; position: relative; z-index: 1; }
.review-stamp svg { flex-shrink: 0; color: var(--gold-light); }

/* ===== BN / HI top menu — single source of truth =====
   Replaces the earlier "BN/HI top-nav overflow fix" block AND the per-page inline
   nav overrides (which had drifted: font sizes from 10.6px to 17.7px, four different
   gaps, four different brand sizes). Every Bangla and Hindi page now gets the same
   menu at the same size.
   - Sizes are in px on purpose: html[lang="bn"] scales rem by 113% and Hindi does not,
     so rem made the same menu render at different sizes per language and per page.
   - Indic scripts have a small x-height, so 15px here reads like ~13px Latin.
   - Below --nav-full-min the full menu cannot fit at a readable size, so the existing
     hamburger drawer takes over instead of shrinking the text or spilling the language
     switcher off the right edge. */
nav { gap: 10px; } /* kept from the previous block: applies to English pages too */
html[lang="bn"] nav, html[lang="hi"] nav { gap: 20px; padding-left: 32px !important; padding-right: 32px !important; }
html[lang="bn"] nav .nav-brand, html[lang="hi"] nav .nav-brand { min-width: 0 !important; flex: 0 0 auto; }
html[lang="bn"] nav .nav-brand-name, html[lang="hi"] nav .nav-brand-name { font-size: 19px !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
html[lang="bn"] nav .nav-brand-title, html[lang="hi"] nav .nav-brand-title { font-size: 12px !important; letter-spacing: 0.02em !important; text-transform: none !important; line-height: 1.3 !important; }
html[lang="bn"] nav .nav-links, html[lang="hi"] nav .nav-links { gap: 18px !important; flex: 0 1 auto; margin-left: auto; min-width: 0; }
html[lang="bn"] nav .nav-links a, html[lang="hi"] nav .nav-links a { font-size: 15px !important; letter-spacing: 0.01em !important; text-transform: none !important; line-height: 1.4 !important; white-space: nowrap; }
html[lang="bn"] nav .nav-links a.nav-cta, html[lang="hi"] nav .nav-links a.nav-cta { padding: 8px 16px !important; }
html[lang="bn"] nav .lang-switcher, html[lang="hi"] nav .lang-switcher { flex: 0 0 auto; margin-left: 4px !important; gap: 2px !important; }
html[lang="bn"] nav .lang-switcher a, html[lang="hi"] nav .lang-switcher a { font-size: 14px !important; letter-spacing: 0 !important; padding: 4px 7px !important; font-family: 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Lato', sans-serif !important; white-space: nowrap; }
/* Condition pages (body.tpl-condition-i18n) never got the solid scrolled background the English
   condition pages have, so the menu text floated over page content after scrolling. */
body.tpl-condition-i18n nav.scrolled { background: rgba(247,245,241,0.96); }
body.tpl-condition-i18n nav.scrolled .hamburger span { background: var(--navy); }
html[lang="bn"] nav .lang-switcher, html[lang="hi"] nav .lang-switcher { border-left: 0 !important; padding-left: 0 !important; }
html[lang="bn"] nav.scrolled .lang-switcher a.active, html[lang="hi"] nav.scrolled .lang-switcher a.active { color: var(--gold) !important; }
html[lang="bn"] .mobile-nav, html[lang="hi"] .mobile-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }
html[lang="bn"] .mobile-nav a, html[lang="hi"] .mobile-nav a { padding-top: 13px; padding-bottom: 13px; }
html[lang="bn"] .mobile-nav .mobile-lang a, html[lang="hi"] .mobile-nav .mobile-lang a { padding: 0; }
@media (max-width: 1279px) {
  html[lang="bn"] nav .nav-links, html[lang="hi"] nav .nav-links,
  html[lang="bn"] nav .lang-switcher, html[lang="hi"] nav .lang-switcher { display: none !important; }
  html[lang="bn"] nav .hamburger, html[lang="hi"] nav .hamburger { display: flex !important; margin-left: 0; }
  html[lang="bn"] .mobile-nav, html[lang="hi"] .mobile-nav { display: flex; }
}
/* BN / HI full menu: centred in the window.
   Three columns: brand | links | language switcher. The two outer columns are equal (1fr) so the
   links sit in the exact middle of the screen whatever the width of the brand or the switcher.
   max-content as the column minimum means an outer column can never shrink below its content,
   so nothing can be pushed off the edge (the hamburger takes over below 1280px anyway). */
@media (min-width: 1280px) {
  html[lang="bn"] nav, html[lang="hi"] nav { display: grid !important; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 20px; }
  html[lang="bn"] nav .nav-brand, html[lang="hi"] nav .nav-brand { grid-column: 1; justify-self: start; }
  html[lang="bn"] nav .nav-links, html[lang="hi"] nav .nav-links { grid-column: 2; justify-self: center; margin: 0 !important; }
  html[lang="bn"] nav .nav-tools, html[lang="hi"] nav .nav-tools { grid-column: 3; justify-self: end; margin: 0 !important; }
}
/* BN / HI contact block on phones: the e-mail address is one unbreakable string. Bangla pages scale
   text to 113%, so at 390px it needed ~275px but only ~264px is left beside the icon, which widened
   the whole page. Scale that line with the screen and allow a break as a last resort. */
@media (max-width: 480px) {
  html[lang="bn"] .ci-value, html[lang="hi"] .ci-value { font-size: min(1.2rem, 4.7vw); }
  html[lang="bn"] .ci-value a, html[lang="hi"] .ci-value a { overflow-wrap: anywhere; }
}

/* Related reading lists (blogs, treatment pages, patient guide) */
.related-reading-list { padding-left: 0; list-style: none; margin: 8px 0 0; }
.related-reading-list li { border-left: 2px solid var(--cream-dark); padding: 4px 0 4px 18px; margin-bottom: 14px; }
.related-reading-list a { color: var(--navy); text-decoration: none; font-weight: 700; }
.related-reading-list a:hover { color: var(--gold); }
.related-reading-list span { display: block; font-size: 0.92rem; color: var(--mid-grey); margin-top: 2px; }
.related-journey { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--navy); margin: 44px 0 6px; }
.related-journey-intro { font-size: 0.95rem; color: var(--mid-grey); margin: 0 0 14px; }
html[lang="bn"] .related-journey { font-family: 'Noto Serif Bengali', 'Cormorant Garamond', serif; }
html[lang="hi"] .related-journey { font-family: 'Noto Serif Devanagari', 'Cormorant Garamond', serif; }

/* Patient testimonials on condition pages (static text, sourced from reviews.json) */
.pt-reviews { padding: 100px 64px; background: var(--cream-dark); }
.pt-review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--cream); border: 1px solid var(--cream); }
.pt-review { background: var(--cream-dark); margin: 0; padding: 34px 36px 30px; display: flex; flex-direction: column; gap: 14px; }
.pt-review-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; }
.pt-review blockquote { margin: 0; font-size: 0.97rem; color: var(--charcoal); line-height: 1.85; white-space: pre-line; }
.pt-review blockquote p + p { margin-top: 12px; }
.pt-review figcaption { margin-top: auto; font-size: 0.84rem; color: var(--mid-grey); line-height: 1.6; }
.pt-review-name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.pt-review-source { letter-spacing: 0.04em; }
.pt-review-more { display: inline-block; margin-left: 6px; color: #2f5d8f; text-decoration: none; border-bottom: 1px solid currentColor; }
.pt-review-more:hover { color: var(--gold); }
.pt-reviews-note { margin-top: 18px; font-size: 0.82rem; color: var(--mid-grey); }
.pt-reviews-cta { margin-top: 32px; text-align: center; }
.pt-reviews-cta a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.80rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2f5f93; text-decoration: none; transition: color 0.3s; }
.pt-reviews-cta a:hover { color: var(--gold); }
html[lang="bn"] .pt-reviews-cta a, html[lang="hi"] .pt-reviews-cta a { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }
@media (max-width: 1024px) { .pt-reviews { padding: 72px 32px; } }
@media (max-width: 640px) { .pt-review-list { grid-template-columns: 1fr; } .pt-review { padding: 26px 24px 24px; } }

/* Footer page links (About, Gynae Cancers, Patient Guide, Publications, Blogs, Videos, Contact) */
footer { flex-wrap: wrap; row-gap: 18px; }
.footer-links { flex: 0 0 100%; order: -1; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-links a { font-size: 0.80rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); text-decoration: none; transition: color .2s; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) { .footer-links { justify-content: center; } }

/* Accessibility: visible keyboard focus on FAQ questions */
.faq-question:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-item::after, .faq-icon { transition: none !important; }
}

/* Accessibility: skip-to-content link (hidden until focused by keyboard) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; }
main:focus { outline: none; }

/* Mobile menu: fill the screen and scroll when the list is taller than the viewport.
   (position:fixed with no bottom meant the box just grew past the screen and could not scroll.) */
.mobile-nav { bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.mobile-nav > * { flex-shrink: 0; }
/* Phones with a collapsing address bar: size the menu to the visible screen, not the larger layout viewport,
   so the last links are never hidden under the browser toolbar. */
@supports (height: 100dvh) {
  .mobile-nav { bottom: auto; height: 100dvh; max-height: 100dvh; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* Patient-guide "Published · Updated" line: the two halves are spans with no space between them,
   so the browser treated the whole line as one unbreakable word and clipped "Updated" on phones. */
.pg-dateline > span { display: inline-block; }
@media (max-width: 560px) {
  .pg-dateline > span { display: block; }
  .pg-dateline > span[aria-hidden] { display: none; }
}

/* ===== Sticky contact bar (phones only) =====
   Markup lives in _includes/footer.njk. Hidden above 640px.
   The Review pill and Ask button are lifted above the bar so nothing overlaps. */
.sticky-bar { display: none; }
@media (max-width: 640px) {
  .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; background: var(--navy); border-top: 1px solid rgba(255,255,255,0.15); box-shadow: 0 -2px 12px rgba(0,0,0,0.2); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sticky-bar a { flex: 1 1 0; min-width: 0; min-height: 58px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--white); text-decoration: none; font-size: 0.80rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-align: center; }
  .sticky-bar a + a { border-left: 1px solid rgba(255,255,255,0.15); }
  .sticky-bar a:hover, .sticky-bar a:active { background: var(--navy-mid); }
  .sticky-bar a.sb-book { background: var(--gold); }
  .sticky-bar a.sb-book:hover, .sticky-bar a.sb-book:active { background: #6d5019; }
  .sticky-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  body:has(.sticky-bar) { --sbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sticky-bar) footer { padding-bottom: calc(24px + var(--sbar-h)); }
  body:has(.sticky-bar) .floating-review { bottom: calc(20px + var(--sbar-h)); }
  body:has(.sticky-bar):not(.review-pill-on) { --ask-fab-bottom: calc(20px + var(--sbar-h)); --ask-panel-bottom: calc(84px + var(--sbar-h)); }
  body:has(.sticky-bar).review-pill-on { --ask-fab-bottom: calc(72px + var(--sbar-h)); --ask-panel-bottom: calc(166px + var(--sbar-h)); }
}

/* Print: a clean, ink-friendly page for patients who print an article or the patient guide. */
@media print {
  nav, .mobile-nav, .hamburger, .lang-switcher, .mobile-lang, .sticky-bar, .floating-review, #ask-fab, #ask-panel, .ask-fab, .ask-panel, .skip-link, .back-bar, video, iframe, .video-thumb, .reveal-hint { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; font-size: 12pt; overflow: visible !important; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  section, article, .text-section, .page-hero { padding-top: 12pt !important; padding-bottom: 12pt !important; background: #fff !important; }
  .page-hero-ghost, .robotic-bg::before, .hero-bg, .hero-grid { display: none !important; }
  .page-hero, .page-hero * , main, main * { color: #111 !important; opacity: 1 !important; }
  .page-hero em, .page-hero h1 span { color: #111 !important; }
  h1, h2, h3 { color: #000 !important; break-after: avoid; }
  p, li, blockquote, tr, img, figure { break-inside: avoid; }
  img { max-width: 100% !important; height: auto !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after, a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
}

/* Below-the-fold sections are laid out and painted only when they approach the screen. This cuts the
   first style/layout pass (the biggest main-thread cost on phones). The size hint keeps the scrollbar stable. */
main ~ section, main ~ footer, body > footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* ---- Share bar (plain share links; no tracking) ---- */
.share-bar { max-width: 980px; margin: 40px auto 0; padding: 26px 24px 22px; border-top: 1px solid var(--cream-dark); text-align: center; }
.share-bar-title { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 0 0 14px; font-family: inherit; }
.share-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.share-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--cream-dark); border-radius: 999px; background: var(--white); color: var(--navy); font-size: 0.9rem; text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.2; transition: border-color .2s, color .2s; }
.share-btn:hover, .share-btn:focus-visible { border-color: var(--blue); color: var(--blue); }
.share-btn:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.share-btn[hidden] { display: none; }
.share-status { min-height: 1.3em; margin: 10px 0 0; font-size: 0.85rem; color: var(--mid-grey); }

/* ---- Top share control (nav button + panel below the nav; hidden on the homepages) ---- */
.nav-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 10px; padding: 0; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: rgba(255,255,255,0.8); cursor: pointer; transition: color .2s, border-color .2s; }
.nav-share-btn svg { width: 16px; height: 16px; }
.nav-share-btn:hover, .nav-share-btn:focus-visible, .nav-share-btn[aria-expanded="true"] { color: #fff; border-color: #fff; }
.nav-share-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
nav.scrolled .nav-share-btn { color: var(--mid-grey); border-color: rgba(42,74,110,0.25); }
nav.scrolled .nav-share-btn:hover, nav.scrolled .nav-share-btn:focus-visible, nav.scrolled .nav-share-btn[aria-expanded="true"] { color: var(--navy); border-color: var(--navy); }
.share-panel { position: fixed; top: 84px; right: 16px; z-index: 210; width: min(264px, calc(100vw - 32px)); box-sizing: border-box; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 14px; box-shadow: 0 14px 36px rgba(26,46,74,0.16); padding: 14px 8px 8px; }
.share-panel[hidden] { display: none; }
@media (min-width: 1025px) { .share-panel { right: 48px; } }
.share-panel-title { margin: 0 0 6px 12px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid-grey); font-weight: 700; }
.share-panel .share-list { display: block; }
.share-panel .share-btn { display: flex; width: 100%; min-height: 44px; box-sizing: border-box; border: 0; border-radius: 10px; background: none; padding: 10px 12px; color: var(--navy); font-size: 0.94rem; text-align: left; letter-spacing: normal; text-transform: none; }
.share-panel .share-btn:hover, .share-panel .share-btn:focus-visible { background: var(--cream); color: var(--blue); border-color: transparent; }
@media print { .nav-share-btn, .share-panel { display: none !important; } }
/*
 * Calm depth — CSS-only layer, loaded after site.css.
 * No library, no extra requests beyond this file and depth.js (both self-hosted, CSP-safe).
 *
 * Everything that moves lives inside prefers-reduced-motion: no-preference, so visitors who ask
 * their device for less motion get the plain, flat site. Tilt additionally needs a real mouse
 * (hover + fine pointer), so phones and tablets never run it.
 *
 *  1. Layered soft shadows  — cards lift gently on hover (navy-tinted, never black)
 *  2. Pointer tilt          — max 3deg, driven by --rx/--ry that depth.js sets
 *  3. Scroll parallax       — hero layers drift at different speeds (browsers that support
 *                             scroll-driven animations; others simply stay still)
 *  4. Flip card (.flip)     — myth/fact style two-sided card, both sides stay in the HTML
 */

:root {
  --depth-shadow-1: 0 1px 2px rgba(26,46,74,0.06), 0 4px 8px rgba(26,46,74,0.05), 0 12px 24px rgba(26,46,74,0.05);
  --depth-shadow-2: 0 2px 4px rgba(26,46,74,0.07), 0 8px 16px rgba(26,46,74,0.08), 0 22px 44px rgba(26,46,74,0.10);
  --depth-shadow-dark: 0 2px 4px rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.14), 0 26px 52px rgba(0,0,0,0.20);
}

@media (prefers-reduced-motion: no-preference) {

  /* 1 ── Layered shadows ───────────────────────────────────────────── */
  .vp-card { box-shadow: var(--depth-shadow-1); }
  .vp-card:hover,
  .blog-card:hover,
  .review-card:hover,
  .pt-review:hover { box-shadow: var(--depth-shadow-2); position: relative; z-index: 2; }
  .exp-card:hover,
  .blog-preview-card:hover,
  .crosslink-card:hover { box-shadow: var(--depth-shadow-dark); z-index: 2; }

  .vp-card, .blog-card, .review-card, .pt-review,
  .exp-card, .blog-preview-card, .crosslink-card { transition-property: background, transform, box-shadow; }

  /* 2 ── Pointer tilt (class + variables are set by depth.js) ──────── */
  .depth-tilt-on :is(.exp-card, .blog-preview-card, .crosslink-card, .vp-card, .blog-card, .gc-card, .pg-step-card, .video-card, .lf-card).is-tilting {
    /* !important: .revealed { transform:none !important } would otherwise cancel it */
    transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
    transition: transform 0.12s ease-out, box-shadow 0.3s, background 0.4s !important;
    will-change: transform;
  }

  /* Glare: a faint light patch that follows the pointer (depth.js sets --gx/--gy).
     Low opacity so text contrast is unaffected; pointer-events none so clicks pass through. */
  .depth-tilt-on :is(.exp-card, .blog-preview-card, .crosslink-card, .vp-card, .blog-card, .gc-card, .pg-step-card, .video-card, .lf-card)::before {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.14), rgba(255,255,255,0) 55%);
    transition: opacity 0.3s ease;
  }
  .depth-tilt-on :is(.vp-card, .blog-card)::before {
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(212,184,138,0.20), rgba(212,184,138,0) 55%);
  }
  .depth-tilt-on :is(.exp-card, .blog-preview-card, .crosslink-card, .vp-card, .blog-card, .gc-card, .pg-step-card, .video-card, .lf-card).is-tilting::before { opacity: 1; }

  /* 3 ── Hero parallax (pure CSS scroll-driven animation) ──────────── */
  @supports (animation-timeline: scroll()) {
    @keyframes depth-drift-slow { to { transform: translate3d(0, 36px, 0) scale(1.08); } }
    @keyframes depth-drift-mid  { to { transform: translate3d(0, -22px, 0); } }
    @keyframes depth-drift-fast { to { transform: translate3d(0, -44px, 0); } }

    .hero-photo   { transform: scale(1.08); animation: depth-drift-slow linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-pattern { animation: depth-drift-mid linear both;  animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-profile-img,
    .hero-profile-fallback { animation: depth-drift-fast linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .page-hero-ghost,
    .blog-preview-ghost { animation: depth-drift-mid linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* 4 ── Flip card ────────────────────────────────────────────────────
   Markup (both faces stay in the page, so crawlers and screen readers see all the text):

   <div class="flip">
     <button type="button" class="flip-btn" aria-pressed="false">
       <span class="flip-face flip-front"><span class="flip-tag">Myth</span> …text… <span class="flip-hint">Tap to see the fact</span></span>
       <span class="flip-face flip-back"><span class="flip-tag">Fact</span> …text…</span>
     </button>
   </div>
   depth.js toggles aria-pressed and the .is-flipped class. */
.flip { perspective: 1200px; }
.flip-btn { position: relative; display: grid; width: 100%; min-height: 220px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flip-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 32px 30px; border: 1px solid var(--cream-dark); border-radius: 3px; background: var(--white); box-shadow: var(--depth-shadow-1); line-height: 1.8; font-size: 0.98rem; }
.flip-back { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,0.88); }
.flip-tag { font-size: 0.80rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.flip-back .flip-tag { color: var(--gold-light); }
.flip-hint { margin-top: auto; font-size: 0.80rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }

/* Default (no motion): the faces swap, nothing spins */
.flip-back { display: none; }
.flip.is-flipped .flip-front { display: none; }
.flip.is-flipped .flip-back { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .flip-btn { transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); }
  .flip.is-flipped .flip-btn { transform: rotateY(180deg); }
  .flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .flip-back { display: flex; transform: rotateY(180deg); }
  .flip.is-flipped .flip-front { display: flex; }
}

/* 5 ── 3D accents (CSS only, transform/opacity only, no new requests)
   a. Expertise and condition cards: the icon turns once in 3D on hover.
   b. Hero stats: the tile lifts toward the viewer on hover.
   c. Inner-page cards (cancer types, patient guide steps, videos, leaflets) tilt with the pointer, via depth.js.
   Hover-only, so phones never run them. Everything that moves sits inside
   prefers-reduced-motion: no-preference, so reduced-motion visitors get the flat site. */

@media (prefers-reduced-motion: no-preference) {
  .exp-card { perspective: 600px; }
  .exp-icon { transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.3, 0.6, 0.2, 1); }
  .exp-card:hover .exp-icon { transform: rotateY(360deg); }
  .gc-card .ci-icon-box { transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.3, 0.6, 0.2, 1); }
  .gc-card:hover .ci-icon-box { transform: rotateY(360deg); }

  .hero-stats { perspective: 900px; }
  .stat { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s; }
  .stat:hover { transform: translateZ(16px) rotateX(6deg); }
}
/* ==========================================================================
   glass.css — glassmorphism for fixed site chrome only.
   Load AFTER site.css and depth.css:
     <link rel="stylesheet" href="/assets/glass.css?v={{ seo.cssVersion }}">
   Scope: top nav (scrolled state), mobile menu overlay, mobile sticky bar,
   floating review button. Content cards and body text stay solid for legibility.
   Selectors use `html body` to outrank the per-template overrides in site.css
   (e.g. body.tpl-condition-en nav.scrolled).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --glass-blur: 18px;
  --glass-saturate: 170%;
  --glass-edge: rgba(255, 255, 255, 0.45);
  --glass-light: rgba(247, 245, 241, 0.72);   /* cream, scrolled nav */
  --glass-navy: rgba(14, 28, 50, 0.74);        /* mobile menu, sticky bar */
  --glass-gold: rgba(133, 109, 41, 0.88);      /* floating review (kept dense for white-text contrast) */
}

/* ---------- Top nav (scrolled) ---------- */
html body nav.scrolled {
  background: var(--glass-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 8px 24px rgba(14, 28, 50, 0.08);
}
html body[class*="tpl-"] nav.scrolled {
  background: var(--glass-light);
}

/* ---------- Mobile menu overlay ---------- */
html body .mobile-nav {
  background: var(--glass-navy);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-edge);
}

/* ---------- Mobile sticky bar (bottom) ---------- */
html body .sticky-bar {
  background: var(--glass-navy);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-edge);
}

/* ---------- Floating review button ---------- */
html body .floating-review {
  background: var(--glass-gold);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-edge);
}

/* ---------- Performance: lighter blur on phones, where GPU budget is tight ---------- */
@media (max-width: 768px) {
  :root {
    --glass-blur: 12px;
    --glass-saturate: 140%;
  }
}

/* ---------- Fallback: browsers without backdrop-filter get solid surfaces ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body nav.scrolled { background: #f7f5f1; }
  html body .mobile-nav,
  html body .sticky-bar { background: #0e1c32; }
  html body .floating-review { background: #856d29; }
}

/* ---------- Users who ask for less transparency (solid surfaces, no blur) ---------- */
@media (prefers-reduced-transparency: reduce) {
  html body nav.scrolled { background: #f7f5f1; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html body .mobile-nav,
  html body .sticky-bar { background: #0e1c32; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html body .floating-review { background: #856d29; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Language switcher: legible on any nav background ----------
   The nav changes from transparent (over the dark hero) to frosted cream (scrolled, or over dark sections),
   and the link colours were tuned for only one of them. Each link now sits on its own solid chip,
   so the text contrast is the same wherever the nav is. */
/* Same box for EN, বাং and हि: one fixed size, centred text, no per-language padding or font size.
   Selectors start with html[lang] so they outrank the per-language rules in site.css (bn/hi padding and font). */
html[lang] body nav .lang-switcher a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  background: var(--navy) !important;
  border: 1px solid rgba(212, 184, 138, 0.45) !important;
}
html[lang] body nav .lang-switcher a.active,
html[lang] body nav .lang-switcher a:hover,
html[lang] body nav.scrolled .lang-switcher a.active {
  color: var(--gold-light) !important;
  background: #0e1c32 !important;
  border-color: var(--gold-light) !important;
}

/* ---------- Desktop nav fit, 1025–1366px ----------
   Laptop-width screens are where the links and the language buttons compete for room; tighten the spacing
   only in this range so wider screens keep the original look. */
@media (min-width: 1025px) and (max-width: 1366px) {
  html[lang] body nav { padding-left: 24px !important; padding-right: 24px !important; }
  html[lang] body nav .nav-links { gap: 8px !important; }
  html[lang] body nav .lang-switcher { margin-left: 4px !important; padding-left: 0 !important; border-left: 0 !important; gap: 3px !important; }
  html[lang] body nav .lang-switcher a { width: 34px !important; }
}

/* ---------- Menu switches to the hamburger below 1200px ----------
   The full link row does not fit between 1025 and 1200px, so those widths use the same mobile menu as tablets.
   Wider screens keep the full row. */
@media (min-width: 1025px) and (max-width: 1200px) {
  html body nav .nav-links { display: none !important; }
  html body nav .lang-switcher { display: none !important; }
  html body nav .hamburger { display: flex !important; }
  html body .mobile-nav { display: flex !important; }
}

/* ---------- Print: no glass ---------- */
@media print {
  html body nav,
  html body .mobile-nav,
  html body .sticky-bar,
  html body .floating-review {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* ==========================================================================
   Mobile glass cards (phones and tablets, up to 768px)
   Glass cards on the navy sections, plus a painted colour backdrop so the
   frost has light and colour to blur. Everything here is static: no
   animation, no fixed backgrounds, no SVG filters.
   ========================================================================== */
@media (max-width: 768px) {

  /* Cards: frosted glass with a soft top highlight */
  html body .exp-card,
  html body .blog-preview-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.16);
    border-top-color: rgba(255,255,255,0.30);
    box-shadow: 0 10px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.14);
  }

  /* Blog card text: lifted from 48% to 74% white for WCAG AA contrast */
  html body .blog-preview-card p {
    color: rgba(255,255,255,0.74);
  }

  /* Section backdrop: five painted light sources layered on the navy.
     1. Faint dot texture (the same motif as the hero, so it feels native)
     2. Warm gold light, top left
     3. Cool sky light, bottom right
     4. Soft gold band through the middle, so the cards' edges pick up colour
     5. Deep blue light, bottom left
     6. A gentle sheen from above, as if light falls from the top of the screen */
  html body .expertise,
  html body .blog-preview {
    background-image:
      radial-gradient(rgba(200,221,240,0.07) 1px, transparent 1px),
      radial-gradient(ellipse 60% 40% at 12% 18%, rgba(212,184,138,0.32) 0%, rgba(212,184,138,0) 70%),
      radial-gradient(ellipse 70% 50% at 92% 72%, rgba(120,168,220,0.36) 0%, rgba(120,168,220,0) 70%),
      radial-gradient(ellipse 50% 35% at 55% 50%, rgba(212,184,138,0.12) 0%, rgba(212,184,138,0) 75%),
      radial-gradient(ellipse 60% 45% at 5% 95%, rgba(74,122,176,0.30) 0%, rgba(74,122,176,0) 70%),
      linear-gradient(170deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%);
    background-size: 24px 24px, auto, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  }
}

/* Users who ask for less transparency: solid cards, flat backdrop, no blur */
@media (prefers-reduced-transparency: reduce) {
  html body .exp-card,
  html body .blog-preview-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html body .expertise,
  html body .blog-preview {
    background-image: none;
  }
}
/* ==========================================================================
   nav-tools.css — top bar: share button, language switcher, menu sizing.
   Loaded after glass.css, so it wins over the older per-page nav rules.
   ========================================================================== */

/* Share button and language buttons form one group (.nav-tools), so they always
   sit on the menu row (on BN/HI pages they used to drop to a second row). */
nav .nav-tools { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; }

/* The menu links fill the space between the brand and the tools group and centre
   their items there, so the menu sits in the middle of the bar. */
nav .nav-links { flex: 1 1 auto; justify-content: center; min-width: 0; }

/* The share button must not show through its own display rule when hidden.
   share.js removes the attribute once it is running. */
nav .nav-share-btn[hidden] { display: none !important; }

/* Light headers (cream before scrolling, e.g. the Blogs pages): main.js adds
   nav.nav-light. The share button was white-on-cream and disappeared. */
nav.nav-light .nav-share-btn {
  color: var(--navy);
  border-color: rgba(26, 46, 74, 0.4);
  background: rgba(26, 46, 74, 0.04);
}
nav.nav-light .nav-share-btn:hover,
nav.nav-light .nav-share-btn:focus-visible,
nav.nav-light .nav-share-btn[aria-expanded="true"] {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(26, 46, 74, 0.08);
}

/* ---- Brand subtitle: a narrower letter-spacing frees room for the menu row ---- */
@media (min-width: 1025px) {
  html[lang] body nav .nav-brand-title { letter-spacing: 0.08em; font-size: 0.66rem; }
}

/* ---- Laptop widths, 1025–1365px (CSS pixels): one row, compact sizes ----
   At 1280 CSS pixels (a 1920px screen at 150% scaling) everything has to share one row:
   brand, menu, share button and language buttons. So the brand and menu text are a little
   smaller here than on wider screens. Above 1366px the full-size single row is used.
   Change the 1366 value at the end of this block to move the break. */
@media (min-width: 1025px) and (max-width: 1365px) {
  html[lang] body nav { display: flex !important; flex-wrap: nowrap; }
  html[lang] body nav .nav-brand-name { font-size: 1.02rem; }
  html[lang] body nav .nav-brand-title { font-size: 0.56rem; letter-spacing: 0.06em; }
  html[lang] body nav .nav-links { display: flex !important; gap: 12px !important; margin: 0 !important; }
  html[lang] body nav .nav-links a { font-size: 0.68rem; letter-spacing: 0.03em; }
}
/* Below 1280px the English row needs a little more room. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html[lang] body nav .nav-links { gap: 8px !important; }
  html[lang] body nav .nav-links a { font-size: 0.64rem; letter-spacing: 0.02em; }
  html[lang] body nav .nav-brand-name { font-size: 0.96rem; }
  html[lang] body nav .nav-cta { padding: 8px 12px; }
  html[lang] body nav .nav-tools { margin-left: 8px; }
  html[lang] body nav .lang-switcher { display: flex !important; margin-left: 6px; gap: 3px; }
  html[lang] body nav .lang-switcher a { width: 30px; height: 28px; font-size: 11.5px; }
  html[lang] body nav .hamburger { display: none !important; }
  html[lang] body .mobile-nav { display: none !important; }
  html[lang="bn"] body nav .nav-links a, html[lang="hi"] body nav .nav-links a { font-size: 14.5px; letter-spacing: 0; }
  html[lang="bn"] body nav .nav-links, html[lang="hi"] body nav .nav-links { gap: 10px !important; }
  html[lang="bn"] body nav .lang-switcher a, html[lang="hi"] body nav .lang-switcher a { font-size: 11.5px !important; width: 30px !important; }
  html[lang="bn"] body nav .nav-cta, html[lang="hi"] body nav .nav-cta { font-size: 14.5px; }
}

/* Narrowest laptop widths (1025–1099px): a little more room from the brand and buttons. */
@media (min-width: 1025px) and (max-width: 1099px) {
  html[lang] body nav .nav-brand-name { font-size: 0.84rem; }
  html[lang] body nav .nav-brand-title { display: none; } /* subtitle hidden to make room for the menu */
  html[lang] body nav .nav-cta { padding: 6px 7px; }
  html[lang] body nav .nav-tools { margin-left: 4px; }
  html[lang] body nav { gap: 6px; }
  html[lang] body nav .nav-links { gap: 8px !important; }
  html[lang] body nav .nav-links a { letter-spacing: 0; }
  html[lang] body nav .lang-switcher { margin-left: 4px; }
  html[lang] body nav .lang-switcher a { width: 26px; height: 26px; }
}

/* 1025–1049px: the brand name is smaller still so it clears the first menu item. */
@media (min-width: 1025px) and (max-width: 1049px) {
  html[lang] body nav .nav-brand-name { font-size: 0.78rem; }
}

/* ---- Full menu sizes: 1366px and up, larger from 1440px and 1600px ---- */
@media (min-width: 1366px) {
  html[lang] body nav .nav-links a { font-size: 0.74rem; letter-spacing: 0.05em; }
  html[lang] body nav .nav-links { gap: 14px; }
  html[lang] body nav .lang-switcher a { width: 34px; height: 30px; font-size: 12px; }
}
@media (min-width: 1440px) {
  html[lang] body nav .nav-brand-title { font-size: 0.72rem; }
  html[lang] body nav .nav-links { gap: 16px; }
  html[lang] body nav .lang-switcher a { width: 36px; height: 32px; font-size: 12.5px; }
}
@media (min-width: 1600px) {
  html[lang] body nav .nav-links a { font-size: 0.80rem; letter-spacing: 0.06em; }
  html[lang] body nav .nav-links { gap: 20px; }
  html[lang] body nav .lang-switcher a { width: 40px; height: 34px; font-size: 13px; }
}
/* Bangla and Hindi menus use larger Indic text, so they get their own sizes. */
html[lang="bn"] nav .nav-links a, html[lang="hi"] nav .nav-links a { font-size: 15.5px !important; letter-spacing: 0 !important; }
html[lang="bn"] nav .nav-links, html[lang="hi"] nav .nav-links { gap: 14px !important; }
html[lang="bn"] nav .lang-switcher a, html[lang="hi"] nav .lang-switcher a { font-size: 14px !important; width: auto !important; }
@media (min-width: 1440px) {
  html[lang="bn"] nav .nav-links a, html[lang="hi"] nav .nav-links a { font-size: 17px !important; letter-spacing: 0.01em !important; }
  html[lang="bn"] nav .nav-links, html[lang="hi"] nav .nav-links { gap: 20px !important; }
}

/* ---- Phone widths: keep the header and article links inside the screen ----
   The brand title was nowrap with wide letter-spacing (about 265px on a 390px phone),
   which pushed the hamburger past the right edge on article pages. */
@media (max-width: 480px) {
  html body nav .nav-brand-title { font-size: 0.66rem; letter-spacing: 0.12em; }
}
/* Long inline links (guide-keep is nowrap) were wider than a phone screen. */
@media (max-width: 640px) {
  html body a.guide-keep { white-space: normal; }
}

/* Ghost titles: one shared placement for every page and language (overrides older per-page values). */
body .expertise-ghost, body .page-hero-ghost, body .blog-preview-ghost, body .page-header-ghost, body .notfound-ghost {
  left: 50% !important; right: auto !important; top: 36px !important; bottom: auto !important;
  transform: translateX(-50%) !important; white-space: nowrap; line-height: 1 !important;
}

/* Credentials block (About page) */
  .pg-cred-inner { max-width: 1080px; margin: 0 auto; }
  .pg-cred-head { max-width: 720px; }
  .pg-cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; align-items: start; }
  .pg-cred-fig { margin: 0; }
  .pg-cred-fig.wide { grid-column: span 2; }
  .pg-cred-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: var(--cream); }
  .pg-cred-fig.wide img { aspect-ratio: 3 / 2; }
  .pg-cred-fig figcaption { padding-top: 14px; }
  .pg-cred-tag { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
  .pg-cred-cap { display: block; font-size: 0.9rem; line-height: 1.7; color: var(--mid-grey); }
  @media (max-width: 1024px) { .pg-cred-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } }
  @media (max-width: 560px) { .pg-cred-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .pg-cred-cap { font-size: 0.82rem; line-height: 1.6; } }
/* Home teasers: About (navy band, joins the hero and Areas of Expertise) and Experience (page background) */
.exp-teaser { padding-left: 64px; padding-right: 64px; }
.exp-teaser-grid { display: grid; gap: 80px; align-items: center; grid-template-columns: 1.35fr 1fr; }
.exp-teaser .sec-label { color: var(--gold); }
.exp-teaser h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1.15; color: var(--navy); margin: 14px 0 22px; }
.exp-teaser h2 em { font-style: italic; color: var(--blue); }
.exp-teaser-text p { font-size: 1rem; line-height: 1.9; color: var(--charcoal); max-width: 560px; margin: 0; }
.exp-teaser-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; text-decoration: none; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 6px; color: var(--navy); border-bottom: 1px solid var(--gold); transition: color 0.3s, border-color 0.3s; }
.exp-teaser-link:hover { color: var(--blue); border-color: var(--blue); }
.exp-stats { border-left: 1px solid rgba(26,46,74,0.14); padding-left: 56px; }
.exp-stat { padding: 22px 0; border-bottom: 1px solid rgba(26,46,74,0.1); }
.exp-stat:first-child { padding-top: 0; }
.exp-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.exp-stat-n { font-family: 'Cormorant Garamond', serif; font-size: 3rem; line-height: 1; color: var(--navy); font-weight: 400; }
.exp-stat-n span { font-size: 1.6rem; color: var(--gold); }
.exp-stat-l { margin-top: 10px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid-grey); }
:lang(bn) .exp-teaser *, :lang(hi) .exp-teaser * { letter-spacing: normal; }

@media (max-width: 900px) {
  .exp-teaser { padding-left: 28px; padding-right: 28px; }
  .exp-teaser-grid { grid-template-columns: 1fr; gap: 36px; }
  .exp-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 0; padding-left: 0; border-top: 1px solid rgba(26,46,74,0.14); padding-top: 24px; }
  .exp-stat { padding: 0 14px; border-bottom: 0; border-left: 1px solid rgba(26,46,74,0.14); }
  .exp-stat:first-child { padding-left: 0; border-left: 0; }
  .exp-stat:last-child { padding-bottom: 0; }
  .exp-stat-n { font-size: 2.3rem; }
  .exp-stat-n span { font-size: 1.1rem; }
  .exp-stat-l { font-size: 0.6rem; letter-spacing: 0.12em; }
}

/* About page header: ghost lettering and breadcrumb only */
body .about-page-header { grid-template-columns: 1fr; padding: 150px 80px 16px; }
@media (max-width: 900px) { body .about-page-header { padding: 104px 28px 16px; } }

/* About banner: faded AIIMS photograph with the introduction set over it */
main > section#about { padding-top: 0; padding-bottom: 0; }
.about-banner { position: relative; overflow: hidden; min-height: clamp(340px, 36vw, 440px); display: flex; align-items: center; background: var(--navy); }
.about-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.about-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 9%, rgba(26,46,74,0.9) 22%, rgba(26,46,74,0.5) 42%, rgba(26,46,74,0.16) 70%, rgba(26,46,74,0.1) 100%), linear-gradient(180deg, var(--navy) 0%, rgba(26,46,74,0) 16%, rgba(26,46,74,0) 74%, var(--navy) 100%); }
.about-banner-inner { position: relative; z-index: 1; width: 100%; padding: 56px 64px; }
.about-banner-text { max-width: 520px; }
.about-banner .sec-label { color: var(--gold-light); }
.about-banner h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.15; color: #fff; margin: 14px 0 0; text-shadow: 0 2px 24px rgba(0,0,0,0.25); }
.about-banner h2 em { font-style: italic; color: var(--gold-light); }
.about-banner-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--gold-light); text-decoration: none; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid rgba(212,184,138,0.5); padding-bottom: 6px; transition: color 0.3s, border-color 0.3s; }
.about-banner-link:hover { color: #fff; border-color: #fff; }
.about-banner-cap { position: absolute; right: 64px; bottom: 22px; z-index: 1; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
:lang(bn) .about-banner *, :lang(hi) .about-banner * { letter-spacing: normal; }
@media (max-width: 900px) {
  .about-banner { min-height: 520px; align-items: flex-end; }
  .about-banner-img { object-position: 68% 30%; }
  .about-banner-shade { background: linear-gradient(0deg, var(--navy) 30%, rgba(26,46,74,0.55) 68%, rgba(26,46,74,0.3) 100%), linear-gradient(90deg, var(--navy) 0%, rgba(26,46,74,0) 22%, rgba(26,46,74,0) 78%, var(--navy) 100%); }
  .about-banner-inner { padding: 48px 28px 72px; }
  .about-banner-cap { right: 28px; bottom: 22px; }
}


/* Responsive: About page bio and Experience page (stack to one column on phones and tablets) */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; min-height: auto; }
  .about-img-wrap { min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
  .about-img-fade { display: none; }
  .about-body { padding: 48px 28px 56px; }
  .about-body h2 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .experience { grid-template-columns: 1fr; gap: 56px; padding: 72px 28px; }
  .exp-left { min-width: 0; }
  .hosp-imgs { gap: 8px; }
  .felicitation-imgs { gap: 8px; }
  .tl { min-width: 0; }
}
@media (max-width: 900px) {
  .about-img-wrap .img-caption { left: 14px; right: auto; bottom: 14px; background: rgba(26,46,74,0.88); color: #fff; padding: 6px 10px; }
}

/* Experience page header: smaller portrait, placed beside the text so it clears the ghost lettering */
body .exp-page-header { grid-template-columns: minmax(0, 760px) 200px; justify-content: start; column-gap: 80px; }
body .exp-page-header .page-header-portrait { width: 200px; height: 260px; }
@media (max-width: 640px) { body .exp-page-header { grid-template-columns: 1fr; } }

/* ===== Touch screens (iPhone, iPad): tap targets at least 44x44 pt =====
   Scoped to pointer:coarse so desktop keeps the compact header. The hamburger keeps its
   visual size; negative margins stop the larger hit area from pushing the header layout. */
@media (pointer: coarse) {
  .hamburger { min-width: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; margin-right: -10px; }
  .nav-share-btn { width: 44px; height: 44px; }
  .lang-switcher a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}


/* ── Refinements: About, Experience and footer ───────────────────── */
.about-wrap { max-width: 1040px; }
.about-quals, .about-approach, .about-cta { padding: 96px 64px; }
.about-quals { background: var(--cream); }
.about-approach { background: var(--cream-dark); }
.about-quals h2, .about-approach h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.25; color: var(--navy); margin-bottom: 40px; }
.about-quals h2 em, .about-approach h2 em { font-style: italic; color: var(--blue); }
.quals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin: 0; }
.qual { padding: 22px 0; border-top: 1px solid var(--cream-dark); }
.qual dt { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; line-height: 1.3; color: var(--navy); margin-bottom: 6px; }
.qual dd { font-size: 0.94rem; line-height: 1.7; color: var(--charcoal); margin: 0; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.approach-card { background: var(--white); padding: 40px 34px; border-top: 2px solid var(--gold); border-radius: 3px; }
.approach-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.45rem; color: var(--navy); margin-bottom: 12px; }
.approach-card p { font-size: 0.96rem; line-height: 1.8; color: var(--charcoal); }
.about-cta { background: var(--navy); text-align: center; }
.about-cta h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--white); margin-bottom: 14px; }
.about-cta h2 em { font-style: italic; color: var(--sky); }
.about-cta p { color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 520px; margin: 0 auto 34px; }
.about-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.about-cta-btn { padding: 14px 28px; border: 1px solid rgba(255,255,255,0.4); border-radius: 2px; color: var(--white); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.about-cta-btn.solid { background: var(--gold); border-color: var(--gold); color: var(--white); }
.about-cta-btn:hover { background: rgba(255,255,255,0.08); }
.about-cta-btn.solid:hover { background: #6d4f18; border-color: #6d4f18; }
.tl-group { display: flex; align-items: center; gap: 12px; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin: 0 0 26px; }
.tl-group::before { content: ''; width: 20px; height: 1px; background: var(--blue); }
.tl-group:not(:first-child) { margin-top: 56px; }

footer.site-footer { display: block; background: #101d2e; padding: 72px 64px 28px; color: rgba(255,255,255,0.7); }
.ft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 56px; }
.ft-brand .footer-name { font-size: 1.5rem; color: var(--white); margin-bottom: 8px; }
.ft-role { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin: 0 0 22px; }
.ft-title { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.ft-title-gap { margin-top: 34px; }
.ft-contact, .ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ft-contact a, .ft-links a { font-size: 0.92rem; color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; }
.ft-contact a:hover, .ft-links a:hover, .ft-contact a:focus-visible, .ft-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ft-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }
.ft-bottom a { color: inherit; }
body:has(.sticky-bar) footer.site-footer { padding-bottom: calc(28px + var(--sbar-h, 64px)); }

@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .about-quals, .about-approach, .about-cta { padding: 64px 20px; }
  .quals { grid-template-columns: 1fr; }
  footer.site-footer { padding: 56px 20px 28px; }
  .ft-grid { grid-template-columns: 1fr; gap: 36px; }
  .ft-bottom { flex-direction: column; }
}