/* ============ RESET / BASE ============ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:var(--background); color:var(--foreground); font-family:'Onest', Arial, Helvetica, sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ============ ADAPTIVE REM GRID ============
   Each breakpoint maps its base width to 16px, which means the root shrinks to
   ~11px just above a breakpoint (e.g. 1025px). That is fine for layout but far
   too small for reading, so a floor is applied. Layout still scales; text just
   stops disappearing. Mobile already resolves to 16px at 360px, so it is left
   exactly as designed. */
@media (max-width:1920px){ html{ font-size:max(14px, 0.833333vw) } }
@media (max-width:1440px){ html{ font-size:max(14px, 1.111111vw) } }
@media (max-width:1024px){ html{ font-size:max(14px, 1.5625vw) } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

:root{
  --background:#ffffff; --foreground:#090909; --ink:#090909;
  --teal:#00AFC2; --teal-2:#22C1CD; --teal-dark:#007F8D; --teal-deep:#005E68;
  --teal-light:#DDF7F8; --teal-soft:#EFFBFB;
  --surface:#F4F6F6; --surface-2:#E9EEEE; --line:#DFE5E5;
  --muted:#7F898A; --subtle:#AAB2B3;
  --hero-bg:#c9c9c9;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:0.875rem;
  --text-watermark:13rem; --container-shell:88rem;
}

/* ============ LAYOUT HELPERS ============ */
.wrap{ max-width:var(--container-shell); margin-inline:auto; width:100% }
.shell{ max-width:var(--container-shell); margin-inline:auto; width:100%; padding-inline:1.25rem }
@media(min-width:640px){ .shell{ padding-inline:2rem } }
.sec{ background:#fff }
[data-ic]{ display:inline-grid; place-items:center; line-height:0 }
[data-ic] svg{ width:1em; height:1em; display:block }
.muted{ color:var(--muted) }

/* ============ LOGO ============
   Official Eyefinity artwork, transparent PNG — never inside a white box.
   assets/brand/eyefinity-logo.png       black + turquoise, for light surfaces
   assets/brand/eyefinity-logo-dark.png  white + turquoise, for dark surfaces */
.logo{ display:block; width:11rem; flex:none; line-height:0 }
.logo img{ width:100%; height:auto; display:block; object-fit:contain; flex-shrink:0 }
.header .logo{ width:11rem }
@media(max-width:1024px){ .header .logo{ width:9.5rem } }
@media(max-width:640px){ .header .logo{ width:8rem } }
.loader .logo{ width:16rem }
@media(max-width:640px){ .loader .logo{ width:12rem } }
.navmenu .logo{ width:12rem }
@media(max-width:640px){ .navmenu .logo{ width:9rem } }
.footer .logo{ width:13.5rem }
@media(max-width:640px){ .footer .logo{ width:11rem } }

/* ============ SKIP LINK ============ */
.skip{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff; transform:translateY(-200%) }
.skip:focus{ transform:none }

/* ============ REVEAL ============ */
[data-reveal]{ opacity:0; transform:translateY(var(--reveal-y,16px)) scale(var(--reveal-s,1)); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1) }
[data-reveal].in{ opacity:1; transform:none }
.hero-wm[data-reveal].in{ opacity:.4 }
/* Line-reveal mask. The bottom padding (pulled back by the negative margin so
   layout is unchanged) gives descenders - y g p q j - room inside the clip. */
.rlines .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; padding-top:.06em; margin-top:-.06em }
.rlines .inner{ display:block; transform:translateY(130%); opacity:0; transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1) }
.rlines.in .inner{ transform:none; opacity:1 }
[data-words] .w{ display:inline-block; transform:translateY(24px); opacity:0; transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1) }
[data-words].in .w{ transform:none; opacity:1 }

/* ============ SHARED COMPONENTS ============ */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(9,9,9,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--teal); flex:none }
.eyebrow--light{ color:rgba(255,255,255,.7) }
.eyebrow--light::before{ background:var(--teal-2) }
.eyebrow--bordered{ border:1px solid var(--line); border-radius:9999px; padding:.375rem 1rem }

