/* VCA premium UI layer (loaded after styles.css): light header with dropdown menus, icon tiles, flip service cards. */

/* ---------- Header: light, airy, grouped ---------- */
.site-header{height:76px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid rgba(16,35,61,.06);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 10px 34px rgba(7,27,52,.08)}
.site-header .header-inner{height:100%;display:flex;align-items:center;gap:24px}
.site-header .brand-lockup{flex:0 0 auto;gap:12px}
.site-header .brand-lockup .wordmark strong{font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.site-header .brand-lockup .wordmark span{font-size:9.5px;letter-spacing:.22em}

.vca-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.vca-nav .nav-item{position:relative}
.vca-nav .nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font:600 14px/1 var(--font);letter-spacing:.005em;color:#3a4d63;background:none;border:0;border-radius:10px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s ease}
.vca-nav .nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.vca-nav .nav-link:hover,.vca-nav .has-menu:hover>.nav-link,.vca-nav .nav-link.active,.vca-nav .nav-item.active>.nav-link,.vca-nav .nav-item.open>.nav-link{color:var(--blue)}
.vca-nav .nav-link:hover::after,.vca-nav .nav-link.active::after,.vca-nav .nav-item.active>.nav-link::after,.vca-nav .has-menu:hover>.nav-link::after{transform:scaleX(1)}
.vca-nav .nav-link:focus-visible,.vca-burger:focus-visible,.vca-nav .nav-menu-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;opacity:.75}
.vca-nav .has-menu:hover .nav-chev,.vca-nav .nav-item.open .nav-chev{transform:rotate(180deg)}

.vca-nav .nav-menu{position:absolute;top:calc(100% + 10px);left:-10px;width:322px;padding:8px;background:#fff;border:1px solid #e6edf4;border-radius:18px;box-shadow:0 26px 60px rgba(7,27,52,.15),0 2px 6px rgba(7,27,52,.04);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.vca-nav .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.vca-nav .nav-item.open>.nav-menu,.vca-nav .nav-item:has(:focus-visible)>.nav-menu{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.vca-nav .has-menu:hover>.nav-menu{opacity:1;visibility:visible;transform:none}}
.nav-menu-link{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .18s ease}
.nav-menu-link:hover,.nav-menu-link.active{background:#f2f7ff}
.nav-menu-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e8f1ff,#dff8f5);color:var(--blue)}
.nav-menu-ico svg,.service-icon svg,.team-role-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-menu-link strong{display:block;font-size:14px;font-weight:700;line-height:1.25}
.nav-menu-link small{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.35}
.nav-mobile-only{display:none}
.site-header .header-cta{display:inline-flex;margin-left:8px;padding:11px 20px;font-size:13.5px;border-radius:999px;white-space:nowrap}
.vca-burger{display:none}

@media (max-width:1180px){
 .site-header .header-cta{display:none}
 .vca-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;padding:0 11px;border:0;border-radius:12px;background:#eef3f8;cursor:pointer}
 .vca-burger span{display:block;height:2px;border-radius:2px;background:var(--navy);transition:transform .25s ease,opacity .2s ease}
 .vca-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .vca-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
 .vca-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 /* absolute (not fixed): the header's backdrop-filter makes it the containing block */
 .vca-nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);margin:0;padding:8px 20px 28px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid #eef2f6;box-shadow:0 24px 40px rgba(7,27,52,.12);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 .vca-nav.open{display:flex}
 .vca-nav .nav-item{border-bottom:1px solid #eef2f6}
 .vca-nav .nav-link{width:100%;justify-content:space-between;padding:17px 4px;font-size:16px;border-radius:0}
 .vca-nav .nav-link::after{display:none}
 .vca-nav .nav-menu{position:static;width:auto;padding:0 0 10px 6px;border:0;border-radius:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none;display:none}
 .vca-nav .nav-menu::before{display:none}
 .vca-nav .nav-item.open>.nav-menu{display:block}
 .nav-mobile-only{display:block;border-bottom:0!important;padding-top:18px}
 .nav-mobile-only .btn{width:100%;justify-content:center;padding:15px 20px;font-size:15px;border-radius:14px}
 body.nav-open{overflow:hidden}
}
@media (max-width:560px){.site-header .brand-lockup .wordmark strong{font-size:15px}}

/* ---------- Icon tiles (service cards, team roles) ---------- */
.service-icon,.team-role-icon{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;margin:0;background:linear-gradient(135deg,#e8f1ff,#dff8f5);color:var(--blue);font-size:0;box-shadow:inset 0 0 0 1px rgba(21,94,239,.08)}
.service-icon svg,.team-role-icon svg{width:27px;height:27px;stroke-width:1.6}
.team-role-icon{margin-bottom:18px}
.team-role-grid article{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.team-role-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c9daf2}
.team-role-grid article h3{font-size:18px;margin:0 0 8px}

/* ---------- Service cards: icon + name, flip for details ---------- */
.service-grid{gap:20px}
.service-card.flip{padding:0;border:0;background:transparent;min-height:0;height:228px;perspective:1200px;border-radius:20px;box-shadow:none}
.service-card.flip.reserved{border:0}
.service-card.flip:hover{transform:none;box-shadow:none;border-color:transparent}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .65s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip-front{align-items:flex-start;padding:28px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(7,27,52,.04),0 10px 30px -18px rgba(7,27,52,.18);transition:box-shadow .3s ease}
.service-card.flip.reserved .flip-front{border-top:3px solid var(--gold)}
.service-card.flip .flip-front h3{margin:18px 0 0;font-size:18px;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.flip-hint{margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8696a9}
.flip-hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flip-back{transform:rotateY(180deg);justify-content:space-between;padding:26px 28px;color:#fff;background:linear-gradient(150deg,#0e3260 0%,#071b34 100%);pointer-events:none;box-shadow:0 22px 46px -16px rgba(7,27,52,.45)}
.service-card.flip .flip-back p{margin:0;color:#d3dfec;font-size:14px;line-height:1.65;text-align:left;-webkit-hyphens:none;hyphens:none}
.service-card.flip .flip-back .card-link{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:700;transition:background .2s ease}
.service-card.flip .flip-back .card-link:hover{background:rgba(255,255,255,.22)}
.service-card.flip .flip-back .card-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.service-card.flip .flip-back .card-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-card.flip.flipped .flip-inner,.service-card.flip:focus-within .flip-inner{transform:rotateY(180deg)}
.service-card.flip.flipped .flip-back,.service-card.flip:focus-within .flip-back{pointer-events:auto}
@media (hover:hover){
 .service-card.flip:hover .flip-inner{transform:rotateY(180deg)}
 .service-card.flip:hover .flip-back{pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}}
@media print{.service-card.flip{height:auto}.flip-inner{transform:none!important;height:auto}.flip-face{position:static;-webkit-backface-visibility:visible;backface-visibility:visible;box-shadow:none}.flip-back{transform:none;background:#fff;color:#000;pointer-events:auto}.service-card.flip .flip-back p{color:#000}.flip-hint,.service-card.flip .flip-back .card-link{display:none}}

/* Short card copy reads cleaner left-aligned (overrides the site-wide justified paragraphs). */
main .service-card.flip .flip-back p,main .team-role-grid p{text-align:left!important;-webkit-hyphens:none!important;hyphens:none!important;text-align-last:auto!important}