/* ===== NETHRALAYA EYE CARE - STYLESHEET ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
  --navy: #0a2342;
  --teal: #00768a;
  --teal-light: #009db2;
  --gold: #c9a84c;
  --white: #ffffff;
  --offwhite: #f5f7fa;
  --text: #333344;
  --light-gray: #e8ecf0;
  --shadow: 0 4px 24px rgba(0,0,0,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; color: var(--text); background: var(--white); font-size: 16px; line-height: 1.7; }

/* TOPBAR */
.topbar { background: var(--navy); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 5px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 4px; }
.topbar-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 12px; padding: 3px 10px; border-radius: 4px; transition: color 0.2s, background 0.2s; white-space: nowrap; }
.topbar-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.topbar-link svg { flex-shrink: 0; }
.topbar-wa { color: #25D366; }
.topbar-wa:hover { color: #fff; background: #25D366; }
.topbar-left .topbar-link + .topbar-link { border-left: 1px solid rgba(255,255,255,0.12); }

/* NAVBAR */
nav { background: var(--white); box-shadow: 0 2px 16px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 1000; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 68px; }

/* LOGO — constrained sizing */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 44px; width: auto; object-fit: contain; display: block; border-radius: 6px; }
.logo-icon-fallback { display: none; width: 44px; height: 44px; background: var(--teal); border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-icon-fallback svg { width: 24px; height: 24px; fill: white; }
.logo-text { flex-shrink: 0; }
.logo-text h1 { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--navy); font-weight: 700; line-height: 1.1; }
.logo-text span { font-size: 10px; color: var(--teal); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.footer-logo .logo-text h1 { color: white; }
.footer-logo .logo-text span { color: var(--gold); }
.footer-logo .logo-img { height: 40px; }

.nav-links { display: flex; align-items: center; list-style: none; gap: 4px; }
.nav-links > li { position: relative; }
.nav-links a { display: block; padding: 10px 16px; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 6px; transition: background 0.2s, color 0.2s; }
.nav-links a:hover, .nav-links a.active { background: var(--teal); color: var(--white); }
.dropdown > a::after { content: ' ▾'; font-size: 10px; }
.dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: var(--white); border-radius: 8px; box-shadow: var(--shadow); min-width: 230px; overflow: hidden; border: 1px solid var(--light-gray); z-index: 200; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { padding: 10px 18px; border-radius: 0; font-weight: 400; color: var(--text); border-bottom: 1px solid var(--light-gray); }
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: var(--teal); color: white; }
.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { display: block; width: 25px; height: 2.5px; background: var(--navy); border-radius: 2px; }

/* HERO VIDEO SECTION */
.hero-video-section { padding: 0; background: #000; position: relative; }
.hero-video-container { position: relative; width: 100%; max-height: 85vh; overflow: hidden; }
.hero-video-container video { width: 100%; display: block; object-fit: cover; max-height: 85vh; }

/* CTA Side Buttons */
.hero-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  font-size: 14px;
  padding: 14px 28px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.hero-side-left {
  left: -60px;
  transform: translateY(-50%) translateX(-20px);
}
.hero-side-right {
  right: -60px;
  transform: translateY(-50%) translateX(20px);
}
.hero-side-right.btn-outline { border-color: rgba(255,255,255,0.7); }
.hero-side-right.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.hero-video-container:hover .hero-side-btn {
  opacity: 1;
  pointer-events: auto;
}
.hero-video-container:hover .hero-side-left {
  left: 32px;
  transform: translateY(-50%) translateX(0);
}
.hero-video-container:hover .hero-side-right {
  right: 32px;
  transform: translateY(-50%) translateX(0);
}

/* Custom Video Controls */
.video-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%); z-index: 3; opacity: 0; transition: opacity 0.3s ease; }
.hero-video-container:hover .video-controls,
.about-video-wrap:hover .video-controls,
.video-controls.visible { opacity: 1; }

.vc-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; }
.vc-icon { width: 22px; height: 22px; fill: #fff; }

/* Timeline */
.vc-timeline { flex: 1; position: relative; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; cursor: pointer; }
.vc-timeline-buffered { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,0.25); border-radius: 3px; pointer-events: none; }
.vc-timeline-progress { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); border-radius: 3px; pointer-events: none; transition: width 0.1s linear; }
.vc-timeline-input { position: absolute; top: -4px; left: 0; width: 100%; height: 14px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }

.vc-time { color: rgba(255,255,255,0.8); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 80px; text-align: center; }