.pill{ display:inline-flex; border-radius:9999px; font-size:.875rem; font-weight:500; line-height:1; vertical-align:middle }
.pill-inner{ display:inline-flex; align-items:center; gap:.75rem; border-radius:inherit; padding:.875rem 1.75rem; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.pill[data-arrow] .pill-inner{ padding:.375rem .375rem .375rem 1.5rem }
.pill--dark{ background:var(--ink); color:#fff }
.pill--light{ background:var(--surface); color:#090909 }
.pill--outline{ border:1px solid var(--line); background:transparent; color:#090909 }
.pill--teal{ background:var(--teal); color:#00312f }
.pill--ondark{ border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff }
.pill-badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; flex:none }
.pill--dark .pill-badge{ background:#fff; color:var(--ink) }
.pill--light .pill-badge,.pill--outline .pill-badge{ background:var(--ink); color:#fff }
.pill--teal .pill-badge{ background:#00312f; color:var(--teal) }
.pill--ondark .pill-badge{ background:#fff; color:var(--ink) }
.pill-badge svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){
  .pill:hover .pill-inner{ transform:scale(1.04) }
  .pill[data-arrow="right"]:hover .pill-badge svg{ transform:translate(3px,0) }
  .pill[data-arrow="up-right"]:hover .pill-badge svg{ transform:translate(2px,-2px) }
}

.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.875rem }

.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
@media(hover:hover){ .alink:hover > span{ transform:translateX(4px); opacity:1 } }
.alink--legal > span{ opacity:.7 }
@media(hover:hover){ .alink--legal:hover > span{ transform:translateX(3px); opacity:1 } }

/* ============ LOADER ============ */
.loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.25rem; background:#071011; color:#fff; border-radius:0 0 2rem 2rem; transition:transform .7s cubic-bezier(.22,1,.36,1) }
.loader.exit{ transform:translateY(-100%) }
.loader-content{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1) }
.loader.exit .loader-content{ opacity:0; transform:translateY(-12px) }
/* Logo floats directly on the black — no capsule, no rectangle.
   The optical ring is a lens motif orbiting it, not a container. */
.loader-tag{ max-width:28ch; font-size:.9rem; color:rgba(255,255,255,.6) }
.loader-tag b{ display:block; margin-top:.4rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; font-size:.7rem; color:rgba(255,255,255,.4) }
.loader-progress{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
.loader-track{ height:1px; background:rgba(255,255,255,.15) }
.loader-fill{ height:100%; width:0; background:var(--teal); transition:width .1s ease-out }
.loader-row{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
.loader-count{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }

/* ============ HEADER ============ */
.header{ position:absolute; left:0; right:0; top:0; z-index:50 }
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem }
@media(min-width:640px){ .header-in{ padding:1.5rem 2rem } }
.brand{ display:flex; align-items:center; flex:none }
@media(hover:hover){ .brand:hover .brand-in{ transform:scale(1.03) } }
.hnav{ display:none }
@media(min-width:1080px){ .hnav{ display:flex; gap:1.9rem; font-size:.875rem; font-weight:500 } }
.hnav button{ display:inline-flex; align-items:center; gap:.25rem }
.hnav .lift{ display:inline-block; opacity:.8; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s }
@media(hover:hover){ .hnav button:hover .lift{ transform:translateY(-2px); opacity:1 } }
.hnav .caret{ font-size:.75rem; opacity:.6 }
.hnav [aria-current="page"] .lift{ color:var(--teal-dark); opacity:1 }
.header-right{ display:flex; align-items:center; gap:.75rem }
.clock{ display:none }
@media(min-width:768px){ .clock{ display:flex; align-items:center; gap:.6rem; border:1px solid rgba(223,229,229,.8); background:rgba(255,255,255,.5); backdrop-filter:blur(4px); border-radius:.875rem; padding:.5rem .8rem; font-size:.75rem; color:rgba(9,9,9,.7) } }
.clock .lbl{ color:var(--teal-dark); font-weight:600; letter-spacing:.02em }
.clock .dotsep{ color:rgba(9,9,9,.25) }
.clock .t{ min-width:3.4rem; font-variant-numeric:tabular-nums; font-weight:500; color:#090909 }
.clock .d{ font-weight:500; color:rgba(9,9,9,.55) }
.menubtn{ border:1px solid rgba(223,229,229,.8); background:rgba(255,255,255,.5); backdrop-filter:blur(4px); border-radius:.875rem; transition:background .3s }
@media(hover:hover){ .menubtn:hover{ background:rgba(255,255,255,.78) } }
.menubtn-in{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .menubtn:hover .menubtn-in{ transform:scale(1.05) } }
@media(max-width:639px){ .menubtn .word{ display:none } }
.btn-cta{ display:inline-flex }
@media(max-width:1200px){ .btn-cta{ display:none } }

/* ============ HERO ============ */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; background:var(--hero-bg) }
.liquid{ position:absolute; inset:0; z-index:0 }
.liquid img,.liquid canvas{ position:absolute; inset:0; width:100%; height:100% }
.liquid img{ object-fit:cover }
.liquid canvas{ pointer-events:none }
.liquid.failed{ background:radial-gradient(120% 120% at 70% 20%, #d7d7d7 0%, #c9c9c9 45%, #bcbcbc 100%) }
.liquid.failed img{ display:none }
.hero-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,.05) 40%, rgba(255,255,255,.42)) }
.hero-wm{ pointer-events:none; position:absolute; left:0; right:0; bottom:7rem; z-index:1; text-align:center; user-select:none; font-weight:700; line-height:1; font-size:13rem; letter-spacing:-.03em; color:rgba(255,255,255,.4); white-space:nowrap }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:7rem 1.25rem 5rem }
@media(min-width:640px){ .hero-grid{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .hero-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:2.5rem; min-height:100vh; min-height:100lvh; padding:9rem 2rem 7rem; align-items:center } }
.hero-left{ display:flex; flex-direction:column; gap:1.6rem }
@media(min-width:1024px){ .hero-left{ grid-column:span 7 } }
.hero-eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(9,9,9,.7); line-height:1.7 }
.hero-eyebrow b{ display:block; font-weight:600; color:var(--teal-dark) }
.hero h1{ max-width:15ch; font-size:2.15rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media(min-width:640px){ .hero h1{ font-size:2.7rem } }
@media(min-width:768px){ .hero h1{ font-size:3.15rem } }
.hero-sub{ max-width:40ch; font-size:.95rem; line-height:1.5; color:rgba(9,9,9,.62) }
.hero-proof{ display:flex; align-items:center; gap:.6rem; font-size:.875rem; font-weight:500; color:rgba(9,9,9,.72) }
.hero-proof [data-ic]{ color:var(--teal); font-size:1.35rem }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero-status{ position:relative; z-index:20; max-width:var(--container-shell); margin-inline:auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(9,9,9,.12); padding:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(9,9,9,.62) }
@media(min-width:640px){ .hero-status{ padding-left:2rem; padding-right:2rem } }
.hero-status .mid{ display:none; color:var(--teal-dark) }
@media(min-width:640px){ .hero-status .mid{ display:block } }
.hero-status .right{ display:inline-flex; gap:.5rem }


/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
@media(min-width:640px){ .about-grid{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; padding-top:7rem; padding-bottom:7rem } }
.about-globe{ position:relative; min-height:14rem }
@media(min-width:1024px){ .about-globe{ min-height:20rem } }
.about-globe .bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(0,175,194,.12) }
@media(min-width:640px){ .about-globe .bg{ font-size:16rem } }
@media(min-width:1024px){ .about-globe .bg{ left:-1.5rem; font-size:20rem } }
.about-globe .eyebrow{ position:relative }
.about-globe .note{ position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:rgba(9,9,9,.7) }
.about-globe .note [data-ic]{ font-size:1.5rem; color:var(--teal-dark); flex:none }
.about-globe .note span{ max-width:16rem }
.about-stmt{ display:flex; flex-direction:column; gap:2.5rem }
.about-stmt h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
@media(min-width:640px){ .about-stmt h2{ font-size:1.875rem } }
.about-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem }
.about-foot .lbl{ font-size:.875rem; color:var(--muted); margin-bottom:.5rem }
.social{ display:flex; gap:.5rem }
.social a{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.8rem }
.social .x{ background:var(--teal); color:#00312f }
.social .o{ background:var(--surface); color:rgba(9,9,9,.7) }
.social a [data-ic]{ transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .social a:hover [data-ic]{ transform:scale(1.18) } }

/* ============ CREATE BAND ============ */
.cband{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
@media(min-width:640px){ .cband{ flex-direction:row; gap:1rem; padding-left:2rem; padding-right:2rem } }
.cband li{ flex:1 }
.ctile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-size:1.875rem; font-weight:500; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(min-width:640px){ .ctile{ height:10rem; font-size:2.25rem } }
.ctile [data-ic]{ font-size:2.25rem }
@media(min-width:640px){ .ctile [data-ic]{ font-size:3rem } }
@media(hover:hover){ .cband li:hover .ctile{ transform:scale(1.03) } }
.ctile--light{ background:var(--surface); color:#090909 }
.ctile--accent{ background:linear-gradient(to bottom right,#22C1CD,#007F8D); color:#fff }
.ctile--dark{ background:var(--ink); color:#fff }
.ctile--ghost{ background:rgba(244,246,246,.6); color:rgba(9,9,9,.35) }

/* ============ EYEWEAR (cards) ============ */
.p-wrap{ padding:2.5rem 1.25rem 5rem }
@media(min-width:640px){ .p-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .p-wrap{ padding-bottom:7rem } }
.p-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; margin-bottom:3rem }
.p-head.left{ align-items:flex-start; text-align:left }
.p-head h2{ width:fit-content; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .p-head h2{ font-size:3rem } }
.pgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media(min-width:768px){ .pgrid{ grid-template-columns:1fr 1fr } }
/* Full-bleed photographic category card. The image is the surface; the veil
   only carries the text. Overlay strength varies per image so the lighter
   ophthalmic-lens shot keeps its blue/purple colour. */
.pcard{ position:relative; min-height:24rem; overflow:hidden; border-radius:2rem;
  background:#071011; padding:1.5rem; color:#fff; isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1) }
.pcard-media{ position:absolute; inset:0; z-index:0; display:block; overflow:hidden }
.pcard-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1) }
.pcard-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  transition:opacity .7s ease;
  background:linear-gradient(to top, rgba(5,5,5,.88) 0%, rgba(5,5,5,.62) 30%,
             rgba(5,5,5,.18) 62%, rgba(5,5,5,.04) 100%) }
.pcard--light .pcard-veil{
  background:linear-gradient(to top, rgba(5,5,5,.8) 0%, rgba(5,5,5,.46) 32%,
             rgba(5,5,5,.08) 66%, rgba(5,5,5,0) 100%) }
.pcard-idx{ color:var(--teal-2); font-weight:600; margin-right:.55rem; letter-spacing:.12em }
@media(min-width:640px){ .pcard{ min-height:26rem; padding:2rem } }
@media(hover:hover){
  .pcard-li:hover .pcard{ transform:translateY(-7px) scale(1.008);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 26px 56px -30px rgba(5,5,5,.7) }
  .pcard-li:hover .pcard-media img{ transform:scale(1.045) }
  .pcard-li:hover .pcard-veil{ opacity:.92 }
  .pcard-li:hover .pcard-body h3{ transform:translateY(-2px) }
}
.pcard-meta{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.78) }
.pcard-badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#fff;
  border:1px solid rgba(255,255,255,.18); box-shadow:none;
  transition:transform .7s cubic-bezier(.16,1,.3,1), background .45s ease, color .45s ease }
@media(hover:hover){ .pcard-li:hover .pcard-badge{ transform:translate(2px,-2px); background:#fff; color:#0a0a0a } }
.pcard-body{ position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2 }
@media(min-width:640px){ .pcard-body{ left:2rem; right:2rem; bottom:2rem } }
.pcard-body h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; transition:transform .7s cubic-bezier(.16,1,.3,1) }
@media(min-width:640px){ .pcard-body h3{ font-size:1.875rem } }
.pcard-body p{ margin-top:.5rem; max-width:30rem; color:rgba(255,255,255,.75) }
.pcard-tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }

/* ============ SERVICES ============ */
.s-wrap{ padding:5rem 1.25rem }
@media(min-width:640px){ .s-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .s-wrap{ padding-top:7rem; padding-bottom:7rem } }
.s-wrap > h2{ margin:1.25rem 0 3rem; max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .s-wrap > h2{ margin-bottom:3.5rem; font-size:3rem } }
.srow{ border-top:1px solid var(--line) }
.srow:first-child{ border-top:0 }
.srow-in{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding-block:1.5rem; padding-inline:1.5rem; background:rgba(239,251,251,0); transition:background .5s cubic-bezier(.16,1,.3,1), padding .5s cubic-bezier(.16,1,.3,1) }
@media(min-width:640px){ .srow-in{ gap:1.5rem; padding-block:2rem } }
@media(hover:hover){ .srow-in:hover{ background:rgba(239,251,251,1); padding-left:2rem; padding-right:1.25rem } }
.srow-idx{ width:1.75rem; font-size:.875rem; font-weight:500; color:var(--teal-dark); flex:none }
@media(min-width:640px){ .srow-idx{ width:2.5rem } }
.srow-mid{ flex:1; min-width:0 }
.srow-title{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
@media(min-width:640px){ .srow-title{ font-size:1.875rem } }
@media(min-width:768px){ .srow-title{ font-size:2.25rem } }
.srow-tag{ font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--teal-dark); border:1px solid var(--teal); border-radius:9999px; padding:.25rem .6rem }
.srow-desc{ display:none; max-width:22rem; font-size:.875rem; color:rgba(9,9,9,.55) }
@media(min-width:1024px){ .srow-desc{ display:block } }
.srow-badge{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:#fff; font-size:1rem; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(min-width:640px){ .srow-badge{ width:3rem; height:3rem } }
@media(hover:hover){ .srow-in:hover .srow-badge{ transform:translateX(5px) } }

/* ============ CHOOSE YOUR LOCATION ============ */
.loc-choose{ padding:2.5rem 1.25rem 5rem }
@media(min-width:640px){ .loc-choose{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .loc-choose{ padding-bottom:7rem } }
.lc-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media(min-width:900px){ .lc-grid{ grid-template-columns:1fr 1fr } }
.lc-card{ position:relative; overflow:hidden; border-radius:2rem; background:#071011; color:#fff; padding:2rem; min-height:24rem; display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
@media(min-width:640px){ .lc-card{ padding:2.5rem; min-height:28rem } }
.lc-card::after{ content:""; position:absolute; right:-25%; top:-30%; width:62%; height:72%; background:radial-gradient(circle, rgba(0,175,194,.26), transparent 70%); pointer-events:none }
@media(hover:hover){ .lc-li:hover .lc-card{ transform:translateY(-8px) } }
.lc-top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2) }
.lc-badge{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:transform .4s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .lc-li:hover .lc-badge{ transform:rotate(45deg) scale(1.08); background:rgba(0,175,194,.18) } }
.lc-body{ position:relative; z-index:2 }
.lc-name{ font-size:2.5rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
@media(min-width:640px){ .lc-name{ font-size:3.25rem } }
.lc-country{ margin-top:.6rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5) }
.lc-servs{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.5rem }
.lc-servs li{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:rgba(255,255,255,.62) }
.lc-servs li [data-ic]{ color:var(--teal-2); font-size:.78rem; flex:none }
.lc-cta{ position:relative; z-index:2; margin-top:1.75rem; display:inline-flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:500; color:#fff }
.lc-cta [data-ic]{ color:var(--teal-2); transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .lc-li:hover .lc-cta [data-ic]{ transform:translateX(4px) } }

/* ============ STATS ============ */
.stats-wrap{ padding:0 1.25rem 5rem }
@media(min-width:640px){ .stats-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .stats-wrap{ padding-bottom:7rem } }
.stats-panel{ border-radius:2rem; background:#071011; padding:3rem 1.5rem; color:#fff }
@media(min-width:640px){ .stats-panel{ padding:4rem 2rem } }
@media(min-width:768px){ .stats-panel{ padding-left:4rem; padding-right:4rem } }
.stats-panel h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
@media(min-width:768px){ .stats-panel h2{ font-size:2.25rem } }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
@media(min-width:1024px){ .stats-grid{ grid-template-columns:repeat(4,1fr) } }
.stat-num{ font-size:3rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .stat-num{ font-size:3.75rem } }
@media(min-width:768px){ .stat-num{ font-size:4.5rem } }
.stat-num .u{ color:var(--teal-2) }
.stat-label{ margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.55) }

/* ============ FOOTER ============ */
.footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:#071011; color:#fff }
.footer-wrap{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
@media(min-width:640px){ .footer-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .footer-wrap{ padding-top:6rem } }
.footer-cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
@media(min-width:1024px){ .footer-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } }
.footer-cta h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .footer-cta h2{ font-size:3rem } }
@media(min-width:768px){ .footer-cta h2{ font-size:3.75rem } }
.footer-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
@media(min-width:768px){ .footer-cols{ grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .footer-cols{ grid-template-columns:1.5fr 1fr 1fr 1fr } }
.footer-tagline{ margin-top:1.4rem; max-width:22rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.footer-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1rem }
.footer-col li{ margin-top:.5rem; font-size:.875rem }
.footer-legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) }
@media(min-width:640px){ .footer-legal{ flex-direction:row } }
.footer-legal .links{ display:flex; gap:1.5rem }
.footer-wm{ position:absolute; left:0; right:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none; user-select:none; font-weight:700; line-height:1; font-size:13rem; letter-spacing:-.03em; color:rgba(255,255,255,.045); white-space:nowrap }

/* ============ NAV MENU ============ */
.navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:#071011; color:#fff; opacity:0; pointer-events:none; transition:opacity .4s cubic-bezier(.22,1,.36,1) }
.navmenu.open{ opacity:1; pointer-events:auto }
.navmenu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
@media(min-width:640px){ .navmenu-top{ padding:1.5rem 2rem } }
.navmenu-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .3s, color .3s }
@media(hover:hover){ .navmenu-close:hover{ border-color:rgba(255,255,255,.4); color:#fff } }
.navmenu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
.navmenu-nav ul{ display:flex; flex-direction:column; gap:.25rem }
.navmenu-item{ display:flex; align-items:baseline; gap:1rem; padding-block:.5rem; text-align:left; width:100%; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; transform:translateY(1rem); opacity:0; transition:all .5s ease-out }
@media(min-width:640px){ .navmenu-item{ font-size:3.75rem } }
.navmenu.open .navmenu-item{ transform:none; opacity:1 }
.navmenu-item .n{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.navmenu-item .l{ color:rgba(255,255,255,.7); transition:color .3s }
@media(hover:hover){ .navmenu-item:hover .n{ color:var(--teal-2) } .navmenu-item:hover .l{ color:#fff } }
.navmenu-bot{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) }
@media(min-width:640px){ .navmenu-bot{ flex-direction:row; justify-content:space-between; padding-left:2rem; padding-right:2rem } }
.navmenu-bot .place{ color:var(--teal-2); font-weight:600 }
.navmenu-bot button{ color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.025em }
@media(hover:hover){ .navmenu-bot button:hover{ color:#fff; text-decoration:underline } }

/* ============ MODAL ============ */
.modal{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(7,16,17,.4); backdrop-filter:blur(16px); opacity:0; pointer-events:none; transition:opacity .35s cubic-bezier(.22,1,.36,1) }
@media(min-width:640px){ .modal{ align-items:center } }
.modal.open{ opacity:1; pointer-events:auto }
.modal-panel{ position:relative; width:100%; max-width:32rem; max-height:92vh; overflow-y:auto; border-radius:2rem; background:#fff; padding:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.35), inset 0 0 0 1px var(--line); transform:translateY(28px); opacity:0; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .4s }
@media(min-width:640px){ .modal-panel{ padding:2rem } }
.modal.open .modal-panel{ transform:none; opacity:1 }
.modal-close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface); color:rgba(9,9,9,.6); transition:background .2s, color .2s }
@media(hover:hover){ .modal-close:hover{ background:var(--surface-2); color:#090909 } }
.modal-head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem }
.modal-head .tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(9,9,9,.6) }
.modal-head .tag::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--teal) }
.modal-head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
@media(min-width:640px){ .modal-head h2{ font-size:1.875rem } }
.modal-form{ display:flex; flex-direction:column; gap:1rem }
.field{ display:flex; flex-direction:column; gap:.375rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field > span{ font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(9,9,9,.5) }
.field input,.field textarea,.field select{ width:100%; border:1px solid var(--line); background:rgba(244,246,246,.5); border-radius:.875rem; padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:#090909; outline:none; transition:border-color .2s, background .2s; -webkit-appearance:none; appearance:none }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237F898A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem }
.field textarea{ resize:none }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--teal); background:#fff }
.modal-bottom{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.modal-note{ font-size:.72rem; color:rgba(9,9,9,.45) }
.modal-success{ display:none; flex-direction:column; align-items:center; text-align:center; padding-block:2rem; gap:1rem }
.modal-success .badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:var(--teal-2); font-size:1.4rem }
.modal-success h2{ font-size:1.5rem; font-weight:600 }
.modal-success p{ max-width:34ch; font-size:.875rem; color:rgba(9,9,9,.6) }

/* ============ SUB-PAGE HERO + BANDS (shared with dubai/srilanka) ============ */
.phero{ position:relative; overflow:hidden; border-radius:0 0 2rem 2rem; background:var(--surface) }
.phero-wm{ position:absolute; left:0; right:0; bottom:5rem; z-index:0; text-align:center; font-weight:700; font-size:13rem; line-height:1; letter-spacing:-.03em; color:rgba(9,9,9,.05); white-space:nowrap; pointer-events:none; user-select:none }
.phero-grid{ position:relative; z-index:2; display:flex; flex-direction:column; gap:2rem; padding:8rem 1.25rem 4rem }
@media(min-width:640px){ .phero-grid{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .phero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; padding:10rem 2rem 6rem; align-items:center; min-height:84vh } }
.phero h1{ max-width:13ch; font-size:2.5rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media(min-width:640px){ .phero h1{ font-size:3.5rem } }
@media(min-width:1024px){ .phero h1{ font-size:4rem } }
.phero-sub{ max-width:40ch; font-size:.95rem; color:rgba(9,9,9,.62); line-height:1.5 }
.phero-right{ display:flex; flex-direction:column; gap:1.25rem }
@media(min-width:1024px){ .phero-right{ align-items:flex-end } }
.info-card{ width:100%; max-width:24rem; border-radius:1.5rem; background:#fff; box-shadow:inset 0 0 0 1px var(--line), 0 24px 48px -28px rgba(9,9,9,.2); padding:1.5rem }
.info-card h3{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--teal-dark); margin-bottom:1rem }
.info-card .row{ display:flex; gap:.75rem; padding:.8rem 0; border-top:1px solid var(--line); font-size:.9rem }
.info-card .row:first-of-type{ border-top:0 }
.info-card .row [data-ic]{ color:var(--teal); font-size:1rem; flex:none; margin-top:.15rem }
.info-card .row b{ display:block; font-weight:600 }
.info-card .row span{ color:var(--muted); font-size:.8rem }

.rta-band{ background:#fff; padding-block:1rem 3rem }
.rta-inner{ position:relative; overflow:hidden; margin-inline:1.25rem; border-radius:2rem; background:#071011; color:#fff; padding:3rem 1.5rem; text-align:center }
@media(min-width:640px){ .rta-inner{ margin-inline:2rem; padding:4rem 2rem } }
.rta-inner::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(0,175,194,.2), transparent 70%); pointer-events:none }
.rta-tag{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--teal); color:var(--teal-2); border-radius:9999px; padding:.42rem 1rem; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em }
.rta-inner h2{ position:relative; z-index:2; margin:1.5rem auto 0; max-width:15ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.04 }
@media(min-width:640px){ .rta-inner h2{ font-size:3.25rem } }
.rta-inner p{ position:relative; z-index:2; margin:1rem auto 2rem; max-width:46ch; font-size:.95rem; color:rgba(255,255,255,.6) }
.rta-inner .pill{ position:relative; z-index:2 }

.pcta{ background:#fff; padding:3rem 1.25rem 5rem }
@media(min-width:640px){ .pcta{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .pcta{ padding-bottom:7rem } }
.pcta-inner{ border:1px solid var(--line); border-radius:2rem; background:var(--teal-soft); padding:2.5rem 1.5rem; display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start }
@media(min-width:768px){ .pcta-inner{ flex-direction:row; align-items:center; justify-content:space-between; padding:3rem } }
.pcta-inner h2{ max-width:20ch; font-size:1.875rem; font-weight:600; letter-spacing:-.02em }
@media(min-width:640px){ .pcta-inner h2{ font-size:2.5rem } }

/* ============ EDUVIA CREDIT ============ */
.credit{ display:block; margin-top:1.1rem; font-size:.7rem; color:rgba(255,255,255,.4); letter-spacing:.01em }
@media(min-width:640px){ .footer-legal{ flex-wrap:wrap } .credit{ margin-top:0 } }
.credit a{ display:inline-flex; align-items:center; gap:.3rem; color:rgba(255,255,255,.7); transition:color .3s cubic-bezier(.2,.8,.2,1) }
.credit a [data-ic]{ font-size:.72rem; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .credit a:hover{ color:var(--teal) } .credit a:hover [data-ic]{ transform:translate(2px,-2px) } }

/* ============ NAV DROPDOWN (Eyewear) ============ */
.hnav li.has-menu{ position:relative }
.navpanel{ position:absolute; left:50%; top:calc(100% + 1.1rem); transform:translate(-50%,-8px); min-width:26rem;
  background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.4rem; z-index:60;
  box-shadow:0 30px 60px -30px rgba(9,9,9,.25); opacity:0; visibility:hidden;
  transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s }
.hnav li.has-menu:hover .navpanel,.hnav li.has-menu:focus-within .navpanel{ opacity:1; visibility:visible; transform:translate(-50%,0) }
.navpanel::before{ content:""; position:absolute; left:0; right:0; top:-1.1rem; height:1.1rem }
.navpanel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.navpanel h5{ font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:var(--teal-dark); margin-bottom:.7rem }
.navpanel a{ display:block; padding:.42rem 0; font-size:.85rem; font-weight:500; color:rgba(9,9,9,.62); transition:color .25s, transform .25s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .navpanel a:hover{ color:var(--ink); transform:translateX(3px) } }

/* ============ BRAND SHOWCASE ============ */
.brands-wrap{ padding:4rem 1.25rem }
@media(min-width:640px){ .brands-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .brands-wrap{ padding:6rem 2rem } }
.brands-head{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom:2.5rem; max-width:46rem }
.brands-head h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.02 }
@media(min-width:640px){ .brands-head h2{ font-size:3rem } }
.brands-head p{ max-width:44ch; font-size:.95rem; line-height:1.55; color:var(--muted) }
.brands-count{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--subtle) }

.brand-search{ position:relative; max-width:22rem; margin-bottom:2rem }
.brand-search input{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:9999px;
  padding:.8rem 1.15rem .8rem 2.6rem; font-size:.85rem; font-family:inherit; color:var(--ink); outline:none;
  transition:border-color .25s, background .25s }
.brand-search input:focus{ border-color:var(--teal); background:#fff }
.brand-search [data-ic]{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--subtle); font-size:.95rem; pointer-events:none }

.brand-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media(min-width:640px){ .brand-grid{ grid-template-columns:repeat(3,1fr); gap:1.15rem } }
@media(min-width:1024px){ .brand-grid{ grid-template-columns:repeat(4,1fr) } }
@media(min-width:1440px){ .brand-grid{ grid-template-columns:repeat(5,1fr) } }
.brand-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  min-height:9rem; padding:2rem 1.5rem; background:var(--surface); border:1px solid #e5e9e9; border-radius:1.25rem;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s cubic-bezier(.2,.8,.2,1), border-color .35s }
@media(min-width:640px){ .brand-card{ min-height:10rem } }
.brand-card img{ max-width:70%; max-height:3.5rem; width:auto; height:auto; object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.brand-card figcaption{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--subtle); transition:color .35s }
.brand-card .bc-arrow{ position:absolute; right:.9rem; top:.9rem; color:var(--teal); font-size:.8rem;
  opacity:0; transform:translate(-3px,3px); transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1) }
.brand-card::after{ content:""; position:absolute; left:12%; right:12%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent); opacity:0; transition:opacity .35s }
@media(hover:hover){
  .brand-card:hover{ transform:translateY(-5px); background:#fff; border-color:#cfd8d8 }
  .brand-card:hover img{ transform:scale(1.04) }
  .brand-card:hover figcaption{ color:var(--teal-dark) }
  .brand-card:hover .bc-arrow{ opacity:1; transform:none }
  .brand-card:hover::after{ opacity:.7 }
}
.brand-empty{ padding:2rem 0; font-size:.9rem; color:var(--muted) }

/* ============ EYEWEAR CATEGORIES ============ */
.cat-grid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media(min-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .cat-grid{ grid-template-columns:repeat(4,1fr) } }
.cat-card{ position:relative; overflow:hidden; border-radius:1.5rem; background:var(--surface); border:1px solid var(--line);
  padding:1.75rem; min-height:12rem; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s }
@media(hover:hover){ .cat-card:hover{ transform:translateY(-6px); background:#fff; border-color:#cfd8d8 } }
.cat-card .n{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark) }
.cat-card h3{ margin-top:1.4rem; font-size:1.35rem; font-weight:600; letter-spacing:-.01em }
.cat-card p{ margin-top:.5rem; font-size:.85rem; color:var(--muted); line-height:1.5 }
.cat-card .ring{ position:absolute; right:-2.5rem; bottom:-2.5rem; width:8rem; height:8rem; border-radius:9999px;
  border:1px solid rgba(0,175,194,.25); transition:transform .5s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){ .cat-card:hover .ring{ transform:scale(1.15) } }

/* ============ ABOUT PAGE ============ */
.story-wrap{ padding:4rem 1.25rem }
@media(min-width:640px){ .story-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .story-wrap{ padding:6.5rem 2rem } }
.story-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem }
@media(min-width:1024px){ .story-grid{ grid-template-columns:.85fr 1.15fr; gap:4rem } }
.story-grid h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.04; max-width:14ch }
@media(min-width:640px){ .story-grid h2{ font-size:3rem } }
.story-body p{ font-size:1rem; line-height:1.7; color:var(--muted); margin-bottom:1.25rem; max-width:56ch }
.story-body p:last-child{ margin-bottom:0 }
.story-body strong{ color:var(--ink); font-weight:500 }

/* journey */
.journey{ position:relative; overflow:hidden; background:#071011; color:#fff; border-radius:2rem; padding:3rem 1.5rem }
@media(min-width:640px){ .journey{ padding:4.5rem 2.5rem } }
@media(min-width:1024px){ .journey{ padding:5.5rem 4rem } }
.journey-globe{ position:absolute; right:-6rem; top:50%; transform:translateY(-50%); font-size:34rem; color:rgba(0,175,194,.07); pointer-events:none }
.journey h2{ position:relative; z-index:2; font-size:2.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.04; max-width:12ch }
@media(min-width:640px){ .journey h2{ font-size:3.75rem } }
.journey-nodes{ position:relative; z-index:2; margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:2rem }
@media(min-width:768px){ .journey-nodes{ grid-template-columns:1fr auto 1fr; align-items:center; gap:2.5rem } }
.jnode{ position:relative; border-top:1px solid rgba(255,255,255,.15); padding-top:1.5rem }
.jnode .n{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-2) }
/* Giant year typography — the anchor of the timeline. */
.jnode .jyear{ display:block; margin-top:.6rem; font-size:3.5rem; font-weight:700; letter-spacing:-.04em;
  line-height:.9; color:rgba(255,255,255,.14) }
@media(min-width:640px){ .jnode .jyear{ font-size:5rem } }
@media(min-width:1024px){ .jnode .jyear{ font-size:6rem } }
.jnode h3{ margin-top:.2rem; font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
@media(min-width:640px){ .jnode h3{ font-size:2.75rem } }
.jnode p{ margin-top:.8rem; font-size:.9rem; color:rgba(255,255,255,.55); max-width:34ch; line-height:1.55 }
.jplace{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem;
  letter-spacing:.02em; color:rgba(255,255,255,.42) }
.jplace [data-ic]{ color:var(--teal-2); font-size:.85rem; flex:none }
/* Mobile: a true vertical timeline rather than two stacked blocks. */
@media(max-width:767px){
  .journey-nodes{ position:relative; padding-left:1.6rem }
  .journey-nodes::before{ content:""; position:absolute; left:.28rem; top:.5rem; bottom:.5rem; width:1px;
    background:linear-gradient(180deg,var(--teal-2),rgba(34,193,205,.15)) }
  .jnode{ border-top:0; padding-top:0 }
  .jnode::before{ content:""; position:absolute; left:-1.6rem; top:.35rem; width:.62rem; height:.62rem;
    border-radius:9999px; background:var(--teal-2); box-shadow:0 0 0 4px rgba(34,193,205,.16) }
}
.jroute{ display:grid; place-items:center; color:var(--teal-2) }
.jroute svg{ width:7rem; height:auto; overflow:visible }
@media(max-width:767px){ .jroute svg{ transform:rotate(90deg); width:4rem } }
.jroute .dash{ stroke-dasharray:4 6; animation:routeFlow 2.4s linear infinite }
@keyframes routeFlow{ to{ stroke-dashoffset:-20 } }

/* philosophy */
.phil-grid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media(min-width:640px){ .phil-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1024px){ .phil-grid{ grid-template-columns:repeat(4,1fr) } }
.phil-card{ position:relative; overflow:hidden; border-radius:1.5rem; padding:2rem 1.75rem; min-height:15rem;
  display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); background:#fff;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s }
@media(hover:hover){ .phil-card:hover{ transform:translateY(-6px); border-color:#cfd8d8 } }
.phil-card.ink{ background:var(--ink); color:#fff; border-color:var(--ink) }
.phil-card.ink p{ color:rgba(255,255,255,.55) }
.phil-card.ink .n{ color:var(--teal-2) }
.phil-card .n{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-dark) }
.phil-card h3{ margin-top:2.5rem; font-size:1.6rem; font-weight:600; letter-spacing:-.01em }
@media(min-width:640px){ .phil-card h3{ font-size:1.875rem } }
.phil-card p{ margin-top:.7rem; font-size:.85rem; line-height:1.55; color:var(--muted) }

/* split */
.split{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr } }
.split-col{ border:1px solid var(--line); border-radius:1.5rem; padding:2rem; background:var(--surface) }
.split-col.dark{ background:#071011; color:#fff; border-color:rgba(255,255,255,.08) }
.split-col h3{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-dark) }
.split-col.dark h3{ color:var(--teal-2) }
.split-col ul{ margin-top:1.5rem }
.split-col li{ display:flex; align-items:center; gap:.7rem; padding:.85rem 0; border-top:1px solid var(--line); font-size:max(15px,.9375rem) }
.split-col.dark li{ border-color:rgba(255,255,255,.1) }
.split-col li:first-child{ border-top:0 }
.split-col li [data-ic]{ color:var(--teal); font-size:.85rem; flex:none }
.split-col.dark li [data-ic]{ color:var(--teal-2) }

/* dark CTA band */
.dcta{ position:relative; overflow:hidden; border-radius:2rem; background:#071011; color:#fff; padding:3.5rem 1.5rem; text-align:center }
@media(min-width:640px){ .dcta{ padding:5rem 2rem } }
.dcta::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(0,175,194,.18), transparent 70%); pointer-events:none }
.dcta h2{ position:relative; z-index:2; margin-inline:auto; max-width:14ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.02 }
@media(min-width:640px){ .dcta h2{ font-size:3.5rem } }
.dcta-btns{ position:relative; z-index:2; margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center }

/* ============ HISTORY / EST. BADGES ============ */
.hero-proof .est{ display:inline-flex; align-items:center; border:1px solid var(--teal); color:var(--teal-dark);
  border-radius:9999px; padding:.24rem .7rem; font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; flex:none }
.footer-since{ margin-top:.85rem; font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.38) }


/* =====================================================================
   SPACING REBALANCE
   Sections were carrying ~7rem top and bottom, which stacked into 130-175px
   of dead space between them. Brought to a 5-6rem rhythm so whitespace reads
   as deliberate rather than as missing content.
   ===================================================================== */
.about-grid{ padding-top:3.5rem; padding-bottom:3.5rem; gap:2.5rem }
@media(min-width:1024px){ .about-grid{ padding-top:5rem; padding-bottom:4rem; gap:3.5rem } }
.about-globe{ min-height:11rem }
@media(min-width:1024px){ .about-globe{ min-height:15rem } }
.about-stmt{ gap:1.75rem }

.cband{ padding-top:1.75rem; padding-bottom:1.75rem }
@media(min-width:640px){ .cband{ padding-top:2rem; padding-bottom:2rem } }

.p-wrap{ padding-top:3.5rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .p-wrap{ padding-top:5rem; padding-bottom:5rem } }
.p-head{ margin-bottom:2.25rem }

.brands-wrap{ padding-top:3.5rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .brands-wrap{ padding-top:5rem; padding-bottom:5rem } }
.brands-head{ margin-bottom:2rem; gap:.9rem }

.s-wrap{ padding-top:3.5rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .s-wrap{ padding-top:5rem; padding-bottom:5rem } }
.s-wrap > h2{ margin:1rem 0 2.25rem }
@media(min-width:640px){ .s-wrap > h2{ margin-bottom:2.5rem } }

.loc-choose{ padding-top:3.5rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .loc-choose{ padding-top:4.5rem; padding-bottom:3.5rem } }

.stats-wrap{ padding-bottom:3.5rem }
@media(min-width:1024px){ .stats-wrap{ padding-bottom:5rem } }
.stats-grid{ margin-top:2.5rem; row-gap:2.25rem }
@media(min-width:1024px){ .stats-grid{ margin-top:3rem } }

.story-wrap{ padding-top:3.5rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .story-wrap{ padding-top:5rem; padding-bottom:5rem } }

.pcta{ padding-top:2rem; padding-bottom:3.5rem }
@media(min-width:1024px){ .pcta{ padding-bottom:5rem } }
.rta-band{ padding-bottom:2rem }

.footer-cta{ padding-bottom:3rem }
.footer-cols{ padding-block:3rem }
@media(min-width:1024px){ .footer-cols{ padding-block:3.5rem } }

/* =====================================================================
   HOMEPAGE SERVICES
   Two location columns of thin-ruled rows. Deliberately not a medical grid:
   large names, hairline rules, one turquoise accent, spring hover.
   ===================================================================== */
.svc-wrap{ padding:3.5rem 1.25rem }
@media(min-width:640px){ .svc-wrap{ padding-left:2rem; padding-right:2rem } }
@media(min-width:1024px){ .svc-wrap{ padding:5rem 2rem 3.25rem } }
.svc-cols{ display:grid; grid-template-columns:1fr; gap:3rem }
@media(min-width:1000px){ .svc-cols{ grid-template-columns:1fr 1fr; gap:4rem } }
.svc-col > .svc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--ink); padding-bottom:.9rem; margin-bottom:.25rem }
.svc-place{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; line-height:1.15 }
.svc-place small{ display:block; margin-top:.3rem; font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark) }
.svc-num{ font-size:.7rem; letter-spacing:.16em; color:var(--subtle); flex:none }
/* Rows reuse .srow so hover/spring behaviour stays identical site-wide. */
.svc-col .srow-in{ padding-inline:.75rem }
@media(hover:hover){ .svc-col .srow-in:hover{ padding-left:1.25rem; padding-right:.5rem } }
.svc-col .srow-in{ padding-block:1.15rem }
@media(min-width:640px){ .svc-col .srow-in{ padding-block:1.35rem } }

/* =====================================================================
   SERVICE ROWS (shared: homepage columns + Dubai / Sri Lanka pages)
   ===================================================================== */
.srow-title{ line-height:1.2 }



.srow-sub{ display:block; margin-top:.4rem; line-height:1.55; max-width:46ch }
.srow-desc{ line-height:1.55 }

.srow-ic{ display:none }
@media(min-width:640px){
  .srow-ic{ display:grid; place-items:center; width:2.6rem; height:2.6rem; flex:none;
    border-radius:9999px; border:1px solid var(--line); color:var(--teal-dark);
    font-size:1.15rem; background:#fff;
    transition:border-color .35s, color .35s, transform .35s cubic-bezier(.2,.8,.2,1) }
}
@media(hover:hover){
  .srow-in:hover .srow-ic{ border-color:var(--teal); color:var(--teal); transform:scale(1.06) }
}

/* =====================================================================
   TYPE — restored to the original Lumora proportions.

   The earlier pass inflated everything; this reverts the scale and instead
   buys readability from line-height, contrast and measure. The only size
   guard left is a modest px floor on real paragraph copy, because the
   adaptive rem grid drops the root to ~11px just above a breakpoint. Layout
   still scales; paragraphs simply stop collapsing.
   ===================================================================== */

/* ---------- body copy: Lumora scale + a gentle floor ---------- */
.hero-sub,
.brands-head p,
.story-body p,
.split-col p,
.phil-card p,
.cat-card p,
.srow-sub,
.srow-desc,
.pcard-body p,
.loc-addr,
.footer-tagline,
.modal-success p,
.jnode p{ font-size:max(15px, 1rem); line-height:1.62 }

.story-body p{ line-height:1.6; max-width:60ch }
.hero-sub{ max-width:46ch }

/* ---------- contrast does the readability work, not size ---------- */
.hero-sub{ color:rgba(9,9,9,.72) }
.brands-head p,.split-col p,.cat-card p,.srow-sub,.srow-desc{ color:rgba(9,9,9,.62) }
.story-body p{ color:rgba(9,9,9,.7) }
.phil-card p{ color:rgba(9,9,9,.62) }
.phil-card.ink p,.split-col.dark p{ color:rgba(255,255,255,.68) }
.jnode p{ color:rgba(255,255,255,.7) }
.pcard-body p{ color:rgba(255,255,255,.75) }
.stat-label{ color:rgba(255,255,255,.68) }
.lc-servs li{ color:rgba(255,255,255,.7) }
.loc-addr{ color:rgba(9,9,9,.66) }
.loc-panel.dark .loc-addr{ color:rgba(255,255,255,.7) }
.footer-tagline{ color:rgba(255,255,255,.62) }
.ctile--ghost{ color:rgba(9,9,9,.42) }

/* ---------- headings: original Lumora scale ---------- */
.hero h1{ font-size:2.25rem; line-height:1.02 }
@media(min-width:640px){ .hero h1{ font-size:3rem } }
@media(min-width:768px){ .hero h1{ font-size:3.75rem } }

.phero h1{ font-size:2.25rem; line-height:1.02 }
@media(min-width:640px){ .phero h1{ font-size:3rem } }
@media(min-width:1024px){ .phero h1{ font-size:3.75rem } }

.p-head h2,.brands-head h2,.s-wrap > h2,.story-grid h2{ font-size:2.25rem; line-height:1.05 }
@media(min-width:640px){ .p-head h2,.brands-head h2,.s-wrap > h2,.story-grid h2{ font-size:3rem } }

.about-stmt h2{ font-size:1.5rem; line-height:1.3 }
@media(min-width:640px){ .about-stmt h2{ font-size:1.875rem } }

.stats-panel h2{ font-size:1.875rem }
@media(min-width:768px){ .stats-panel h2{ font-size:2.25rem } }

.journey h2{ font-size:2.25rem }
@media(min-width:640px){ .journey h2{ font-size:3rem } }

.dcta h2,.footer-cta h2{ font-size:2.25rem }
@media(min-width:640px){ .dcta h2,.footer-cta h2{ font-size:3rem } }
@media(min-width:768px){ .footer-cta h2{ font-size:3.75rem } }

.phil-card h3{ font-size:1.5rem }
@media(min-width:640px){ .phil-card h3{ font-size:1.875rem } }
.cat-card h3{ font-size:1.25rem }
@media(min-width:640px){ .cat-card h3{ font-size:1.5rem } }
.pcta-inner h2{ font-size:1.875rem }
@media(min-width:640px){ .pcta-inner h2{ font-size:2.25rem } }

/* ---------- service rows: 1.5 / 1.875 / 2.25rem ---------- */
.srow-title{ font-size:1.5rem; line-height:1.2 }
@media(min-width:640px){ .srow-title{ font-size:1.875rem } }
@media(min-width:768px){ .srow-title{ font-size:2.25rem } }
.srow-idx{ font-size:.875rem; color:var(--teal-dark) }
.srow-sub{ display:block; margin-top:.35rem; max-width:46ch }
.srow-tag{ font-size:.625rem }

/* ---------- About timeline: large but not shouting ---------- */
.jnode .jyear{ font-size:3rem }
@media(min-width:640px){ .jnode .jyear{ font-size:3.75rem } }
@media(min-width:1024px){ .jnode .jyear{ font-size:4.5rem } }
.jnode h3{ font-size:1.875rem }
@media(min-width:640px){ .jnode h3{ font-size:2.25rem } }
.jplace{ font-size:max(13px,.8125rem); color:rgba(255,255,255,.58) }
.jnode .n{ font-size:.75rem }

/* ---------- micro labels ---------- */
.eyebrow{ font-size:max(13px,.875rem) }
.hero-eyebrow{ font-size:.75rem; letter-spacing:.14em; line-height:1.7 }
.hnav{ font-size:max(13px,.875rem) }
.navpanel a{ font-size:max(13px,.875rem) }
.navpanel h5{ font-size:.6875rem }
.pill{ font-size:max(13px,.875rem) }
.clock{ font-size:.75rem }
.footer-col li{ font-size:max(13px,.875rem) }
.footer-col h4{ font-size:.75rem }
.footer-legal,.credit{ font-size:.75rem }
.footer-since{ font-size:.75rem }
.hero-status{ font-size:.75rem }
.brands-count{ font-size:.75rem }
.brand-card figcaption{ font-size:.8125rem; color:var(--muted) }
.stat-label{ font-size:.875rem }
.lc-servs li{ font-size:.875rem }
.chip{ font-size:.875rem }
.pcard-meta{ font-size:.75rem }
.cat-card .n,.phil-card .n{ font-size:.75rem }

/* ---------- store details stay easy to read ---------- */
.info-card .row{ font-size:max(15px,.9375rem) }
.info-card .row b{ font-size:max(15px,.9375rem); font-weight:600 }
.info-card .row span{ font-size:max(14px,.875rem); color:rgba(9,9,9,.62); line-height:1.5 }
.info-card .row a{ color:var(--teal-dark); font-weight:600 }
@media(hover:hover){ .info-card .row a:hover{ text-decoration:underline } }
.loc-meta b{ font-size:max(15px,.9375rem) }
.loc-meta span{ font-size:max(14px,.875rem); color:rgba(9,9,9,.6) }
.loc-panel.dark .loc-meta span{ color:rgba(255,255,255,.6) }
.loc-servs li{ font-size:max(15px,.9375rem) }

/* ---------- modal ---------- */
.modal-head h2{ font-size:1.5rem }
@media(min-width:640px){ .modal-head h2{ font-size:1.875rem } }
.field > span{ font-size:.75rem; color:rgba(9,9,9,.58) }
.field input,.field textarea,.field select{ font-size:max(15px,.9375rem) }
.modal-note{ font-size:.75rem; color:rgba(9,9,9,.55) }
.modal-success h2{ font-size:1.5rem }

/* ---------- mobile ---------- */
@media(max-width:640px){
  .phero h1{ font-size:2.25rem }
  .jnode .jyear{ font-size:2.75rem }
  .jnode h3{ font-size:1.625rem }
  .srow-title{ font-size:1.375rem }
  .footer-cta h2,.dcta h2{ font-size:2rem }
  .svc-cols{ gap:2.5rem }
}

/* =====================================================================
   OPTICAL LOADER
   No wordmark, no white box: two turquoise lens circles that draw in, get
   bridged, then a light sweeps across them. Inspired by the Eyefinity
   glasses symbol without recreating the logo.
   ===================================================================== */
.loader-optic{ position:relative; width:6rem; max-width:40vw; margin-inline:auto }
@media(max-width:640px){ .loader-optic{ width:5rem } }
.loader-optic svg{ width:100%; height:auto; display:block; overflow:visible }
.loader-optic .lens,
.loader-optic .bridge,
.loader-optic .temple{
  fill:none; stroke:#00AFC2; stroke-linecap:round; stroke-linejoin:round;
}
.loader-optic .lens{ stroke-width:2.2; stroke-dasharray:176; stroke-dashoffset:176;
  animation:lensDraw .72s cubic-bezier(.22,1,.36,1) forwards }
.loader-optic .lens.r{ animation-delay:.12s }
.loader-optic .bridge{ stroke-width:2.2; stroke-dasharray:22; stroke-dashoffset:22;
  animation:lensDraw .4s cubic-bezier(.22,1,.36,1) .62s forwards }
.loader-optic .temple{ stroke-width:2.2; stroke-dasharray:14; stroke-dashoffset:14;
  animation:lensDraw .4s cubic-bezier(.22,1,.36,1) .74s forwards }
@keyframes lensDraw{ to{ stroke-dashoffset:0 } }
/* the scanning light */
.loader-optic .scan{ fill:url(#scanGrad); opacity:0; animation:scanSweep 1.15s ease-in-out .85s infinite }
@keyframes scanSweep{
  0%{ transform:translateX(-42%); opacity:0 }
  25%{ opacity:.85 }
  75%{ opacity:.85 }
  100%{ transform:translateX(42%); opacity:0 }
}
.loader-optic .glow{ fill:#00AFC2; opacity:0; animation:lensGlow 1.15s ease-in-out .85s infinite }
@keyframes lensGlow{ 0%,100%{ opacity:0 } 45%{ opacity:.12 } }
.loader.exit .loader-optic{ transform:scale(1.08); transition:transform .6s cubic-bezier(.22,1,.36,1) }

.loader-word{ font-size:1rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#fff }
@media(min-width:640px){ .loader-word{ font-size:1.125rem } }
.loader-sub{ margin-top:.55rem; font-size:.7rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.42) }

@media (prefers-reduced-motion: reduce){
  .loader-optic .lens,.loader-optic .bridge,.loader-optic .temple{ stroke-dashoffset:0 }
  .loader-optic .scan,.loader-optic .glow{ display:none }
}

/* =====================================================================
   LOCATION GATEWAY (root index.html only)
   ===================================================================== */
.gw{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:#fff }
.gw-head{ text-align:center; padding:5.5rem 1.25rem 2.25rem }
@media(min-width:640px){ .gw-head{ padding:6rem 2rem 2.5rem } }
.gw-head .logo{ width:12rem; margin:0 auto 1.75rem }
@media(max-width:640px){ .gw-head .logo{ width:9.5rem } }
.gw-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal-dark) }
.gw-kicker::before{ content:""; width:.35rem; height:.35rem; border-radius:9999px; background:var(--teal) }
.gw-head h1{ margin-top:1rem; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.02 }
@media(min-width:640px){ .gw-head h1{ font-size:3rem } }
.gw-head p{ margin:1rem auto 0; max-width:46ch; font-size:max(15px,1rem); line-height:1.62; color:rgba(9,9,9,.62) }

.gw-panels{ flex:1; display:grid; grid-template-columns:1fr; gap:1rem;
  padding:0 1.25rem 3rem; align-content:start }
@media(min-width:640px){ .gw-panels{ padding:0 2rem 3.5rem } }
@media(min-width:900px){ .gw-panels{ grid-template-columns:1fr 1fr; gap:1.25rem } }

.gw-panel{ position:relative; display:block; overflow:hidden; border-radius:2rem;
  min-height:42vh; background:#071011; color:#fff; isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s }
@media(min-width:900px){ .gw-panel{ min-height:30rem } }
.gw-panel::before{ content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 70% 10%, rgba(0,175,194,.28), transparent 62%);
  transition:opacity .5s; opacity:.85 }
.gw-panel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,16,17,.15) 0%, rgba(7,16,17,.72) 78%) }
.gw-media{ position:absolute; inset:0; z-index:0; overflow:hidden }
.gw-media img{ width:100%; height:100%; object-fit:cover; opacity:.55;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s }
.gw-rings{ position:absolute; right:-3rem; top:-3rem; z-index:1; width:16rem; color:rgba(0,175,194,.25);
  pointer-events:none; transition:transform .8s cubic-bezier(.2,.8,.2,1) }
