/* Patch layer (business keys, service switcher, hero text standard, services link). Loads last. */

/* ---- biz-keys.css ---- */
/* Business switcher on the services card of the Virlocept, Umbuso and Lighthaven landing pages (same keys as the Group Services page) */
/* Business switcher on Projects, Services and the Virlocept, Umbuso and Lighthaven pages: colour strip, logo and arrow disc per business. */
:is(.fc-keys,.bk-keys){position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border-radius:20px 20px 0 0;padding-top:6px}
.bk-keys{scroll-margin-top:40px;margin:calc(-1*clamp(28px,3.2vw,44px)) calc(-1*clamp(22px,3vw,36px)) clamp(28px,3.2vw,42px)}
:is(.fc-key,.bk-key){container-type:inline-size;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;margin:0;padding:16px 20px;border:0;border-bottom:1px solid rgba(47,68,79,.12);border-radius:0;background:#F7F5F2;color:#2F444F;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .2s ease}
:is(.fc-key,.bk-key)::before{content:"";position:absolute;top:-6px;left:0;right:0;height:6px;background:var(--bc)}
:is(.fc-key,.bk-key)+:is(.fc-key,.bk-key){border-left:1px solid rgba(47,68,79,.12)}
:is(.fc-key,.bk-key):hover{background:#EFEBE6}
:is(.fc-key[aria-selected=true],.bk-key[aria-current=page]){background:#fff;border-bottom-color:transparent}
.bk-key[aria-current=page]{cursor:default}
:is(.fc-key,.bk-key):focus-visible{outline:3px solid #2F444F;outline-offset:-3px}
.fc-lg{display:flex;align-items:center;justify-content:center;min-width:0;padding-left:calc(clamp(30px,10cqi,40px) + 12px)}
.fc-lg img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(24px,15cqi,46px)}
.fc-go{display:grid;place-items:center;width:clamp(30px,10cqi,40px);height:clamp(30px,10cqi,40px);border-radius:50%;background:rgba(47,68,79,.1);color:#2F444F;transition:background .2s ease,color .2s ease}
:is(.fc-key[aria-selected=true],.bk-key[aria-current=page]) .fc-go{background:var(--bc);color:#fff}
@media (max-width:760px){.bk-keys{margin:-24px -16px 24px}}
@media (max-width:840px){:is(.fc-key,.bk-key){grid-template-columns:minmax(0,1fr);padding:12px 6px 17px}.fc-lg{padding-left:0}.fc-lg img{max-height:30px}.fc-go{display:none}:is(.fc-key,.bk-key):not([aria-selected=true]):not([aria-current=page]) .fc-lg img{opacity:.55}:is(.fc-key[aria-selected=true],.bk-key[aria-current=page])::after{content:"";position:absolute;left:50%;bottom:8px;width:28px;height:3px;margin-left:-14px;border-radius:2px;background:var(--bc)}}
@media (prefers-reduced-motion:reduce){:is(.fc-key,.bk-key),.fc-go{transition:none}}


/* ---- service pages ---- */
/* Previous and Next on the service card open the neighbouring page; the header, hero photo, breadcrumb, card and footer hold still while it loads */
@view-transition{navigation:auto}
.vgm{view-transition-name:vt-hdr}
#hero .t3-hero-bg{view-transition-name:vt-herobg}
#hero h1{view-transition-name:vt-h1}
#hero .vg-crumb{view-transition-name:vt-crumb}
.fc-box{view-transition-name:vt-card}
.gf{view-transition-name:vt-ftr}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
#hero.t3-hero{position:relative}
html{overflow-x:clip}

/* Next band */
main > .nx{padding-top:var(--g)!important}
.nx{--bizd:var(--biz)}
.nx[style*="#EBA95E"]{--bizd:#B8751F}
.nx-in{width:min(1240px,calc(100% - 64px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.nx-pic{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#2F444F;box-shadow:0 34px 70px -34px rgba(20,32,38,.6),0 0 0 1px rgba(47,68,79,.06)}
.nx-pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--biz)}
.nx-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.nx-in:hover .nx-pic img{transform:scale(1.035)}
.nx-eb{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 12px/1.2 var(--body,'Source Sans 3',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--bizd)}
.nx-logo{display:block;height:34px;width:auto;margin:0 0 16px}
.nx-h{margin:0 0 12px;font:700 clamp(34px,3.6vw,50px)/1.04 var(--display,'Archivo',sans-serif);letter-spacing:-.02em;color:#2F444F}
.nx-p{margin:0 0 28px;max-width:38ch;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#5C6E78}
.nx-row{display:flex;align-items:center;gap:22px 26px;flex-wrap:wrap}
.nx-go{position:relative;display:inline-flex;align-items:center;height:60px;padding:0 80px 0 28px;border-radius:999px;font:600 17px/1 var(--body,'Source Sans 3',sans-serif);white-space:nowrap;text-decoration:none;color:#fff;background:linear-gradient(180deg,#36505C,#263842);box-shadow:0 1px 3px rgba(20,32,38,.25),0 10px 24px -8px rgba(20,32,38,.55),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2);transition:background .2s}
.nx-go:hover{color:#fff;background:linear-gradient(180deg,#3D5A67,#2B3F4A)}
.nx-go:active{box-shadow:inset 0 2px 6px rgba(8,14,18,.5)}
.nx-go:focus-visible{outline:3px solid var(--bizd);outline-offset:3px}
.nx-disc{position:absolute;top:50%;right:8px;margin-top:-22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--biz);color:#fff;transition:transform .25s}
.nx-go:hover .nx-disc{transform:translateX(3px)}
.nx[style*="#EBA95E"] .nx-disc{color:#2F444F}
.nx-prog{display:inline-flex;align-items:center;gap:5px}
.nx-prog i{width:16px;height:4px;border-radius:2px;background:rgba(47,68,79,.16)}
.nx-prog i.on{background:var(--biz)}
.nx-prog em{margin-left:8px;font:600 14px/1 var(--body,'Source Sans 3',sans-serif);font-style:normal;color:#5C6E78}

@media (max-width:860px){
  .nx-in{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .nx-in{width:calc(100% - 32px)}
  .nx-go{height:56px;font-size:16px;padding:0 70px 0 22px}
}
@media (prefers-reduced-motion:reduce){.nx-pic img,.nx-disc{transition:none}}


/* ---- hero-text.css ---- */
/* Hero text standard
   Every page hero uses the same heading and subheader styles as the Virlocept
   Group home hero. The heading has no rule under it; the hero
   layout (heading centred in the photo, hero heights) is in theme.css. */

:root{
  --hx-top:calc(130px + clamp(56px,6vw,84px));
}
@media (max-width:860px){
  :root{--hx-top:164px}
}

/* 1. Anchor the text block at the same height in every hero */
#hero.t3-hero,
#hero.hero-cs{
  justify-content:flex-start !important;
  align-items:stretch !important;
  padding-top:var(--hx-top) !important;
}
#hero.t3-hero>.wrap,
#hero.hero-cs>.wrap{top:0 !important;margin-top:0 !important}
#hero.t3-hero .t3-hero-in,
#hero.hero-cs .hcs-in{padding-top:0 !important;margin-top:0 !important}

/* 2. Header */
#hero .hx-h1,
.gh3 .hx-h1{
  font-family:var(--display) !important;
  font-weight:700 !important;
  font-size:clamp(30px,4.3vw,56px) !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  color:#fff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.3) !important;
  text-wrap:balance;
  max-width:16em !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* 4. Subheader */
#hero .hx-sub,
.gh3 .hx-sub{
  font-family:var(--body) !important;
  font-weight:400 !important;
  font-size:clamp(17px,1.5vw,20px) !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(255,255,255,.92) !important;
  text-shadow:0 1px 6px rgba(0,0,0,.3) !important;
  text-wrap:balance;
  max-width:58ch !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* Phones: the card under Contact, legal, 404 and Thank you heroes overlaps by
   the same amount as every other page */
@media (max-width:703px){
  :root:has(#hero.ct-hero){--hero-lap:194px !important}
}


/* ---- services-link.css ---- */
html .vgm .vgm-links>a.vgm-svc{text-decoration:none}
html .vgm .vgm-links>a.vgm-svc[aria-expanded=true] svg{transform:rotate(180deg)}
html.n2 .vgm .vgm-links>a.vgm-svc[aria-expanded=true]::after{transform:scaleX(1)}
html.nf.n3 .vgm .vgm-links>a.vgm-svc[aria-expanded=true],html.n3 .vgm .vgm-links>a.vgm-svc[aria-expanded=true]{color:#fff}
html.n2.n3 .vgm.vgm .vgm-tray .nv-feat .nv-all{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0;margin:0 4px 0 0;font:600 15px/1 var(--s-body);color:#fff;text-decoration:none;white-space:nowrap;border-radius:999px}
html.n2.n3 .vgm.vgm .vgm-tray .nv-feat .nv-all svg{transition:transform .2s}
html.n2.n3 .vgm.vgm .vgm-tray .nv-feat .nv-all:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
html.n2.n3 .vgm.vgm .vgm-tray .nv-feat .nv-all:hover svg{transform:translateX(3px)}
html.n2.n3 .vgm.vgm .vgm-tray .nv-feat a.nv-go{text-decoration:none}
html.n2 .vgm .nv-feat a.nv-go:hover i{background-position:calc(50% + 3px) 50%,50% 50%,50% 50%}



/* Group pages stay group neutral: mustard is Virlocept's colour, so on pages and parts that belong to the whole group the accents are navy and white. Business colours stay on business cards, business columns and business pages. */
html body[data-bb=group] .ct2 .ct-ic:not(.sos):not(.wa){color:#fff}
html body[data-bb=group] .ct2 .ct2-key:hover b{color:#fff}
html body[data-bb=group] .ct2 .ct2-addr svg{color:#fff}
html body[data-bb=group] .ct2 .ct2-addr-a:hover span{color:#fff;text-decoration:underline;text-underline-offset:4px}


/* Switcher logos keep their space while they load: the logo box is as tall as the logo's largest size, so the switcher and everything under it stay put when the logo files arrive (Projects layout shift). */
.fc-lg{min-height:clamp(24px,15cqi,46px)}
@media (max-width:840px){.fc-lg{min-height:30px}}