/* Castle Bank Electrical. Authored directly; no build step, no framework.

   The page is a set of rounded tiles inside a 10px frame. Four surfaces carry
   everything: white, a soft grey tile, orange (from the logo) and charcoal
   (from the logo's lettering). One light geometric face, Lexend. Hierarchy comes
   from size, not weight; one orange word per headline; ↗ always means "go". */

@font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/lexend.1ec8f6ee2750.woff2') format('woff2')}

:root{
  --frame:10px;
  --r-tile:20px;
  --r-card:16px;
  --pad:clamp(20px,2.8vw,40px);
  --inset:clamp(20px,3.5vw,50px);
  --white:#FFFFFF;
  --ink:#121B20;
  --ink-soft:#1B262C;
  --ink-2:#4F585E;
  --ink-3:#737C82;
  --line:rgba(18,27,32,.1);
  --tile:#F2F3F4;
  --tile-2:#E9EBEC;
  --tile-image:linear-gradient(0deg,rgba(18,27,32,.035),rgba(255,255,255,.35));
  --orange:#FF6B00;
  --orange-text:#F06000;
  --orange-ink:#B84A00;
  --orange-soft:#FFE7D4;
  --whatsapp:#25D366;
  --escape:#2F7A4E;
  --ease:cubic-bezier(.22,.8,.2,1);
  --flow:cubic-bezier(.7,0,.2,1);
  --font:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1 0 auto;display:block;width:100%;max-width:1760px;margin:0 auto;padding:0 var(--frame);outline:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
h1,h2,h3,h4,p,ol,ul,figure{margin:0}
h1,h2,h3,h4{font-weight:400}
ol,ul{padding:0;list-style:none}
strong{font-weight:500}
[hidden]{display:none!important}
::selection{background:var(--orange-soft);color:var(--ink)}
/* Text is not selectable, except what people need to copy: the phone number,
   email address, company number and the privacy notice. */
body{-webkit-user-select:none;user-select:none}
.selectable,.privacy-head,.privacy-copy,input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--orange-text);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:20px;top:-80px;z-index:90;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500}
.skip:focus{top:20px}
.accent{color:var(--orange-text)}
.tile{border-radius:var(--r-tile);margin-bottom:var(--frame)}
.tile-orange{background:var(--orange);color:var(--ink)}
.tile-ink{background:var(--ink);color:#fff}
.tile-ink .accent{color:var(--orange)}
.kicker{font-size:14px;font-weight:300}

/* ------------------------------------------------------------------ buttons
   Pills fill with a flowing sweep of the next colour; round arrows turn to
   point the way. */
.pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap;transition:color .45s var(--ease),box-shadow .45s var(--ease),transform .5s cubic-bezier(.3,1.6,.45,1)}
.pill::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateX(-102%);transition:transform .6s var(--flow)}
.pill:hover::before,.pill:focus-visible::before{transform:none}
.pill:active{transform:scale(.97);transition-duration:.12s}
.pill svg{width:18px;height:18px;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.45,1)}
.pill:hover svg{transform:scale(1.08)}
.pill-orange{background:var(--orange);color:var(--ink)}
.pill-orange::before{background:var(--ink)}
.pill-orange:hover,.pill-orange:focus-visible{color:#fff}
.pill-whatsapp{background:var(--whatsapp);color:var(--ink)}
.pill-whatsapp::before{background:var(--ink)}
.pill-whatsapp:hover,.pill-whatsapp:focus-visible{color:#fff}
.pill-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(18,27,32,.22)}
.pill-ghost::before{background:var(--ink)}
.pill-ghost:hover,.pill-ghost:focus-visible{color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.pill-small{height:46px;padding:0 20px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.pill-small svg{width:16px;height:16px}
.contact-pills{display:flex;flex-wrap:wrap;gap:8px}
.contact-pills-dark .pill-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.contact-pills-dark .pill-ghost::before{background:#fff}
.contact-pills-dark .pill-ghost:hover,.contact-pills-dark .pill-ghost:focus-visible{color:var(--ink);box-shadow:inset 0 0 0 1.5px #fff}
.contact-pills-dark .pill-whatsapp::before{background:#fff}
.contact-pills-dark .pill-whatsapp:hover,.contact-pills-dark .pill-whatsapp:focus-visible{color:var(--ink)}

.arrow-circle{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;transition:background-color .45s var(--ease),color .45s var(--ease)}
.arrow-circle svg{width:20px;height:20px;transition:transform .55s var(--ease)}
.arrow-circle-light{background:#fff;color:var(--ink)}
a:hover .arrow-circle svg,a:focus-visible .arrow-circle svg{transform:rotate(45deg)}
.arrow-button{display:inline-flex;align-items:center;gap:4px;border-radius:999px}
.arrow-button-label{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;height:58px;padding:0 34px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:400;transition:color .45s var(--ease)}
.arrow-button-label::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--orange);transform:translateX(-102%);transition:transform .6s var(--flow)}
.arrow-button .arrow-circle{width:58px;height:58px;transition:background-color .45s var(--ease) .18s,color .45s var(--ease) .18s}
.arrow-button:hover .arrow-button-label,.arrow-button:focus-visible .arrow-button-label{color:var(--ink)}
.arrow-button:hover .arrow-button-label::before,.arrow-button:focus-visible .arrow-button-label::before{transform:none}
.arrow-button:hover .arrow-circle,.arrow-button:focus-visible .arrow-circle{background:var(--orange);color:var(--ink)}

/* ------------------------------------------------------------------ header */
.site-header{position:fixed;top:var(--frame);left:var(--frame);right:var(--frame);z-index:60;max-width:1740px;margin:0 auto;border-radius:36px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 2px 20px rgba(18,27,32,.09);transition:border-radius .5s var(--ease),background-color .35s var(--ease)}
/* the deep shadow of an open menu fades in rather than being redrawn each frame */
.site-header::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 30px 80px -30px rgba(18,27,32,.45);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.site-header.is-open{border-radius:22px;background:rgba(255,255,255,.98)}
.site-header.is-open::after{opacity:1}
.bar{display:flex;align-items:center;gap:20px;height:70px;padding:0 12px 0 28px}
.brand{flex:none;border-radius:8px}
.brand .logo{width:156px;height:auto;overflow:visible}
.primary{margin-left:auto}
.primary>ul{display:flex;align-items:center;gap:8px}
.primary li{display:flex;align-items:center}
.nav-link{position:relative;display:flex;align-items:center;height:44px;padding:0 12px;font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:9px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--ease)}
.nav-link:hover::after,.nav-link:focus-visible::after,.has-menu.is-open .nav-link::after,.nav-link[aria-current=page]::after{transform:scaleX(1);transform-origin:left center}
.nav-link[aria-current=page]::after{background:var(--orange)}
.nav-toggle{display:grid;place-items:center;width:26px;height:44px;margin-left:-10px;border-radius:8px}
.nav-toggle svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.has-menu.is-open .nav-toggle svg{transform:rotate(180deg)}
.bar-contact{display:flex;align-items:center;gap:8px;margin-left:14px}
.bar-phone{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;font-size:14px;font-weight:400;white-space:nowrap}
.bar-phone svg{width:17px;height:17px;color:var(--orange-ink);transition:transform .5s cubic-bezier(.3,1.6,.45,1)}
.bar-phone:hover svg{transform:rotate(-14deg)}
.bar-phone span{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;padding-bottom:2px;transition:background-size .5s var(--ease)}
.bar-phone:hover span{background-size:100% 1.5px}
.bar-whatsapp,.menu-toggle{display:none}

/* menus drop from the bar as panels of tiles */
.mega,.mobile-menu{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s linear .55s}
.mega.is-open,.mobile-menu.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
.mega-inner{min-height:0;overflow:hidden}
.mega-grid{display:grid;gap:10px;padding:6px 10px 10px}
.mega-grid-services{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-all{grid-column:1 / -1;grid-row:auto}
.mega-grid-services .mega-all{min-height:84px}
.mega.is-open .mega-inner{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.mega-tile{position:relative;display:flex;flex-direction:column;min-height:176px;padding:18px 20px 20px;border-radius:14px;background:var(--tile) var(--tile-image);transition:background-color .35s var(--ease)}
.mega-tile:hover{background-color:var(--tile-2)}
.mega-link{padding-right:36px;font-size:17px;font-weight:400;line-height:1.35;letter-spacing:-.005em}
.mega-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.mega-link:focus-visible{outline:none}
.mega-tile:has(.mega-link:focus-visible),.mega-row:has(.mega-link:focus-visible){outline:2px solid var(--orange-text);outline-offset:2px}
.mega-arrow{position:absolute;top:16px;right:16px;width:24px;height:24px;transition:transform .55s var(--ease)}
.mega-arrow svg{width:24px;height:24px}
.mega-tile:hover .mega-arrow,.mega-row:hover .mega-arrow{transform:rotate(45deg)}
.mega-sub{display:grid;gap:5px;margin-top:auto;padding-top:22px;font-size:14px;font-weight:300;color:var(--ink-2)}
.mega-note{position:relative;z-index:1;margin-top:10px;max-width:15em;font-size:14px;font-weight:300;color:var(--ink-2)}
.mega-dots{position:absolute;right:0;bottom:0;width:100%;height:70%;border-radius:0 0 14px 14px;background-image:radial-gradient(circle,rgba(255,107,0,.9) 1.3px,transparent 1.7px);background-size:9px 9px;-webkit-mask-image:radial-gradient(120% 90% at 100% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(120% 90% at 100% 100%,#000 10%,transparent 70%);pointer-events:none}
.mega-grid-team{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr)}
.mega-person{min-height:260px;overflow:hidden}
.mega-role{position:relative;z-index:1;margin-top:4px;font-size:14px;color:var(--ink-2)}
.mega-portrait{position:absolute;right:14px;bottom:14px;width:46%;max-width:150px;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:12px;transition:transform .8s var(--ease)}
.mega-person:hover .mega-portrait{transform:scale(1.04)}
.mega-rows>ul{display:grid;gap:10px;height:100%}
.mega-row{position:relative;display:flex;align-items:center;min-height:56px;padding:0 20px;border-radius:14px;background:var(--tile) var(--tile-image);transition:background-color .35s var(--ease)}
.mega-row:hover{background-color:var(--tile-2)}
.mega-row .mega-arrow{top:50%;margin-top:-12px}
.mega.is-open .mega-tile,.mega.is-open .mega-row{animation:tile-in .6s var(--ease) both}
.mega.is-open .mega-tile:nth-child(2),.mega.is-open .mega-row:nth-child(2){animation-delay:.04s}
.mega.is-open .mega-tile:nth-child(3),.mega.is-open .mega-row:nth-child(3){animation-delay:.08s}
.mega.is-open .mega-tile:nth-child(4),.mega.is-open .mega-row:nth-child(4){animation-delay:.12s}
.mega.is-open .mega-tile:nth-child(5){animation-delay:.16s}
.mega.is-open .mega-tile:nth-child(6){animation-delay:.2s}
.mega.is-open .mega-tile:nth-child(7){animation-delay:.24s}
@keyframes tile-in{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(18,27,32,.32);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.scrim.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}

/* mobile menu (shown below 1100px) */
.mobile-menu nav{display:grid;gap:8px;padding:4px 10px 10px}
.mobile-group{border-radius:14px;background:var(--tile) var(--tile-image)}
.mobile-group summary{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 18px;border-radius:14px;font-size:17px;font-weight:400;list-style:none;cursor:pointer}
.mobile-group summary::-webkit-details-marker{display:none}
.mobile-group summary svg{width:22px;height:22px;transition:transform .45s var(--ease)}
.mobile-group[open] summary svg{transform:rotate(45deg)}
.mobile-group ul{display:grid;padding:0 18px 12px}
.mobile-group li{border-top:1px solid var(--line)}
.mobile-group li a{display:flex;align-items:center;min-height:44px;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:15px;font-weight:300;line-height:1.4}
.mobile-link{display:flex;align-items:center;min-height:58px;padding:0 18px;border-radius:14px;background:var(--tile) var(--tile-image);font-size:17px;font-weight:400}
.mobile-nav-target{position:relative;isolation:isolate;overflow:hidden;gap:12px}
.mobile-nav-target::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--orange-soft);transform:translateX(-102%);transition:transform .5s var(--flow)}
.mobile-link-label{flex:1;min-width:0;transition:transform .45s var(--ease)}
.mobile-link-arrow{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.mobile-link-arrow svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.mobile-nav-target:is(:focus-visible,:active)::before{transform:translateX(0)}
.mobile-nav-target:is(:focus-visible,:active) .mobile-link-label{transform:translateX(4px)}
.mobile-nav-target:is(:focus-visible,:active) .mobile-link-arrow{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.mobile-nav-target:is(:focus-visible,:active) .mobile-link-arrow svg{transform:rotate(45deg)}
.mobile-nav-target:active::before,.mobile-nav-target:active .mobile-link-label,.mobile-nav-target:active .mobile-link-arrow,.mobile-nav-target:active .mobile-link-arrow svg{transition-duration:90ms}
@media (hover:hover) and (pointer:fine){
  .mobile-nav-target:hover::before{transform:translateX(0)}
  .mobile-nav-target:hover .mobile-link-label{transform:translateX(4px)}
  .mobile-nav-target:hover .mobile-link-arrow{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
  .mobile-nav-target:hover .mobile-link-arrow svg{transform:rotate(45deg)}
}
.mobile-contact{display:grid;gap:8px;padding:6px 10px 12px}
.mobile-contact .pill{width:100%;height:54px}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;padding:clamp(108px,12svh,128px) var(--inset) 32px;overflow:hidden}
.hero-circuit{position:absolute;top:0;right:-2%;width:60%;height:100%;pointer-events:none}
.hero-lead{position:relative;grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-title{max-width:13.5em;margin:0;font-size:clamp(2.6rem,1rem + 4.9vw,5.4rem);font-weight:400;line-height:1.02;letter-spacing:-.036em}
.home .hero-title{max-width:none;font-size:clamp(2.35rem,.7rem + 4.2vw,5rem)}
.hero-indent{display:block;padding-left:1.3em}
.hero-foot{position:relative;grid-column:1;grid-row:2 / span 2;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-team{position:relative;grid-column:2;grid-row:2;align-self:start;justify-self:end;width:min(100%,500px);margin-top:12px}
.hero-actions{position:relative;grid-column:2;grid-row:3;align-self:end;justify-self:end;justify-content:flex-end;width:min(100%,500px)}
.hero-actions .pill-ghost{background:rgba(255,255,255,.95)}
.hero-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.person-chip{display:flex;align-items:center;gap:12px;height:100%;padding:8px 14px 8px 8px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px rgba(18,27,32,.07),0 8px 24px -16px rgba(18,27,32,.4);transition:box-shadow .45s var(--ease),transform .5s var(--ease)}
.person-chip:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(18,27,32,.12),0 14px 30px -16px rgba(18,27,32,.5)}
.person-chip > img{flex:none;width:62px;height:62px;border-radius:12px;object-fit:cover;object-position:50% 18%}
.chip-name{display:block;font-size:15px;font-weight:500;line-height:1.3}
.chip-role{display:block;font-size:13px;font-weight:300;line-height:1.4;color:var(--ink-2)}
.hero-intro{max-width:28em;font-size:clamp(1rem,.92rem + .3vw,1.1875rem);line-height:1.7}

/* qualifications and standards */
.proof-bar{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-bottom:var(--frame);padding:16px 24px;border-radius:var(--r-tile);background:#fff;box-shadow:0 2px 26px rgba(18,27,32,.08),inset 0 0 0 1px rgba(18,27,32,.05);overflow:hidden}
.proof-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px}
.proof-heading .proof-label{font-size:clamp(.95rem,.9rem + .25vw,1.15rem);text-underline-offset:4px}
.proof-label:hover,.proof-label:focus-visible{text-decoration:underline}
.proof-label{flex:none;font-size:clamp(1.05rem,.9rem + .5vw,1.5rem);font-weight:400;letter-spacing:-.01em}
.proof-track{display:flex;min-width:0;overflow:hidden}
.proof-list{display:flex;flex-wrap:wrap;gap:14px 30px;min-width:0}
.proof-list[aria-hidden=true]{display:none}
.proof-list li{display:flex;align-items:center;gap:10px;max-width:100%;font-size:14px;color:var(--ink-2)}
.proof-bar[data-motion=running] .proof-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.proof-bar[data-motion=running] .proof-list{flex:none;flex-wrap:nowrap;gap:40px;padding-right:40px;animation:marquee 56s linear infinite}
.proof-bar[data-motion=running] .proof-list[aria-hidden=true]{display:flex}
.proof-bar[data-motion=running] .proof-list li{white-space:nowrap}
.proof-bar:is(:hover,:focus-within) .proof-list{animation-play-state:paused}
.proof-mark{flex:none;display:grid;place-items:center;width:46px;height:46px}
.proof-mark svg{width:44px;height:44px}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ------------------------------------------------------------------ standards */
.standards{padding:56px 0 0;margin-bottom:var(--frame);scroll-margin-top:90px}
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px 60px;align-items:start;margin-bottom:34px;padding:0 var(--inset)}
.split-head h2{max-width:17em;font-size:clamp(1.55rem,1.15rem + 1vw,2.1rem);line-height:1.38;letter-spacing:-.02em}
.split-head p{max-width:44em;font-size:15px;line-height:1.75;color:var(--ink-2)}
.split-head p strong{color:var(--ink)}
.standard-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row dense;gap:10px}
.standard{display:flex;align-items:center;gap:16px;min-height:80px;padding:14px 18px 14px 14px;border-radius:14px;background:var(--tile) var(--tile-image);transition:background-color .35s var(--ease)}
.standard:hover{background-color:var(--tile-2)}
.standard-wide{grid-column:span 2}
.mark{flex:none;display:grid;place-items:center;min-width:58px;height:58px;padding:0 3px;border-radius:12px}
.mark svg{width:48px;height:48px}
.mark-line,.mark-ink,.mark-orange{color:var(--ink)}
.standard-code{display:block;margin-bottom:3px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink)}
.standard-name{display:block;font-size:15px;font-weight:400;line-height:1.35}
.standard-note{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.qualification-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--frame)}
.qualification-item{display:flex;align-items:flex-start;gap:14px;padding:24px;border-radius:var(--r-tile);background:var(--tile)}
.qualification-item h3{font-size:16px;line-height:1.55;font-weight:400}
.qualification-item p{font-size:13px;line-height:1.65;color:var(--ink-2);margin-top:8px}
.qualification-cpd{max-width:75em;margin:24px var(--inset) 0;font-size:15px;line-height:1.75;color:var(--ink-2)}
.hero-location{font-size:clamp(1rem,.95rem + .25vw,1.2rem);font-weight:400;margin-bottom:12px}
.footer-company{max-width:620px;line-height:1.7;padding:8px 0}
.profile-list li{flex-wrap:wrap;overflow-wrap:anywhere}
.profile-list a{text-decoration:underline;text-underline-offset:4px}
.service-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--frame);margin-top:var(--frame)}
.guide-item{padding:28px var(--inset)}
.guide-item h2{font-size:22px;line-height:1.4;letter-spacing:-.02em}
.guide-item p{font-size:15px;line-height:1.8;color:var(--ink-2);margin-top:12px}
.quote-note{grid-column:1/-1;padding:18px var(--inset);font-size:14px;line-height:1.7;color:var(--ink-2)}
.guidance-note{padding:24px var(--inset);max-width:80em;font-size:14px;line-height:1.8;color:var(--ink-2)}
.guidance-note a,.contact-details a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.contact-details{margin:0 var(--inset) 36px;font-size:15px;line-height:2}
.service-context{padding:28px var(--inset);margin-bottom:var(--frame)}
.service-context p{max-width:76em;margin-top:16px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.service-context a,.service-crosslink a,.qualification-cpd a{text-decoration:underline;text-underline-offset:4px}
.service-crosslink{margin:24px var(--inset);font-size:15px;line-height:1.8}
.support-schedule{margin-top:42px}
.support-schedule .guide-item h3{font-size:18px;font-weight:400}
.job,#standards{scroll-margin-top:100px}

/* ------------------------------------------------------------------ services (home) */
/* One complete directory, with a single drawing that follows the reader. */
.services-home{padding-top:70px;margin-bottom:var(--frame);scroll-margin-top:100px}
.services-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px 70px;padding:0 var(--inset);margin-bottom:44px}
.services-heading h2{max-width:12em;font-size:clamp(2.5rem,1.2rem + 3.4vw,4.6rem);line-height:1.08;letter-spacing:-.032em}
.services-heading p{max-width:32em;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
/* The directory reads like a specification: each service and what it
   includes, separated by hairlines. The rule above the service shown in the
   drawing lights up in orange. */
.explorer-catalog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--frame) 44px;padding-left:var(--inset)}
.service-catalog{grid-column:1;grid-row:1;min-width:0;border-bottom:1px solid var(--line)}
.catalog-service{position:relative;padding:26px 0 34px;border-top:1px solid var(--line);scroll-margin-top:110px}
.catalog-service::before{content:'';position:absolute;left:0;top:-1px;width:88px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
.catalog-service.is-current::before{transform:none}
.catalog-service-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.catalog-service-head h3{flex:1;min-width:0;font-size:clamp(1.4rem,1.05rem + .75vw,1.85rem);line-height:1.2;letter-spacing:-.022em}
.catalog-select{display:flex;align-items:center;width:100%;min-height:44px;border-radius:8px}
.catalog-select span{transition:color .35s var(--ease)}
.catalog-select:not(:disabled):hover span{color:var(--orange-text)}
.catalog-select:disabled{cursor:default;opacity:1}
.catalog-open{flex:none;width:44px;height:44px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.catalog-open svg{width:19px;height:19px}
.catalog-open:hover,.catalog-open:focus-visible{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.catalog-open:hover svg,.catalog-open:focus-visible svg{transform:rotate(45deg)}
/* Each offering is its own outlined block. Its number matches the point on
   the drawing; pointing at it shows that point, and the block the drawing is
   showing is outlined in orange. */
.catalog-offerings{display:grid;gap:8px}
.catalog-offerings li{display:grid;grid-template-columns:26px minmax(0,.8fr) minmax(0,1.2fr);align-items:baseline;gap:4px 18px;padding:15px 18px 16px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.offering-point{align-self:start;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.25px rgba(18,27,32,.35);font-size:11px;font-weight:500;line-height:1;color:var(--ink-2);transition:background-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.catalog-offerings h4{font-size:15px;font-weight:400;line-height:1.5;letter-spacing:-.005em;transition:color .35s var(--ease)}
.catalog-offerings p{font-size:14px;line-height:1.65;color:var(--ink-2);text-wrap:pretty;transition:color .35s var(--ease)}
.js .catalog-offerings li{cursor:pointer}
.js .catalog-offerings li:hover{background:var(--tile);box-shadow:inset 0 0 0 1px rgba(18,27,32,.22)}
.js .catalog-offerings li:hover .offering-point{box-shadow:inset 0 0 0 1.25px var(--ink);color:var(--ink)}
.catalog-offerings li.is-shown,.js .catalog-offerings li.is-shown:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--orange)}
.catalog-offerings li.is-shown .offering-point{background:var(--orange);box-shadow:none;color:var(--ink)}
.catalog-offerings li.is-shown h4{color:var(--orange-ink)}
.catalog-offerings li.is-shown p{color:var(--ink)}
/* Clear labels at the top of one drawing frame: service left, selected point right. */
.catalog-scene{position:sticky;top:90px;grid-column:2;grid-row:1;min-width:0;border-radius:var(--r-tile);color:var(--ink);scroll-margin-top:0}
.explorer-catalog .drawing-panel{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;border-radius:var(--r-tile);overflow:hidden;background:linear-gradient(145deg,#fff 55%,#f3f5f6);box-shadow:inset 0 0 0 1px rgba(18,27,32,.12),0 8px 28px rgba(18,27,32,.04)}
.explorer-catalog .plan-sheet{align-self:center;max-width:none}
/* Ratios match CATALOG_VIEW_BOXES in build.py for short-screen sizing. */
/* The reading-position controller owns selection as the plan height changes. */
.explorer-catalog{--plan-ratio:810 / 448;overflow-anchor:none}
.explorer-catalog[data-building=warehouse]{--plan-ratio:810 / 424}
.explorer-catalog[data-building=school]{--plan-ratio:810 / 418}
.scene-labels{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;min-height:56px;padding:6px 18px 8px;color:var(--ink);pointer-events:none}
.scene-kicker{min-width:0;padding-left:12px;border-left:3px solid var(--orange)}
.scene-kicker .service-heading{display:block;margin:0;font-size:clamp(17px,1.4vw,21px);font-weight:500;line-height:1.25;letter-spacing:-.025em}
.scene-caption{justify-self:end;max-width:100%;padding:8px 12px;border-radius:9px;background:var(--ink);color:#fff;text-align:right}
.scene-caption h4{font-size:clamp(16px,1.25vw,19px);font-weight:500;line-height:1.3;letter-spacing:-.02em;white-space:nowrap}
.scene-controls{position:absolute;left:12px;bottom:0;display:flex;pointer-events:auto}
.explorer-catalog .tour-toggle{position:relative;flex:none;width:44px;height:44px;justify-content:center;padding:0;background:transparent;color:var(--ink)}
.explorer-catalog .tour-toggle::before{content:'';position:absolute;inset:5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,27,32,.18);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.explorer-catalog .tour-toggle:hover{background:transparent;color:#fff}
.explorer-catalog .tour-toggle:hover::before{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.explorer-catalog .tour-toggle svg{position:relative;width:14px;height:14px}
.explorer-catalog .tour-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.explorer-catalog .hotspot.active .hotspot-label{display:none}
.explorer-catalog .no-script{grid-column:1/-1;color:var(--ink-2)}

/* ------------------------------------------------------------------ the drawing */
.explorer-section{padding:clamp(28px,4vw,56px) var(--pad) var(--pad)}
.split-head-dark{padding:0;margin-bottom:28px}
.split-head-dark h2{max-width:none;font-size:clamp(2.2rem,1.2rem + 3vw,4rem);line-height:1.08;letter-spacing:-.032em}
.split-head-dark p{align-self:end;color:rgba(255,255,255,.7)}
.explorer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--frame)}
.layer-switch,.building-switch{position:relative;display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08)}
.layer-switch button,.building-switch button{position:relative;z-index:1;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap;transition:color .35s var(--ease)}
.layer-switch button:hover,.building-switch button:hover{color:#fff}
.layer-switch button[aria-pressed=true]{background:#fff;color:var(--ink)}
.building-switch button[aria-pressed=true]{background:var(--orange);color:var(--ink)}
.has-thumb>button[aria-pressed=true]{background:transparent}
.switch-thumb{position:absolute;top:0;left:0;z-index:0;border-radius:999px;pointer-events:none}
.switch-thumb.is-ready{transition:transform .6s cubic-bezier(.3,1.25,.4,1),width .6s cubic-bezier(.3,1.25,.4,1),height .6s cubic-bezier(.3,1.25,.4,1)}
.layer-switch .switch-thumb{background:#fff}
.building-switch .switch-thumb{background:var(--orange)}
.toolbar-end{display:flex;align-items:center;gap:var(--frame)}
.tour-toggle{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:14px;white-space:nowrap;transition:background-color .3s}
.tour-toggle:hover{background:rgba(255,255,255,.16)}
.tour-toggle svg{width:15px;height:15px}
.tour-toggle .icon-play,.tour-toggle[data-playing=false] .icon-pause{display:none}
.tour-toggle[data-playing=false] .icon-play{display:block}
html:not(.js) .tour-toggle{display:none}
.explorer-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--frame)}
.drawing-panel{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;padding:30px 24px 50px;border-radius:var(--r-card);background:#F5F7F8}
.plan-sheet{position:relative;width:100%;max-width:900px}
.building-plan svg{width:100%;height:auto;overflow:visible}
.building-plan .system-layer{display:none}
.explorer[data-layer=electrical] .layer-electrical,.explorer[data-layer=testing] .layer-testing,.explorer[data-layer=lighting] .layer-lighting,.explorer[data-layer=fire-safety] .layer-fire-safety,.explorer[data-layer=surveys] .layer-surveys,.explorer[data-layer=maintenance] .layer-maintenance,.explorer[data-layer=security] .layer-security,.explorer[data-layer=data] .layer-data{display:inline}
.sheet-note{position:absolute;left:22px;right:22px;bottom:16px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-3)}
.hotspots{position:absolute;inset:0;pointer-events:none}
.hotspot{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:auto}
.hotspot:hover,.hotspot:focus-visible{z-index:4}
.hotspot-number{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #6A818E,0 1px 3px rgba(18,27,32,.08);color:var(--ink);font-size:11px;font-weight:500;line-height:1;transition:background-color .25s,transform .3s var(--ease),box-shadow .25s}
.hotspot:hover .hotspot-number{transform:scale(1.04)}
.hotspot.active .hotspot-number{background:var(--orange);box-shadow:0 0 0 2px rgba(255,107,0,.15),0 1px 3px rgba(18,27,32,.08)}
.hotspot-label{position:absolute;bottom:calc(100% - 2px);left:50%;width:max-content;max-width:220px;padding:7px 11px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:400;line-height:1.35;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s,transform .15s,visibility .15s}
.hotspot:is(:hover,:focus-visible) .hotspot-label{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hotspot[data-label-align=start] .hotspot-label{left:0;transform:translate(0,4px)}
.hotspot[data-label-align=end] .hotspot-label{left:auto;right:0;transform:translate(0,4px)}
.hotspot:is(:hover,:focus-visible)[data-label-align=start] .hotspot-label,.hotspot:is(:hover,:focus-visible)[data-label-align=end] .hotspot-label{transform:translate(0,0)}
.information-panel{display:flex;flex-direction:column;min-width:0;padding:26px 26px 18px;border-radius:var(--r-card);background:var(--ink-soft);color:#fff}
.panel-context{font-size:13px;color:rgba(255,255,255,.6)}
.service-heading{margin-top:8px;font-size:28px;line-height:1.15;letter-spacing:-.015em}
.service-summary{margin-top:10px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.7)}
.drawing-key{margin-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.key-item{position:relative;padding:8px 0 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.key-button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;border-radius:8px;font-size:16px;font-weight:400;line-height:1.3}
.key-number{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);font-size:13px;font-weight:500;transition:background-color .25s,box-shadow .25s,color .25s}
.key-button:hover .key-title{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:1.5px;text-underline-offset:4px}
.key-note{margin:2px 0 0 42px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);transition:color .25s}
.key-item.is-active .key-number{background:var(--orange);box-shadow:none;color:var(--ink)}
.key-item.is-active .key-note{color:rgba(255,255,255,.9)}
.key-item::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;opacity:0}
.explorer[data-touring=true] .key-item.is-timing::after{opacity:1;animation:timer 6s linear forwards}
@keyframes timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.explorer[data-view=details] .panel-context{display:none}
.service-work{margin-top:14px}
.service-work .work-list{border-top:1px solid rgba(255,255,255,.12)}
.service-work .work-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.service-work .work-list h4{font-size:15.5px;line-height:1.35}
.service-work .work-list p{margin-top:4px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.65)}
.service-work .contact-pills{margin-top:16px}
.service-detail-link{display:flex;align-items:center;width:100%;min-height:48px;margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:400;color:#fff}
.detail-open,.detail-close{display:flex;align-items:center;gap:10px}
.service-detail-link svg{width:18px;height:18px;flex:none;color:var(--orange);transition:transform .45s var(--ease)}
.service-detail-link:hover .detail-open svg{transform:translateX(4px)}
.service-detail-link:hover .detail-close svg{transform:translateX(-4px)}
.service-detail-link .detail-close,.explorer[data-view=details] .detail-open{display:none}
.explorer[data-view=details] .detail-close{display:flex}
.no-script{margin-top:12px;color:rgba(255,255,255,.75)}
.no-script a{text-decoration:underline}

/* systems drawn on the plans: the home drawing and the Services figures */
.system-step{opacity:.5;transition:opacity .3s ease}
.system-step.is-active{opacity:1}
.equipment{fill:none;stroke:#8B9CA5;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round;transition:stroke .3s ease}
.equipment>rect:first-child,.equipment>circle:first-child,.equipment .symbol-case{fill:#fff}
.system-step.is-active .equipment{stroke:#253C47;stroke-width:1.5}
.symbol-accent{stroke:var(--system-color)}
.equipment .symbol-screen{fill:#E9EFF0;stroke-width:1}
.equipment .symbol-indicator{fill:var(--system-color);stroke:none}
.system-step.is-active :is(.equipment-linear,.equipment-pendant,.equipment-highbay,.equipment-panel-light,.equipment-hall-light,.equipment-floodlight,.equipment-downlight)>:first-child{fill:#FFF0DE}
.route-casing{fill:none;stroke:#fff;stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.system-step:not(.is-active) :is(.system-route,.route-casing,.route-pulse){visibility:hidden}
.system-route{fill:none;stroke:var(--system-color);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.system-step.is-active .system-route{stroke-width:2.4}
.route-circuit,.route-control{stroke-dasharray:100;stroke-dashoffset:0}
.explorer .system-step.is-active :is(.route-circuit,.route-control){animation:trace 1s var(--ease) both}
.route-control{stroke-width:1.4;opacity:.7}
.system-step.is-active .route-control{stroke-width:1.9}
.route-probe{stroke-width:1.6}
.route-alarm{stroke-dasharray:2 1.5;stroke-width:1.6}
.route-beam{stroke-dasharray:1 2;stroke-width:2}
.route-data{stroke-dasharray:3 2;stroke-width:1.8}
.route-survey{stroke-dasharray:2 2;stroke-width:1.8}
.route-escape{stroke:var(--escape);stroke-width:3}
.escape-arrow{fill:none;stroke:var(--escape);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.system-area{fill:var(--system-color);fill-opacity:.055;stroke:var(--system-color);stroke-opacity:.22;stroke-width:.85}
.system-step:not(.is-active) :is(.system-area,.survey-bracket,.escape-arrow){opacity:0}
.area-light{fill:#F9BB74;fill-opacity:.13;stroke:none}
.system-step.is-active .area-light{fill-opacity:.15}
.area-inspection,.area-maintenance{stroke-dasharray:4 3;stroke-opacity:.7;stroke-width:1.3}
.area-survey{fill-opacity:.05;stroke-dasharray:5 3;stroke-opacity:.6;stroke-width:1.2}
.area-detection{fill-opacity:.08;stroke-opacity:.3;stroke-dasharray:4 4}
.survey-bracket{fill:none;stroke:var(--system-color);stroke-width:1.2}
.system-step :is(.equipment-exit,.equipment-emergency){stroke:var(--escape)}
.point-leader{fill:none;stroke:#7C929E;stroke-width:1;opacity:.65;stroke-linejoin:round}
.system-step:not(.is-active) .point-leader{opacity:0}
.route-pulse{fill:none;stroke:#FFF6EA;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:3.5 96.5;stroke-dashoffset:0;opacity:0;pointer-events:none}
/* current runs twice each time a point lights, and never while off screen */
.explorer .system-step.is-active .route-pulse{animation:current 2.6s linear 1s 2}
.explorer:not([data-inview=true]) .route-pulse{animation-play-state:paused}
@keyframes trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes current{from{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-100;opacity:1}}

/* ------------------------------------------------------------------ questions */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--frame);margin-bottom:var(--frame);scroll-margin-top:90px}
.faq-title{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:min(460px,60vh);margin:0;padding:30px var(--pad)}
.faq-title h2{font-size:clamp(2.5rem,1.2rem + 3.4vw,4rem);line-height:1.05;letter-spacing:-.032em}
.faq-title p{max-width:24em;color:rgba(255,255,255,.7)}
.faq-list{display:grid;gap:var(--frame);align-content:start}
.faq-item{border-radius:var(--r-tile);background:var(--tile) var(--tile-image);transition:background-color .35s var(--ease)}
.faq-item:hover{background-color:var(--tile-2)}
.faq-item>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-height:104px;padding:22px 18px 22px 24px;border-radius:var(--r-tile);font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);font-weight:400;line-height:1.4;list-style:none;cursor:pointer}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .55s var(--ease),background-color .35s var(--ease),color .35s var(--ease)}
.faq-icon svg{width:20px;height:20px}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:var(--orange);color:var(--ink)}
.faq-answer{overflow:hidden}
.faq-answer p{max-width:40em;padding:0 70px 26px 24px;font-size:15px;line-height:1.75;color:var(--ink-2)}

/* ------------------------------------------------------------------ footer */
.site-footer{width:100%;max-width:1760px;margin:0 auto;padding:0 var(--frame) var(--frame)}
.footer-tile{padding:20px var(--pad) 0;border-radius:var(--r-tile);background:var(--ink);color:#fff}
.footer-tile .accent{color:var(--orange)}
.footer-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.footer-copy h2{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.025em}
.footer-copy p{margin-top:4px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7)}
.footer-cta .contact-pills{justify-content:flex-end}
.footer-cta .pill{height:44px;padding:0 18px;font-size:13px;gap:8px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;margin-top:16px;padding:4px 0 8px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.58)}
.footer-bottom nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-left:-8px}
.footer-bottom nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:rgba(255,255,255,.72);transition:color .3s}
.footer-bottom nav a:hover,.footer-bottom nav a:focus-visible{color:#fff}

/* ------------------------------------------------------------------ inner pages */
.page-hero{padding:clamp(130px,16vh,170px) var(--inset) 56px}
.page-hero h1{font-size:clamp(2.6rem,1rem + 4.9vw,5.4rem);line-height:1.02;letter-spacing:-.036em}
.page-hero .hero-intro{margin-top:28px;max-width:36em}
.chips ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chips a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--tile) var(--tile-image);font-size:14px;font-weight:400;transition:background-color .35s var(--ease),color .35s var(--ease)}
.chips a:hover{background:var(--ink);color:#fff}
.send-note{margin-top:28px;max-width:30em;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.send-note span{display:block;margin-bottom:4px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.service-figure{overflow:hidden;border-radius:var(--r-card);background:#F5F7F8;box-shadow:inset 0 0 0 1px var(--line)}
.service-figure svg{width:100%;height:auto;transition:transform .9s var(--ease)}
.service-figure :is(.point-leader,.target-halo){display:none}
.service-figure figcaption{padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--frame);margin-top:var(--frame)}
.job{padding:18px 18px 20px;border-radius:14px;background:#fff}
.job h3{font-size:16px;font-weight:500;line-height:1.35}
.job p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--frame);margin-bottom:var(--frame)}
.profile{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:26px;margin:0;padding:10px;background:var(--tile) var(--tile-image);scroll-margin-top:96px}
.profile-photo{width:100%;height:100%;min-height:380px;object-fit:cover;object-position:50% 20%;border-radius:14px}
.profile-copy{display:flex;flex-direction:column;padding:18px 18px 18px 0}
.profile-copy h2{margin-top:6px;font-size:clamp(1.8rem,1.2rem + 1.4vw,2.6rem);line-height:1.1;letter-spacing:-.025em}
.profile-bio{margin-top:16px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.profile-list{display:grid;gap:8px;margin-top:auto;padding-top:26px}
.profile-list li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:400}
.profile-list li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.privacy-head{max-width:980px;padding:clamp(130px,16vh,170px) var(--inset) 40px}
.privacy-head h1{font-size:clamp(2.4rem,1rem + 4vw,4.6rem);line-height:1.04;letter-spacing:-.034em}
.updated{margin-top:18px;font-size:13px;color:var(--ink-3)}
.privacy-head .lede{margin-top:22px;max-width:40em;font-size:clamp(1rem,.92rem + .3vw,1.15rem);line-height:1.7}
.privacy-copy{margin-bottom:var(--frame);padding:10px var(--pad) 44px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image)}
.privacy-copy>*{max-width:760px}
.privacy-copy h2{margin-top:34px;font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);letter-spacing:-.015em}
.privacy-copy p{margin-top:12px;color:var(--ink-2);line-height:1.75}
.privacy-copy a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;overflow-wrap:anywhere}



/* ------------------------------------------------------------------ sub-pages */
.proof-bar{transition:box-shadow .45s var(--ease)}
.proof-bar:hover{box-shadow:0 6px 34px rgba(18,27,32,.12),inset 0 0 0 1px rgba(18,27,32,.06)}
.page-hero-actions{margin-top:30px}
.arrow-button-light .arrow-button-label{background:#fff;color:var(--ink)}
.arrow-button-light .arrow-circle{background:#fff;color:var(--ink)}
.chips-list{display:flex;flex-wrap:wrap;gap:8px}
.chips-list a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--tile) var(--tile-image);font-size:14px;font-weight:400;transition:background-color .35s var(--ease),color .35s var(--ease)}
.chips-list a:hover{background:var(--ink);color:#fff}

.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--frame);margin-bottom:var(--frame)}
.service-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 16px;height:100%;padding:10px 10px 22px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image);transition:color .45s var(--ease)}
.service-card::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:inset(100% 0 0 0 round var(--r-tile));transition:clip-path .6s var(--flow)}
.service-card:hover,.service-card:focus-visible{color:#fff}
.service-card:hover::before,.service-card:focus-visible::before{clip-path:inset(0 0 0 0 round var(--r-tile))}
.service-card-figure{grid-column:1 / -1;display:block;overflow:hidden;border-radius:14px;background:#F5F7F8;aspect-ratio:3/2}
.service-card-figure svg{width:100%;height:100%;transition:transform .9s var(--ease)}
.service-card:hover .service-card-figure svg{transform:scale(1.03)}
.service-card:hover .route-pulse{animation:current 2.2s linear 2}
.service-card .point-leader,.service-card .target-halo{display:none}
.service-card-text{padding-left:14px}
.service-card-text h3{font-size:clamp(1.15rem,1rem + .4vw,1.4rem);letter-spacing:-.012em}
.service-card-text>span{display:block;margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-2);transition:color .45s var(--ease)}
.service-card:hover .service-card-text>span,.service-card:focus-visible .service-card-text>span{color:rgba(255,255,255,.72)}
.service-card>.arrow-circle{align-self:start;margin-right:10px}
.service-card:hover>.arrow-circle,.service-card:focus-visible>.arrow-circle{background:#fff;color:var(--ink)}

.service-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--frame);padding:var(--frame);background:var(--tile) var(--tile-image)}
.service-detail .service-figure{align-self:start}
.service-detail-copy{padding:26px 24px 24px 16px}
.service-detail-copy h2{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);letter-spacing:-.02em}
.service-detail .jobs{grid-template-columns:minmax(0,1fr);margin-top:20px}
.service-detail .send-note{margin-top:24px}
.related{padding:56px 0 0;margin-bottom:var(--frame)}
.standard-grid-compact{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-flow:row}
.standard-grid-compact .standard-wide{grid-column:auto}
.related-more{margin-top:24px;padding:0 var(--inset)}
.other-services{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:40px 0 50px;padding:0 var(--inset)}
.other-services>p{font-size:14px;color:var(--ink-2)}

.process-row{padding:56px 0 0;margin-bottom:var(--frame);scroll-margin-top:90px}
.process-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--frame)}
.process-tile{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(220px,20vw,280px);padding:18px 24px 24px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image)}
.process-number{font-size:14px;font-weight:500;color:var(--orange-ink)}
.process-tile h3{font-size:clamp(1.15rem,1rem + .45vw,1.45rem);letter-spacing:-.012em}
.process-tile p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.process-tile-last{background:var(--orange)}
.process-tile-last .process-number,.process-tile-last p{color:var(--ink)}