.gw-rings svg{ width:100%; height:auto; display:block }

.gw-body{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:space-between; padding:1.75rem }
@media(min-width:640px){ .gw-body{ padding:2.25rem } }
.gw-num{ font-size:.7rem; font-weight:600; letter-spacing:.24em; color:var(--teal-2) }
.gw-name{ font-size:2.5rem; font-weight:700; letter-spacing:-.03em; line-height:.95;
  transition:transform .5s cubic-bezier(.2,.8,.2,1) }
@media(min-width:640px){ .gw-name{ font-size:3.25rem } }
@media(min-width:1200px){ .gw-name{ font-size:3.75rem } }
.gw-country{ margin-top:.5rem; font-size:.75rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6) }
.gw-line{ margin:1.25rem 0 1rem; height:1px; background:rgba(255,255,255,.16); position:relative }
.gw-line::after{ content:""; position:absolute; left:0; top:0; height:1px; width:0;
  background:var(--teal); transition:width .6s cubic-bezier(.2,.8,.2,1) }
.gw-servs{ display:flex; flex-wrap:wrap; gap:.4rem }
.gw-servs span{ font-size:.7rem; letter-spacing:.02em; color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.18); border-radius:9999px; padding:.3rem .65rem }
.gw-enter{ margin-top:1.5rem; display:inline-flex; align-items:center; gap:.7rem;
  font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#fff }
.gw-enter i{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:rgba(255,255,255,.12); color:#fff; font-size:.95rem;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .45s }
@media(hover:hover){
  .gw-panel:hover{ transform:translateY(-6px) }
  .gw-panel:hover .gw-media img{ transform:scale(1.035); opacity:.62 }
  .gw-panel:hover::before{ opacity:1 }
  .gw-panel:hover .gw-name{ transform:translateX(4px) }
  .gw-panel:hover .gw-line::after{ width:100% }
  .gw-panel:hover .gw-enter i{ transform:translateX(4px); background:var(--teal); color:#00312f }
  .gw-panel:hover .gw-rings{ transform:rotate(8deg) scale(1.05) }
}
.gw-foot{ text-align:center; padding:0 1.25rem 2.5rem; font-size:.75rem; color:rgba(9,9,9,.45) }
.gw-foot a{ color:rgba(9,9,9,.7) }
@media(hover:hover){ .gw-foot a:hover{ color:var(--teal-dark) } }

/* =====================================================================
   LOCATION CONTROL (inside a location site)
   ===================================================================== */
.locctl{ position:relative }

/* the same control, inside the fullscreen menu */
.navmenu-loc{ margin-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem }
.navmenu-loc h6{ font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:.75rem }

/* Services page hero: shorter than a full landing hero. */
.phero--compact .phero-grid{ padding-top:7rem; padding-bottom:3rem }
@media(min-width:1024px){ .phero--compact .phero-grid{ padding-top:9rem; padding-bottom:4rem } }
.phero--compact .phero-wm{ display:none }

/* Category cards: taller on desktop, comfortable on phones. */
@media(min-width:640px){ .pcard{ min-height:26rem } }
@media(min-width:1024px){ .pcard{ min-height:28rem } }
@media(max-width:640px){ .pcard{ min-height:23rem; padding:1.25rem } }

/* ============ SOCIAL ICON ROW (fullscreen menu) ============ */
.navmenu-social{ margin-top:1.75rem; display:flex; gap:.6rem; flex-wrap:wrap }
.soc-ic{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:9999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8); font-size:1.05rem;
  transition:background .35s ease, color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s }
.soc-ic svg{ width:1em; height:1em; display:block }
@media(hover:hover){
  .soc-ic:hover{ background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-2px) }
}

/* =====================================================================
   COUNTRY SWITCHER — circular flag avatar, compact glass pill
   Replaces the old grey rounded pill.
   ===================================================================== */
.flag-avatar{ width:1.625rem; height:1.625rem; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:block; background:#fff; box-shadow:0 0 0 1px rgba(9,9,9,.08), 0 1px 3px rgba(9,9,9,.12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.flag-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
@media(max-width:640px){ .flag-avatar{ width:1.45rem; height:1.45rem } }

.locctl-btn{ height:2.6rem; display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .65rem .3rem .35rem; border-radius:9999px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.65); box-shadow:0 4px 18px rgba(0,0,0,.04);
  font-size:max(13px,.8125rem); font-weight:500; color:var(--ink); line-height:1;
  transition:background .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s }
.locctl-name{ white-space:nowrap }
.locctl-btn .caret{ font-size:.55rem; opacity:.5; transition:transform .35s cubic-bezier(.2,.8,.2,1) }
@media(hover:hover){
  .locctl-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.9) }
  .locctl-btn:hover .flag-avatar{ transform:scale(1.05) }
  .locctl-btn:hover .caret{ transform:translateY(1px) }
}
.locctl.open .locctl-btn .caret{ transform:rotate(180deg) }