/* Volume */
.vc-volume-wrap { width: 70px; display: flex; align-items: center; }
.vc-vol { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px; outline: none; cursor: pointer; }
.vc-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; }
.vc-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }

@media (max-width: 680px) {
  .hero-side-btn { padding: 10px 20px; font-size: 12px; }
  .hero-video-container:hover .hero-side-left { left: 12px; }
  .hero-video-container:hover .hero-side-right { right: 12px; }
  .vc-time { display: none; }
  .vc-volume-wrap { width: 50px; }
  .video-controls { padding: 8px 10px; gap: 6px; }
}

/* BUTTONS */
.btn { display: inline-block; padding: 14px 34px; border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; border: none; transition: transform 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: white; }
.btn-teal { background: var(--teal); color: white; }
.btn-navy { background: var(--navy); color: white; }

/* SHARED SECTION */
section { padding: 72px 24px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 10px; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 3.5vw, 2.5rem); color: var(--navy); margin-bottom: 16px; line-height: 1.25; }
.section-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.section-divider::after { content: ''; flex: 1; height: 2px; background: var(--light-gray); }
.section-divider span { color: var(--gold); font-size: 22px; }

/* WELCOME */
.welcome { background: var(--offwhite); }
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.welcome-img-box { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: linear-gradient(135deg, var(--teal), var(--navy)); display: flex; align-items: center; justify-content: center; }
.welcome-img-box img { width: 100%; height: 100%; object-fit: cover; }
.welcome-img-placeholder { text-align: center; color: rgba(255,255,255,0.7); padding: 30px; }
.welcome-img-placeholder svg { width: 80px; height: 80px; fill: rgba(255,255,255,0.5); margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
.stat-row { display: flex; gap: 30px; margin-top: 28px; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--teal); font-weight: 700; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #666; }

/* HOME PRODUCT PREVIEW */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.product-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.07); transition: transform 0.25s, box-shadow 0.25s; text-decoration: none; color: inherit; display: block; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.13); }
.card-img { height: 210px; background: linear-gradient(135deg, var(--navy), var(--teal)); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 14px; box-sizing: border-box; }
.card-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.card-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card-icon svg { width: 70px; height: 70px; fill: rgba(255,255,255,0.25); }
.card-body { padding: 22px 24px 26px; }
.card-body h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--navy); margin-bottom: 10px; }
.card-body p { color: #666; font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.card-link { color: var(--teal); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.card-link::after { content: '→'; transition: transform 0.2s; }
.product-card:hover .card-link::after { transform: translateX(4px); }

/* DOWNLOAD */
.download { background: var(--navy); }
.download .section-title { color: white; }
.download .section-label { color: var(--gold); }
.download-cards { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 36px; }
.dl-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; gap: 20px; flex: 1; min-width: 260px; transition: background 0.2s; text-decoration: none; }
.dl-card:hover { background: rgba(255,255,255,0.13); }
.dl-icon { width: 52px; height: 52px; background: var(--gold); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dl-icon svg { width: 28px; height: 28px; fill: var(--navy); }
.dl-info h4 { color: white; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.dl-info p { color: rgba(255,255,255,0.55); font-size: 13px; }

/* CONTACT */
.contact-section { background: var(--offwhite); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.info-item { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.info-icon { width: 42px; height: 42px; background: var(--teal); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon svg { width: 20px; height: 20px; fill: white; }
.info-text strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.info-text a, .info-text span { color: #555; font-size: 14px; text-decoration: none; line-height: 1.6; display: block; }
.info-text a:hover { color: var(--teal); }
.contact-form { background: white; border-radius: 16px; padding: 36px; box-shadow: var(--shadow); }
.contact-form h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--navy); margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--light-gray); border-radius: 8px; font-family: 'Lato', sans-serif; font-size: 14px; color: var(--text); background: var(--offwhite); transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--teal); background: white; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.whatsapp-btn { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: white; padding: 12px 26px; border-radius: 50px; font-weight: 700; font-size: 14px; text-decoration: none; margin-top: 14px; transition: transform 0.2s, box-shadow 0.2s; }
.whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,211,102,0.3); }

/* ENQUIRY CTA STRIP */
/* Gradient rather than flat navy: .download sits directly above this on the
   products page, so two flat navy bands would merge into one dark block. */
.cta-strip { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); color: white; text-align: center; }
.cta-strip .section-title { color: white; }
.cta-strip .section-label { color: var(--gold); }
.cta-strip p { color: rgba(255,255,255,0.78); }

/* PAGE HERO */
.page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); color: white; padding: 64px 24px 56px; text-align: center; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.breadcrumb a { color: var(--gold); text-decoration: none; }

