/* ==========================================================================
FVCL â Design tokens + component styles
Source of truth: FVCL Header/Footer/Homepage .dc.html design package.
========================================================================== */
:root{
/* Brand */
--fvcl-navy:#14264A;
--fvcl-navy-grad:#1F3A63;
--fvcl-blue:#2551B5;
--fvcl-blue-dark:#1B3C86;
--fvcl-blue-light:#80A8F5;
--fvcl-blue-soft:#EEF3FD;
--fvcl-blue-soft-2:#F4F7FD;
/* Ink */
--fvcl-body:#4A5A6A;
--fvcl-muted:#9FB0BC;
--fvcl-muted-2:#8494A1;
--fvcl-placeholder:#8B97A3;
--fvcl-muted-3:#5F6C7A;
--fvcl-topbar-ink:#CDD8DD;
--fvcl-quote-ink:#E8EDF1;
--fvcl-tech-ink:#AEB9C4;
--fvcl-on-blue-ink:#D3E6EA;
--fvcl-white:#FFFFFF;
/* Radius */
--fvcl-r-btn:10px;
--fvcl-r-card:16px;
--fvcl-r-badge:14px;
--fvcl-r-media:18px;
--fvcl-r-media-lg:22px;
--fvcl-r-hero:26px;
/* Shadows */
--fvcl-sh-card:0 12px 34px rgba(15,27,45,.08);
--fvcl-sh-card-h:0 18px 40px rgba(15,27,45,.12);
--fvcl-sh-hero:0 22px 54px rgba(15,27,45,.2);
--fvcl-sh-cta:0 10px 26px rgba(37,81,181,.28);
--fvcl-sh-badge:0 12px 30px rgba(15,27,45,.22);
/* Motion */
--fvcl-dur:.2s;
--fvcl-ease:cubic-bezier(.22,.61,.36,1);
/* Layout */
--fvcl-max:1240px;
--fvcl-gutter:26px;
/* Content measure: --fvcl-max minus both --fvcl-gutter gutters (1240 - 26 - 26).
Stated literally rather than as calc() because --fvcl-gutter is narrowed to
18px at the mobile breakpoint, where this value must not drift. */
--fvcl-measure:1188px;
}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--fvcl-navy);-webkit-font-smoothing:antialiased;margin:0}
.fvcl a{text-decoration:none}
::placeholder{color:var(--fvcl-muted-3)}
/* Elementor container default width to match the design's 1240px boxed */
.elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--fvcl-max)}
/* ---- Shared section measure (FVCL-QA-031) -------------------------------
The design's sections are max-width:1240px WITH padding:0 26px, i.e. an
1188px content measure. The site chrome already resolves that way, pairing
--fvcl-max with --fvcl-gutter on .fvcl-topbar-in / .fvcl-header-in /
.fvcl-footer-in, so page bodies have to agree with the footer.
Elementor splits that single design box across two elements: the boxed
container carries the 26px gutter (--padding-left/right, uniformly 26px on
all 42 boxed containers) while its .e-con-inner carries --content-width:1240px.
The gutter therefore sits OUTSIDE the 1240px box, so the measure resolved to
1240px, 52px wider than the design on every one of the 24 URLs.
Because the gutter already exists on the outer container, the inner box must
resolve to the design's *content* measure. Re-adding the padding here instead
would double the gutter: measured 1136px at 1240w, 996px at 1100w, 664px at
768w and 271px at 375w, i.e. 52px too narrow at every viewport under ~1292px.
The doubled class holds this at 0,3,0 so it beats Elementor's own
.e-con-boxed>.e-con-inner{max-width:var(--content-width)} without !important. */
.e-con-boxed>.e-con-inner.e-con-inner{max-width:var(--fvcl-measure)}
/* ============================ SCROLL REVEAL ============================ */
/* Scroll reveal is strictly opt-in: nothing is hidden until JS adds .is-armed,
and JS only arms an element once it has confirmed it can drive the animation.
No JS, a failed init, or reduced-motion therefore means "no animation", never
"no content" â a reveal must never be able to hide clinical information.
The hidden state deliberately lives on .is-armed rather than on .fvcl-reveal
itself. Arming and revealing in the same style-recalculation pass leaves the
transition with no flushed before-state, which strands the element at
opacity 0 permanently; fvcl.js arms first and reveals on a later frame. */
.fvcl-reveal.is-armed{opacity:0;transform:translateY(14px);transition:opacity .5s var(--fvcl-ease),transform .5s var(--fvcl-ease)}
.fvcl-reveal.is-armed.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.fvcl-reveal.is-armed{opacity:1;transform:none;transition:none}
*{scroll-behavior:auto!important}
}
/* ================================ HEADER ================================ */
.fvcl-topbar{background:var(--fvcl-navy);color:var(--fvcl-topbar-ink)}
.fvcl-topbar-in{max-width:var(--fvcl-max);margin:0 auto;padding:9px var(--fvcl-gutter);display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:600 12px Montserrat,sans-serif}
.fvcl-topbar a{color:var(--fvcl-topbar-ink)}
.fvcl-topbar a.is-primary{color:var(--fvcl-blue-light)}
.fvcl-topbar a:hover{color:#fff}
.fvcl-topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.fvcl-sep{opacity:.5}
.fvcl-social-top{display:flex;gap:9px;align-items:center}
.fvcl-social-top a{width:24px;height:24px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background var(--fvcl-dur),border-color var(--fvcl-dur)}
.fvcl-social-top a:hover{background:var(--fvcl-blue);border-color:var(--fvcl-blue)}
.fvcl-lang{position:relative;display:inline-block}
.fvcl-lang-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:20px;padding:5px 11px;font:600 12px Montserrat,sans-serif;cursor:pointer}
.fvcl-lang-menu{position:absolute;right:0;top:37px;background:#fff;border-radius:10px;box-shadow:0 12px 30px rgba(15,27,45,.3);padding:6px;min-width:158px;z-index:130;display:none}
.fvcl-lang.is-open .fvcl-lang-menu{display:block}
.fvcl-lang-menu button,.fvcl-lang-menu a{width:100%;display:flex;align-items:center;gap:9px;background:none;border:none;padding:9px 10px;border-radius:7px;font:600 12.5px Montserrat,sans-serif;color:var(--fvcl-navy);cursor:pointer;text-align:left}
.fvcl-lang-menu button:hover,.fvcl-lang-menu a:hover{background:var(--fvcl-blue-soft)}
.fvcl-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(15,27,45,.08)}
.fvcl-header-in{max-width:var(--fvcl-max);margin:0 auto;padding:14px var(--fvcl-gutter);display:flex;align-items:center;gap:18px}
.fvcl-logo{display:block;flex:none}
.fvcl-logo img{height:var(--fvcl-logo-h,44px);width:auto;display:block}
.fvcl-nav{display:flex;gap:18px;font:600 13.5px Montserrat,sans-serif;margin-left:6px;align-items:center}
.fvcl-nav>a,.fvcl-nav-toggle{color:var(--fvcl-navy);padding:0 0 3px;border-bottom:2px solid transparent;background:none;border-left:0;border-right:0;border-top:0;font:600 13.5px Montserrat,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.fvcl-nav>a:hover,.fvcl-nav-toggle:hover{color:var(--fvcl-blue)}
.fvcl-nav>a.is-active,.fvcl-has-drop.is-active>.fvcl-nav-toggle{color:var(--fvcl-blue);border-bottom-color:var(--fvcl-blue-light)}
.fvcl-nav a.is-external{color:var(--fvcl-blue)}
.fvcl-nav a.is-external:hover{color:var(--fvcl-blue-dark)}
.fvcl-caret{font-size:8px}
.fvcl-has-drop{position:relative;display:inline-block}
.fvcl-drop{position:absolute;left:0;top:36px;background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:14px;box-shadow:0 18px 44px rgba(15,27,45,.18);padding:12px;z-index:140;display:none}
.fvcl-has-drop.is-open .fvcl-drop{display:grid}
.fvcl-drop--wide{width:560px;grid-template-columns:1fr 1fr;gap:2px 10px}
.fvcl-drop--narrow{width:270px;grid-template-columns:1fr}
.fvcl-drop a{display:block;padding:8px 11px;border-radius:8px;font:600 12.5px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-drop a:hover{background:var(--fvcl-blue-soft);color:var(--fvcl-blue)}
.fvcl-header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.fvcl-cart{position:relative;width:42px;height:42px;border:1px solid rgba(15,27,45,.16);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--fvcl-navy);flex:none;transition:border-color var(--fvcl-dur),color var(--fvcl-dur)}
.fvcl-cart:hover{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-cart-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--fvcl-blue);color:#fff;font:700 10px/18px Montserrat,sans-serif;text-align:center;padding:0 4px}
.fvcl-cart-count[hidden]{display:none}
/* The burger is the only way to reach the menu below 1101px, and from v1.17.0
it is also the only way to reach the booking CTA, so it is drawn as a filled
navy control rather than a thin outline: 48px square (above the 44px touch
minimum), a 26px glyph and a 2.4px round-capped stroke. Navy and blue are the
header's own colours, so it reads as emphasis rather than decoration. */
.fvcl-burger{display:none;width:48px;height:48px;border:1px solid var(--fvcl-navy);border-radius:12px;background:var(--fvcl-navy);cursor:pointer;align-items:center;justify-content:center;color:#fff;flex:none;transition:background var(--fvcl-dur),border-color var(--fvcl-dur)}
/* Hidden until the menu collapses; the header bar keeps its own copy instead. */
.fvcl-nav-cta{display:none}
/* Buttons */
.fvcl-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fvcl-r-btn);font:700 14px Montserrat,sans-serif;transition:background var(--fvcl-dur),color var(--fvcl-dur),transform var(--fvcl-dur),box-shadow var(--fvcl-dur);white-space:nowrap}
.fvcl-btn--primary{background:var(--fvcl-blue);color:#fff;padding:12px 22px}
.fvcl-btn--primary:hover{background:var(--fvcl-blue-dark);transform:translateY(-1px);color:#fff}
/* ================================ FOOTER ================================ */
.fvcl-footer{background:var(--fvcl-navy);color:var(--fvcl-muted);padding:60px 0 26px}
.fvcl-footer-in{max-width:var(--fvcl-max);margin:0 auto;padding:0 var(--fvcl-gutter)}
.fvcl-footer a{color:var(--fvcl-muted);transition:color var(--fvcl-dur)}
.fvcl-footer a:hover{color:#fff}
.fvcl-footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px}
.fvcl-footer-brand{font:600 20px Montserrat,sans-serif;color:#fff;margin-bottom:12px}
.fvcl-footer-blurb{font:400 13px/1.65 Montserrat,sans-serif;margin:0 0 14px}
.fvcl-footer-flag{font:600 12px Montserrat,sans-serif;color:var(--fvcl-blue-light)}
.fvcl-footer-h{font:700 11px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.fvcl-footer-links{font:400 13px/2.1 Montserrat,sans-serif}
.fvcl-footer-links a{display:block}
.fvcl-news{display:flex;align-items:center;gap:14px;margin:26px 0 18px;flex-wrap:wrap}
.fvcl-news-label{font:600 12px Montserrat,sans-serif;color:#fff}
.fvcl-news input{flex:1;max-width:300px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);border-radius:8px;padding:10px 14px;font-size:13px;color:#fff;font-family:Montserrat,sans-serif}
.fvcl-news input:focus{border-color:var(--fvcl-blue-light);outline:none}
.fvcl-news button{background:var(--fvcl-blue);color:#fff;border:none;border-radius:8px;padding:11px 20px;font:700 13px Montserrat,sans-serif;cursor:pointer;transition:background var(--fvcl-dur)}
.fvcl-news button:hover{background:var(--fvcl-blue-dark)}
.fvcl-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.fvcl-copy{font:400 11.5px Montserrat,sans-serif;color:var(--fvcl-muted-2)}
.fvcl-social-foot{display:flex;align-items:center;gap:12px}
.fvcl-social-foot a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background var(--fvcl-dur)}
.fvcl-social-foot a:hover{background:var(--fvcl-blue)}
.fvcl-credit{text-align:center;margin-top:16px;font:400 11.5px Montserrat,sans-serif;color:var(--fvcl-muted-2)}
/* ================================= HERO ================================= */
.fvcl-eyebrow{font:700 12px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--fvcl-blue)}
.fvcl-eyebrow--light{color:var(--fvcl-blue-light)}
.fvcl-hero-media{position:relative;height:520px}
.fvcl-hero-frame{position:absolute;inset:0;border-radius:var(--fvcl-r-hero);overflow:hidden;box-shadow:var(--fvcl-sh-hero)}
.fvcl-hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .35s var(--fvcl-ease);position:absolute;inset:0;opacity:0}
.fvcl-hero-frame img.is-active{opacity:1}
.fvcl-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,45,0) 55%,rgba(15,27,45,.32))}
.fvcl-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;font:400 18px Montserrat,sans-serif;color:var(--fvcl-navy);box-shadow:0 4px 14px rgba(15,27,45,.2);z-index:3}
.fvcl-hero-arrow:hover{background:#fff}
.fvcl-hero-arrow--prev{left:14px}
.fvcl-hero-arrow--next{right:14px}
.fvcl-hero-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:3}
.fvcl-hero-dots button{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.45)}
.fvcl-hero-dots button.is-active{background:#fff}
.fvcl-hero-badge{position:absolute;right:2px;top:30px;background:var(--fvcl-navy);color:#fff;border-radius:var(--fvcl-r-badge);padding:13px 16px;box-shadow:var(--fvcl-sh-badge);z-index:3}
.fvcl-hero-badge b{display:block;font:600 20px Montserrat,sans-serif}
.fvcl-hero-badge span{font:500 11px Montserrat,sans-serif;color:var(--fvcl-muted)}
.fvcl-stats{display:flex;gap:26px;flex-wrap:wrap}
.fvcl-stat+.fvcl-stat{border-left:1px solid rgba(15,27,45,.14);padding-left:26px}
.fvcl-stat b{display:block;font:600 26px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-stat span{font:500 12px Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-stat i{color:var(--fvcl-blue-light);font-size:18px;font-style:normal}
/* ============================ QUICK CARDS ============================ */
.fvcl-quick{transform:translateY(-38px)}
.fvcl-qcard{background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:24px;box-shadow:var(--fvcl-sh-card);transition:transform var(--fvcl-dur),box-shadow var(--fvcl-dur);height:100%}
.fvcl-qcard:hover{transform:translateY(-4px);box-shadow:var(--fvcl-sh-card-h)}
.fvcl-qcard--blue{background:var(--fvcl-blue);color:#fff;border:none;box-shadow:0 12px 34px rgba(37,81,181,.22)}
.fvcl-qcard--blue p{color:var(--fvcl-on-blue-ink)}
.fvcl-qcard-ico{width:46px;height:46px;border-radius:12px;background:var(--fvcl-blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fvcl-qcard--blue .fvcl-qcard-ico{background:rgba(255,255,255,.16)}
.fvcl-qcard h3{font:600 18px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 5px}
.fvcl-qcard--blue h3{color:#fff}
.fvcl-qcard p{font:400 13px/1.55 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 12px}
.fvcl-link{font:700 13px Montserrat,sans-serif;color:var(--fvcl-blue);border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:1px}
.fvcl-qcard--blue .fvcl-link{color:#fff}
/* ============================== SERVICES ============================== */
.fvcl-scard{background:#fff;border-radius:var(--fvcl-r-card);padding:26px;border:1px solid rgba(15,27,45,.06);transition:transform var(--fvcl-dur),box-shadow var(--fvcl-dur);height:100%}
.fvcl-scard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,27,45,.1)}
.fvcl-scard-ico{width:52px;height:52px;border-radius:14px;background:var(--fvcl-blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fvcl-scard h3{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 7px}
.fvcl-scard p{font:400 13.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 14px}
/* ============================== ABOUT ============================== */
.fvcl-about-media{position:relative}
.fvcl-about-frame{border-radius:var(--fvcl-r-media-lg);overflow:hidden;position:relative;height:430px;box-shadow:0 20px 48px rgba(15,27,45,.16)}
.fvcl-about-frame img{width:100%;height:100%;object-fit:cover;display:block}
.fvcl-about-badge{position:absolute;left:-14px;bottom:38px;background:var(--fvcl-navy);color:#fff;border-radius:var(--fvcl-r-badge);padding:16px 20px;box-shadow:0 14px 34px rgba(15,27,45,.24);max-width:200px}
.fvcl-about-badge b{display:block;font:600 15px Montserrat,sans-serif;margin-bottom:3px}
.fvcl-about-badge span{font:400 12px/1.5 Montserrat,sans-serif;color:var(--fvcl-muted)}
.fvcl-checks{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.fvcl-check{display:flex;gap:12px}
.fvcl-check>span{color:var(--fvcl-blue);flex:none}
.fvcl-check b{display:block;font:600 14px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-check i{font-style:normal;font:400 12.5px/1.5 Montserrat,sans-serif;color:var(--fvcl-body)}
/* ============================== PROCESS ============================== */
.fvcl-step{background:var(--fvcl-blue-soft-2);border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:22px;height:100%}
.fvcl-step-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fvcl-step-n{width:40px;height:40px;border-radius:50%;background:var(--fvcl-navy);color:#fff;display:flex;align-items:center;justify-content:center;font:600 17px Montserrat,sans-serif;flex:none}
.fvcl-step-rule{height:1px;flex:1;background:linear-gradient(90deg,var(--fvcl-blue-light),transparent)}
/* ============================ TECHNOLOGY ============================ */
.fvcl-rings{position:absolute;opacity:.12;pointer-events:none}
.fvcl-rings--right{right:-80px;top:50%;transform:translateY(-50%);width:460px}
.fvcl-rings--left{left:-100px;top:-60px;width:420px;opacity:.1}
.fvcl-rings--cta{right:-60px;bottom:-120px;width:420px}
.fvcl-tcard{border:1px solid rgba(255,255,255,.14);border-radius:var(--fvcl-r-card);padding:24px;background:rgba(255,255,255,.03);height:100%}
.fvcl-tcard b{display:block;font:600 18px Montserrat,sans-serif;margin:12px 0 6px;color:#fff}
.fvcl-tcard p{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-muted);margin:0}
/* ============================ BLUR SLIDER ============================ */
.fvcl-compare{position:relative;border-radius:var(--fvcl-r-media);overflow:hidden;height:340px;box-shadow:0 16px 40px rgba(15,27,45,.14)}
.fvcl-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fvcl-compare .fvcl-blur{filter:blur(9px)}
.fvcl-compare-tag{position:absolute;bottom:14px;font:700 11px Montserrat,sans-serif;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.12em}
.fvcl-compare-tag--l{left:14px}
.fvcl-compare-tag--r{right:14px}
.fvcl-compare-line{position:absolute;top:0;bottom:0;width:3px;background:var(--fvcl-blue-light);transform:translateX(-50%);pointer-events:none}
.fvcl-compare-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--fvcl-blue-light);display:flex;align-items:center;justify-content:center;color:var(--fvcl-blue);font-size:18px;box-shadow:0 6px 16px rgba(15,27,45,.2);pointer-events:none}
.fvcl-compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* ============================ TESTIMONIALS ============================ */
.fvcl-tm{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px;height:100%}
.fvcl-tm img{height:20px;width:auto;margin-bottom:16px;display:block}
.fvcl-tm p{font:400 15px/1.65 Montserrat,sans-serif;color:var(--fvcl-quote-ink);margin:0 0 16px}
.fvcl-tm b{font:700 13px Montserrat,sans-serif;color:#fff}
/* ================================ BLOG ================================ */
.fvcl-bcard{display:block;background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);overflow:hidden;color:inherit;transition:transform var(--fvcl-dur),box-shadow var(--fvcl-dur);height:100%}
.fvcl-bcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,27,45,.12)}
.fvcl-bcard-img{height:180px;overflow:hidden;background:var(--fvcl-blue-soft)}
.fvcl-bcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.fvcl-bcard-body{padding:20px}
.fvcl-bcard-tag{font:700 10px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--fvcl-blue);margin-bottom:8px}
.fvcl-bcard-title{font:600 17px/1.3 Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:8px}
.fvcl-bcard-exc{font:400 13px/1.55 Montserrat,sans-serif;color:var(--fvcl-body)}
/* ============================== LOCATIONS ============================== */
.fvcl-loc{background:#fff;border-radius:var(--fvcl-r-card);padding:24px;border:1px solid rgba(15,27,45,.06);height:100%}
.fvcl-loc b{display:block;font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:10px}
.fvcl-loc-addr{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin-bottom:12px}
.fvcl-loc-phone{font:700 14px Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-loc-toll{font:400 12px Montserrat,sans-serif;color:var(--fvcl-muted-3);margin-bottom:16px}
.fvcl-loc a{font:700 12.5px Montserrat,sans-serif;color:var(--fvcl-navy);border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:1px}
/* ======================================================================
FRAMEWORK RESET OVERRIDES
Elementor ships `.elementor img { height: auto; max-width: 100% }`, which
has the same specificity (0,1,1) as our own `.fvcl-* img` rules and loads
later, so it wins on source order and collapses every fixed-height image
(logo, hero frame, compare panes). These rules re-assert the design's
intrinsic sizing. Keep them together so the reason stays obvious.
====================================================================== */
.fvcl-header .fvcl-logo img{height:var(--fvcl-logo-h,44px)!important;width:auto!important;max-width:none!important;display:block}
.fvcl-hero-media .fvcl-hero-frame img{height:100%!important;width:100%!important;max-width:none!important;object-fit:cover}
.fvcl-about-media .fvcl-about-frame img{height:100%!important;width:100%!important;object-fit:cover}
.fvcl-compare img{height:100%!important;width:100%!important;object-fit:cover}
.fvcl-bcard-img img{height:100%!important;width:100%!important;object-fit:cover}
.fvcl-tm img{height:20px!important;width:auto!important}
/* Elementor's global link colour also ties with our nav rules. */
.fvcl-header .fvcl-nav>a{color:var(--fvcl-navy)}
.fvcl-header .fvcl-nav>a:hover{color:var(--fvcl-blue)}
.fvcl-header .fvcl-nav>a.is-active{color:var(--fvcl-blue)}
.fvcl-header .fvcl-nav>a.is-external{color:var(--fvcl-blue)}
.fvcl-header .fvcl-nav>a.is-external:hover{color:var(--fvcl-blue-dark)}
.fvcl-topbar .fvcl-topbar-in a{color:var(--fvcl-topbar-ink)}
.fvcl-topbar .fvcl-topbar-in a.is-primary{color:var(--fvcl-blue-light)}
.fvcl-topbar .fvcl-topbar-in a:hover{color:#fff}
.fvcl-footer .fvcl-footer-in a{color:var(--fvcl-muted)}
.fvcl-footer .fvcl-footer-in a:hover{color:#fff}
/* Dropdown links tie with the kit at 0,1,1 and lost on source order: all 22
mega-menu and Resources links rendered #2551B5 instead of the design navy. */
.fvcl-header .fvcl-drop a{color:var(--fvcl-navy)}
.fvcl-header .fvcl-drop a:hover{background:var(--fvcl-blue-soft);color:var(--fvcl-blue)}
/* Design gives the header CTA a 9px radius; the shared button token is 10px. */
.fvcl-header .fvcl-btn--primary{border-radius:9px}
/* Keep the primary bar on one line at desktop, as designed. */
.fvcl-header-in{flex-wrap:nowrap}
.fvcl-nav{flex-wrap:nowrap}
.fvcl-nav>a,.fvcl-nav-toggle{white-space:nowrap}
.fvcl-header-actions{flex:none}
/* ============================== RESPONSIVE ============================== */
/* Tighten the primary bar before collapsing it. `.fvcl-nav>a,.fvcl-nav-toggle`
sets the `font` shorthand, so the size must be restated on the children at the
same 0,1,1 specificity; setting font-size on `.fvcl-nav` alone does nothing. */
@media (max-width:1320px){
.fvcl-nav{gap:14px}
.fvcl-nav>a,.fvcl-nav-toggle{font-size:12.5px}
.fvcl-drop--wide{width:460px}
}
/* Measured intrinsic width of the primary bar once the 1320px tightening above
applies: logo 132 + nav 536 + cart/CTA 275 + two 27px gaps = 998, plus the
2x26px gutters = 1050px. Collapse at 1100px, keeping ~50px (5%) of headroom
for wider fallback font metrics when Montserrat has not loaded. */
@media (max-width:1100px){
.fvcl-burger{display:inline-flex}
.fvcl-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--fvcl-gutter) 18px;border-bottom:1px solid rgba(15,27,45,.08);box-shadow:0 18px 44px rgba(15,27,45,.14);max-height:calc(100vh - 120px);overflow-y:auto;margin-left:0}
.fvcl-header.is-open .fvcl-nav{display:flex}
.fvcl-header-in{position:relative;flex-wrap:nowrap}
.fvcl-nav>a,.fvcl-nav-toggle{padding:12px 0;border-bottom:1px solid rgba(15,27,45,.07);width:100%;justify-content:space-between}
.fvcl-has-drop{width:100%}
.fvcl-drop{position:static;width:100%!important;box-shadow:none;border:none;padding:0 0 8px;grid-template-columns:1fr}
/* The booking CTA moves into the panel and leads it, full width, as the
primary action. The header copy is hidden so only one of the two exists. */
.fvcl-nav-cta{display:block;padding:2px 0 12px;margin-bottom:4px;border-bottom:1px solid rgba(15,27,45,.07)}
.fvcl-nav-cta .fvcl-btn{width:100%;justify-content:center;padding:14px 20px;font-size:15px}
.fvcl-header-actions .fvcl-cta-bar{display:none}
/* Source order is logo, burger, cart. Visual order puts the burger last so it
sits under the thumb at the outside edge, next to the cart it pairs with. */
.fvcl-logo{order:1}
.fvcl-header-actions{order:2}
.fvcl-burger{order:3;margin-left:0}
}
/* ---- Desktop logo scale (Dan, 2026-08-18) ---------------------------------
Measured at 1101px with the 1320px nav tightening applied: content box 1034px,
logo 132 + nav 545 + cart and CTA 275 + two 18px gaps = 988, leaving 46px of
slack. That slack is deliberate headroom for wider fallback metrics before
Montserrat loads, so the 1101-1200px step pays for its own extra width instead
of spending it: the logo grows 6px, which is 18px wider at the logo's 3:1
ratio, and the header gap and nav offset give back exactly 18px. Net slack at
1101px is unchanged at 46px. From 1201px up there is 146px or more of slack,
so the full step needs no trade. !important only to beat the framework reset
above, which needs it for Elementor's own .elementor img{height:auto}. */
@media (min-width:1101px){
.fvcl-header .fvcl-logo img{height:var(--fvcl-logo-h-lg,56px)!important}
}
@media (min-width:1101px) and (max-width:1200px){
.fvcl-header .fvcl-logo img{height:var(--fvcl-logo-h-md,50px)!important}
.fvcl-header-in{gap:12px}
.fvcl-nav{margin-left:0}
}
@media (max-width:1024px){
.fvcl-topbar-in{font-size:11px;gap:12px}
.fvcl-footer-cols{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:880px){
.fvcl-hero-media{height:400px}
.fvcl-about-frame{height:360px}
.fvcl-checks{grid-template-columns:1fr}
.fvcl-footer-cols{grid-template-columns:1fr 1fr}
.fvcl-quick{transform:none}
}
@media (max-width:767px){
:root{--fvcl-gutter:18px}
.fvcl-topbar-right{margin-left:0;width:100%;justify-content:space-between;gap:10px}
.fvcl-hero-media{height:320px}
.fvcl-hero-badge{right:8px;top:12px;padding:10px 12px}
.fvcl-hero-badge b{font-size:16px}
.fvcl-about-badge{left:0;bottom:12px;max-width:170px;padding:12px 14px}
.fvcl-footer-cols{grid-template-columns:1fr;gap:22px}
.fvcl-news{flex-direction:column;align-items:stretch}
.fvcl-news input{max-width:none}
.fvcl-footer-bottom{justify-content:center;text-align:center}
.fvcl-compare{height:260px}
.fvcl-stats{gap:16px}
.fvcl-stat+.fvcl-stat{padding-left:16px}
}
/* ===================== ELEMENTOR GLOBAL LINK-COLOUR GUARD =====================
Elementor's global kit emits `.elementor-kit-7 a{color:#2551B5}` (specificity
0,1,1). That outranks every single-class FVCL component rule (0,1,0), so any
FVCL component rendered as an silently lost its own colour. The primary
header CTA was the visible casualty: blue text on a blue background.
These components own their colour by design, so they are restated here at
0,2,0 using the doubled-class idiom. No !important, no inline styles, and no
dependency on stylesheet load order. Keep any new anchor-based FVCL component
in this block.
========================================================================== */
.fvcl-btn.fvcl-btn--primary{color:#fff}
.fvcl-btn.fvcl-btn--primary:hover{color:#fff}
.fvcl-cart.fvcl-cart{color:var(--fvcl-navy)}
.fvcl-cart.fvcl-cart:hover{color:var(--fvcl-blue)}
.fvcl-link.fvcl-link{color:var(--fvcl-blue)}
.fvcl-qcard--blue .fvcl-link.fvcl-link{color:#fff}
.fvcl-bcard.fvcl-bcard{color:inherit}
/* ===================== PAGE WIDGET COMPONENTS (v1.2.0) =====================
Layout for the repeater-driven page widgets. Column counts arrive as the
custom properties --fvcl-cd / --fvcl-ct / --fvcl-cm, so the media queries
below stay authoritative at tablet and mobile. Every grid track is
minmax(0,1fr): grid items default to min-width:auto, and that default is what
let a long unbreakable string blow the old locations grid 301px past a 375px
viewport.
========================================================================= */
/* ---- Page hero ---- */
.fvcl-phero{padding:54px 0 50px}
.fvcl-phero--soft{background:var(--fvcl-blue-soft)}
.fvcl-phero--white{background:#fff}
.fvcl-phero--navy{background:linear-gradient(135deg,#14264A,#1F3A63);color:#fff}
.fvcl-phero-in{max-width:1240px;margin:0 auto;padding:0 var(--fvcl-gutter)}
.fvcl-crumbs{font:600 12px Montserrat,sans-serif;color:var(--fvcl-body);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fvcl-crumb-sep{opacity:.45}
.fvcl-crumb-cur{color:var(--fvcl-blue)}
.fvcl-phero--navy .fvcl-crumbs{color:#aeb9c4}
.fvcl-phero--navy .fvcl-crumb-cur{color:var(--fvcl-blue-light)}
.fvcl-phero .fvcl-eyebrow{margin-bottom:12px}
.fvcl-phero--navy .fvcl-eyebrow{color:var(--fvcl-blue-light)}
.fvcl-phero-h{font:600 52px/1.05 Montserrat,sans-serif;letter-spacing:-.02em;margin:0 0 14px;color:var(--fvcl-navy)}
.fvcl-phero--navy .fvcl-phero-h{color:#fff}
.fvcl-phero-intro{font:400 16px/1.7 Montserrat,sans-serif;color:var(--fvcl-body);margin:0;max-width:640px}
.fvcl-phero--navy .fvcl-phero-intro{color:#aeb9c4}
/* ---- Card grid ---- */
.fvcl-cgrid-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.fvcl-cgrid-head--center{flex-direction:column;text-align:center;justify-content:center}
.fvcl-cgrid-ico{width:46px;height:46px;border-radius:12px;background:var(--fvcl-blue-soft);display:flex;align-items:center;justify-content:center;flex:none}
.fvcl-cgrid-head h2{font:600 28px Montserrat,sans-serif;margin:0;letter-spacing:-.01em;color:var(--fvcl-navy)}
.fvcl-cgrid-sub{font:400 13.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-cgrid{display:grid;gap:18px;grid-template-columns:repeat(var(--fvcl-cd,3),minmax(0,1fr))}
.fvcl-card{display:block;background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:24px;color:inherit;min-width:0;transition:transform var(--fvcl-dur),box-shadow var(--fvcl-dur),border-color var(--fvcl-dur)}
a.fvcl-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,27,45,.1);border-color:rgba(37,81,181,.3)}
.fvcl-card-ico{width:44px;height:44px;border-radius:12px;background:var(--fvcl-blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fvcl-card-meta{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-blue);margin-bottom:8px}
.fvcl-card :is(h2,h3,h4){font:600 18px Montserrat,sans-serif;margin:0 0 7px;color:var(--fvcl-navy)}
.fvcl-card p{font:400 13.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 14px;overflow-wrap:break-word}
.fvcl-card-cta{font:700 13px Montserrat,sans-serif;color:var(--fvcl-blue);border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:1px}
/* ---- CTA band ---- */
.fvcl-ctaband{padding:64px 0;text-align:center}
.fvcl-ctaband--navy{background:linear-gradient(135deg,#14264A,#1F3A63);color:#fff}
.fvcl-ctaband--soft{background:var(--fvcl-blue-soft)}
.fvcl-ctaband-in{max-width:680px;margin:0 auto;padding:0 var(--fvcl-gutter)}
.fvcl-ctaband h2{font:600 38px/1.1 Montserrat,sans-serif;margin:0 0 12px;letter-spacing:-.01em}
.fvcl-ctaband--navy h2{color:#fff}
.fvcl-ctaband--soft h2{color:var(--fvcl-navy)}
.fvcl-ctaband p{font:400 15px/1.7 Montserrat,sans-serif;margin:0 0 26px}
.fvcl-ctaband--navy p{color:#aeb9c4}
.fvcl-ctaband--soft p{color:var(--fvcl-body)}
.fvcl-ctaband-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fvcl-ctaband--navy .fvcl-btn--primary{box-shadow:0 10px 26px rgba(37,81,181,.4)}
.fvcl-btn--ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff;padding:12px 22px;background:transparent}
.fvcl-btn--ghost:hover{background:#fff;color:var(--fvcl-navy)}
.fvcl-ctaband--soft .fvcl-btn--ghost{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-ctaband--soft .fvcl-btn--ghost:hover{background:var(--fvcl-blue);color:#fff}
/* ---- Locations grid ---- */
.fvcl-lgrid{display:grid;gap:18px;grid-template-columns:repeat(var(--fvcl-cd,4),minmax(0,1fr))}
.fvcl-loc{min-width:0;overflow-wrap:break-word}
.fvcl-loc-dir{display:inline-block}
/* ---- Feature rows ---- */
.fvcl-frows{display:flex;flex-direction:column;gap:60px}
.fvcl-frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.fvcl-frow--rev .fvcl-frow-media{order:2}
.fvcl-frow-media img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--fvcl-r-card);display:block}
.fvcl-frow-txt{min-width:0}
.fvcl-frow-txt .fvcl-eyebrow{display:block;margin-bottom:12px}
.fvcl-frow-txt h2{font:600 34px/1.15 Montserrat,sans-serif;letter-spacing:-.01em;margin:0 0 14px;color:var(--fvcl-navy)}
.fvcl-frow-txt p{font:400 15px/1.75 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 14px}
.fvcl-frow-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.fvcl-frow-list li{position:relative;padding-left:26px;font:500 14px/1.6 Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-frow-list li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;background:var(--fvcl-blue-soft);box-shadow:inset 0 0 0 2px var(--fvcl-blue)}
/* ---- Responsive ---- */
@media (max-width:1024px){
.fvcl-cgrid{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
.fvcl-lgrid{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
.fvcl-phero-h{font-size:42px}
.fvcl-frow{gap:34px}
.fvcl-frow-txt h2{font-size:29px}
}
@media (max-width:880px){
.fvcl-frow{grid-template-columns:minmax(0,1fr);gap:22px}
.fvcl-frow--rev .fvcl-frow-media{order:0}
.fvcl-frows{gap:46px}
.fvcl-frow-media img{max-height:300px}
}
@media (max-width:767px){
.fvcl-cgrid{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:14px}
.fvcl-lgrid{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:14px}
.fvcl-phero{padding:34px 0 32px}
.fvcl-phero-h{font-size:31px;letter-spacing:-.01em}
.fvcl-phero-intro{font-size:15px}
.fvcl-cgrid-head{gap:12px;margin-bottom:20px}
.fvcl-cgrid-head h2{font-size:23px}
.fvcl-ctaband{padding:46px 0}
.fvcl-ctaband h2{font-size:27px}
.fvcl-ctaband-btns{flex-direction:column}
.fvcl-ctaband-btns .fvcl-btn{width:100%}
.fvcl-frow-txt h2{font-size:25px}
}
/* ===================== ELEMENTOR GLOBAL LINK-COLOUR GUARD, PART 2 ==========
Same rule as the block above: `.elementor-kit-7 a{color:#2551B5}` is 0,1,1 and
silently repaints any FVCL component rendered as an . Every anchor-based
component added in v1.2.0 is restated here at 0,2,0 via the doubled-class
idiom. No !important and no inline styles.
========================================================================= */
.fvcl-card.fvcl-card{color:inherit}
.fvcl-card.fvcl-card :is(h2,h3,h4){color:var(--fvcl-navy)}
.fvcl-card.fvcl-card:hover :is(h2,h3,h4){color:var(--fvcl-blue)}
.fvcl-card-cta.fvcl-card-cta{color:var(--fvcl-blue)}
.fvcl-btn.fvcl-btn--ghost{color:#fff}
.fvcl-btn.fvcl-btn--ghost:hover{color:var(--fvcl-navy)}
.fvcl-ctaband--soft .fvcl-btn.fvcl-btn--ghost{color:var(--fvcl-blue)}
.fvcl-ctaband--soft .fvcl-btn.fvcl-btn--ghost:hover{color:#fff}
.fvcl-crumbs.fvcl-crumbs a{color:var(--fvcl-body)}
.fvcl-crumbs.fvcl-crumbs a:hover{color:var(--fvcl-blue)}
.fvcl-phero--navy .fvcl-crumbs.fvcl-crumbs a{color:#aeb9c4}
.fvcl-loc-phone.fvcl-loc-phone a{color:var(--fvcl-blue)}
.fvcl-loc-dir.fvcl-loc-dir{color:var(--fvcl-navy)}
.fvcl-loc-dir.fvcl-loc-dir:hover{color:var(--fvcl-blue)}
/* ===================== v1.2.0 VARIANTS ===================== */
.fvcl-card--soft{background:var(--fvcl-blue-soft);border-color:transparent;padding:30px}
.fvcl-card--soft .fvcl-card-ico{background:#fff}
a.fvcl-card--soft:hover{border-color:rgba(37,81,181,.3)}
.fvcl-stars{display:flex;gap:3px;margin:0 0 14px}
.fvcl-phero .fvcl-stars{margin:4px 0 14px}
.fvcl-btn--navy{background:var(--fvcl-navy);color:#fff;padding:12px 22px}
.fvcl-btn--navy:hover{background:#0F1B2D;color:#fff}
.fvcl-ctaband--inset{padding:0}
.fvcl-ctaband--inset .fvcl-ctaband-in{max-width:1240px;border-radius:var(--fvcl-r-card);padding:34px 38px}
.fvcl-ctaband--inset.fvcl-ctaband--soft .fvcl-ctaband-in{background:var(--fvcl-blue-soft)}
.fvcl-ctaband--inset.fvcl-ctaband--navy .fvcl-ctaband-in{background:linear-gradient(135deg,#14264A,#1F3A63)}
.fvcl-ctaband--split{text-align:left}
.fvcl-ctaband--split .fvcl-ctaband-in{max-width:1240px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fvcl-ctaband--split .fvcl-ctaband-txt{min-width:0}
.fvcl-ctaband--split h2{font-size:20px;font-weight:600;margin:0 0 4px}
.fvcl-ctaband--split p{font-size:14px;line-height:1.6;margin:0}
.fvcl-ctaband--split .fvcl-ctaband-btns{justify-content:flex-start;flex:none}
.fvcl-frow-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.fvcl-frow-note{font:700 14px Montserrat,sans-serif;color:var(--fvcl-navy);margin-top:12px}
.fvcl-tgrid{display:grid;gap:18px;grid-template-columns:repeat(var(--fvcl-cd,3),minmax(0,1fr))}
.fvcl-tcard{background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:26px;margin:0;min-width:0;display:flex;flex-direction:column}
.fvcl-tcard-q{font:400 14px/1.7 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 18px;flex:1;overflow-wrap:break-word}
.fvcl-tcard-by{display:flex;align-items:center;gap:12px}
.fvcl-tcard-ini{width:38px;height:38px;border-radius:50%;background:var(--fvcl-blue-soft);color:var(--fvcl-blue);font:700 15px Montserrat,sans-serif;display:flex;align-items:center;justify-content:center;flex:none}
.fvcl-tcard-meta{display:flex;flex-direction:column;min-width:0}
.fvcl-tcard-meta b{font:600 14px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-tcard-meta span{font:400 12.5px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
@media (max-width:1024px){
.fvcl-tgrid{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
}
@media (max-width:767px){
.fvcl-tgrid{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:14px}
.fvcl-ctaband--split .fvcl-ctaband-in{flex-direction:column;align-items:flex-start}
.fvcl-ctaband--split .fvcl-ctaband-btns{width:100%}
.fvcl-ctaband--inset .fvcl-ctaband-in{padding:24px 20px}
}
/* Guard block, v1.2.0 anchor components. Same 0,2,0 doubled-class idiom. */
.fvcl-btn.fvcl-btn--navy{color:#fff}
.fvcl-btn.fvcl-btn--navy:hover{color:#fff}
/* Navy card variant. Anchor colours restated at 0,2,0 in the guard block below. */
.fvcl-card--navy{background:var(--fvcl-navy);border-color:transparent;padding:28px}
.fvcl-card--navy .fvcl-card-ico{background:rgba(255,255,255,.12)}
.fvcl-card--navy .fvcl-card-ico svg{stroke:var(--fvcl-blue-light)}
a.fvcl-card--navy:hover{border-color:transparent}
.fvcl-card--navy.fvcl-card--navy :is(h2,h3,h4){color:#fff}
.fvcl-card--navy.fvcl-card--navy:hover :is(h2,h3,h4){color:var(--fvcl-blue-light)}
.fvcl-card--navy.fvcl-card--navy p{color:#aeb9c4}
.fvcl-card--navy .fvcl-card-cta.fvcl-card-cta{color:#fff;border-bottom-color:var(--fvcl-blue-light)}
.fvcl-card--soft .fvcl-card-cta.fvcl-card-cta{color:var(--fvcl-blue)}
/* ===================== v1.3.0 HOMEPAGE COMPONENTS ==========================
Added when the homepage's raw-HTML sections were converted to the repeater
widgets. Values are taken from FVCL Homepage.dc.html so the rendered result
is unchanged at desktop while the content becomes editable and the grids
collapse properly on small screens.
========================================================================= */
/* ---- Card body wrapper ----
Every card now wraps its text in .fvcl-card-body. On a plain card the
wrapper is inert; on a media card it carries the padding so the image can
run to the card edge. */
.fvcl-card-body{display:block;min-width:0}
/* ---- Brand blue card (homepage "Urgent Eye Care") ---- */
.fvcl-card--brand{background:var(--fvcl-blue);border-color:transparent;color:#fff;box-shadow:0 12px 34px rgba(37,81,181,.22)}
.fvcl-card--brand .fvcl-card-ico{background:rgba(255,255,255,.16)}
.fvcl-card--brand .fvcl-card-ico svg{stroke:#fff}
a.fvcl-card--brand:hover{border-color:transparent;box-shadow:0 18px 42px rgba(37,81,181,.3)}
/* ---- Translucent card, for use on a navy section (homepage technology) ---- */
.fvcl-card--glass{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14);color:#fff}
.fvcl-card--glass .fvcl-card-ico{background:rgba(255,255,255,.08)}
.fvcl-card--glass .fvcl-card-ico svg{stroke:var(--fvcl-blue-light)}
a.fvcl-card--glass:hover{border-color:rgba(128,168,245,.45)}
/* ---- Media card (homepage blog) ---- */
.fvcl-card--media{padding:0;overflow:hidden}
.fvcl-card--media .fvcl-card-body{padding:20px}
.fvcl-card-media{display:block;height:180px;overflow:hidden;background:var(--fvcl-blue-soft)}
/* Doubled class (0,2,1) is the established fix: it keeps this rule from being
beaten on source order by an equal-specificity single-class img rule shipped
by Elementor, WooCommerce or the theme. The three deliberate overrides below
-- portrait (852, 1013), blog card (1272) and video thumb (1952) -- are all
0,2,1 AND later in this file, so they still win. b18. */
.fvcl-card-media.fvcl-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.fvcl-card--media .fvcl-card-meta{font-size:10px;letter-spacing:.12em}
.fvcl-card--media :is(h2,h3,h4){font-size:17px;line-height:1.3;margin-bottom:8px}
.fvcl-card--media p{font-size:13px;line-height:1.55;margin-bottom:0}
/* ---- Locations card ----
v1.2.0 shipped the locations grid without the card treatment, so the widget
rendered unstyled. These are the design's values. */
.fvcl-loc{background:#fff;border:1px solid rgba(15,27,45,.06);border-radius:var(--fvcl-r-card);padding:24px}
.fvcl-loc b{display:block;font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:10px}
.fvcl-loc-addr{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin-bottom:12px}
.fvcl-loc-phone{font:700 14px Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-loc-toll{font:400 12px Montserrat,sans-serif;color:var(--fvcl-muted-3);margin-bottom:16px;min-height:1em}
.fvcl-loc-dir{font:700 12.5px Montserrat,sans-serif;color:var(--fvcl-navy);border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:1px}
/* ---- Process steps ---- */
.fvcl-steps{display:grid;gap:16px;grid-template-columns:repeat(var(--fvcl-cd,2),minmax(0,1fr))}
.fvcl-step{background:var(--fvcl-blue-soft-2);border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:22px;min-width:0}
.fvcl-step-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fvcl-step-n{width:40px;height:40px;border-radius:50%;background:var(--fvcl-navy);color:#fff;display:flex;align-items:center;justify-content:center;font:600 17px Montserrat,sans-serif;flex:none}
.fvcl-step-rule{height:1px;flex:1;background:linear-gradient(90deg,var(--fvcl-blue-light),transparent)}
.fvcl-step-t{font:600 16px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 5px}
.fvcl-step-d{font:400 12.5px/1.55 Montserrat,sans-serif;color:var(--fvcl-body);margin:0;overflow-wrap:break-word}
/* ---- Testimonial cards on a dark section ---- */
.fvcl-tcard--dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.fvcl-tcard--dark .fvcl-tcard-q{color:#e8edf1}
.fvcl-tcard--dark .fvcl-tcard-ini{background:rgba(15,27,45,.45);color:var(--fvcl-blue-light)}
.fvcl-tcard--dark .fvcl-tcard-meta b{color:#fff}
.fvcl-tcard--dark .fvcl-tcard-meta span{color:#9fb0bc}
/* ---- Responsive ---- */
@media (max-width:1024px){
.fvcl-steps{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
}
@media (max-width:767px){
.fvcl-steps{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:14px}
.fvcl-card-media{height:190px}
}
/* ===================== ELEMENTOR GLOBAL LINK-COLOUR GUARD, PART 3 ==========
`.elementor-kit-7 a{color:#2551B5}` is specificity 0,1,1 and repaints any
FVCL component rendered as an . The components added in v1.3.0 that can
render as an anchor are restated here at 0,2,0 with the doubled-class idiom.
No !important and no inline styles.
The brand card is the reason this block matters: its own background is
#2551B5, so without the guard the kit would paint the card's text in exactly
its own background colour and the card would read as empty.
========================================================================= */
.fvcl-card--brand.fvcl-card--brand{color:#fff}
.fvcl-card--brand.fvcl-card--brand :is(h2,h3,h4){color:#fff}
.fvcl-card--brand.fvcl-card--brand:hover :is(h2,h3,h4){color:#fff}
.fvcl-card--brand.fvcl-card--brand p{color:#d3e6ea}
.fvcl-card--brand .fvcl-card-cta.fvcl-card-cta{color:#fff;border-bottom-color:var(--fvcl-blue-light)}
.fvcl-card--glass.fvcl-card--glass{color:#fff}
.fvcl-card--glass.fvcl-card--glass :is(h2,h3,h4){color:#fff}
.fvcl-card--glass.fvcl-card--glass:hover :is(h2,h3,h4){color:var(--fvcl-blue-light)}
.fvcl-card--glass.fvcl-card--glass p{color:#9fb0bc}
.fvcl-card--glass .fvcl-card-cta.fvcl-card-cta{color:var(--fvcl-blue-light);border-bottom-color:rgba(128,168,245,.5)}
.fvcl-card--media.fvcl-card--media :is(h2,h3,h4){color:var(--fvcl-navy)}
.fvcl-card--media.fvcl-card--media:hover :is(h2,h3,h4){color:var(--fvcl-blue)}
/* ===================== v1.3.0 OVERFLOW FIXES ==============================
Two separate causes of horizontal scrolling at 375px, both previously
masked by the much larger locations-grid overflow.
========================================================================= */
/* 1. Decorative ring artwork.
The rings are positioned deliberately outside the section box (right:-80px)
and the design file clips them with overflow:hidden on the section. The
Elementor containers had no clipping, so the rings pushed the document
54px wider than the viewport. Applied through a class on the container so
it stays visible and editable in the Elementor UI. */
.fvcl-clip{overflow:hidden}
/* 2. Header at mobile. SUPERSEDED in v1.17.0 by Dan's instruction of 2026-08-18.
The earlier fix kept the booking CTA in the header row and let the row wrap to
a second line below 767px so the CTA stayed visible. Dan asked for the CTA to
move inside the hamburger panel instead, so the row no longer has anything to
wrap: at 1100px and below it carries only the logo, the cart and the burger,
which need about 290px inside the 375px viewport's 18px gutters. The wrap
rules are deleted rather than overridden, so nothing has to win on source
order. The CTA now renders inside .fvcl-nav as .fvcl-nav-cta, and the header
copy is hidden, so exactly one of the two is ever in the accessibility tree. */
/* =========================================================================
v1.4.0 components.
The homepage's last raw-HTML sections became real widgets, so the spacing
and colour those sections used to carry as inline style attributes moves
here, where media queries can reach it.
====================================================================== */
.fvcl-stats--gap{margin-top:34px}
.fvcl-checks--gap{margin-bottom:28px}
.fvcl-note{text-align:center;margin-top:26px}
.fvcl-note-in{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font:400 14px Montserrat,sans-serif;color:var(--fvcl-muted)}
/* The shared icon helper emits a 24px box and the brand stroke as SVG
presentation attributes. Any CSS rule outranks a presentation attribute,
so the note's smaller, lighter icon needs no !important. */
.fvcl-note svg{width:18px;height:18px;flex:none;stroke:var(--fvcl-blue-light)}
/* Guard block, v1.4.0 anchor component.
`.elementor-kit-7 a{color:#2551B5}` is specificity 0,1,1 and would repaint
this link, which on the dark call-to-action band would put brand blue text
on a brand blue ground. Restated at 0,2,0 with the doubled-class idiom. */
.fvcl-note .fvcl-note-link.fvcl-note-link{color:var(--fvcl-blue);font-weight:700}
.fvcl-note--dark .fvcl-note-link.fvcl-note-link{color:#fff}
/* =========================================================================
* v1.5.0 PAGE COMPONENTS
* Added for the About page, the Services hub and the service detail pages.
* Every rule here is a new class or a new modifier: nothing already shipped is
* redefined, so the header, footer and homepage render byte-identically.
* ========================================================================= */
/* ---- Hero calls to action ---- */
.fvcl-phero-btns,.fvcl-btnrow{display:flex;gap:14px;flex-wrap:wrap}
.fvcl-phero-btns{margin-top:18px}
/* Outlined navy button. The design uses it for the hero's secondary action on
the tinted band, where the white ghost outline would be invisible. Padding is
1.5px shy of the solid buttons so the border does not change the box height. */
.fvcl-btn--outline{background:transparent;border:1.5px solid var(--fvcl-navy);color:var(--fvcl-navy);padding:10.5px 20.5px}
.fvcl-btn--outline:hover{background:var(--fvcl-navy);color:#fff}
/* ---- Check list: heading, soft panel and single-column variants ---- */
.fvcl-checks-h{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 16px}
.fvcl-checks-wrap--panel{background:var(--fvcl-blue-soft);border-radius:18px;padding:28px 32px}
.fvcl-checks-wrap--panel .fvcl-checks{gap:12px 24px}
.fvcl-checks-wrap--panel .fvcl-check b{font:500 14px/1.55 Montserrat,sans-serif}
/* A modifier rather than an edit to `.fvcl-checks`, so the homepage's existing
two-column list and its responsive collapse are left untouched. */
.fvcl-checks--single{grid-template-columns:minmax(0,1fr)}
/* ---- Framed image, short variant (service detail intro) ---- */
.fvcl-about-frame--md{height:320px;border-radius:20px}
/* ---- FAQ accordion ----
Built on , so the marker is driven by the [open] attribute and no
script is involved in keeping it in sync with the disclosure state. */
.fvcl-faq{display:flex;flex-direction:column;gap:10px;max-width:900px}
.fvcl-faq-item{background:#fff;border:1px solid rgba(15,27,45,.1);border-radius:12px;overflow:hidden}
.fvcl-faq-q{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;font:600 14.5px Montserrat,sans-serif;color:var(--fvcl-navy);cursor:pointer;list-style:none}
.fvcl-faq-q::-webkit-details-marker{display:none}
.fvcl-faq-q::marker{content:""}
.fvcl-faq-q:focus-visible{outline:2px solid var(--fvcl-blue);outline-offset:-2px}
.fvcl-faq-item[open] .fvcl-faq-q{background:#F4F7FD}
.fvcl-faq-mark{flex:none;color:var(--fvcl-blue);font-size:16px;line-height:1}
.fvcl-faq-mark::after{content:"+"}
.fvcl-faq-item[open] .fvcl-faq-mark::after{content:"\2212"}
.fvcl-faq-a{padding:2px 18px 16px;font:400 14px/1.7 Montserrat,sans-serif;color:var(--fvcl-body)}
@media (max-width:767px){
.fvcl-checks-wrap--panel{padding:22px 20px}
.fvcl-phero-btns .fvcl-btn,.fvcl-btnrow .fvcl-btn{width:100%}
}
/* ===================== ELEMENTOR GLOBAL LINK-COLOUR GUARD, PART 4 ==========
`.elementor-kit-7 a{color:#2551B5}` is specificity 0,1,1 and repaints any
FVCL component rendered as an . `.fvcl-btn--outline` is the only anchor
component added in v1.5.0; it is restated here at 0,2,0 with the doubled-class
idiom so it wins on specificity rather than on source order, with no
`!important` and no inline style. The hero's primary button reuses
`.fvcl-btn--primary`, which the v1.0 guard block already covers.
========================================================================= */
.fvcl-btn.fvcl-btn--outline{color:var(--fvcl-navy)}
.fvcl-btn.fvcl-btn--outline:hover{color:#fff}
/* ---- Key figures: full-width band on a navy section (About page) ---- */
.fvcl-stats--band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;flex-wrap:nowrap}
.fvcl-stats--band .fvcl-stat+.fvcl-stat{padding-left:0}
.fvcl-stats--band .fvcl-stat b{font-size:40px}
.fvcl-stats--band .fvcl-stat i{font-size:24px}
.fvcl-stats--dark .fvcl-stat b{color:#fff}
.fvcl-stats--dark .fvcl-stat span{color:#9fb0bc}
.fvcl-stats--dark .fvcl-stat+.fvcl-stat{border-left-color:rgba(255,255,255,.14)}
@media (max-width:880px){
.fvcl-stats--band{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.fvcl-stats--band .fvcl-stat+.fvcl-stat{border-left:0}
}
@media (max-width:400px){
.fvcl-stats--band{grid-template-columns:minmax(0,1fr)}
}
/* FVCL-QA-002: the homepage H1 carries the whole headline. This keeps the
design's lighter, smaller, blue treatment on the second half while the
markup stays a single semantic H1. Values match the previous div exactly. */
.fvcl-h1-b{display:block;margin-top:22px;font-size:52px;font-weight:500;line-height:1em;letter-spacing:-.01em;color:#2551B5}
/* =========================================================================
v1.6.0 COMPONENTS: Our Team, doctor profiles, Technology, Financing
========================================================================= */
/* ---- Card grid: secondary line under a card title ----
Our Team lists a name, then credentials, then the specialty. `.fvcl-card-meta`
already occupies the slot above the title as an uppercase kicker, so the
credentials need their own line directly beneath the name. */
.fvcl-card-sub{font:600 12px Montserrat,sans-serif;letter-spacing:.06em;color:var(--fvcl-blue);margin:0 0 8px}
/* ---- Card grid: portrait treatment ----
Headshots are cut-out portraits, so they are contained on a soft panel and
anchored to the bottom rather than cropped to fill like a banner image.
Both rules sit at one class higher than the banner rules they replace, so
they win on specificity with no `!important`. */
.fvcl-cgrid--portrait .fvcl-card{padding:0;overflow:hidden;text-align:center}
.fvcl-cgrid--portrait .fvcl-card-media{height:auto;aspect-ratio:4/5;background:linear-gradient(180deg,#EEF3FD,#DCE7FB)}
.fvcl-cgrid--portrait .fvcl-card-media img{object-fit:contain;object-position:center bottom}
.fvcl-cgrid--portrait .fvcl-card-body{padding:20px 18px 24px}
.fvcl-cgrid--portrait .fvcl-card :is(h2,h3,h4){margin-bottom:4px}
.fvcl-cgrid--portrait .fvcl-card p{font-size:12.5px;margin-bottom:12px}
/* ---- Doctor portrait, profile page ----
A separate class from `.fvcl-about-frame` on purpose: an existing rule forces
`object-fit:cover` on that class with `!important`, and a portrait must not be
cropped. A new class avoids answering one `!important` with another. */
.fvcl-portrait-media{position:relative}
.fvcl-portrait-frame{border-radius:var(--fvcl-r-media-lg);overflow:hidden;position:relative;height:430px;background:linear-gradient(180deg,#EEF3FD,#DCE7FB);box-shadow:0 20px 48px rgba(15,27,45,.16)}
.fvcl-portrait-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
/* ---- Chip navigation ---- */
.fvcl-chipnav{display:flex;flex-wrap:wrap;gap:8px}
.fvcl-chip{display:inline-block;background:#fff;border:1px solid rgba(15,27,45,.18);border-radius:999px;padding:8px 15px;font:600 12.5px Montserrat,sans-serif;color:var(--fvcl-navy);transition:background var(--fvcl-dur),border-color var(--fvcl-dur),color var(--fvcl-dur)}
a.fvcl-chip:hover{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-chip--on{background:var(--fvcl-navy);border-color:var(--fvcl-navy);color:#fff}
/* ---- Inline link inside a process step ---- */
.fvcl-step-link{display:inline-block;margin-top:8px;font:700 12.5px Montserrat,sans-serif;color:var(--fvcl-blue);border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:1px}
/* ===================== ELEMENTOR GLOBAL LINK-COLOUR GUARD, PART 5 ==========
`.elementor-kit-7 a{color:#2551B5}` is specificity 0,1,1 and repaints any
FVCL component rendered as an . v1.6.0 added two anchor components, the
chip and the block step link; v1.7.0 adds a third, the inline step link that
the doctor profile design runs through the middle of a sentence. All three
are restated here at 0,2,0 with the doubled-class idiom. They win on
specificity rather than on source order, with no `!important` and no inline
style.
`.fvcl-chip--on` is rendered as a , not an , so the kit never
reaches it; it is restated anyway so the navy chip cannot be repainted if a
later revision turns it back into a link.
========================================================================= */
.fvcl-chip.fvcl-chip{color:var(--fvcl-navy)}
.fvcl-chip.fvcl-chip--on{color:#fff}
a.fvcl-chip.fvcl-chip:hover{color:var(--fvcl-blue)}
.fvcl-step-link.fvcl-step-link{color:var(--fvcl-blue)}
.fvcl-step-a.fvcl-step-a{color:var(--fvcl-blue)}
.fvcl-step-a.fvcl-step-a:hover{color:var(--fvcl-blue-dark)}
/* ---- Responsive ---- */
@media (max-width:1024px){
.fvcl-portrait-frame{height:380px}
}
@media (max-width:767px){
.fvcl-portrait-frame{height:320px}
.fvcl-chipnav{gap:6px}
.fvcl-chip{padding:7px 12px;font-size:12px}
}
/* ---- Monogram ----
Stands in for a headshot that has not been supplied yet. The design already
uses this treatment for the one doctor with no photograph on file, so a card
without a picture reads as a deliberate choice rather than a missing image.
Purely decorative: the name is adjacent in real text, so the monogram is
hidden from assistive technology at the markup level. */
.fvcl-monogram{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:600 40px Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-cgrid--portrait .fvcl-card-media .fvcl-monogram{background:radial-gradient(circle at 50% 42%,#fff 0 34%,transparent 34%)}
.fvcl-monogram--lg{font-size:68px;background:radial-gradient(circle at 50% 42%,#fff 0 26%,transparent 26%)}
/* ===================== DOCTOR PROFILE TEMPLATE ============================
Everything the doctor profile draws differently from the shared kit lives
here as variants, never as edits to the shared rules. Seven more profiles
will be generated from this same template, and the sixteen service detail
pages share `fvcl-steps` and `fvcl-checks` with it, so a shared-rule edit
would have been a site-wide change wearing a one-page disguise.
Batch 2 findings FVCL-QA-010, 012, 014, 015, 016.
========================================================================= */
/* ---- Hero two-column grid (FVCL-QA-015) ----
The design is a real grid: `.9fr 1.4fr` with a 56px gutter, which across the
1188px measure resolves to a 443px portrait beside a 689px text column. The
build was a flex row on the container's default 20px gap, so the gutter was
a third of the drawn width and the portrait ran wide.
The two columns deliberately carry no width setting, so Elementor emits no
width rule for them and the fr tracks are left to do the sizing. `min-width:0`
stops a long unbroken string in either column from forcing a track wider than
its share. */
.fvcl-dr-hero>.e-con-inner.e-con-inner{display:grid;grid-template-columns:.9fr 1.4fr;gap:56px;align-items:start}
.fvcl-dr-hero>.e-con-inner.e-con-inner>.e-con{min-width:0}
/* Vertical rhythm in the text column is carried entirely by each widget's own
bottom margin, matching the design's per-element margins. The container's
default 20px flex gap is removed so it cannot add a second, invisible gap on
top of every one of them. (FVCL-QA-018.) */
.fvcl-dr-body.fvcl-dr-body{gap:0}
.fvcl-dr-bio p{margin:0}
/* ---- Credential badge (FVCL-QA-010) ----
Inset inside the portrait frame, 18px from its left and bottom edge. Distinct
from `.fvcl-about-badge`, which hangs off the left edge of a landscape frame
at a larger type scale. `#80A8F5` on `#14264A` measures 6.3:1, so the small
bold credential line clears AA. */
.fvcl-portrait-badge{position:absolute;left:18px;bottom:18px;background:var(--fvcl-navy);color:var(--fvcl-white);border-radius:12px;padding:12px 16px;max-width:calc(100% - 36px)}
.fvcl-portrait-badge b{display:block;font:700 11px Montserrat,sans-serif;letter-spacing:.1em;color:var(--fvcl-blue-light);margin-bottom:2px}
.fvcl-portrait-badge span{display:block;font:600 13px Montserrat,sans-serif;color:var(--fvcl-white)}
/* ---- Areas of Focus panel (FVCL-QA-012) ----
The outlined variant. Follows `--panel` in source order, so at equal
specificity it overrides the soft service-page treatment only on the elements
that also carry `--outline`. */
.fvcl-checks-wrap--outline{background:var(--fvcl-blue-soft-2);border:1px solid rgba(15,27,45,.08);border-radius:var(--fvcl-r-card);padding:22px 24px}
.fvcl-checks-wrap--outline .fvcl-checks-h{font:700 11px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--fvcl-navy);margin:0 0 14px}
.fvcl-checks-wrap--outline .fvcl-checks{gap:10px 22px}
.fvcl-checks-wrap--outline .fvcl-check b{font:500 13.5px/1.5 Montserrat,sans-serif}
/* ---- Plain step cards (FVCL-QA-014) ----
The doctor profile variant only. The service detail pages keep the settled
circle-numeral treatment, which is why every rule here is scoped to
`.fvcl-steps--plain` and none of them touch `.fvcl-step*` on its own. */
.fvcl-steps--plain{gap:18px}
.fvcl-steps--plain .fvcl-step{background:var(--fvcl-white);border-color:rgba(15,27,45,.06);padding:24px}
.fvcl-steps--plain .fvcl-step-top{display:block;margin-bottom:8px}
.fvcl-steps--plain .fvcl-step-n{display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--fvcl-blue-light);font:600 26px Montserrat,sans-serif}
.fvcl-steps--plain .fvcl-step-d{font:400 13px/1.6 Montserrat,sans-serif}
/* ---- Inline step link (FVCL-QA-016) ----
Colour is restated in the kit guard block above. The underline is a
deliberate, documented addition to the design: link blue `#2551B5` against
body `#4A5A6A` is a 1.02:1 luminance difference, so colour alone would leave
the link indistinguishable in greyscale and to most colour-blind readers. */
.fvcl-step-a{text-decoration:underline;text-decoration-color:var(--fvcl-blue-light);text-decoration-thickness:1px;text-underline-offset:2px}
.fvcl-step-a:hover{text-decoration-color:var(--fvcl-blue-dark)}
/* ---- Breadcrumb + chip band (FVCL-QA-018) ----
On a doctor profile this band is a crumb rail, not a page hero. The section
supplies the 44px top and 22px bottom padding the design draws, so the shared
hero's 54/50 padding is removed here and the crumb list's own 16px bottom
margin becomes the only gap down to the chips. Without this the band stood
214px tall against a drawn 130px. */
.fvcl-dr-band.fvcl-dr-band{gap:0}
.fvcl-dr-band .fvcl-phero{padding:0}
@media (max-width:767px){
/* The portrait stacks above the copy; the fr tracks stop applying. */
.fvcl-dr-hero>.e-con-inner.e-con-inner{grid-template-columns:minmax(0,1fr);gap:32px}
.fvcl-steps--plain{gap:14px}
}
/* =========================================================================
v1.9.0 COMPONENTS: Our Team cards, CTA band variants, button scales
FVCL-QA-019, 020, 021, 022, 023, 032, 035.
Every rule below is either a new class or a restatement at one class higher
than the rule it replaces, so nothing outside Our Team, the centred CTA band
and the converted button rows can move.
========================================================================= */
/* ---- FVCL-QA-019: portrait panels are a fixed height ----
The panel was `aspect-ratio:4/5`, so its height was a function of the column
width and a three-up row grew a 477px panel where the design draws 280px.
The height is now stated outright and the portrait is bottom-aligned inside
it, which is also the box the imported headshots will sit in. */
.fvcl-cgrid--portrait{gap:22px}
.fvcl-cgrid--portrait .fvcl-card-media{
height:var(--fvcl-pt-panel,280px);
aspect-ratio:auto;
display:flex;align-items:flex-end;justify-content:center}
.fvcl-cgrid--portrait .fvcl-card-media img{
width:auto;max-width:100%;
height:var(--fvcl-pt-img,250px);
object-fit:contain;object-position:center bottom}
/* The monogram is a stand-in for a photograph, so it fills the panel rather
than sitting on the baseline the photograph will use. */
.fvcl-cgrid--portrait .fvcl-card-media .fvcl-monogram{align-self:stretch}
/* ---- FVCL-QA-020: portrait cards are left-aligned ----
`text-align:center` was set on the card itself, so the name, credentials,
specialty and the "View profile" link all centred. The design left-aligns
the whole stack. */
.fvcl-cgrid--portrait .fvcl-card{text-align:left;border-radius:18px}
.fvcl-cgrid--portrait .fvcl-card-body{text-align:left}
/* ---- FVCL-QA-021: the two doctor groups are drawn at different scales ----
Surgeons run three to a row at the larger scale; optometrists run four to a
row at the compact scale. The compact block only redefines what changes. */
.fvcl-cgrid--portrait .fvcl-card-body{padding:20px 22px 22px}
.fvcl-cgrid--portrait .fvcl-card :is(h2,h3,h4){font-size:19px;margin-bottom:4px}
.fvcl-cgrid--portrait .fvcl-card p{font-size:13px;margin-bottom:12px}
.fvcl-cgrid--portrait .fvcl-card-cta{font-size:13px}
.fvcl-cgrid--portrait-sm{--fvcl-pt-panel:230px;--fvcl-pt-img:205px}
.fvcl-cgrid--portrait-sm .fvcl-card-body{padding:18px 20px 20px}
.fvcl-cgrid--portrait-sm .fvcl-card :is(h2,h3,h4){font-size:17px}
.fvcl-cgrid--portrait-sm .fvcl-card p{font-size:12.5px}
.fvcl-cgrid--portrait-sm .fvcl-card-cta{font-size:12.5px}
/* ---- FVCL-QA-022: Our Team group headings ----
Scoped to the portrait treatment rather than every card grid, so the service
and homepage grids keep the 28px heading their own designs specify. The
mobile size is restated because this selector outranks the existing
small-screen rule on specificity and would otherwise leak past it. */
.fvcl-cgrid-head--portrait h2{font-size:32px;margin:0 0 6px}
@media (max-width:767px){
.fvcl-cgrid-head--portrait h2{font-size:23px}
}
/* ---- FVCL-QA-023: flat navy CTA band ----
Our Team's design specifies a flat #14264A where Technology's specifies the
gradient, so this is a modifier on top of the navy band rather than a change
to it: any band that does not opt in keeps the gradient. */
.fvcl-ctaband--navy.fvcl-ctaband--flat{background:var(--fvcl-navy)}
.fvcl-ctaband--inset.fvcl-ctaband--flat .fvcl-ctaband-in{background:var(--fvcl-navy)}
/* ---- FVCL-QA-032: centred CTA band typography ----
`:not(.fvcl-ctaband--split)` keeps the compact split band on the service
detail pages at the 20px heading and standard button its own layout sets;
the service detail design has no full band to measure against, so nothing
there is moved. The ghost padding is 1.5px shy of the solid button on each
axis because its border is 1.5px, which lands both boxes on the same size. */
.fvcl-ctaband:not(.fvcl-ctaband--split) h2{font-size:36px}
.fvcl-ctaband--lg:not(.fvcl-ctaband--split) h2{font-size:40px}
.fvcl-ctaband:not(.fvcl-ctaband--split) .fvcl-btn{font-size:15px}
.fvcl-ctaband:not(.fvcl-ctaband--split) .fvcl-btn--primary,
.fvcl-ctaband:not(.fvcl-ctaband--split) .fvcl-btn--navy{padding:15px 28px}
.fvcl-ctaband:not(.fvcl-ctaband--split) .fvcl-btn--ghost{padding:14px 26px;border-width:1px}
@media (max-width:767px){
.fvcl-ctaband:not(.fvcl-ctaband--split) h2,
.fvcl-ctaband--lg:not(.fvcl-ctaband--split) h2{font-size:27px}
}
/* ---- FVCL-QA-035: blue outline button ----
The homepage draws its "View all" actions as a brand-blue outline, which is
a different button from the navy outline the hero uses. Restated at 0,2,0
against the kit's global link colour, the same idiom as the navy outline. */
.fvcl-btn--outline-blue{border-color:var(--fvcl-blue)}
.fvcl-btn--outline-blue:hover{background:var(--fvcl-blue)}
.fvcl-btn.fvcl-btn--outline-blue{color:var(--fvcl-blue)}
.fvcl-btn.fvcl-btn--outline-blue:hover{color:#fff}
/* ---- FVCL-QA-035: button scales ----
The design does not draw one button size. A hero action is larger than a
section action, which is larger than the standard button, and the converted
rows have to land on the size the design draws rather than on one default.
's1' is the shipped size and is deliberately not restated here.
Bordered buttons in a scaled row drop to a 1px border, which is what the
design uses; the 1.5px border stays the default everywhere else. */
.fvcl-btnrow--s2 .fvcl-btn,
.fvcl-btnrow--s3 .fvcl-btn,
.fvcl-btnrow--s4 .fvcl-btn{font-size:15px}
.fvcl-btnrow--s2 .fvcl-btn{font-size:14px}
.fvcl-btnrow--s2 .fvcl-btn--outline,
.fvcl-btnrow--s2 .fvcl-btn--ghost,
.fvcl-btnrow--s3 .fvcl-btn--outline,
.fvcl-btnrow--s3 .fvcl-btn--ghost,
.fvcl-btnrow--s4 .fvcl-btn--outline,
.fvcl-btnrow--s4 .fvcl-btn--ghost{border-width:1px}
.fvcl-btnrow--s2 .fvcl-btn--primary,
.fvcl-btnrow--s2 .fvcl-btn--navy,
.fvcl-btnrow--s2 .fvcl-btn--ghost{padding:13px 24px}
.fvcl-btnrow--s2 .fvcl-btn--outline{padding:11.5px 22.5px}
.fvcl-btnrow--s2 .fvcl-btn--outline-blue{padding:13px 26px}
.fvcl-btnrow--s3 .fvcl-btn--primary,
.fvcl-btnrow--s3 .fvcl-btn--navy{padding:15px 26px}
.fvcl-btnrow--s3 .fvcl-btn--outline,
.fvcl-btnrow--s3 .fvcl-btn--ghost{padding:14px 24px}
.fvcl-btnrow--s3 .fvcl-btn--outline-blue{padding:14px 26px}
.fvcl-btnrow--s4 .fvcl-btn--primary,
.fvcl-btnrow--s4 .fvcl-btn--navy{padding:16px 30px}
.fvcl-btnrow--s4 .fvcl-btn--outline,
.fvcl-btnrow--s4 .fvcl-btn--ghost{padding:15px 28px}
/* ------------------------------------------------------------------
FVCL-QA-025. Two larger card scales. The homepage and services grids
keep the standard metrics; lg is the Resources hub scale and xl the
technology equipment scale, both read off the design package.
------------------------------------------------------------------ */
.fvcl-cgrid--lg,
.fvcl-cgrid--xl{gap:20px}
.fvcl-cgrid--lg .fvcl-card,
.fvcl-cgrid--xl .fvcl-card{border-radius:18px}
.fvcl-cgrid--lg .fvcl-card-ico,
.fvcl-cgrid--xl .fvcl-card-ico{width:50px;height:50px;border-radius:13px;margin-bottom:16px}
.fvcl-cgrid--lg .fvcl-card{padding:28px}
.fvcl-cgrid--lg .fvcl-card :is(h2,h3,h4){font-size:20px}
.fvcl-cgrid--xl .fvcl-card :is(h2,h3,h4){font-size:22px;margin-bottom:8px}
.fvcl-cgrid--xl .fvcl-card p{font-size:14px;line-height:1.7}
.fvcl-cgrid--xl .fvcl-card p:last-child{margin-bottom:0}
/* ------------------------------------------------------------------
FVCL-QA-028. The uncropped image treatment. The radius and the shadow
sit on the wrapper, not the image, because Elementor's frontend sheet
loads after this one and its .elementor img rule resets both at the
same specificity. The doubled class clears the fixed frame without
reaching for !important.
------------------------------------------------------------------ */
.fvcl-frow-media--natural{border-radius:20px;overflow:hidden;box-shadow:0 20px 48px rgba(15,27,45,.16)}
.fvcl-frow-media--natural.fvcl-frow-media--natural img{max-height:none;height:auto;object-fit:contain;border-radius:0}
/* ==========================================================================
v1.12.0 - Contact and Blog
Additive only. Every selector below is a class introduced in this batch, so
nothing already on the site can be repainted by it. Values are read off
FVCL Contact.dc.html, FVCL Blog.dc.html and FVCL Blog Post.dc.html.
========================================================================== */
/* ---- Contact: clinic cards ---------------------------------------------- */
.fvcl-clinics{display:grid;gap:22px;grid-template-columns:repeat(var(--fvcl-cd,2),minmax(0,1fr))}
.fvcl-clinic{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid rgba(15,27,45,.1);border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(15,27,45,.08)}
.fvcl-clinic[id]{scroll-margin-top:120px}
.fvcl-clinic-head{position:relative;overflow:hidden;background:linear-gradient(135deg,#14264A,#1F3A63);padding:26px 30px}
.fvcl-clinic-rings{position:absolute;right:-40px;top:-60px;width:300px;opacity:.14;pointer-events:none}
.fvcl-clinic-head-txt{position:relative}
.fvcl-clinic-kicker{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-blue-light);margin-bottom:8px}
.fvcl-clinic-city{font:600 28px Montserrat,sans-serif;color:#fff;margin:0;letter-spacing:-.01em}
.fvcl-clinic-map{width:100%;height:220px;border:none;display:block}
.fvcl-clinic-body{display:flex;flex-direction:column;gap:20px;flex:1;padding:24px 30px 28px}
.fvcl-clinic-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fvcl-clinic-cell{min-width:0}
.fvcl-clinic-label{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-muted-2);margin-bottom:7px}
.fvcl-clinic-addr{font:400 13px/1.65 Montserrat,sans-serif;color:var(--fvcl-body);overflow-wrap:break-word}
.fvcl-clinic-phone{font:700 15px Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-clinic-toll{font:400 12px Montserrat,sans-serif;color:var(--fvcl-muted-3);margin-top:5px}
.fvcl-clinic-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.fvcl-clinic-btn{padding:11px 18px;font-size:13px}
/* ---- Contact: info strip ------------------------------------------------ */
.fvcl-strip{display:flex;flex-wrap:wrap;gap:10px 30px;background:var(--fvcl-blue-soft-2);border-radius:var(--fvcl-r-card);padding:16px 22px;font:400 13.5px Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-strip-item{min-width:0;overflow-wrap:break-word}
.fvcl-strip-label{font-weight:700;color:var(--fvcl-navy)}
/* ---- Contact: callout panel --------------------------------------------- */
.fvcl-callout{display:flex;gap:14px;align-items:flex-start;background:var(--fvcl-blue-soft);border-radius:14px;padding:18px 22px}
.fvcl-callout-ico{flex:none;line-height:0;margin-top:2px}
.fvcl-callout-ico svg{width:22px;height:22px}
.fvcl-callout-txt{font:500 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
.fvcl-callout-txt strong{color:var(--fvcl-navy)}
.fvcl-callout--navy{background:linear-gradient(135deg,#14264A,#1F3A63)}
.fvcl-callout--navy .fvcl-callout-ico svg{stroke:var(--fvcl-blue-light)}
.fvcl-callout--navy .fvcl-callout-txt{color:var(--fvcl-tech-ink)}
.fvcl-callout--navy .fvcl-callout-txt strong{color:#fff}
/* ---- Forms --------------------------------------------------------------
Contact Form 7 emits deliberately plain markup, so the whole visual
treatment is here. The .fvcl-form wrapper is what scopes it, so no rule
below can reach a form that is not ours.
---------------------------------------------------------------------- */
.fvcl-form--panel{background:#fff;border:1px solid rgba(15,27,45,.1);border-radius:18px;padding:30px;box-shadow:0 16px 40px rgba(15,27,45,.08)}
.fvcl-form .wpcf7-form{display:grid;gap:16px}
.fvcl-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fvcl-form-field{min-width:0}
.fvcl-form label{display:block;font:600 12px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:6px}
.fvcl-form input[type=text],
.fvcl-form input[type=email],
.fvcl-form input[type=tel],
.fvcl-form select,
.fvcl-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(15,27,45,.16);border-radius:9px;padding:12px 14px;font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);background:#fff}
.fvcl-form textarea{resize:vertical;line-height:1.6}
.fvcl-form input[type=text]:focus,
.fvcl-form input[type=email]:focus,
.fvcl-form input[type=tel]:focus,
.fvcl-form select:focus,
.fvcl-form textarea:focus{border-color:var(--fvcl-blue);outline:2px solid rgba(37,81,181,.25);outline-offset:1px}
.fvcl-form .wpcf7-form-control-wrap{display:block}
.fvcl-form input[type=submit],
.fvcl-form button[type=submit]{width:100%;background:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);padding:15px;font:700 15px Montserrat,sans-serif;cursor:pointer;transition:background var(--fvcl-dur)}
.fvcl-form input[type=submit]:hover,
.fvcl-form button[type=submit]:hover{background:var(--fvcl-blue-dark)}
/* --fvcl-muted-3, not --fvcl-placeholder. The design paints this note in
#8B97A3, about 3.0:1 on white, which fails WCAG AA at 11.5px. This is the
same override already settled for the shop's small print and applied at
Dan's direction. */
.fvcl-form-note{font:400 11.5px/1.55 Montserrat,sans-serif;color:var(--fvcl-muted-3);text-align:center}
/* The honeypot. Kept out of the layout, out of the tab order and out of the
accessibility tree, but still a real focusable text input in the DOM, which
is the whole point: a script filling every input trips it. */
.fvcl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Contact Form 7's own status and validation messages, restyled from its
default bordered block to the design's language. */
.fvcl-form .wpcf7-not-valid-tip{font:500 12px Montserrat,sans-serif;color:#B3261E;margin-top:6px}
.fvcl-form input.wpcf7-not-valid,
.fvcl-form select.wpcf7-not-valid,
.fvcl-form textarea.wpcf7-not-valid{border-color:#B3261E}
.fvcl-form .wpcf7-response-output{margin:0;border:none;border-radius:12px;padding:14px 18px;font:500 13px/1.55 Montserrat,sans-serif;background:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
.fvcl-form .wpcf7-form.invalid .wpcf7-response-output,
.fvcl-form .wpcf7-form.unaccepted .wpcf7-response-output,
.fvcl-form .wpcf7-form.spam .wpcf7-response-output,
.fvcl-form .wpcf7-form.failed .wpcf7-response-output{background:#FDECEA;color:#8C1D18}
.fvcl-form .wpcf7-form.sent .wpcf7-response-output{background:#E7F4EC;color:#14532D}
.fvcl-form .wpcf7-spinner{margin:10px auto 0;display:block}
/* The newsletter band's single row. */
.fvcl-form--inline .wpcf7-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.fvcl-form--inline label{display:none}
.fvcl-form--inline .wpcf7-form-control-wrap{width:320px;max-width:100%}
.fvcl-form--inline input[type=email]{border-radius:var(--fvcl-r-btn);padding:13px 16px}
.fvcl-form--inline input[type=submit],
.fvcl-form--inline button[type=submit]{width:auto;flex:none;padding:13px 24px;font-size:14px}
.fvcl-form--inline .wpcf7-response-output{flex-basis:100%;text-align:center}
.fvcl-form--empty{border:1px dashed rgba(15,27,45,.3);border-radius:12px;padding:20px;font:500 13px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
/* ---- Blog: listing ------------------------------------------------------ */
.fvcl-blogfilter{margin-bottom:34px;gap:10px}
.fvcl-blogfilter .fvcl-chip{border-radius:20px;padding:9px 17px;font-size:12.5px}
.fvcl-feat{display:grid;grid-template-columns:1.2fr 1fr;gap:0;background:var(--fvcl-navy);border-radius:20px;overflow:hidden;margin-bottom:44px;min-width:0;transition:box-shadow var(--fvcl-dur)}
.fvcl-feat:hover{box-shadow:0 22px 50px rgba(15,27,45,.25)}
.fvcl-feat-media{height:360px;overflow:hidden;background:linear-gradient(135deg,#1F3A63,#14264A)}
.fvcl-feat-media img{width:100%;height:100%;object-fit:cover;display:block}
.fvcl-feat-ph{display:block;width:100%;height:100%}
.fvcl-feat-body{display:flex;flex-direction:column;justify-content:center;padding:38px 40px;min-width:0}
.fvcl-feat-meta{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-blue-light);margin-bottom:12px}
.fvcl-feat-h{font:600 30px/1.2 Montserrat,sans-serif;color:#fff;margin:0 0 12px;letter-spacing:-.01em}
.fvcl-feat-body p{font:400 14px/1.7 Montserrat,sans-serif;color:var(--fvcl-tech-ink);margin:0 0 18px}
.fvcl-feat-cta{align-self:flex-start;font:700 13px Montserrat,sans-serif;color:#fff;border-bottom:2px solid var(--fvcl-blue-light);padding-bottom:2px}
.fvcl-bloggrid{gap:22px}
.fvcl-blogcard{padding:0;overflow:hidden}
.fvcl-blogcard .fvcl-card-media{height:180px;background:linear-gradient(135deg,#EEF3FD,#DCE7FB)}
.fvcl-blogcard .fvcl-card-media img{width:100%;height:180px;object-fit:cover;display:block}
.fvcl-card-media--ph{display:flex;align-items:center;justify-content:center}
.fvcl-blogcard .fvcl-card-body{padding:20px}
.fvcl-blogcard-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.fvcl-blogcard-tag{font:700 10px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--fvcl-blue)}
/* --fvcl-muted-3, not --fvcl-placeholder. #8B97A3 is about 3.0:1 on white,
which fails WCAG AA at 11px. Same override already settled for .fvcl-form-note
above and applied at Dan's direction. */
.fvcl-blogcard-date{font:500 11px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
.fvcl-blogcard :is(h2,h3,h4){font:600 17px/1.35 Montserrat,sans-serif;margin:0 0 8px}
.fvcl-blogcard p{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin:0}
.fvcl-blog-empty{font:400 14px Montserrat,sans-serif;color:var(--fvcl-muted-3);margin:0}
/* ---- Blog: single article ----------------------------------------------- */
.fvcl-artphero{padding-bottom:0}
.fvcl-byline{display:flex;align-items:center;gap:12px;margin-top:18px}
.fvcl-byline-av{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--fvcl-navy);color:#fff;font:700 13px Montserrat,sans-serif}
.fvcl-byline-txt{font:500 13px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
.fvcl-byline-sep{margin:0 7px;color:var(--fvcl-muted)}
.fvcl-artwrap{max-width:820px;margin:0 auto;padding:0 26px}
.fvcl-arthero{margin:-30px 0 34px;border-radius:var(--fvcl-r-media-lg);overflow:hidden;box-shadow:0 20px 48px rgba(15,27,45,.16)}
.fvcl-arthero img{width:100%;height:auto;display:block}
.fvcl-artbody{padding-bottom:20px}
.fvcl-artbody p{font:400 17px/1.85 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 22px}
.fvcl-artbody :is(h2,h3){font:600 26px Montserrat,sans-serif;color:var(--fvcl-navy);margin:34px 0 12px;letter-spacing:-.01em}
.fvcl-artbody h3{font-size:21px}
.fvcl-artbody ul,
.fvcl-artbody ol{font:400 17px/1.85 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 22px;padding-left:22px}
.fvcl-artbody li{margin-bottom:8px}
.fvcl-artbody img{max-width:100%;height:auto;border-radius:var(--fvcl-r-media);display:block}
.fvcl-artbody blockquote{margin:0 0 22px;padding:0 0 0 20px;border-left:3px solid var(--fvcl-blue-light);font:500 17px/1.7 Montserrat,sans-serif;color:var(--fvcl-navy)}
/* The design's pull-out inside an article. Authored in the post body, so it
stays editable in the editor rather than being locked into this template. */
.fvcl-key{background:var(--fvcl-blue-soft);border-radius:var(--fvcl-r-card);padding:26px 30px;margin:0 0 22px}
.fvcl-key-label{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-blue);margin-bottom:8px}
.fvcl-key-txt{font:600 18px/1.55 Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-artbody .fvcl-key p{font:600 18px/1.55 Montserrat,sans-serif;color:var(--fvcl-navy);margin:0}
.fvcl-artafter{margin-top:46px}
/* ===================== ANCHOR-COLOUR GUARD, PART 3 ========================
Same reasoning as the two blocks above. `.elementor-kit-7 a{color:#2551B5}`
is 0,1,1 and would repaint every anchor-based component added in this batch,
so each is restated at 0,2,0 through the doubled-class idiom. No
!important and no inline styles.
========================================================================= */
.fvcl-clinic-phone.fvcl-clinic-phone a{color:var(--fvcl-blue)}
.fvcl-clinic-phone.fvcl-clinic-phone a:hover{color:var(--fvcl-blue-dark)}
.fvcl-btn.fvcl-clinic-btn{color:#fff}
.fvcl-strip-link.fvcl-strip-link{color:var(--fvcl-blue);font-weight:600;border-bottom:1px solid rgba(37,81,181,.35)}
.fvcl-strip-link.fvcl-strip-link:hover{color:var(--fvcl-navy);border-bottom-color:var(--fvcl-navy)}
.fvcl-callout-txt.fvcl-callout-txt a{color:var(--fvcl-blue);font-weight:700}
.fvcl-callout--navy .fvcl-callout-txt.fvcl-callout-txt a{color:var(--fvcl-blue-light)}
.fvcl-feat.fvcl-feat{color:#fff}
.fvcl-feat-h.fvcl-feat-h{color:#fff}
.fvcl-feat-cta.fvcl-feat-cta{color:#fff}
.fvcl-blogcard.fvcl-blogcard{color:inherit}
.fvcl-blogcard.fvcl-blogcard :is(h2,h3,h4){color:var(--fvcl-navy)}
.fvcl-blogcard.fvcl-blogcard:hover :is(h2,h3,h4){color:var(--fvcl-blue)}
.fvcl-artbody.fvcl-artbody a{color:var(--fvcl-blue);font-weight:600}
.fvcl-byline-txt.fvcl-byline-txt a{color:var(--fvcl-muted-3)}
/* ---- Responsive ---------------------------------------------------------
The column counts come from the widget's own custom properties, exactly as
the settled grids do, so these queries only handle what a column count
cannot express.
---------------------------------------------------------------------- */
@media (max-width:1024px){
.fvcl-clinics{grid-template-columns:repeat(var(--fvcl-ct,1),minmax(0,1fr))}
.fvcl-bloggrid{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
.fvcl-feat{grid-template-columns:1fr}
.fvcl-feat-media{height:260px}
.fvcl-feat-body{padding:30px 30px 34px}
.fvcl-feat-h{font-size:26px}
}
@media (max-width:767px){
.fvcl-clinics{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:18px}
.fvcl-bloggrid{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:18px}
.fvcl-clinic-head{padding:22px}
.fvcl-clinic-city{font-size:24px}
.fvcl-clinic-body{padding:20px 22px 24px}
.fvcl-clinic-grid{grid-template-columns:1fr;gap:16px}
.fvcl-clinic-btns .fvcl-btn{flex:1 1 auto;justify-content:center}
.fvcl-strip{gap:10px 20px;padding:16px 18px;font-size:13px}
.fvcl-form--panel{padding:22px}
.fvcl-form-row{grid-template-columns:1fr}
.fvcl-form--inline .wpcf7-form{flex-direction:column;align-items:stretch}
.fvcl-form--inline .wpcf7-form-control-wrap{width:100%}
.fvcl-form--inline input[type=submit],
.fvcl-form--inline button[type=submit]{width:100%}
.fvcl-feat{border-radius:16px;margin-bottom:32px}
.fvcl-feat-media{height:200px}
.fvcl-feat-body{padding:24px 22px 26px}
.fvcl-feat-h{font-size:22px}
.fvcl-artwrap{padding:0 18px}
.fvcl-arthero{margin:-20px 0 26px}
.fvcl-artbody p,
.fvcl-artbody ul,
.fvcl-artbody ol{font-size:15.5px;line-height:1.8}
.fvcl-artbody :is(h2,h3){font-size:22px;margin-top:28px}
.fvcl-key{padding:20px 22px}
.fvcl-artbody .fvcl-key p,
.fvcl-key-txt{font-size:16px}
.fvcl-byline{gap:10px}
.fvcl-byline-txt{font-size:12px}
}
/* The Contact page's two-column band. The grid lives on .e-con-inner, which is
the element Elementor puts the boxed container's children in, and the class
is doubled so it outranks the boxed-width rule above without !important. */
.fvcl-contact-row>.e-con-inner.e-con-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.fvcl-contact-row>.e-con-inner.e-con-inner>.e-con{min-width:0}
@media (max-width:1024px){
.fvcl-contact-row>.e-con-inner.e-con-inner{grid-template-columns:minmax(0,1fr);gap:34px}
}
/* The newsletter band's narrow centred measure, from FVCL Blog.dc.html. */
.fvcl-news-band>.e-con-inner.e-con-inner{max-width:760px}
/* ===================== v1.13.0 SHOP COMPONENTS =============================
The Shop page and the product pages, from FVCL Shop.dc.html and
FVCL Product.dc.html. Appended rather than woven in: every selector below is
new, so no page built before this batch changes.
One deliberate departure from the design source. The design paints the
currency suffix and the small print under the buy button in #8b97a3, which
is about 3.0:1 on white and fails WCAG AA for text that size. The site
already carries --fvcl-muted-3 (#5F6C7A, about 5.1:1) for exactly this
situation, introduced when the same colour was met on earlier pages, so the
shop follows that settled decision rather than reopening it.
========================================================================= */
/* ---- Catalogue grid ---- */
.fvcl-pgrid-count{font:600 13px Montserrat,sans-serif;color:var(--fvcl-body);margin-bottom:22px}
.fvcl-pgrid{display:grid;gap:22px;grid-template-columns:repeat(var(--fvcl-cd,3),minmax(0,1fr))}
.fvcl-pgrid--compact{gap:18px}
.fvcl-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:18px;overflow:hidden;min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fvcl-pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,27,45,.12);border-color:rgba(37,81,181,.3)}
.fvcl-pcard-media{display:block;height:300px;overflow:hidden;background:#fff;padding:16px;box-sizing:border-box}
.fvcl-pcard-media.fvcl-pcard-media img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block}
.fvcl-pcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;border-top:1px solid rgba(15,27,45,.06)}
.fvcl-pcard-name{font:600 17px/1.3 Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 7px}
.fvcl-pcard-desc{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 16px;overflow-wrap:break-word}
.fvcl-pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fvcl-pcard-price{font:600 20px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-pcard-price span{font:500 11px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
/* Compact: the related-products strip at the foot of a product page. */
.fvcl-pgrid--compact .fvcl-pcard{border-radius:var(--fvcl-r-card)}
.fvcl-pgrid--compact .fvcl-pcard-media{height:190px;padding:12px}
.fvcl-pgrid--compact .fvcl-pcard-body{padding:16px 18px 18px}
.fvcl-pgrid--compact .fvcl-pcard-name{font:600 14.5px/1.35 Montserrat,sans-serif;margin:0 0 6px}
.fvcl-pgrid--compact .fvcl-pcard-price{font:600 15px Montserrat,sans-serif}
/* ---- Add to cart ----
A real button element, not a link: it performs an action on this page and
goes nowhere, so it must be a button for a keyboard and a screen reader
alike. That is also why the catalogue card is not wrapped in one anchor. */
.fvcl-addbtn{background:var(--fvcl-blue);color:#fff;border:none;border-radius:9px;padding:11px 18px;font:700 13px Montserrat,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s ease}
.fvcl-addbtn:hover{background:var(--fvcl-blue-dark)}
.fvcl-addbtn.is-added{background:var(--fvcl-navy)}
.fvcl-addbtn:focus-visible{outline:2px solid var(--fvcl-navy);outline-offset:2px}
.fvcl-addbtn--lg{border-radius:var(--fvcl-r-btn);padding:15px 30px;font-size:15px;box-shadow:0 10px 26px rgba(37,81,181,.28)}
.fvcl-addbtn--lg.is-added{box-shadow:0 10px 26px rgba(20,38,74,.28)}
/* ---- Product detail ---- */
/* The product design puts 36px between the trail and the photograph, where
the page hero puts 16px. */
.fvcl-crumbs--bare{margin-bottom:36px}
.fvcl-product{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:start}
.fvcl-product-media{background:#fff;border:1px solid rgba(15,27,45,.08);border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(15,27,45,.1);min-width:0}
.fvcl-product-media img{width:100%;height:auto;display:block}
.fvcl-product-buy{min-width:0}
.fvcl-product-eyebrow{font:700 11px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fvcl-blue);margin-bottom:12px}
.fvcl-product-h{font:600 38px/1.12 Montserrat,sans-serif;letter-spacing:-.01em;color:var(--fvcl-navy);margin:0 0 12px}
.fvcl-product-price{font:600 28px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:18px}
.fvcl-product-price span{font:500 13px Montserrat,sans-serif;color:var(--fvcl-muted-3)}
.fvcl-product-sum{font:400 15px/1.75 Montserrat,sans-serif;color:var(--fvcl-body);margin:0 0 26px}
.fvcl-product-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.fvcl-qty{display:inline-flex;align-items:center;border:1px solid rgba(15,27,45,.16);border-radius:var(--fvcl-r-btn);overflow:hidden}
.fvcl-qty-btn{width:42px;height:48px;border:none;background:var(--fvcl-blue-soft-2);font:700 17px Montserrat,sans-serif;color:var(--fvcl-navy);cursor:pointer}
.fvcl-qty-btn:hover{background:var(--fvcl-blue-soft)}
.fvcl-qty-btn:disabled{cursor:default;color:var(--fvcl-muted-3)}
.fvcl-qty-btn:focus-visible{outline:2px solid var(--fvcl-navy);outline-offset:-2px}
.fvcl-qty-val{width:48px;text-align:center;font:700 15px Montserrat,sans-serif;color:var(--fvcl-navy)}
.fvcl-product-note{font:400 12.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-muted-3);margin-bottom:22px}
.fvcl-product-trust{background:var(--fvcl-blue-soft);border-radius:14px;padding:18px 22px;display:flex;gap:14px;align-items:flex-start}
.fvcl-product-trust-ico{flex:none;margin-top:2px;display:flex}
.fvcl-product-trust-txt{font:500 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
/* ---- Prose panel ---- */
.fvcl-prose--frame{border:1px solid rgba(15,27,45,.1);border-radius:18px;padding:30px 34px}
.fvcl-prose-h{font:600 24px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 14px}
.fvcl-prose-lead{font:500 14.5px/1.6 Montserrat,sans-serif;color:var(--fvcl-blue);margin:0 0 14px}
.fvcl-prose-p{font:400 15px/1.8 Montserrat,sans-serif;color:var(--fvcl-body);margin:0;overflow-wrap:break-word}
.fvcl-prose-p+.fvcl-prose-p{margin-top:14px}
.fvcl-prose-p--foot{line-height:1.75}
.fvcl-prose-label{font:700 15px Montserrat,sans-serif;color:var(--fvcl-navy);margin:22px 0 10px}
.fvcl-prose-label--foot{margin-bottom:6px}
.fvcl-prose-list{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:9px}
.fvcl-prose-list li{font:400 15px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
/* ---- Icon points ---- */
.fvcl-ipoints{display:grid;gap:22px;grid-template-columns:repeat(var(--fvcl-cd,3),minmax(0,1fr))}
.fvcl-ipoint{display:flex;gap:14px;align-items:flex-start;min-width:0}
.fvcl-ipoint-ico{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.fvcl-ipoint-h{font:600 15px Montserrat,sans-serif;color:var(--fvcl-navy);margin-bottom:3px}
.fvcl-ipoint-d{font:400 13px/1.6 Montserrat,sans-serif;color:var(--fvcl-body)}
/* ===================== ANCHOR-COLOUR GUARD, PART 4 ========================
Same reasoning as the four blocks above. The kit rule
`.elementor-kit-7 a{color:#2551B5}` is specificity 0,1,1 and repaints any
FVCL component rendered as an anchor. v1.13.0 adds three: the compact
product card, the product-name link on a catalogue card, and the photograph
link beside it. Each is restated at 0,2,0 through the doubled-class idiom,
along with the two inline links the product page runs inside its small print
and its reassurance panel. No !important and no inline styles.
========================================================================= */
a.fvcl-pcard.fvcl-pcard{color:inherit}
a.fvcl-pcard-media.fvcl-pcard-media{color:inherit}
.fvcl-pcard-name.fvcl-pcard-name{color:var(--fvcl-navy)}
.fvcl-pcard-link.fvcl-pcard-link{color:var(--fvcl-navy)}
.fvcl-pcard-link.fvcl-pcard-link:hover{color:var(--fvcl-blue)}
.fvcl-product-note.fvcl-product-note a{color:var(--fvcl-blue);font-weight:600}
.fvcl-product-note.fvcl-product-note a:hover{color:var(--fvcl-blue-dark)}
.fvcl-product-trust-txt.fvcl-product-trust-txt a{color:var(--fvcl-blue);font-weight:700}
.fvcl-product-trust-txt.fvcl-product-trust-txt a:hover{color:var(--fvcl-blue-dark)}
/* ---- Responsive ----
The column counts come from each widget's own custom properties, exactly as
the settled grids do, so these queries only carry what a column count cannot
express. The design package is a 1280px mockup and ships no breakpoints of
its own, so everything below is this build's work.
---------------------------------------------------------------------- */
@media (max-width:1024px){
.fvcl-pgrid{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
.fvcl-ipoints{grid-template-columns:repeat(var(--fvcl-ct,2),minmax(0,1fr))}
.fvcl-product{grid-template-columns:minmax(0,1fr);gap:32px}
.fvcl-product-media{max-width:520px}
.fvcl-product-h{font-size:32px}
}
@media (max-width:767px){
.fvcl-pgrid{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:18px}
.fvcl-pgrid--compact{gap:14px}
.fvcl-ipoints{grid-template-columns:repeat(var(--fvcl-cm,1),minmax(0,1fr));gap:18px}
.fvcl-pcard-media{height:240px;padding:14px}
.fvcl-pgrid--compact .fvcl-pcard-media{height:170px;padding:10px}
.fvcl-pcard-body{padding:18px 18px 20px}
.fvcl-product-h{font-size:27px}
.fvcl-product-price{font-size:24px}
.fvcl-product-actions .fvcl-addbtn--lg{flex:1 1 auto}
.fvcl-product-trust{padding:16px 18px}
.fvcl-prose--frame{padding:22px 20px}
.fvcl-prose-h{font-size:21px}
}
/* ===================== BLOG PAGINATION (v1.14.0) =========================
Real links, one page per URL, so a listing page can be bookmarked, shared,
opened in a new tab and reached with JavaScript switched off. The page number
travels as `bpage` because `paged` and `page` are WordPress's own query vars
and would move the main query underneath a static page.
The pills are deliberately the chip system's shape rather than a new one:
the category filter sits directly above this row on the same page, and two
different pill treatments stacked on each other would read as two different
controls. Every target is 44px in both directions.
====================================================================== */
.fvcl-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:38px}
.fvcl-pager-link,.fvcl-pager-cur,.fvcl-pager-gap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;font:700 13px Montserrat,sans-serif}
.fvcl-pager-link{background:#fff;border:1px solid rgba(15,27,45,.18);color:var(--fvcl-navy);transition:background var(--fvcl-dur),border-color var(--fvcl-dur),color var(--fvcl-dur)}
.fvcl-pager-link:hover{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-pager-cur{background:var(--fvcl-navy);border:1px solid var(--fvcl-navy);color:#fff}
.fvcl-pager-gap{min-width:26px;padding:0;color:var(--fvcl-muted-3)}
.fvcl-pager-edge{padding:0 18px}
/* ---- Compact teaser variant of the blog grid ----
The homepage's three article cards were fixed content until v1.14.0 and are
now the same WP_Query as the listing. These four declarations restore the
settled .fvcl-card--media metrics exactly (18px grid gap, 1.3 title leading,
1.55 body leading, 8px under the meta line), because the listing's own card
runs slightly looser and the homepage design was signed off on the tighter
one. Everything else is already shared. */
.fvcl-bloggrid--teaser{gap:18px}
.fvcl-bloggrid--teaser .fvcl-blogcard :is(h2,h3,h4){line-height:1.3}
.fvcl-bloggrid--teaser .fvcl-blogcard p{line-height:1.55}
.fvcl-bloggrid--teaser .fvcl-blogcard-meta{margin-bottom:8px}
/* ===================== ANCHOR-COLOUR GUARD, PART 5 ========================
Same reasoning as every guard block above. `.elementor-kit-7 a{color:#2551B5}`
is specificity 0,1,1 and repaints any FVCL component rendered as an anchor.
v1.14.0 adds one: the pagination link. Restated at 0,2,0 with the
doubled-class idiom, so it wins on specificity rather than on source order,
with no !important and no inline style.
The Reading Comfort control adds no anchor at all — every one of its
controls is a button element — so it needs nothing here.
========================================================================= */
.fvcl-pager-link.fvcl-pager-link{color:var(--fvcl-navy)}
.fvcl-pager-link.fvcl-pager-link:hover{color:var(--fvcl-blue)}
/* ========================================================================
READING COMFORT (v1.14.0)
A floating reader-preference control, present on every page as site chrome.
Three preferences: text size, high contrast, reduced motion. All three are
held in localStorage and applied in the document head before the first
paint, so they survive navigation and never flash.
Layout notes:
- The container is fixed, so it contributes nothing to document flow and
cannot widen the page. The panel is capped against the viewport so it
cannot do so either at 375px.
- The panel precedes the pill in source order because it opens upward; that
also means tabbing out of the pill lands inside the panel it just opened.
- Every interactive target is at least 44px in both directions.
===================================================================== */
.fvcl-comfort{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* ---- The pill ----
Hidden until the reader has scrolled, per the design, but hidden with
opacity and pointer-events rather than display or visibility. A control that
is display:none cannot be focused, and a keyboard reader who has not
scrolled would then have no way to reach the accessibility control at all.
This way it stays in the tab order the whole time and paints itself back in
the moment it receives focus. */
.fvcl-comfort-pill{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px 0 16px;border:1px solid var(--fvcl-navy);border-radius:999px;background:var(--fvcl-navy);color:#fff;font:700 13.5px Montserrat,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(15,27,45,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity var(--fvcl-dur) var(--fvcl-ease),transform var(--fvcl-dur) var(--fvcl-ease),background var(--fvcl-dur),border-color var(--fvcl-dur)}
.fvcl-comfort.is-vis .fvcl-comfort-pill,.fvcl-comfort-pill:focus{opacity:1;transform:none;pointer-events:auto}
.fvcl-comfort-pill:hover{background:var(--fvcl-blue);border-color:var(--fvcl-blue)}
.fvcl-comfort-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}
.fvcl-comfort-pill-txt{white-space:nowrap}
/* ---- The panel ---- */
.fvcl-comfort-panel{width:300px;max-width:calc(100vw - 40px);background:#fff;border:1px solid rgba(15,27,45,.1);border-radius:var(--fvcl-r-card);box-shadow:0 22px 54px rgba(15,27,45,.22);padding:20px}
.fvcl-comfort-panel[hidden]{display:none}
.fvcl-comfort-title{font:700 11px Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--fvcl-navy);margin:0 0 6px}
.fvcl-comfort-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;min-height:56px}
.fvcl-comfort-row+.fvcl-comfort-row{border-top:1px solid rgba(15,27,45,.08)}
.fvcl-comfort-label{font:600 13px Montserrat,sans-serif;color:var(--fvcl-navy);min-width:0}
.fvcl-comfort-dot{color:var(--fvcl-muted-2);margin:0 3px}
.fvcl-comfort-val{font:700 13px Montserrat,sans-serif;color:var(--fvcl-blue)}
.fvcl-comfort-steps{display:flex;gap:8px;flex:none}
.fvcl-comfort-step{width:44px;height:44px;border:1px solid transparent;border-radius:10px;background:var(--fvcl-blue-soft);color:var(--fvcl-navy);font:700 15px Montserrat,sans-serif;cursor:pointer;transition:background var(--fvcl-dur),color var(--fvcl-dur)}
.fvcl-comfort-step:hover{background:var(--fvcl-blue);color:#fff}
.fvcl-comfort-step[disabled]{opacity:.5;cursor:default}
.fvcl-comfort-step[disabled]:hover{background:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
.fvcl-comfort-toggle{min-width:70px;height:44px;padding:0 18px;border:1px solid rgba(15,27,45,.2);border-radius:999px;background:#fff;color:var(--fvcl-muted-3);font:700 12px Montserrat,sans-serif;cursor:pointer;flex:none;transition:background var(--fvcl-dur),color var(--fvcl-dur),border-color var(--fvcl-dur)}
.fvcl-comfort-toggle:hover{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-comfort-toggle[aria-pressed="true"]{background:var(--fvcl-navy);border-color:var(--fvcl-navy);color:#fff}
.fvcl-comfort-toggle[aria-pressed="true"]:hover{background:var(--fvcl-blue);border-color:var(--fvcl-blue);color:#fff}
.fvcl-comfort-reset{width:100%;min-height:44px;margin-top:14px;border:1px solid rgba(15,27,45,.16);border-radius:10px;background:#fff;color:var(--fvcl-navy);font:700 12.5px Montserrat,sans-serif;cursor:pointer;transition:border-color var(--fvcl-dur),color var(--fvcl-dur)}
.fvcl-comfort-reset:hover{border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
/* ---- Focus ----
An accessibility control that cannot be seen while it is focused would be
the one component on the site where a missing focus ring actually matters,
so both rings are stated explicitly rather than left to the UA default. */
.fvcl-comfort button:focus-visible{outline:3px solid var(--fvcl-blue);outline-offset:2px}
.fvcl-comfort-pill:focus-visible{outline:3px solid var(--fvcl-blue-light);outline-offset:3px}
@media (max-width:767px){
.fvcl-comfort{right:14px;bottom:14px;gap:10px}
.fvcl-comfort-panel{width:288px;max-width:calc(100vw - 28px);padding:18px}
.fvcl-comfort-pill{min-height:46px;padding:0 18px 0 15px;font-size:13px}
}
/* ========================= HIGH CONTRAST =========================
A root class, so one attribute change repaints the whole site. Almost all of
it is done by restating the ink tokens: every FVCL component already reads
its colour from these, so the palette moves as one piece and no component
rule has to be duplicated.
`html.fvcl-hc` is specificity 0,1,1 and `:root` is 0,1,0, so this wins
deterministically rather than by sitting later in the file.
Two tokens are deliberately NOT touched. `--fvcl-blue-light` is already
6.3:1 on navy and also draws the link underlines on white, where lightening
it would weaken the very affordance high contrast exists to strengthen.
`--fvcl-blue-soft` is a background tint; darkening it would fight the darker
ink now sitting on it.
Text that Elementor colours itself, on its own heading and text widgets, is
not reachable from here: those values are written per element into the
generated page stylesheet. Those are remapped by value in fvcl-comfort.php,
using the same head-time pass that scales the type.
============================================================== */
html.fvcl-hc{
--fvcl-navy:#0B1729;
--fvcl-navy-grad:#16294A;
--fvcl-blue:#123A8C;
--fvcl-blue-dark:#0C2A66;
--fvcl-body:#1F2B38;
--fvcl-muted:#455360;
--fvcl-muted-2:#3E4B57;
--fvcl-muted-3:#33404C;
--fvcl-placeholder:#3E4B57;
--fvcl-topbar-ink:#EDF2F5;
--fvcl-quote-ink:#FFFFFF;
--fvcl-tech-ink:#DCE4EC;
--fvcl-on-blue-ink:#F0F8FA;
}
/* Dark surfaces.
Four of the ink tokens above are read by components that sit on navy as well
as by components that sit on white. Darkening them is right for the white
ones and catastrophic for the navy ones, so every navy-backed use is named
here and sent the other way. Each selector is written one level deeper than
the rule it overrides, so it wins on specificity with no !important. */
html.fvcl-hc .fvcl-footer,
html.fvcl-hc .fvcl-footer a,
html.fvcl-hc .fvcl-footer .fvcl-footer-in a,
html.fvcl-hc .fvcl-hero-badge span,
html.fvcl-hc .fvcl-about-badge span,
html.fvcl-hc .fvcl-tcard--dark p,
html.fvcl-hc .fvcl-tcard--dark .fvcl-tcard-meta span,
html.fvcl-hc .fvcl-card--glass.fvcl-card--glass p,
html.fvcl-hc .fvcl-card--navy.fvcl-card--navy p,
html.fvcl-hc .fvcl-stats--dark .fvcl-stat span,
html.fvcl-hc .fvcl-phero--navy .fvcl-crumbs,
html.fvcl-hc .fvcl-phero--navy .fvcl-crumbs.fvcl-crumbs a,
html.fvcl-hc .fvcl-phero--navy .fvcl-phero-intro,
html.fvcl-hc .fvcl-note--dark .fvcl-note-in,
html.fvcl-hc .fvcl-footer .fvcl-copy,
html.fvcl-hc .fvcl-ctaband--navy p{color:#DCE4EC}
/* Stronger edges. The glass and navy card variants carry a light border on a
dark panel and are excluded from the dark-border rule by name, then given
their own stronger light border. */
html.fvcl-hc .fvcl-card:not(.fvcl-card--glass):not(.fvcl-card--navy):not(.fvcl-card--brand),
html.fvcl-hc .fvcl-tcard:not(.fvcl-tcard--dark),
html.fvcl-hc .fvcl-loc,
html.fvcl-hc .fvcl-step,
html.fvcl-hc .fvcl-pcard,
html.fvcl-hc .fvcl-chip,
html.fvcl-hc .fvcl-pager-link,
html.fvcl-hc .fvcl-comfort-panel{border-color:rgba(11,23,41,.45)}
html.fvcl-hc .fvcl-card--glass,
html.fvcl-hc .fvcl-tcard--dark{border-color:rgba(255,255,255,.42)}
html.fvcl-hc .fvcl-header{border-bottom-color:rgba(11,23,41,.3)}
html.fvcl-hc .fvcl-form input,
html.fvcl-hc .fvcl-form select,
html.fvcl-hc .fvcl-form textarea{border-color:rgba(11,23,41,.5)}
/* ========================= REDUCED MOTION =========================
The reveal system already honours prefers-reduced-motion; the toggle forces
the identical path, in JavaScript by never arming an element and here by
flattening anything that is already armed when the toggle is switched on
mid-page.
The blanket transition and animation kill is the one place this stylesheet
uses !important outside the existing prefers-reduced-motion block it mirrors.
A reader who has asked for no motion has asked unconditionally, and a
component rule further down the cascade must not be able to reinstate it.
============================================================== */
html.fvcl-rm .fvcl-reveal.is-armed{opacity:1;transform:none;transition:none}
html.fvcl-rm *,html.fvcl-rm *::before,html.fvcl-rm *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
/* ==========================================================================
FVCL-QA-037: HELLO ELEMENTOR BUTTON RESET GUARD (v1.15.0)
Hello Elementor 3.4.9 ships a magenta button skin in its own reset sheet:
[type=button],[type=submit],button { border:1px solid #c36; color:#c36 }
[type=button]:focus,[type=button]:hover,
[type=submit]:focus,[type=submit]:hover,
button:focus,button:hover { background-color:#c36; color:#fff }
#c36 is #CC3366. Every FVCL control built as a button element - and every
one of them is a button on purpose, because it performs an action rather
than navigating - inherited that magenta block behind its text on hover and
on focus. The nav's Services and Resources toggles are the visible case: the
design gives them a #2551B5 label and no background at all, and the theme
painted a magenta slab behind them instead.
The theme selectors are specificity 0,2,0 ([type=button]:hover) and 0,1,1
(button:hover), and reset.css loads before this file, so a plain component
rule of 0,2,0 only wins on source order and any 0,1,x rule loses outright.
Each family is therefore restated here with the doubled-class idiom at
0,3,0 or better - no !important, no inline style - and each restates the
hover AND focus appearance the design actually calls for. Focus is included
because reset.css targets :focus, not :focus-visible, so a mouse click alone
was enough to leave a control magenta.
The :focus-visible rings defined earlier in this file are untouched; these
rules set colour only, never outline.
Enumerated deliberately rather than blanket-reset: a blanket button guard
strong enough to beat the theme would also outrank the component rules it
is meant to protect. Any button family added later needs its hover and
focus stated here too.
====================================================================== */
/* ---- Header nav: the reported case ---- */
.fvcl-nav-toggle.fvcl-nav-toggle:hover,
.fvcl-nav-toggle.fvcl-nav-toggle:focus{background-color:transparent;color:var(--fvcl-blue)}
.fvcl-has-drop.is-active>.fvcl-nav-toggle.fvcl-nav-toggle:hover,
.fvcl-has-drop.is-active>.fvcl-nav-toggle.fvcl-nav-toggle:focus{background-color:transparent;color:var(--fvcl-blue)}
/* ---- Header chrome. The burger is a filled navy control from v1.17.0, so its
hover moves navy to blue rather than inverting an outline. Still stated as an
explicit background-color and color at 0,2,0 so the theme's magenta button
reset cannot reach it. ---- */
.fvcl-burger.fvcl-burger:hover,
.fvcl-burger.fvcl-burger:focus{background-color:var(--fvcl-blue);border-color:var(--fvcl-blue);color:#fff}
/* The panel CTA is an anchor inside .fvcl-nav, so the kit's global link colour
reaches it at 0,1,1. Restated at 0,3,0 in both resting and hover states. */
.fvcl-nav .fvcl-nav-cta .fvcl-btn--primary{color:#fff}
.fvcl-nav .fvcl-nav-cta .fvcl-btn--primary:hover,
.fvcl-nav .fvcl-nav-cta .fvcl-btn--primary:focus{color:#fff}
/* ---- Language switcher. The trigger sits on the navy topbar, so its hover
stays inside the translucent-white family rather than moving to blue. ---- */
.fvcl-lang-btn.fvcl-lang-btn:hover,
.fvcl-lang-btn.fvcl-lang-btn:focus{background-color:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
.fvcl-lang-menu.fvcl-lang-menu button:hover,
.fvcl-lang-menu.fvcl-lang-menu button:focus,
.fvcl-lang-menu.fvcl-lang-menu a:hover,
.fvcl-lang-menu.fvcl-lang-menu a:focus{background-color:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
/* ---- Hero carousel controls ---- */
.fvcl-hero-arrow.fvcl-hero-arrow:hover,
.fvcl-hero-arrow.fvcl-hero-arrow:focus{background-color:#fff;color:var(--fvcl-navy)}
.fvcl-hero-dots.fvcl-hero-dots button:hover,
.fvcl-hero-dots.fvcl-hero-dots button:focus{background-color:rgba(255,255,255,.75)}
.fvcl-hero-dots.fvcl-hero-dots button.is-active:hover,
.fvcl-hero-dots.fvcl-hero-dots button.is-active:focus{background-color:#fff}
/* ---- Forms and shop ---- */
.fvcl-news.fvcl-news button:hover,
.fvcl-news.fvcl-news button:focus{background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-form.fvcl-form button[type=submit]:hover,
.fvcl-form.fvcl-form button[type=submit]:focus{background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-addbtn.fvcl-addbtn:hover,
.fvcl-addbtn.fvcl-addbtn:focus{background-color:var(--fvcl-blue-dark);color:#fff}
.fvcl-addbtn.fvcl-addbtn.is-added:hover,
.fvcl-addbtn.fvcl-addbtn.is-added:focus{background-color:var(--fvcl-navy);color:#fff}
/* ---- Reading Comfort. Every control here is a button, so the whole widget
was affected; the pill went magenta the moment it was focused. ---- */
.fvcl-comfort-pill.fvcl-comfort-pill:hover,
.fvcl-comfort-pill.fvcl-comfort-pill:focus{background-color:var(--fvcl-blue);border-color:var(--fvcl-blue);color:#fff}
.fvcl-comfort-step.fvcl-comfort-step:hover,
.fvcl-comfort-step.fvcl-comfort-step:focus{background-color:var(--fvcl-blue);color:#fff}
.fvcl-comfort-step.fvcl-comfort-step[disabled]:hover,
.fvcl-comfort-step.fvcl-comfort-step[disabled]:focus{background-color:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
.fvcl-comfort-toggle.fvcl-comfort-toggle:hover,
.fvcl-comfort-toggle.fvcl-comfort-toggle:focus{background-color:#fff;border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
.fvcl-comfort-toggle.fvcl-comfort-toggle[aria-pressed="true"]:hover,
.fvcl-comfort-toggle.fvcl-comfort-toggle[aria-pressed="true"]:focus{background-color:var(--fvcl-blue);border-color:var(--fvcl-blue);color:#fff}
.fvcl-comfort-reset.fvcl-comfort-reset:hover,
.fvcl-comfort-reset.fvcl-comfort-reset:focus{background-color:#fff;border-color:var(--fvcl-blue);color:var(--fvcl-blue)}
/* ==========================================================================
FVCL-QA-038: LONG-WORD WRAP GUARD (v1.15.0)
Reading Comfort scales type without touching a single width, which is the
whole point: the layout reflows the way it does when a reader raises their
own browser font size. One consequence had not been covered. A heading whose
longest word already nearly fills its column at 100% cannot fit at 140%, and
a word with nowhere to break pushes the document wider than the viewport.
Measured case: the home page h2 "A commitment to clinical & scientific
excellence" is 40px in a 323px column at 375px wide. At 140% it is 56px, the
word runs to 376px, and the document scrolled 27px sideways.
`overflow-wrap:break-word` breaks a word only when it cannot fit on a line
of its own, so this is inert at every size where nothing overflows - it
changes no line break anywhere on the site today. It is stated on the text
elements rather than on a container so it cannot be inherited into a
component that wants a word kept whole.
====================================================================== */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,
.elementor-heading-title,.fvcl-comfort-label{overflow-wrap:break-word}
/* ==========================================================================
BOOK AN APPOINTMENT + CAREERS (v1.16.7)
Two page layouts and one new fvcl-steps treatment, from
FVCL Book Appointment.dc.html and FVCL Careers.dc.html.
Nothing here restyles a shared component. Everything is either a page row
class the generator puts on a container, or scoped inside .fvcl-aside, or a
named `--aside` variant of the steps list. The Contact page, the service
pages and the doctor profiles read none of it.
====================================================================== */
/* The two-column rows. Same construction as .fvcl-contact-row above: the grid
lives on .e-con-inner, which is the element Elementor puts a boxed
container's children in, and the class is doubled so it outranks the
boxed-width rule without !important. */
.fvcl-book-row>.e-con-inner.e-con-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.fvcl-book-row>.e-con-inner.e-con-inner>.e-con{min-width:0}
.fvcl-careers-row>.e-con-inner.e-con-inner{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.fvcl-careers-row>.e-con-inner.e-con-inner>.e-con{min-width:0}
@media (max-width:1024px){
.fvcl-book-row>.e-con-inner.e-con-inner,
.fvcl-careers-row>.e-con-inner.e-con-inner{grid-template-columns:minmax(0,1fr);gap:34px}
}
/* The booking page's aside: three panels, 18px apart. Doubled so it beats
Elementor's own `gap:var(--gap)` on .e-con whichever order the two
stylesheets end up in. */
.fvcl-aside-stack.fvcl-aside-stack{gap:18px}
/* An aside panel. Its background, radius, border and padding are Elementor
container settings, not rules here, so a client can retune the panel in the
editor. Only what Elementor cannot express is stated below. */
.fvcl-aside .fvcl-link.fvcl-link{color:var(--fvcl-blue)}
/* The phone list inside a panel: one link per line, and no strip chrome,
because here the panel is the card. The Contact page's horizontal strip is
untouched: every rule is scoped to .fvcl-aside. */
.fvcl-aside .fvcl-strip{display:grid;gap:8px;background:none;padding:0;border-radius:0}
.fvcl-aside .fvcl-strip-link.fvcl-strip-link{font:600 14px Montserrat,sans-serif;color:var(--fvcl-navy);border-bottom:none}
.fvcl-aside .fvcl-strip-link.fvcl-strip-link:hover{color:var(--fvcl-blue)}
/* The panel drawn on navy. These are the text colours that have to travel
with that background; both are design values (#CDD8DD is --fvcl-topbar-ink,
the same ink the header's dark bar uses). */
.fvcl-aside--navy .fvcl-step-n{background:rgba(255,255,255,.1);color:#fff}
.fvcl-aside--navy .fvcl-step-t{color:#fff}
.fvcl-aside--navy .fvcl-step-d{color:var(--fvcl-topbar-ink)}
/* ---- fvcl-steps, `aside` treatment --------------------------------------
A third card treatment beside `badge` and `plain`, for a numbered list
inside a narrow panel: no card, no rule, a 30px badge to the left of the
text rather than above it. Written as its own variant for the same reason
`--plain` was (FVCL-QA-014): the service pages and the doctor profiles
cannot regress because none of these selectors matches them.
The explicit grid-column values matter. .fvcl-step-top, .fvcl-step-t and
.fvcl-step-d are three siblings, so without them a step whose title is
empty would drop its text under the badge instead of beside it. */
.fvcl-steps--aside{gap:14px}
.fvcl-steps--aside .fvcl-step{background:none;border:none;border-radius:0;padding:0;height:auto;display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;align-items:start}
.fvcl-steps--aside .fvcl-step-top{grid-column:1;grid-row:1;margin:0}
.fvcl-steps--aside .fvcl-step-n{width:30px;height:30px;font:600 13px Montserrat,sans-serif;background:var(--fvcl-blue-soft);color:var(--fvcl-navy)}
.fvcl-steps--aside .fvcl-step-t{grid-column:2;font:600 14px Montserrat,sans-serif;margin:0 0 3px}
.fvcl-steps--aside .fvcl-step-d{grid-column:2;font:400 13.5px/1.6 Montserrat,sans-serif}
.fvcl-steps--aside .fvcl-step-link{grid-column:2}
/* The booking form's one optional field says so in its own label.
--fvcl-muted-3 for the same reason as .fvcl-form-note above. */
.fvcl-form label .fvcl-form-opt{font-weight:400;color:var(--fvcl-muted-3)}
/* ===================== v1.16.8 BATCH 13 COMPONENTS =========================
Cataract Surgery Information, Eye Terminology and Testimonials. Every
selector below is new except the two form-helper colours corrected above, so
no page built before this batch changes.
========================================================================= */
/* ---- Page hero: optional second intro paragraph ---- */
.fvcl-phero-intro + .fvcl-phero-intro{margin-top:12px}
/* ---- Card grid: video panel ----
The cataract education cards. No image file is involved: the panel is a
gradient, the rings motif and the play mark, exactly as drawn, which is why
six cards cost no image requests. */
.fvcl-card-video{height:170px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--fvcl-navy)}
.fvcl-card-video--navy{background:linear-gradient(135deg,#14264A,#1F3A63)}
.fvcl-card-video--brand{background:linear-gradient(135deg,#2551B5,#1B3C86)}
.fvcl-card-video-rings{position:absolute;width:280px;height:auto;opacity:.14;right:-40px;top:-60px;pointer-events:none}
.fvcl-card-video--brand .fvcl-card-video-rings{right:auto;left:-40px;top:auto;bottom:-60px;opacity:.16}
.fvcl-card-play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.fvcl-card-video + .fvcl-card-body{padding:20px 22px}
/* The panel lifts with the card rather than sitting still inside it. */
a.fvcl-card:hover .fvcl-card-play{background:rgba(255,255,255,.24)}
/* Video card carrying a real thumbnail: the image fills the panel and the play mark rides over a scrim so it stays legible on any frame. */
.fvcl-card-video--thumb{display:block;padding:0}
.fvcl-card-video--thumb.fvcl-card-video--thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.fvcl-card-video--thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,45,.10),rgba(15,27,45,.46));pointer-events:none}
.fvcl-card-video--thumb .fvcl-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,27,45,.42);border-color:rgba(255,255,255,.78)}
a.fvcl-card:hover .fvcl-card-video--thumb .fvcl-card-play{background:rgba(37,81,181,.74)}
/* ---- Eye Terminology: glossary layout ----
The design's `.85fr 1.55fr` grid with a 52px gutter and a sticky aside.
Both columns are emitted width-less so these tracks own the sizing. */
/* Doubled classes on purpose. Elementor frontend.min.css loads AFTER this sheet
and carries .e-con.e-flex>.e-con-inner{align-items:var(--align-items)} and
.e-con{position:var(--position)}, both of which tie this block on specificity
and would therefore win on source order. Doubling outranks them without
!important and without setting Elementor own inheriting variables, which would
cascade into nested containers. */
.fvcl-gloss.fvcl-gloss>.e-con-inner.e-con-inner{display:grid;grid-template-columns:.85fr 1.55fr;gap:52px;align-items:start}
.fvcl-gloss.fvcl-gloss>.e-con-inner.e-con-inner>.e-con{min-width:0}
.fvcl-gloss-aside.fvcl-gloss-aside{position:sticky;top:96px}
/* The glossary's own list is the page's whole right column, so it is not held
to the 900px the FAQ blocks use inside a full-width section. */
.fvcl-gloss .fvcl-faq{max-width:none}
@media (max-width:880px){
/* The aside stops leading the list and becomes its introduction. */
.fvcl-gloss.fvcl-gloss>.e-con-inner.e-con-inner{grid-template-columns:minmax(0,1fr);gap:28px}
.fvcl-gloss-aside.fvcl-gloss-aside{position:static;top:auto}
}
/* Language switcher links are real anchors (Polylang). Hold them to the pill design and off the kit link colour. */
.fvcl-lang-menu.fvcl-lang-menu a{color:var(--fvcl-navy);text-decoration:none;box-shadow:none}
.fvcl-lang-menu.fvcl-lang-menu a[aria-current]{background-color:var(--fvcl-blue-soft)}
/* ---- Expandable testimonial cards ----
A repeater row that carries a Full quote keeps the design's trimmed opening
as the card's visible state and gains a Read more control that swaps it for
the whole review. It is a , so both texts sit in the page's own
HTML, the open state is the browser's, and nothing below needs a script.
The swap is done with :has(), which is what lets the trimmed opening stay
outside the as plain text instead of becoming a nine-times-repeated
button label. Where :has() is unsupported an expanded card shows the opening
and the full review together: more than was asked for, never less, and never
text that has quietly gone missing. */
.fvcl-tcard-trim{display:block}
.fvcl-tcard-more{margin-top:12px}
.fvcl-tcard-q--x:has(.fvcl-tcard-more[open]) .fvcl-tcard-trim{display:none}
.fvcl-tcard-q--x:has(.fvcl-tcard-more[open]) .fvcl-tcard-more{margin-top:0}
/* Closed, the control follows the opening it expands. Open, it follows the
review it collapses, so it is ordered after the paragraphs that the markup
puts it in front of. */
.fvcl-tcard-more[open]{display:flex;flex-direction:column}
.fvcl-tcard-more[open] .fvcl-tcard-rm{order:2;margin-top:12px}
.fvcl-tcard-rm{display:inline-flex;align-items:center;gap:7px;width:fit-content;font:600 13.5px Montserrat,sans-serif;color:var(--fvcl-blue);cursor:pointer;list-style:none}
.fvcl-tcard-rm::-webkit-details-marker{display:none}
.fvcl-tcard-rm::marker{content:""}
.fvcl-tcard-rm::after{content:"";flex:none;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.fvcl-tcard-more[open] .fvcl-tcard-rm::after{transform:translateY(1px) rotate(-135deg)}
.fvcl-tcard-rm:hover{color:var(--fvcl-blue-dark);text-decoration:underline;text-underline-offset:3px}
.fvcl-tcard-rm:focus-visible{outline:2px solid var(--fvcl-blue);outline-offset:3px;border-radius:4px}
.fvcl-tcard-more .fvcl-tcard-rm-l{display:none}
.fvcl-tcard-more[open] .fvcl-tcard-rm-t{display:none}
.fvcl-tcard-more[open] .fvcl-tcard-rm-l{display:inline}
/* The expanded review reads in the card's own type, not in the smaller muted
paragraph style .fvcl-tcard p sets for the dark card variant, so it is
written one level deeper to win that. */
.fvcl-tcard .fvcl-tcard-full{font:inherit;color:inherit;margin:0 0 12px}
.fvcl-tcard .fvcl-tcard-full:last-of-type{margin-bottom:0}
/* --fvcl-blue does not read on navy; the light blue that draws links there does. */
.fvcl-tcard--dark .fvcl-tcard-rm{color:var(--fvcl-blue-light)}
.fvcl-tcard--dark .fvcl-tcard-rm:hover{color:#fff}
.fvcl-tcard--dark .fvcl-tcard-rm:focus-visible{outline-color:var(--fvcl-blue-light)}
/* Visually hidden: the part of a control's name only a screen reader needs. */
.fvcl-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ---- Inline video (fvcl-media, video treatment) ----
A poster-and-play facade. The poster is a real attachment in this library
and the YouTube iframe is only created on the click, so a page carrying
three videos costs no third-party request until someone asks for one.
.fvcl-card-play is reused verbatim from the video cards so the two video
treatments on this site are visibly the same object. b18. */
.fvcl-media-video{width:100%}
.fvcl-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--fvcl-r-media-lg);overflow:hidden;background:var(--fvcl-navy);box-shadow:0 20px 48px rgba(15,27,45,.16)}
.fvcl-video-link{position:absolute;inset:0;display:block}
/* Doubled class for the same reason line 643 now carries one: this must
outrank an equal-specificity single-class img rule arriving later from
Elementor, WooCommerce or the theme. */
.fvcl-video-frame.fvcl-video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.fvcl-video-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,45,.10),rgba(15,27,45,.46));pointer-events:none}
.fvcl-video-frame .fvcl-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,27,45,.42);border-color:rgba(255,255,255,.78);z-index:1;transition:background .2s var(--fvcl-ease),transform .2s var(--fvcl-ease)}
.fvcl-video-link:hover .fvcl-card-play{background:rgba(37,81,181,.82);transform:translate(-50%,-50%) scale(1.06)}
.fvcl-video-link:focus-visible{outline:2px solid var(--fvcl-white);outline-offset:-4px}
.fvcl-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.fvcl-video-cap{margin:12px 0 0;font-family:Montserrat,system-ui,sans-serif;font-size:13px;line-height:1.6;color:var(--fvcl-muted-3)}
@media (prefers-reduced-motion:reduce){.fvcl-video-frame .fvcl-card-play{transition:none}}
/* A feature row whose live counterpart had no photograph. Rather than hold an
empty half of the grid open, the media panel collapses and the copy takes the
full width, capped to a readable measure. Three dry eye treatments need this.
b18. */
.fvcl-frow-media:empty{display:none}
.fvcl-frow-media:empty + .fvcl-frow-txt{grid-column:1 / -1;max-width:820px}
/* ===================== CARD IMAGE TREATMENT: PLATE ========================
The Cosmetic Treatments page carries before-and-after photograph pairs and
labelled treatment diagrams. object-fit:cover would crop them, and a crop
removes the comparison the reader came for, or the label that makes the
diagram mean anything.
Specificity note: the base rule .fvcl-card-media.fvcl-card-media img is
0,2,1 and deliberately doubled so nothing shipped by Elementor, WooCommerce
or the theme beats it on source order. Prefixing the grid class takes this
to 0,3,1, so plate wins on specificity and not merely on being later in the
file. b19. */
.fvcl-cgrid--plate .fvcl-card-media{
height:auto;aspect-ratio:4/3;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,#EEF3FD,#DCE7FB)}
.fvcl-cgrid--plate .fvcl-card-media.fvcl-card-media img{
width:auto;height:auto;max-width:100%;max-height:100%;
object-fit:contain;object-position:center}
/* FVCL-B20: clinic email row. Spans the full card grid so address and phone keep their two columns and the email reads as its own line underneath. */
.fvcl-clinic-cell--email{grid-column:1/-1}
.fvcl-clinic-email{font:700 15px Montserrat,sans-serif;color:var(--fvcl-blue);overflow-wrap:anywhere}
.fvcl-clinic-email.fvcl-clinic-email a{color:var(--fvcl-blue)}
.fvcl-clinic-email.fvcl-clinic-email a:hover{color:var(--fvcl-blue-dark)}
/* ---- WPForms and MetForm inside the form panel ---------------------------
The live site keeps its WPForms and MetForm forms, entries and Brevo
connections. These rules give that markup the same treatment as the
Contact Form 7 rules above, scoped to .fvcl-form so nothing outside the
panel is touched. Selectors carry div.wpforms-container-full so they win
over the plugin's own stylesheet without !important.
---------------------------------------------------------------------- */
.fvcl-form div.wpforms-container-full{margin:0}
.fvcl-form div.wpforms-container-full .wpforms-form{display:grid;gap:16px}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field{padding:0;margin:0;clear:none}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-label{display:block;font:600 12px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 6px;padding:0}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-sublabel{font:500 11px Montserrat,sans-serif;color:var(--fvcl-muted-3);margin:4px 0 0}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-description{font:400 12px/1.5 Montserrat,sans-serif;color:var(--fvcl-muted-3);margin:6px 0 0}
.fvcl-form div.wpforms-container-full .wpforms-form input[type=text],
.fvcl-form div.wpforms-container-full .wpforms-form input[type=email],
.fvcl-form div.wpforms-container-full .wpforms-form input[type=tel],
.fvcl-form div.wpforms-container-full .wpforms-form input[type=date],
.fvcl-form div.wpforms-container-full .wpforms-form input[type=number],
.fvcl-form div.wpforms-container-full .wpforms-form input[type=url],
.fvcl-form div.wpforms-container-full .wpforms-form select,
.fvcl-form div.wpforms-container-full .wpforms-form textarea{width:100%;max-width:100%;box-sizing:border-box;height:auto;min-height:0;border:1px solid rgba(15,27,45,.16);border-radius:9px;padding:12px 14px;font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);background:#fff;box-shadow:none;line-height:1.4}
.fvcl-form div.wpforms-container-full .wpforms-form textarea{resize:vertical;line-height:1.6;min-height:110px}
.fvcl-form div.wpforms-container-full .wpforms-form input:focus,
.fvcl-form div.wpforms-container-full .wpforms-form select:focus,
.fvcl-form div.wpforms-container-full .wpforms-form textarea:focus{border-color:var(--fvcl-blue);outline:2px solid rgba(37,81,181,.25);outline-offset:1px;box-shadow:none}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:none;margin:0}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-row-block{width:auto;margin:0;float:none;padding:0}
.fvcl-form div.wpforms-container-full .wpforms-form ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fvcl-form div.wpforms-container-full .wpforms-form ul li{font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0;padding:0}
.fvcl-form div.wpforms-container-full .wpforms-form ul li label{font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0;display:inline}
.fvcl-form div.wpforms-container-full .wpforms-form ul li input[type=radio],
.fvcl-form div.wpforms-container-full .wpforms-form ul li input[type=checkbox]{accent-color:var(--fvcl-blue);width:16px;height:16px;margin:0 8px 0 0;vertical-align:-2px}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-submit-container{padding:0;margin:0}
.fvcl-form div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit{width:100%;height:auto;background:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);padding:15px;font:700 15px Montserrat,sans-serif;cursor:pointer;transition:background var(--fvcl-dur);box-shadow:none;text-shadow:none}
.fvcl-form div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit:hover,
.fvcl-form div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit:focus{background:var(--fvcl-blue-dark);color:#fff}
.fvcl-form div.wpforms-container-full .wpforms-form label.wpforms-error{font:500 12px Montserrat,sans-serif;color:#B3261E;margin:6px 0 0;display:block}
.fvcl-form div.wpforms-container-full .wpforms-form input.wpforms-error,
.fvcl-form div.wpforms-container-full .wpforms-form select.wpforms-error,
.fvcl-form div.wpforms-container-full .wpforms-form textarea.wpforms-error{border-color:#B3261E}
.fvcl-form div.wpforms-container-full .wpforms-confirmation-container-full{margin:0;border:none;border-radius:12px;padding:14px 18px;font:500 13px/1.55 Montserrat,sans-serif;background:#E7F4EC;color:#14532D}
.fvcl-form div.wpforms-container-full .wpforms-error-container{margin:0;border:none;border-radius:12px;padding:14px 18px;font:500 13px/1.55 Montserrat,sans-serif;background:#FDECEA;color:#8C1D18}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-divider h3{font:600 16px Montserrat,sans-serif;color:var(--fvcl-navy);margin:8px 0 0;padding:0}
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader{border:1px dashed rgba(15,27,45,.25);border-radius:9px;background:#fff;font:400 13px Montserrat,sans-serif;color:var(--fvcl-navy)}
/* The newsletter band's single row, WPForms markup. */
.fvcl-form--inline div.wpforms-container-full .wpforms-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.fvcl-form--inline div.wpforms-container-full .wpforms-form .wpforms-field-label{display:none}
.fvcl-form--inline div.wpforms-container-full .wpforms-form .wpforms-field{width:320px;max-width:100%}
.fvcl-form--inline div.wpforms-container-full .wpforms-form input[type=email]{border-radius:var(--fvcl-r-btn);padding:13px 16px}
.fvcl-form--inline div.wpforms-container-full .wpforms-form .wpforms-submit-container{width:auto}
.fvcl-form--inline div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit{width:auto;padding:13px 24px;font-size:14px}
.fvcl-form--inline div.wpforms-container-full .wpforms-confirmation-container-full,
.fvcl-form--inline div.wpforms-container-full .wpforms-error-container{flex-basis:100%;text-align:center}
/* MetForm markup (free info kit). */
.fvcl-form .mf-input-wrapper{margin:0}
.fvcl-form .metform-form-content,.fvcl-form .mf-form-wrapper{display:grid;gap:16px}
.fvcl-form .mf-input-label{display:block;font:600 12px Montserrat,sans-serif;color:var(--fvcl-navy);margin:0 0 6px}
.fvcl-form input.mf-input,.fvcl-form textarea.mf-input,.fvcl-form select.mf-input{width:100%;box-sizing:border-box;border:1px solid rgba(15,27,45,.16);border-radius:9px;padding:12px 14px;font:400 14px Montserrat,sans-serif;color:var(--fvcl-navy);background:#fff}
.fvcl-form input.mf-input:focus,.fvcl-form textarea.mf-input:focus,.fvcl-form select.mf-input:focus{border-color:var(--fvcl-blue);outline:2px solid rgba(37,81,181,.25);outline-offset:1px}
.fvcl-form .mf-btn-wraper button,.fvcl-form button.metform-btn{width:100%;background:var(--fvcl-blue);color:#fff;border:none;border-radius:var(--fvcl-r-btn);padding:15px;font:700 15px Montserrat,sans-serif;cursor:pointer;transition:background var(--fvcl-dur)}
.fvcl-form .mf-btn-wraper button:hover,.fvcl-form button.metform-btn:hover{background:var(--fvcl-blue-dark)}
.fvcl-form .mf-error-message{font:500 12px Montserrat,sans-serif;color:#B3261E;margin-top:6px}
@media (max-width:767px){
.fvcl-form div.wpforms-container-full .wpforms-form .wpforms-field-row{grid-template-columns:1fr}
.fvcl-form--inline div.wpforms-container-full .wpforms-form{flex-direction:column;align-items:stretch}
.fvcl-form--inline div.wpforms-container-full .wpforms-form .wpforms-field,
.fvcl-form--inline div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit{width:100%}
}