.locctl-menu{ position:absolute; right:0; top:calc(100% + .5rem); width:16rem; z-index:70;
  background:rgba(255,255,255,.94); backdrop-filter:blur(18px);
  border:1px solid rgba(17,17,17,.08); border-radius:1rem; padding:.5rem;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s }
.locctl.open .locctl-menu{ opacity:1; visibility:visible; transform:none }
.locctl-menu h6{ font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--subtle); padding:.4rem .6rem .5rem }
.locctl-menu a{ display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem;
  border-radius:.75rem; transition:background .25s ease }
.lr-txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0 }
.lr-txt b{ font-size:max(14px,.875rem); font-weight:600; color:var(--ink); line-height:1.2 }
.lr-txt small{ font-size:.72rem; color:var(--muted) }
.lr-dot{ margin-left:auto; width:.45rem; height:.45rem; border-radius:9999px; background:var(--teal); flex:none }
@media(hover:hover){ .locctl-menu a:hover{ background:var(--surface) } }

/* keep the switcher visible on mobile; drop only the word, never the flag */
@media(max-width:1023px){
  .locctl{ display:block }
  .locctl-menu{ width:15rem }
}
@media(max-width:520px){ .locctl-name{ display:none } .locctl-btn{ padding-right:.5rem } }

/* fullscreen-menu location rows */
.navmenu-locrows{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem }
.navmenu-locrows a{ display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem;
  border-radius:.7rem; transition:background .25s ease }