/* ABOUT */
/* auto-fit (not auto-fill) collapses the unused 5th track, so the 4 cards
   share the full width evenly instead of bunching left. */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px; justify-content: center; }
.value-card { background: white; border-radius: 12px; padding: 28px 22px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); text-align: center; }
.value-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--teal), var(--navy)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.value-icon svg { width: 28px; height: 28px; fill: white; }
.value-card h4 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.05rem; margin-bottom: 8px; }
.value-card p { color: #666; font-size: 13px; line-height: 1.7; }

/* =============================================
   PRODUCTS PAGE — FULL SCROLL CATALOG
   ============================================= */

/* Sticky category pill nav */
.cat-nav-wrap { background: var(--navy); position: sticky; top: 72px; z-index: 900; border-bottom: 3px solid var(--gold); }
.cat-nav { max-width: 1300px; margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a { display: flex; align-items: center; gap: 7px; padding: 13px 16px; color: rgba(255,255,255,0.65); text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: color 0.2s, border-color 0.2s; text-transform: uppercase; }
.cat-nav a:hover, .cat-nav a.cat-active { color: var(--gold); border-bottom-color: var(--gold); }
.cat-nav a .cat-emoji { font-size: 15px; }

/* Category section */
/* scroll-margin keeps headings clear of the sticky header + pill nav on anchor jumps */
.cat-section { padding: 64px 0 52px; scroll-margin-top: 130px; }
.cat-section:nth-child(odd) { background: var(--white); }
.cat-section:nth-child(even) { background: var(--offwhite); }
.cat-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Category header */
.cat-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 22px; border-bottom: 2px solid var(--light-gray); margin-bottom: 36px; }
.cat-header-left .cat-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 6px; }
.cat-header-left h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--navy); }
.cat-header-left p { color: #666; font-size: 14px; margin-top: 6px; max-width: 520px; }
.enquire-all { background: var(--teal); color: white; padding: 10px 22px; border-radius: 50px; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.enquire-all:hover { background: var(--navy); }

/* Sub-category divider */
.sub-label { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--navy); margin: 36px 0 18px; padding: 10px 0 10px 16px; border-left: 4px solid var(--gold); display: flex; align-items: center; gap: 10px; }
.sub-label small { font-family: 'Lato', sans-serif; font-size: 12px; background: var(--light-gray); color: #555; padding: 3px 10px; border-radius: 20px; font-weight: 700; letter-spacing: 0.5px; }

/* E-COMMERCE PRODUCT CARDS */
.ecom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; margin-bottom: 8px; }

.pcard { background: white; border-radius: 14px; border: 1.5px solid var(--light-gray); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; }
.pcard:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.11); border-color: var(--teal); }