.send-guide{padding:56px 0 0;margin-bottom:var(--frame)}
.send-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--frame)}
.send-tile{padding:22px 24px 24px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image)}
.send-tile a{font-size:17px;font-weight:400;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;transition:background-size .45s var(--ease)}
.send-tile a:hover{background-size:100% 1.5px}
.send-tile p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.faq-title .contact-pills,.faq-title .arrow-button{margin-top:auto}
.faq-title p{margin-bottom:10px}
.questions-page .faq{margin-top:0}

/* ------------------------------------------------------------------ motion */
.logo-trace{stroke-dasharray:1 1}
.first-visit .logo-trace{animation:logo-draw 1.25s cubic-bezier(.6,.05,.25,1) .2s both}
.first-visit .logo-trace+.logo-trace{animation-delay:.35s}
.first-visit .logo-terminal{animation:fade-in .5s ease 1.15s both}
@keyframes logo-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.logo-pulse path{stroke-dasharray:.16 1.3;stroke-dashoffset:.16;opacity:0;animation:logo-current 3.6s cubic-bezier(.5,0,.35,1) infinite}
.logo-pulse path+path{animation-delay:.1s}
@keyframes logo-current{0%{stroke-dashoffset:.16;opacity:0}8%{opacity:.85}28%{opacity:.85}36%{stroke-dashoffset:-1.1;opacity:0}100%{stroke-dashoffset:-1.1;opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .rise{animation:rise .9s var(--ease) .1s both}
.js .rise-2{animation-delay:.22s}
.js .rise-3{animation-delay:.34s}
/* The orange word that opens each page switches on. A hot front carries current
   through it and leaves it lit, it flares once, then current passes through
   again every few seconds (and straight away on hover). Three layers clipped to
   the letters, top to bottom: the passing pulse, the lit word with its front,
   the unlit word. Only background size and position animate, which WebKit
   keeps clipped to the text; animated custom properties lose the clip there. */
@supports (-webkit-background-clip:text){
  :is(.hero-title,.page-hero h1) .accent{white-space:nowrap;color:transparent;
    background-image:linear-gradient(100deg,rgba(255,150,40,0),rgba(255,160,50,.92) 36%,rgba(255,206,122,.96) 50%,rgba(255,160,50,.92) 64%,rgba(255,150,40,0)),
      linear-gradient(90deg,var(--orange-text) calc(100% - 1.5em),#FF8A1F calc(100% - .9em),#FFC266 calc(100% - .35em),#FFE7C4 calc(100% - .08em),rgba(255,231,196,0)),
      linear-gradient(#DADDDF,#DADDDF);
    background-repeat:no-repeat;background-size:2.4em 100%,calc(100% + 1.5em) 100%,100% 100%;background-position:-2.4em 0,0 0,0 0;
    -webkit-background-clip:text;background-clip:text;
    animation:charge 1.3s cubic-bezier(.55,.05,.3,1) .45s both,flare 1.5s ease-out .95s both,glint 7s ease-in-out 3s infinite}
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    :is(.hero-title,.page-hero h1) .accent:hover{animation-name:charge,flare,glint-now;animation-duration:1.3s,1.5s,1.1s;animation-delay:.45s,.95s,0s}
  }
}
@keyframes charge{from{background-size:2.4em 100%,0% 100%,100% 100%}to{background-size:2.4em 100%,calc(100% + 1.5em) 100%,100% 100%}}
@keyframes flare{0%,100%{filter:drop-shadow(0 0 0 rgba(255,107,0,0))}40%{filter:drop-shadow(0 0 18px rgba(255,112,10,.45))}}
@keyframes glint{0%{background-position:-2.4em 0,0 0,0 0}18%,100%{background-position:calc(100% + 2.4em) 0,0 0,0 0}}
@keyframes glint-now{from{background-position:-2.4em 0,0 0,0 0}to{background-position:calc(100% + 2.4em) 0,0 0,0 0}}
@media (forced-colors:active),print{
  :is(.hero-title,.page-hero h1) .accent{background:none;color:var(--orange-text);animation:none;filter:none}
}
/* Between pages the header stays put while the page cross-fades with a short
   rise (Chrome, Edge and Safari; elsewhere pages simply load). A page that
   was prerendered on hover holds its entrance animations until it is shown. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:page-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:page-in .55s var(--ease) both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}}
.prerender *,.prerender *::before,.prerender *::after{animation-play-state:paused!important}
.is-leaving .site-header,.is-leaving .site-header::after,.is-leaving .mega,.is-leaving .mobile-menu,.is-leaving .scrim{transition:none!important}
/* Blocks rise into place as they arrive. Content is only hidden once the
   script has confirmed it can reveal it, and never with reduced motion. */
.reveal-ready .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--reveal-delay,0s)}
.reveal-ready .reveal:not(.is-seen){opacity:0;transform:translateY(26px)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1320px){
  .bar-phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bar-phone{width:44px;justify-content:center;padding:0}
  .explorer-toolbar{flex-direction:column;align-items:stretch}
  .layer-switch{justify-content:space-between}
  .toolbar-end{justify-content:space-between}
  .explorer-body{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:1240px){
  .standard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .service-cards,.send-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary,.bar-contact{display:none}
  .bar{gap:10px;height:62px;padding:0 8px 0 20px}
  .site-header{border-radius:31px}
  .bar-whatsapp,.menu-toggle{display:grid;place-items:center;width:46px;height:46px;border-radius:50%}
  .bar-whatsapp{margin-left:auto;background:var(--whatsapp);color:var(--ink)}
  .bar-whatsapp svg{width:20px;height:20px}
  .menu-toggle{color:var(--orange)}
  .menu-toggle svg{width:26px;height:26px}
  .menu-toggle .menu-close{display:none}
  .menu-toggle[aria-expanded=true]{color:var(--ink)}
  .menu-toggle[aria-expanded=true] .menu-dots{display:none}
  .menu-toggle[aria-expanded=true] .menu-close{display:block}
  .mega{display:none}
  .mobile-menu .mega-inner{max-height:calc(100dvh - var(--frame) - var(--frame) - 62px);overflow-y:auto;overscroll-behavior:contain}
  .explorer-body{grid-template-columns:minmax(0,1fr)}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-title{position:static;min-height:0}
  .faq-short .faq-list{grid-row:1}
  .faq-short .faq-title{grid-row:2}
}
@media (max-width:900px){
  .footer-cta{grid-template-columns:minmax(0,1fr)}
  .footer-cta .contact-pills{justify-content:flex-start}
  .service-detail{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:108px}
  .hero-circuit{width:100%;right:-30%;opacity:.55}
  .hero-foot,.hero-actions,.hero-team{grid-column:auto;grid-row:auto}
  .hero-team{justify-self:start;margin-top:0}
  .hero-actions{justify-self:start;justify-content:flex-start}
  .split-head{grid-template-columns:minmax(0,1fr)}
  .standard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standard-wide{grid-column:auto}
  .profiles{grid-template-columns:minmax(0,1fr)}
  .proof-bar{gap:10px;padding:14px 18px}
  .proof-track{width:100%}
}
@media (max-width:640px){
  :root{--frame:8px;--r-tile:18px}
  .service-cards,.send-grid,.process-tiles{grid-template-columns:minmax(0,1fr)}
  .qualification-grid,.service-guide{grid-template-columns:minmax(0,1fr)}
  .qualification-item{padding:18px 14px;gap:10px}
  .qualification-item .mark{min-width:40px;height:44px}
  .qualification-item .mark svg{width:38px;height:38px}
  .proof-list li{font-size:13px}
  .proof-mark{width:36px;height:40px}
  .proof-mark svg{width:34px;height:34px}
  .service-card-figure{aspect-ratio:2.3}
  .service-card{gap:12px;padding-bottom:16px}
  .service-card-text{padding-left:8px}
  .service-card-text>span{font-size:13px;line-height:1.6}
  .guide-item{padding:22px 20px}
  .process-tile{min-height:0;gap:20px}
  .service-detail-copy{padding:16px 10px 14px}
  body{font-size:15.5px}
  .brand .logo{width:136px}
  .hero-title{font-size:clamp(2.35rem,6vw + 1rem,3.2rem)}
  .home .hero-title{font-size:clamp(2.35rem,6vw + 1rem,3.2rem)}
  .hero-indent{padding-left:.8em}
  .hero-foot,.hero-actions{align-self:stretch}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .hero-actions .pill{padding:0 10px;font-size:12px;gap:6px}
  .person-chip{flex-direction:column;align-items:flex-start;gap:10px;padding:12px}
  .person-chip > img{width:52px;height:52px}
  .layer-switch{border-radius:22px}
  .layer-switch button{flex:1 1 30%;padding:0 10px}
  .building-switch{flex:1}
  .building-switch button{flex:1;padding:0 8px}
  .tour-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tour-toggle{width:52px;justify-content:center;padding:0}
  .drawing-panel{padding:14px 6px 44px}
  .sheet-note{flex-direction:column;gap:0;left:14px;bottom:10px}
  .information-panel{padding:22px 18px 14px}
  .jobs{grid-template-columns:minmax(0,1fr)}
  .standard-grid{grid-template-columns:minmax(0,1fr)}
  .profile{grid-template-columns:minmax(0,1fr)}
  .profile-photo{min-height:0;aspect-ratio:4/5;max-height:440px}
  .profile-copy{padding:8px 10px 14px}
  .faq-answer p{padding-right:24px}
  .footer-tile{padding-top:18px}
  .footer-cta .contact-pills{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:6px}
  .footer-cta .pill{padding:0 10px;font-size:12px;gap:6px}
  .footer-cta .pill svg{width:16px;height:16px}
  .footer-phone-number{display:none}
  .footer-bottom{margin-top:14px;padding-bottom:14px}
  .footer-bottom nav ul{column-gap:0}
  .footer-bottom nav a{padding:0 7px}
}
@media (max-width:360px){
  .hero-foot .pill{padding:0 8px;font-size:11px}
  .hero-foot .pill svg{width:16px;height:16px}
  .footer-bottom nav ul{margin-left:-4px}
  .footer-bottom nav a{padding:0 4px;font-size:11px}
}
@media (pointer:coarse){
  .layer-switch button,.building-switch button{height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .proof-list{animation:none}
  .proof-list[aria-hidden=true]{display:none}
  .proof-track{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}
  .proof-list{flex-wrap:wrap;gap:14px 30px}
  .route-pulse,.logo-pulse,.key-item::after{display:none}
  :is(.hero-title,.page-hero h1) .accent{animation:none}
  @view-transition{navigation:none}
}

html.menu-open{overflow:hidden}

@media (max-width:1100px) and (min-width:901px){
  .explorer-catalog{gap:var(--frame) 28px}
  .catalog-offerings li{grid-template-columns:26px minmax(0,1fr)}
  .catalog-offerings li p{grid-column:2}
}
@media (max-width:900px){
  .services-heading{grid-template-columns:minmax(0,1fr);gap:18px}
  .services-heading p{font-size:15px}
  .explorer-catalog{grid-template-columns:minmax(0,1fr);padding-left:0}
  .catalog-scene{grid-column:1;grid-row:1;top:80px;z-index:5;box-shadow:0 10px 0 0 #fff}
  .service-catalog{grid-column:1;grid-row:2;margin:0 var(--inset)}
  .explorer-catalog .plan-sheet{max-width:600px}
  .scene-labels{gap:12px;padding:6px 16px 8px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .scene-kicker{padding-left:9px}
  .scene-kicker .service-heading{font-size:15px}
  .scene-caption{padding:7px 9px;border-radius:8px}
  .scene-caption h4{font-size:14px;line-height:1.25;white-space:normal;text-wrap:balance}
  .scene-controls{left:8px}
}
@media (max-width:540px){
  .services-home{padding-top:50px}
  .services-heading{padding:0 20px;margin-bottom:26px}
  .service-catalog{margin:0 20px}
  .catalog-service{padding:22px 0 26px}
  .catalog-service-head{margin-bottom:14px}
  .catalog-offerings li{grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding:14px 14px 15px 12px}
  .catalog-offerings li p{grid-column:2}
  .catalog-offerings p{font-size:13.5px}
}
@media (max-height:700px) and (max-width:900px){
  /* Account for the label row while retaining space to read the pinned list. */
  .explorer-catalog .plan-sheet{max-width:min(600px,calc((100svh - 296px) * var(--plan-ratio)))}
}
@media (max-width:360px){
  .explorer-catalog .drawing-panel{padding-bottom:8px}
}
@media (max-height:480px) and (min-width:640px) and (max-width:900px){
  .scene-labels{position:absolute;inset:12px 16px auto;height:auto;padding:0;grid-template-columns:minmax(0,25%) auto;justify-content:space-between;align-items:start}
  .explorer-catalog .plan-sheet{max-width:min(calc((100svh - 240px) * var(--plan-ratio)),calc(100% - 360px))}
}