.navmenu-locrows .lr-txt b{ color:#fff; font-size:1rem }
.navmenu-locrows .lr-txt small{ color:rgba(255,255,255,.5) }
.navmenu-locrows .flag-avatar{ box-shadow:0 0 0 1px rgba(255,255,255,.25) }
@media(hover:hover){ .navmenu-locrows a:hover{ background:rgba(255,255,255,.07) } }
.navmenu-allloc{ display:inline-block; font-size:.8rem; color:rgba(255,255,255,.55);
  transition:color .25s ease }
@media(hover:hover){ .navmenu-allloc:hover{ color:var(--teal-2) } }

/* logo now returns to the gateway, so give it a hint of interactivity */
.brand-in{ transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; opacity:.92 }
@media(hover:hover){ .brand:hover .brand-in{ transform:scale(1.025); opacity:1 } }

/* =====================================================================
   CONTACT LENS PRODUCTS
   ===================================================================== */
.prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
@media(min-width:640px){ .prod-grid{ grid-template-columns:repeat(3,1fr); gap:1.15rem } }
@media(min-width:1024px){ .prod-grid{ grid-template-columns:repeat(4,1fr) } }
.prod-card{ display:flex; flex-direction:column; height:100%;
  background:var(--surface); border:1px solid #e3e8e8; border-radius:1.25rem; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease, border-color .4s ease }
.prod-media{ aspect-ratio:1 / 1; display:grid; place-items:center; padding:1.25rem; background:#fff }
.prod-media picture{ display:contents }
.prod-media img{ max-width:90%; max-height:90%; width:auto; height:auto; object-fit:contain;
  transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.prod-card figcaption{ padding:.9rem 1rem 1.1rem; text-align:center; border-top:1px solid #e9eeee }
.prod-card figcaption b{ display:block; font-size:max(14px,.875rem); font-weight:600; color:var(--ink);
  line-height:1.3 }
.prod-card figcaption span{ display:block; margin-top:.2rem; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--subtle) }
@media(hover:hover){
  .prod-card:hover{ transform:translateY(-5px); border-color:#cfd8d8 }
  .prod-card:hover img{ transform:scale(1.04) }
}

/* Ophthalmic partner tiles reuse .brand-card but need a touch more room,
   because two of the marks sit on their own coloured field. */
#oph-grid .brand-card{ min-height:8.5rem; padding:1.75rem }
#oph-grid .brand-card img{ max-width:72%; max-height:3.5rem }
.brand-in{ display:flex; align-items:center }


/* ============ ABOUT: REAL BRANCH FEATURE ============
   One large storefront photograph + editorial copy. The photo carries the
   section; text stays quiet. --ba / --bpos are set per branch so the full
   signage stays in frame. */
.branch-wrap{ padding:0 1.25rem 3.5rem }
@media(min-width:640px){ .branch-wrap{ padding-inline:2rem } }
.branch{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center }
@media(min-width:1024px){ .branch{ grid-template-columns:repeat(12,1fr); gap:3rem }
  .branch-media{ grid-column:span 7 } .branch-copy{ grid-column:span 5 } }
.branch-media{ position:relative; margin:0; border-radius:2rem; overflow:hidden; background:#071011;
  aspect-ratio:var(--ba,4 / 3); box-shadow:inset 0 0 0 1px rgba(9,9,9,.06) }
.branch-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--bpos,50% 50%); transform:scale(1);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1) }
.branch-media.in img{ transform:scale(1.02) }
@media(hover:hover){ .branch-media:hover img{ transform:scale(1.02) } }
.branch-mark{ position:absolute; left:1.5rem; bottom:1.5rem; z-index:2; display:flex; flex-direction:column; gap:.15rem;
  padding:.85rem 1.1rem .8rem; border-radius:1rem; color:#fff; background:rgba(7,16,17,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.bm-n{ font-size:max(11px,.68rem); font-weight:600; letter-spacing:.18em; color:var(--teal-2) }
.bm-place{ font-size:max(15px,1rem); font-weight:600; letter-spacing:.08em }
.bm-est{ font-size:max(11px,.7rem); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72) }
@media(max-width:639px){ .branch-mark{ left:1rem; bottom:1rem; padding:.6rem .85rem .55rem; border-radius:.8rem } .bm-place{ font-size:14px } .bm-n,.bm-est{ font-size:10px } }
.branch-copy{ display:flex; flex-direction:column; gap:1.25rem }
.branch-copy h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.05; max-width:12ch }
.branch-body p{ font-size:max(15px,1rem); line-height:1.65; color:var(--muted); max-width:46ch }
.branch-body p + p{ margin-top:.9rem }
.branch-meta{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2.5rem; padding-top:1.25rem; border-top:1px solid var(--line) }
.branch-meta dt{ font-size:max(11px,.68rem); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-dark) }
.branch-meta dd{ margin:.35rem 0 0; font-size:max(14px,.9rem); font-weight:500; color:var(--ink) }
.bm-lines span{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:max(12px,.78rem); line-height:1.6 }
.branch-pull{ position:relative; padding-left:1rem; font-size:max(15px,1.05rem); font-weight:500; line-height:1.4; color:var(--ink); letter-spacing:-.01em }
.branch-pull::before{ content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:2px; border-radius:2px; background:var(--teal) }
.branch-visit{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem; padding-top:1.75rem; border-top:1px solid var(--line) }
@media(min-width:768px){ .branch-visit{ flex-direction:row; align-items:center; justify-content:space-between; gap:2rem } }
.branch-visit h3{ font-size:max(18px,1.35rem); font-weight:600; letter-spacing:-.015em; line-height:1.2 }
.branch-visit-btns{ display:flex; flex-wrap:wrap; gap:.6rem }
.pill--ghost{ background:var(--surface); color:#090909 }
.pill--ghost .pill-badge{ background:#25D366; color:#fff }
@media(hover:hover){ .pill--ghost:hover{ background:#eef2f2 } }