.pcard-img { height: 200px; background: linear-gradient(145deg, #e4f0f4, #cee3ea); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform 0.3s; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.img-ph { text-align: center; color: #9ab5bf; }
.img-ph svg { width: 56px; height: 56px; fill: #b5ced6; display: block; margin: 0 auto 8px; }
.img-ph span { font-size: 11px; }

.pcard-badge { position: absolute; top: 10px; left: 10px; background: var(--teal); color: white; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.pcard-badge.gold { background: var(--gold); color: var(--navy); }

.pcard-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.pcard-brand { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.pcard-name { font-family: 'Playfair Display', serif; font-size: 0.97rem; color: var(--navy); font-weight: 600; margin-bottom: 12px; line-height: 1.35; }

.pcard-specs { list-style: none; margin-bottom: 14px; border: 1px solid var(--light-gray); border-radius: 8px; overflow: hidden; }
.pcard-specs li { font-size: 12px; color: #555; padding: 6px 10px; border-bottom: 1px solid var(--light-gray); display: flex; gap: 8px; line-height: 1.5; }
.pcard-specs li:last-child { border-bottom: none; }
.pcard-specs li strong { color: var(--navy); min-width: 80px; flex-shrink: 0; font-size: 11.5px; }

.pcard-footer { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; }
.btn-enq { flex: 1; background: var(--teal); color: white; border: none; border-radius: 8px; padding: 9px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; transition: background 0.2s; font-family: 'Lato', sans-serif; }
.btn-enq:hover { background: var(--navy); }
.btn-wa { background: #25D366; color: white; border: none; border-radius: 8px; padding: 9px 12px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; transition: background 0.2s; }
.btn-wa:hover { background: #1da851; }
.btn-wa svg { width: 16px; height: 16px; fill: white; }

/* Image-only grid (drapes/instruments) */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.img-card { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--light-gray); background: white; transition: box-shadow 0.2s, transform 0.2s; }
.img-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal); }
.img-card-box { height: 220px; background: #edf3f6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-card-box img { width: 100%; height: 100%; object-fit: cover; }
.img-card-cap { padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--navy); border-top: 1px solid var(--light-gray); display: flex; justify-content: space-between; align-items: center; }
.img-card-cap a { font-size: 12px; color: var(--teal); font-weight: 700; text-decoration: none; }

/* Enquiry Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,35,66,0.65); z-index: 3000; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-overlay.open { display: flex; }
.modal-box { background: white; border-radius: 18px; padding: 40px; max-width: 500px; width: 92%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 80px rgba(0,0,0,0.25); }
.modal-box h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--navy); margin-bottom: 6px; }
.modal-box .modal-prod { font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 24px; }
.modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 24px; cursor: pointer; color: #999; line-height: 1; }
.modal-close:hover { color: var(--navy); }

/* FOOTER */
footer { background: var(--navy); color: rgba(255,255,255,0.75); padding: 56px 24px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.footer-brand p { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.footer-logo { display: inline-flex; margin-bottom: 6px; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; text-decoration: none; }
.footer-social-btn svg { fill: rgba(255,255,255,0.7); }
.footer-social-btn:hover { background: var(--gold); transform: translateY(-2px); }
.footer-social-btn:hover svg { fill: var(--navy); }
.footer-col h5 { color: white; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px; position: relative; padding-bottom: 10px; }
.footer-col h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--gold); border-radius: 1px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; transition: color 0.2s, padding-left 0.2s; }
.footer-col a:hover { color: var(--gold); padding-left: 4px; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 8px; }
.footer-contact-link svg { flex-shrink: 0; fill: rgba(255,255,255,0.5); }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 13px; color: rgba(255,255,255,0.45); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .welcome-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .topbar-link span { display: none; }
  .topbar-link svg { width: 16px; height: 16px; }
}
@media (max-width: 680px) {
  .topbar-inner { justify-content: center; }
  .topbar-right { display: none; }
  .nav-inner { height: 60px; }
  .logo-img { height: 36px; }
  .logo-text h1 { font-size: 15px; }
  .logo-text span { font-size: 9px; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: white; box-shadow: var(--shadow); padding: 16px 0; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { border-radius: 0; padding: 12px 24px; }
  .dropdown-menu { position: static; box-shadow: none; border: none; border-left: 3px solid var(--teal); margin-left: 20px; }
  .hamburger { display: flex; }
  .footer-inner { grid-template-columns: 1fr; }
  .download-cards { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .cat-header { flex-direction: column; align-items: flex-start; }
  .ecom-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .img-grid { grid-template-columns: 1fr; }
}


/* =============================================
   PRODUCTS PAGE — INLINE STYLES MOVED HERE
   ============================================= */

/* Brighter pcard image backgrounds */
.pcard-img { background: linear-gradient(145deg, #f0f7fa, #e6f2f7); }
.pmma-card-img { background: linear-gradient(145deg, #f0f7fa, #e6f2f7); }

/* ── PMMA HERO CARD ── */
.pmma-hero {
  display: flex;
  align-items: center;
  gap: 36px;
  background: linear-gradient(135deg, #f0f7fa 0%, #e0eef5 100%);
  border: 1.5px solid var(--light-gray);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 28px;
  transition: box-shadow 0.3s;
}
.pmma-hero:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.pmma-hero-img {
  flex: 0 0 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pmma-hero-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pmma-hero-body { flex: 1; }
.pmma-hero-body .pmma-brand { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.pmma-hero-body .pmma-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--navy); font-weight: 700; margin-bottom: 8px; }
.pmma-hero-body .pmma-desc { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 14px; }
.pmma-hero-body .pmma-foot { display: flex; gap: 8px; }

/* ── PMMA GALLERY ── */
.pmma-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.pmma-card {
  background: white;
  border: 1.5px solid var(--light-gray);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.pmma-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); border-color: var(--teal); }
.pmma-card-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.pmma-card-img img { width:100%; height:100%; object-fit:contain; padding:10px; transition: transform 0.3s; }
.pmma-card:hover .pmma-card-img img { transform: scale(1.05); }
.pmma-badge { position:absolute; top:9px; left:9px; background:var(--teal); color:white; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.pmma-badge.yellow { background:var(--gold); color:var(--navy); }
.pmma-body { padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; }
.pmma-brand { font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--teal); margin-bottom:3px; }
.pmma-name { font-family:'Playfair Display',serif; font-size:0.9rem; color:var(--navy); font-weight:600; margin-bottom:10px; line-height:1.3; }
.pmma-specs { list-style:none; border:1px solid var(--light-gray); border-radius:7px; overflow:hidden; margin-bottom:12px; }
.pmma-specs li { font-size:11.5px; color:#555; padding:5px 9px; border-bottom:1px solid var(--light-gray); display:flex; gap:7px; line-height:1.45; }
.pmma-specs li:last-child { border-bottom:none; }
.pmma-specs li strong { color:var(--navy); min-width:75px; flex-shrink:0; font-size:11px; }
.pmma-foot { margin-top:auto; display:flex; gap:7px; }
.pmma-foot .btn-enq { flex:1; background:var(--teal); color:white; border:none; border-radius:7px; padding:8px 10px; font-size:12px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; display:inline-block; transition:background 0.2s; font-family:'Lato',sans-serif; }
.pmma-foot .btn-enq:hover { background:var(--navy); }
.pmma-foot .btn-wa { background:#25D366; color:white; border:none; border-radius:7px; padding:8px 11px; cursor:pointer; display:inline-flex; align-items:center; text-decoration:none; transition:background 0.2s; }
.pmma-foot .btn-wa:hover { background:#1da851; }
.pmma-foot .btn-wa svg { width:15px; height:15px; fill:white; }

/* ── SUTURE 3D BOXES (inside pcard) ── */
.sbox-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding: 16px 0; }
.sbox-label { font-family:'Nunito',sans-serif; font-size:11px; color:#666; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.sbox3d { position:relative; width:150px; height:190px; transform-style:preserve-3d; transform:rotateX(9deg) rotateY(-28deg); transition:transform 0.35s ease; cursor:pointer; }
.sbox3d:hover { transform:rotateX(9deg) rotateY(-16deg) scale(1.06); }
.sface { position:absolute; }
.sfr { width:150px; height:190px; top:0; left:0; display:flex; flex-direction:column; justify-content:space-between; padding:13px; box-sizing:border-box; border-radius:6px 0 0 6px; }
.sri { width:46px; height:190px; top:0; left:150px; transform-origin:left center; transform:rotateY(90deg); border-radius:0 6px 6px 0; display:flex; align-items:center; justify-content:center; }
.stp { width:150px; height:46px; top:-46px; left:0; transform-origin:bottom center; transform:rotateX(90deg); border-radius:6px 6px 0 0; }
.smat { font-family:'Nunito',sans-serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:2px; }
.snum { font-family:'DM Mono',monospace; font-size:52px; line-height:1; font-weight:500; }
.sdesc { font-family:'Nunito',sans-serif; font-size:8.5px; letter-spacing:0.4px; opacity:0.85; }
.sbadge { display:inline-block; font-family:'Nunito',sans-serif; font-size:8px; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:20px; font-weight:700; margin-top:4px; }
.sside { font-family:'DM Mono',monospace; font-size:10px; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); letter-spacing:1px; opacity:0.9; }

/* box colour schemes */
.b1-fr{background:#0d2b1f;border:1.5px solid #2a6645;color:#d4f5e2;} .b1-ri{background:#0a2018;border-top:1.5px solid #2a6645;border-right:1.5px solid #2a6645;border-bottom:1.5px solid #2a6645;color:#6fcf97;} .b1-tp{background:#143d2c;border:1.5px solid #2a6645;} .b1-mat{color:#6fcf97;} .b1-num{color:#e8faf0;} .b1-desc{color:#82c9a0;} .b1-badge{background:#1f5c3c;color:#9ef5c2;border:1px solid #2a8050;} .b1-side{color:#6fcf97;}
.b2-fr{background:#0e1f3d;border:1.5px solid #2f5599;color:#c5d9f5;} .b2-ri{background:#0b1830;border-top:1.5px solid #2f5599;border-right:1.5px solid #2f5599;border-bottom:1.5px solid #2f5599;color:#90aed8;} .b2-tp{background:#162848;border:1.5px solid #2f5599;} .b2-mat{color:#90aed8;} .b2-num{color:#e0ecff;} .b2-desc{color:#7a9fcc;} .b2-badge{background:#1a3666;color:#90c4f8;border:1px solid #2f5599;} .b2-side{color:#90aed8;}
.b3-fr{background:#1e1240;border:1.5px solid #5b3fa0;color:#e0d4f8;} .b3-ri{background:#170e30;border-top:1.5px solid #5b3fa0;border-right:1.5px solid #5b3fa0;border-bottom:1.5px solid #5b3fa0;color:#b09de8;} .b3-tp{background:#281855;border:1.5px solid #5b3fa0;} .b3-mat{color:#9d86e0;} .b3-num{color:#f0eaff;} .b3-desc{color:#b09de8;} .b3-badge{background:#3b2480;color:#d4c2ff;border:1px solid #6b4dc0;} .b3-side{color:#b09de8;}
.b4-fr{background:#2d1205;border:1.5px solid #c4793c;color:#fad8bc;} .b4-ri{background:#220d03;border-top:1.5px solid #c4793c;border-right:1.5px solid #c4793c;border-bottom:1.5px solid #c4793c;color:#e0a070;} .b4-tp{background:#3d1a08;border:1.5px solid #c4793c;} .b4-mat{color:#e0a070;} .b4-num{color:#fff0e6;} .b4-desc{color:#cc8855;} .b4-badge{background:#5a2e0a;color:#ffb878;border:1px solid #c4793c;} .b4-side{color:#e0a070;}
.b5-fr{background:#042d22;border:1.5px solid #0e8a6e;color:#c0f0e4;} .b5-ri{background:#03201a;border-top:1.5px solid #0e8a6e;border-right:1.5px solid #0e8a6e;border-bottom:1.5px solid #0e8a6e;color:#5ecdb0;} .b5-tp{background:#063d30;border:1.5px solid #0e8a6e;} .b5-mat{color:#5ecdb0;} .b5-num{color:#e0fff8;} .b5-desc{color:#4ab89e;} .b5-badge{background:#0a5e4a;color:#9ef5de;border:1px solid #0e8a6e;} .b5-side{color:#5ecdb0;}

/* ── OPHTHALMIC SOLUTIONS 3D VIALS ── */
.sol-shelf { display:flex; flex-wrap:wrap; gap:36px; justify-content:flex-start; padding:32px 4px 40px; }
.solbox-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
.solbox-lbl { font-family:'Nunito',sans-serif; font-size:11px; color:#666; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; }
.solb3d { position:relative; width:170px; height:210px; transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-30deg); transition:transform 0.35s ease; cursor:pointer; }
.solb3d:hover { transform:rotateX(8deg) rotateY(-18deg) scale(1.05); }
.solface { position:absolute; }
.solfr { width:170px; height:210px; top:0; left:0; display:flex; flex-direction:column; border-radius:8px 0 0 8px; overflow:hidden; }
.solri { width:52px; height:210px; top:0; left:170px; transform-origin:left center; transform:rotateY(90deg); border-radius:0 8px 8px 0; display:flex; align-items:center; justify-content:center; }
.soltp { width:170px; height:52px; top:-52px; left:0; transform-origin:bottom center; transform:rotateX(90deg); border-radius:8px 8px 0 0; }
.sol-pname { font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:800; line-height:1.25; margin-bottom:3px; }
.sol-pconc { font-family:'DM Mono',monospace; font-size:11px; margin-bottom:2px; }
.sol-pdesc { font-family:'Nunito',sans-serif; font-size:9px; line-height:1.4; opacity:0.8; }
.sol-pbadge { display:inline-block; font-family:'Nunito',sans-serif; font-size:8.5px; font-weight:700; letter-spacing:1px; padding:3px 9px; border-radius:20px; margin-top:5px; text-transform:uppercase; }
.sol-sidetext { font-family:'DM Mono',monospace; font-size:10px; writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:1.2px; }
.sol-topbar { padding:9px 14px 8px; display:flex; align-items:center; justify-content:space-between; }
.sol-top-pill { font-family:'Nunito',sans-serif; font-size:8px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:2px 9px; border-radius:20px; }
.sol-top-tag { font-family:'DM Mono',monospace; font-size:8.5px; }
.sol-bot { padding:10px 14px 13px; }

/* Solution colour schemes */
.h-fr{background:#eef8f4;border:1.5px solid #85c9a8;color:#1a5c3a;} .h-ri{background:#d8f0e6;border-top:1.5px solid #85c9a8;border-right:1.5px solid #85c9a8;border-bottom:1.5px solid #85c9a8;} .h-tp{background:#e2f4ec;border:1.5px solid #85c9a8;} .h-name{color:#1a5c3a;} .h-conc{color:#2e8b5e;} .h-desc{color:#3d7a5a;} .h-badge{background:#c2eeda;color:#1a5c3a;border:1px solid #85c9a8;} .h-side{color:#2e8b5e;} .h-topbar{background:#4aa87a;}
.t-fr{background:#eaf4fd;border:1.5px solid #6ab4e8;color:#0c3d6b;} .t-ri{background:#d0eaf9;border-top:1.5px solid #6ab4e8;border-right:1.5px solid #6ab4e8;border-bottom:1.5px solid #6ab4e8;} .t-tp{background:#ddeef8;border:1.5px solid #6ab4e8;} .t-name{color:#0c3d6b;} .t-conc{color:#1a6aaa;} .t-desc{color:#2a6a9a;} .t-badge{background:#c8e4f7;color:#0c3d6b;border:1px solid #6ab4e8;} .t-side{color:#1a6aaa;} .t-topbar{background:#3a96d8;}
.s-fr{background:#f2effe;border:1.5px solid #a48de0;color:#3a1e80;} .s-ri{background:#e4daf9;border-top:1.5px solid #a48de0;border-right:1.5px solid #a48de0;border-bottom:1.5px solid #a48de0;} .s-tp{background:#ebe4fc;border:1.5px solid #a48de0;} .s-name{color:#3a1e80;} .s-conc{color:#6040b8;} .s-desc{color:#5a40a0;} .s-badge{background:#ddd5f8;color:#3a1e80;border:1px solid #a48de0;} .s-side{color:#6040b8;} .s-topbar{background:#8068c8;}
.c-fr{background:#fff5ea;border:1.5px solid #e8a855;color:#6b3800;} .c-ri{background:#fce9cc;border-top:1.5px solid #e8a855;border-right:1.5px solid #e8a855;border-bottom:1.5px solid #e8a855;} .c-tp{background:#fdf0da;border:1.5px solid #e8a855;} .c-name{color:#6b3800;} .c-conc{color:#a05a10;} .c-desc{color:#8c5018;} .c-badge{background:#fcdfa8;color:#6b3800;border:1px solid #e8a855;} .c-side{color:#a05a10;} .c-topbar{background:#cc8830;}

/* ── DRAPE ILLUSTRATION CARD ── */
.drape-shelf { display:flex; flex-wrap:wrap; gap:24px; margin-top:4px; }
.drape-illus-card {
  background:white; border:1.5px solid var(--light-gray); border-radius:14px; overflow:hidden;
  flex:0 0 340px; max-width:340px; transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;
}
.drape-illus-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,0.10); border-color:var(--teal); }
.drape-illus-header { background:#4aa8d8; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
.drape-illus-header span { font-family:'Nunito',sans-serif; font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.drape-illus-header .sterile-pill { background:white; color:#1a6a96; padding:2px 10px; border-radius:20px; }
.drape-illus-header .su-tag { color:rgba(255,255,255,0.9); font-family:'DM Mono',monospace; font-size:8.5px; }
.drape-illus-body { padding:14px 16px 16px; }
.drape-illus-name { font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; color:#1a5a80; margin-bottom:3px; }
.drape-illus-sub { font-family:'Nunito',sans-serif; font-size:10px; color:#4a7a9a; line-height:1.5; margin-bottom:10px; }
.drape-illus-badge { display:inline-block; background:#d0eef8; color:#1a6a96; border:1px solid #4aa8d8; font-family:'Nunito',sans-serif; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:12px; }
.drape-illus-foot { display:flex; gap:8px; margin-top:10px; }
.wa-inline { background:#25D366; color:white; border:none; border-radius:8px; padding:9px 12px; cursor:pointer; display:inline-flex; align-items:center; text-decoration:none; transition:background 0.2s; }
.wa-inline:hover { background:#1da851; }
.wa-inline svg { width:16px; height:16px; fill:white; }

/* ── IMAGE LIGHTBOX / ZOOM ── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  backdrop-filter: blur(6px);
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: lbZoomIn 0.25s ease;
}
@keyframes lbZoomIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: white;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }

/* Clickable product images */
.pcard-img img, .pmma-card-img img, .img-card-box img { cursor: zoom-in; }

/* ── RESPONSIVE for PMMA hero ── */
@media (max-width: 680px) {
  .pmma-hero { flex-direction: column; padding: 20px; gap: 20px; text-align: center; }
  .pmma-hero-img { flex: 0 0 160px; height: 160px; }
  .pmma-hero-body .pmma-foot { justify-content: center; }
}

/* ── DRAPE SIZES STRIP ── */
.drape-sizes-strip {
  margin-top: 18px;
  padding: 16px 20px;
  background: rgba(184, 156, 78, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(184, 156, 78, 0.15);
}
.drape-sizes-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.drape-sizes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drape-size-pill {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(184, 156, 78, 0.10);
  border: 1px solid rgba(184, 156, 78, 0.25);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  transition: all 0.2s;
}
.drape-size-pill:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* ── WHITE BG for Hydrophobic & Hydrophilic IOL cards (transparent PNGs) ── */
#intraocular-lens .pcard-img {
  background: #ffffff;
}

/* ── White background for IOL images in lightbox zoom ── */
.lightbox-overlay img.lb-white-bg {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
}

/* ── About page video: match the 16:9 source so it fills with no gaps ── */
.about-video-wrap { aspect-ratio: 16 / 9; min-height: 0; position: relative; overflow: hidden; background: #000; }
.about-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── About page video controls ── */
.about-video-wrap .video-controls {
  border-radius: 0 0 14px 14px;
}

/* ── ABOUT PAGE: LEADERSHIP / FOUNDER ──
   Solid navy band (same treatment as .download) so the founder block sits
   between the white "Who We Are" and the offwhite values grid without the
   two light sections merging. The photo is a tight headshot on a white
   background, so it is framed in a white card to hide its own edges. */
.leadership { background: var(--navy); }
.leadership .section-label { color: var(--gold); }
.leadership .section-title { color: #fff; }
.leadership .section-divider { margin-bottom: 26px; }
.leadership .section-divider::after { background: rgba(255,255,255,0.18); }
.leadership p { color: rgba(255,255,255,0.78); line-height: 1.9; }
.leadership p + p { margin-top: 14px; }

.leadership-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.leader-photo { background: #fff; border-radius: 16px; padding: 12px; border: 1px solid rgba(201,168,76,0.45); box-shadow: 0 18px 50px rgba(0,0,0,0.30); }
.leader-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; border-radius: 10px; background: #fff; }

.leader-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; line-height: 1.2; }
.leader-role { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 7px 0 18px; }

.leader-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.leader-tags span { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.30); padding: 7px 14px; border-radius: 20px; }

@media (max-width: 900px) {
  .leadership-grid { grid-template-columns: 1fr; gap: 32px; }
  .leader-photo { max-width: 320px; margin: 0 auto; }
}

/* ── VIDEO PLAYER: speed / PiP / fullscreen controls ── */
.vc-speed { color: #fff; font-size: 12px; font-weight: 700; font-family: 'Lato', sans-serif; min-width: 34px; letter-spacing: 0.3px; }
.vc-btn:hover .vc-icon { fill: var(--gold); }
.vc-speed:hover { color: var(--gold); }

/* Keep a visible focus ring for keyboard users, but no ring on mouse click */
.hero-video-container:focus, .about-video-wrap:focus { outline: none; }
.hero-video-container:focus-visible, .about-video-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ── FULLSCREEN ──
   The wrapper goes fullscreen (not the <video>), so its page-layout rules
   have to be undone: the hero is capped at 85vh and the about wrapper is
   locked to 16/9. object-fit switches cover -> contain so the whole frame is
   visible rather than cropped. */
.hero-video-container:fullscreen,
.about-video-wrap:fullscreen,
.hero-video-container:-webkit-full-screen,
.about-video-wrap:-webkit-full-screen {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.hero-video-container:fullscreen video,
.about-video-wrap:fullscreen video,
.hero-video-container:-webkit-full-screen video,
.about-video-wrap:-webkit-full-screen video {
  position: static; width: 100%; height: 100%; max-height: none; object-fit: contain;
}

/* Square off the about player's rounded bar, and drop the hero's floating CTAs,
   so neither sits over the picture in fullscreen */
.about-video-wrap:fullscreen .video-controls,
.about-video-wrap:-webkit-full-screen .video-controls { border-radius: 0; }
.hero-video-container:fullscreen .hero-side-btn,
.hero-video-container:-webkit-full-screen .hero-side-btn { display: none; }

/* Slightly larger controls on a full screen */
.hero-video-container:fullscreen .video-controls,
.about-video-wrap:fullscreen .video-controls { padding: 16px 26px; gap: 14px; }
.hero-video-container:fullscreen .vc-icon,
.about-video-wrap:fullscreen .vc-icon { width: 26px; height: 26px; }

/* Idle during fullscreen playback: hide the bar and the pointer */
.video-idle .video-controls { opacity: 0 !important; }
.video-idle { cursor: none; }

/* Phones: drop the secondary buttons, keep play / seek / time / sound / fullscreen */
@media (max-width: 680px) {
  .vc-back, .vc-fwd, .vc-speed, .vc-pip { display: none; }
  .vc-volume-wrap { width: 54px; }
  .vc-time { min-width: 72px; font-size: 11px; }
}