/* 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')}
/* Until Lexend arrives, Arial is scaled to its measured width (6.3% wider at the
   body weight), so lines break in the same places and the text does not reflow. */
@font-face{font-family:'Lexend fallback';src:local('Arial');size-adjust:106.3%}

: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:#677076;
  --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','Lexend fallback',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)}
/* Nothing highlights on a stray drag or double-click. Selection is kept for
   what people actually copy: service descriptions, answers, what to send,
   contact and company details and the privacy notice (Dan, 17 September 2026). */
body{-webkit-user-select:none;user-select:none}
.selectable,.page-hero .hero-intro,.job,.catalog-offerings li,.send-note,.scene-send,.send-tile,.plan-tile,.context-grid,.guide-item,
.support-schedule .split-head p,.project-note p,.service-crosslink,.faq-answer,.detail-strip dd,.profile-bio,.profile-list,
.split-copy,.footer-company,.privacy-copy{-webkit-user-select:text;user-select:text}
.plan-tile h2,.offering-point{-webkit-user-select:none;user-select:none}
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-ink{background:var(--ink);color:#fff}
.pill-ink::before{background:var(--orange)}
.pill-ink:hover,.pill-ink:focus-visible{color:var(--ink)}
.pill-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(18,27,32,.34)}
.pill-ghost svg{color:var(--orange-ink)}
.pill-ghost:is(:hover,:focus-visible) svg{color:inherit}
.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{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.contact-pills-dark .pill-ghost svg{color:inherit}
.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{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:18px;height:58px;padding:0 9px 0 30px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:400;white-space:nowrap;transition:color .45s var(--ease)}
.arrow-button::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--orange);transform:translateX(-102%);transition:transform .6s var(--flow)}
.arrow-button .arrow-circle{background:#fff;color:var(--ink)}
.arrow-button:is(:hover,:focus-visible){color:var(--ink)}
.arrow-button:is(:hover,:focus-visible)::before{transform:none}
.arrow-button:is(:hover,:focus-visible) .arrow-circle{background:var(--ink);color:#fff}
.arrow-button-light{background:#fff;color:var(--ink)}
.arrow-button-light .arrow-circle,.arrow-button-ghost .arrow-circle{background:var(--ink);color:#fff}
.arrow-button-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,27,32,.2)}
.arrow-button-ghost::before{background:var(--ink)}
.arrow-button-ghost:is(:hover,:focus-visible){color:#fff}
.arrow-button-ghost:is(:hover,: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)}
.new-badge{display:inline-flex;align-items:center;flex:none;margin-left:8px;padding:3px 5px;border-radius:4px;background:var(--orange);color:var(--ink);font-size:9px;font-weight:500;line-height:1;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.budget-nav{letter-spacing:.07em;padding-left:9px;padding-right:9px}
.mobile-link-label .new-badge{margin-left:12px}
.site-footer .new-badge{font-size:8px;padding:3px 4px}
.nav-toggle{position:relative;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 .42s var(--ease),visibility 0s linear .42s}
.mega.is-open,.mobile-menu.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .42s var(--ease),visibility 0s}
.mega-inner{min-height:0;overflow:hidden}
.mega-grid{display:grid;gap:10px;padding:6px 10px 10px}
.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,.mega-row{isolation:isolate;overflow:hidden}
.mega-tile::before,.mega-row::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--orange-soft);transform:translateX(-102%);transition:transform .55s var(--flow)}
.mega-tile:is(:hover,:focus-within)::before,.mega-row:is(:hover,:focus-within)::before{transform:none}
.mega-row-icon{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-right:12px;color:var(--orange-ink)}
.mega-row-icon svg{width:22px;height:22px}
.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-link{transition:transform .45s var(--ease)}
.mega-row:hover .mega-link{transform:translateX(4px)}
/* Services: a short list, and a pane that shows the service being pointed at. */
.mega-services{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px;padding:6px 10px 10px}
.mega-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.mega-service{min-height:68px;padding:0 52px 0 16px}
.mega-service.mega-all{grid-column:1 / -1;min-height:56px;padding-left:20px}
.mega-service-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;margin-right:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,27,32,.05);transition:transform .55s var(--ease)}
.mega-service-icon svg{width:26px;height:26px}
.mega-service:hover .mega-service-icon{transform:scale(1.06)}
.mega-service .mega-link{padding-right:0;font-size:16px}
.mega-preview{position:relative;overflow:hidden;display:grid;min-height:100%;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,27,32,.08)}
.mega-pane{grid-area:1 / 1;position:relative;z-index:1;isolation:isolate;min-height:250px;display:flex;flex-direction:column;padding:26px 28px 28px;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.mega-pane.is-current{opacity:1;transform:none;transition-delay:.06s}
/* A menu image is not drawn until the bar is approached and its real file is
   set; both kinds are absolutely placed, so nothing moves when they appear. */
.site-header img[src^="data:"]{display:none}
.mega-pane-plan{position:absolute;top:0;right:0;z-index:-1;width:88%;height:auto;opacity:.6;-webkit-mask-image:linear-gradient(200deg,#000 30%,transparent 72%);mask-image:linear-gradient(200deg,#000 30%,transparent 72%);pointer-events:none}
.mega-pane-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,27,32,.08),0 8px 20px -12px rgba(18,27,32,.35)}
.mega-pane-icon svg{width:38px;height:38px}
.mega-pane-icon-plain{color:var(--orange-ink)}
.mega-pane-title{margin-top:auto;padding-top:20px;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.mega-pane-list{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.mega-pane-list li{padding:6px 12px;border-radius:999px;background:var(--tile);font-size:13px;line-height:1.35;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;object-position:30% 50%;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 .mega-arrow{top:50%;margin-top:-12px}
.mega.is-open .mega-inner>*{animation:menu-in .38s var(--ease) .08s both}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* The scrim stops catching clicks as soon as a menu closes; while it fades
   out it would otherwise swallow the next click on the page. */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(18,27,32,.32);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.scrim.is-on{opacity:1;visibility:visible;pointer-events:auto;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)}
/* Home, desktop: headline, introduction and actions read as one stacked group
   on an 8px scale (40 / 16 / 32), centred in an opening that leaves the strip
   below peeking in. The team sits opposite, level with the actions, and the C
   starts under the header so it reads whole, as the logo (Dan, 17 September 2026). */
@media (min-width:901px){
  .home .hero{min-height:min(calc(100svh - 84px),780px);grid-template-rows:auto auto auto;align-content:center;gap:0 40px;padding-top:132px;padding-bottom:64px}
  .home .hero-circuit{top:84px;height:calc(100% - 84px)}
  .home .hero-lead{margin-bottom:40px}
  .home .hero-foot{grid-row:2;gap:16px}
  .home .hero-location{margin-bottom:0}
  .home .hero-actions{grid-column:1;grid-row:3;justify-self:start;justify-content:flex-start;margin-top:32px}
  .home .hero-team{grid-row:2 / span 2;align-self:end;margin-top:0}
}
.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)}
.split-copy p+p{margin-top:14px}
.team-page .registration a{text-decoration:underline;text-underline-offset:4px}
.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)}
/* Planning notes are ruled like a specification, in line with the page's text. */
.guide-item{margin:0 var(--inset);padding:22px 0 30px;border-top:1px solid var(--line);border-radius:0}
.guide-item h2{font-size:22px;line-height:1.4;letter-spacing:-.02em}
.guide-item p{max-width:38em;font-size:15px;line-height:1.8;color:var(--ink-2);margin-top:12px}
.guidance-note{padding:24px var(--inset);max-width:80em;font-size:14px;line-height:1.8;color:var(--ink-2)}
.guidance-note a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.contact-details{margin:0 var(--inset)}
.detail-strip{display:flex;flex-wrap:wrap;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.detail-strip>div{padding:18px 44px 20px 0}
.detail-strip>div+div{padding-left:44px;border-left:1px solid var(--line)}
.detail-strip dt{font-size:13px;color:var(--ink-2)}
.detail-strip dd{margin:4px 0 0;font-size:17px;font-weight:400}
.detail-strip a{overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .45s var(--ease)}
.detail-strip a:is(:hover,:focus-visible){background-size:100% 1px}
.copy-pair{display:inline-flex;align-items:center;max-width:100%}
.copy-button{position:relative;flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin-left:8px;vertical-align:middle;border-radius:50%;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.copy-button svg{grid-area:1 / 1;width:16px;height:16px;transition:opacity .25s var(--ease),transform .4s var(--ease)}
.copy-button svg+svg{opacity:0;transform:scale(.6)}
.copy-button:is(:hover,:focus-visible){background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.copy-button.is-copied{background:var(--orange);color:var(--ink);box-shadow:none}
.copy-button.is-copied svg{opacity:0;transform:scale(.6)}
.copy-button.is-copied svg+svg{opacity:1;transform:none}
.copy-note{position:absolute;left:50%;bottom:calc(100% + 6px);padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:400;letter-spacing:.02em;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.copy-button:is(:hover,:focus-visible,.is-copied) .copy-note{opacity:1;transform:translate(-50%,0)}
.detail-strip dd{display:flex;align-items:center;flex-wrap:wrap}
.service-context{padding:34px var(--inset) 38px;margin-bottom:var(--frame)}
.service-context h2,.plan-tile h2{font-size:22px;line-height:1.35;letter-spacing:-.02em}
.context-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,96px);margin-top:22px}
.context-grid article{padding:22px 0 26px;border-top:1px solid var(--line)}
.context-grid h3{font-size:16px;font-weight:400}
.service-context p{max-width:40em;margin-top:10px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.codes{display:grid;gap:10px;margin:14px 0 0}
.codes>div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:baseline}
.codes dt{display:grid;place-items:center;height:28px;border-radius:8px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,27,32,.22)}
.codes .code-fail dt{background:var(--orange-soft);box-shadow:inset 0 0 0 1px rgba(255,107,0,.45)}
.codes dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.plan-aside{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--ink-2)}
/* Planning: who, how, what and cost as four tiles with their own shapes. */
.planning{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--frame);margin:var(--frame) 0}
.plan-tile{display:flex;flex-direction:column;margin:0;padding:30px clamp(24px,2.4vw,36px) 32px;background:var(--tile) var(--tile-image)}
.plan-who,.plan-quote{grid-column:span 5}
.plan-how,.plan-receive{grid-column:span 7}
.plan-tile h2{display:flex;align-items:center;gap:14px}
.plan-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--orange-ink);box-shadow:inset 0 0 0 1px rgba(18,27,32,.06)}
.plan-icon svg{width:21px;height:21px}
.plan-tile>p:not(.plan-aside){max-width:36em;margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.plan-tile .plan-aside{margin-top:auto;padding-top:14px}
.plan-tile>p+.plan-aside,.plan-factors+.plan-aside{margin-top:22px}
.plan-steps{display:grid;gap:0;margin:18px 0 0;padding:0;list-style:none;counter-reset:step}
.plan-steps li{position:relative;padding:0 0 18px 44px;font-size:16px;line-height:1.7;color:var(--ink-2);counter-increment:step}
.plan-steps li:last-child{padding-bottom:0}
.plan-steps li::before{content:counter(step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:500}
.plan-steps li:not(:last-child)::after{content:'';position:absolute;left:12.5px;top:31px;bottom:4px;width:1px;background:repeating-linear-gradient(var(--orange) 0 3px,transparent 3px 7px)}
.plan-factors{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.plan-factors li{padding:8px 14px;border-radius:999px;background:#fff;font-size:14px;line-height:1.35;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,27,32,.08)}
.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}

/* ------------------------------------------------------------------ service catalogue */
/* One complete directory, with a single drawing that follows the reader. */
.services-home{padding-top:70px;margin-bottom:var(--frame);scroll-margin-top:100px}
/* Homepage: each group of services is its own area, listing its services with
   their symbols, beside Working with Castle Bank (Dan, 17 September 2026). */
.home-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--frame);align-items:stretch;padding-top:70px;margin-bottom:var(--frame)}
.home-split .services-home{display:flex;flex-direction:column;padding-top:0;margin-bottom:0}
.home-split .working{margin-bottom:0}
.help-bands{flex:1;display:grid;grid-auto-rows:1fr;gap:var(--frame)}
.help-band{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:16px clamp(20px,3vw,44px);padding:18px 14px 18px var(--pad);border-radius:var(--r-tile);background:var(--tile) var(--tile-image)}
.help-band h3{font-size:clamp(1.2rem,1rem + .5vw,1.5rem);letter-spacing:-.015em}
.help-band p{margin-top:8px;max-width:26em;font-size:14px;line-height:1.65;color:var(--ink-2)}
.help-links{display:grid;gap:6px}
.help-link{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px 6px 10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:400;line-height:1.35;transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.help-icon{flex:none;display:grid;place-items:center;width:36px;height:36px}
.help-icon svg{width:32px;height:32px}
.help-link-text{flex:1;min-width:0}
.help-link-arrow{flex:none;display:grid;place-items:center;width:30px;height:30px;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)}
.help-link-arrow svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.help-link:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(18,27,32,.28),0 10px 24px -14px rgba(18,27,32,.35)}
/* An orange mark rises on the tile's leading edge; it suits one line or two. */
.help-link::after{content:'';position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:var(--orange);transform:scaleY(0);transition:transform .45s var(--ease)}
.help-link:is(:hover,:focus-visible)::after{transform:none}
.help-link:is(:hover,:focus-visible) .help-link-arrow{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.help-link:is(:hover,:focus-visible) .help-link-arrow svg{transform:rotate(45deg)}
.service-jumps{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--inset);margin-bottom:32px}
.service-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:24px;background:var(--tile);font-size:14px;transition:background-color .35s var(--ease)}
.service-jumps a:is(:hover,:focus-visible){background:var(--tile-2);text-decoration:underline;text-underline-offset:4px}
.service-jumps{scroll-margin-top:100px}
.js .service-jumps a{transition:background-color .35s var(--ease),color .35s var(--ease)}
.js .service-jumps a[aria-current]{background:var(--ink);color:#fff;text-decoration:none}
.catalog-offerings li{transition:background-color .35s var(--ease),box-shadow .35s var(--ease),opacity .45s var(--ease)}
.explorer-catalog[data-focus=true] .catalog-service.is-current .catalog-offerings li:not(.is-shown){opacity:.42}
.service-directory{margin-bottom:var(--frame)}
/* The heading row shares the bands' grid, so View all services sits over the
   service rows as one of them (Dan, 17 September 2026). */
.services-heading{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:end;gap:16px clamp(20px,3vw,44px);padding:0 14px 0 var(--pad);margin-bottom:var(--frame)}
.help-link-all .help-icon{color:var(--orange)}
.help-link-all .help-icon svg{width:24px;height:24px}
.services-heading h2{padding-bottom:8px;font-size:clamp(1.7rem,.9rem + 1.5vw,2.6rem);line-height:1.1;letter-spacing:-.03em}
/* Homepage: working with Castle Bank, one tile with the four steps. */
.working{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:26px;padding:clamp(28px,3.6vw,52px) var(--pad);background:var(--tile) var(--tile-image)}
.working h2{font-size:clamp(1.55rem,1.15rem + 1vw,2.1rem);line-height:1.3;letter-spacing:-.02em}
.working-intro p{max-width:30em;margin-top:14px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.working-intro .arrow-button{margin-top:22px}
.working-steps>p{font-size:15px;line-height:1.75;color:var(--ink-2)}
.step-list{margin-top:12px;border-top:1px solid rgba(18,27,32,.12)}
.step-list li{position:relative;display:flex;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid rgba(18,27,32,.12)}
/* As each step arrives, current runs along its rule and fades. */
.reveal-ready .step-list li::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--flow) calc(var(--reveal-delay,0s) + .2s),opacity .7s ease calc(var(--reveal-delay,0s) + 1.2s)}
.reveal-ready .step-list li.is-seen::after{transform:none;opacity:0}
.step-number{flex:none;width:26px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--orange-ink)}
.step-list h3{font-size:clamp(1.05rem,.98rem + .3vw,1.3rem);letter-spacing:-.01em}
/* A dotted circuit behind a page opening (Contact). */
.page-hero-art{position:relative;overflow:hidden}
.page-hero-art>:not(.hero-circuit){position:relative}
/* Keep the wiring to the space beside the introduction and contact pills. */
.page-hero-art .hero-circuit{width:min(60%,calc(100% - 760px))}
@media (max-width:1000px){
  .home-split{grid-template-columns:minmax(0,1fr)}
  .help-bands{grid-auto-rows:auto}
}
@media (max-width:640px){
  .help-band{grid-template-columns:minmax(0,1fr);padding:18px 12px 12px}
  .services-heading{grid-template-columns:minmax(0,1fr);padding:0 12px}
  .services-heading h2{padding:0 8px 4px}
  .help-band-text{padding:0 8px}
  .home-split{padding-top:50px}
}
@media (max-width:1000px) and (min-width:901px){
  .page-hero-art .hero-circuit{display:none}
}
/* A symbol (a question mark, a service's mark) needs less room than a cable run. */
.page-hero-art .hero-circuit[data-kind=symbol]{width:min(46%,calc(100% - 700px))}
/* 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-additions{display:grid;gap:8px;margin-top:12px}
.catalog-additions a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.55;text-decoration:none}
.catalog-additions a:hover,.catalog-additions a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--orange)}
.catalog-additions a>span{flex:none;color:var(--orange-ink)}
.catalog-additions svg{width:20px;height:20px}
.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;text-wrap:balance}
.scene-caption{justify-self:end;max-width:100%;box-sizing:border-box;padding:8px 12px;border-radius:9px;background:var(--ink);color:#fff;text-align:right}
.scene-caption .scene-point{margin-left:auto;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}
/* Under the drawing: what to send for the service being read, and links that
   name it. Phones keep the drawing compact above the list, so it is desktop only. */
.scene-enquiry{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:var(--frame);padding:16px 16px 16px 22px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image)}
.scene-send{max-width:36em;font-size:14px;line-height:1.6;color:var(--ink-2)}
.scene-send span:first-child{display:block;margin-bottom:3px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.scene-enquiry .contact-pills{flex:none;flex-wrap:nowrap}
.scene-enquiry .pill-ghost{background:#fff}
@media (max-width:1320px){
  .scene-enquiry{flex-direction:column;align-items:flex-start;padding:16px 18px 16px 22px}
}
@media (max-width:900px),(max-height:640px){
  .scene-enquiry{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{position:relative}
.building-plan .plan-base{display:block;width:100%;height:auto}
.building-plan svg{position:absolute;inset:0;width:100%;height:100%;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}
.system-step.is-active{opacity:1}
.equipment{fill:none;stroke:#8B9CA5;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
.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 .7s 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 once each time a point lights, and never while off screen. Steps
   switch at once and nothing else inside the drawing animates, so reading down
   the list never queues redraws behind the scroll. */
.explorer .system-step.is-active .route-pulse{animation:current 1.8s linear .7s 1}
.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;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)}
/* Contact: the panel is as tall as its three questions, leaving no gap beneath them. */
.faq-short .faq-title{position:static;align-self:stretch;min-height:0}
/* Questions: who to ask about what. */
.ask-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.ask-person{display:flex;align-items:center;gap:14px;height:100%;padding:8px 16px 8px 8px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.ask-person:hover,.ask-person:focus-visible{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.ask-person img{flex:none;width:56px;height:56px;border-radius:12px;object-fit:cover;object-position:50% 18%}
.ask-person .chip-role{color:rgba(255,255,255,.68)}
.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:center;justify-content:space-between;gap:20px;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}
.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-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}
.project-records{margin-top:var(--frame);scroll-margin-top:100px}
.service-context article[id]{scroll-margin-top:110px}
.process-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--frame)}
.process-tile{display:flex;flex-direction:column;gap:20px;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)}
/* Service pages: coordinated project work (Will, 15 September 2026). */
.project-note{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px var(--inset);background:var(--tile) var(--tile-image)}
.project-note>div{max-width:46em}
.project-note h2{font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem);line-height:1.3}
.project-note p{margin-top:12px;color:var(--ink-2)}
.project-note .arrow-button{flex-shrink:0}

.send-guide{padding:56px 0 0;margin-bottom:var(--frame)}
.send-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--frame)}
.send-tile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:20px 20px 24px;border-radius:var(--r-tile);background:var(--tile) var(--tile-image);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.send-tile::after{content:'';position:absolute;left:0;top:22px;height:42px;width:3px;border-radius:0 3px 3px 0;background:var(--orange);transform:scaleY(0);transition:transform .45s var(--ease)}
/* Each tile spans two rows of the grid, so every rule in a row sits at the same height. */
@supports (grid-template-rows:subgrid){.send-tile{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}}
.send-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,27,32,.06);transition:transform .5s var(--ease)}
.send-icon svg{width:26px;height:26px}
.send-link{font-size:17px;font-weight:400;line-height:1.3}
.send-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.send-link:focus-visible{outline:none}
.send-tile:has(.send-link:focus-visible){outline:2px solid var(--orange-text);outline-offset:2px}
.send-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(18,27,32,.14);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.send-arrow svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.send-list{position:relative;z-index:1;grid-column:1 / -1;align-self:start;display:grid;gap:7px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.send-list li{position:relative;padding-left:20px}
.send-list li::before{content:'';position:absolute;left:2px;top:.5em;width:8px;height:4px;border-left:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange);transform:rotate(-45deg)}
.send-tile:is(:hover,:focus-within){transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(18,27,32,.14),0 16px 32px -20px rgba(18,27,32,.4)}
.send-tile:is(:hover,:focus-within)::after{transform:none}
.send-tile:is(:hover,:focus-within) .send-icon{transform:scale(1.06)}
.send-tile:is(:hover,:focus-within) .send-arrow{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.send-tile:is(:hover,:focus-within) .send-arrow svg{transform:rotate(45deg)}
.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}}
/* One quiet entrance everywhere: a fade with a 10px settle, a short beat apart
   (Dan, 17 September 2026). The fade starts at 1%, not 0: Chrome skips text
   that is fully transparent when it first paints, so an opening that began at
   0 was never measured as the page's main content (PageSpeed reported no
   Largest Contentful Paint). It looks the same. */
@keyframes rise{from{opacity:.01;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .rise{animation:rise .6s var(--ease) .05s both}
.js .rise-2{animation-delay:.12s}
.js .rise-3{animation-delay:.19s}
.js .rise-4{animation-delay:.26s}
/* 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 .3s ease-out both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}
.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 .6s var(--ease),transform .6s var(--ease);transition-delay:var(--reveal-delay,0s)}
.reveal-ready .reveal:not(.is-seen){opacity:0;transform:translateY(12px)}

/* ------------------------------------------------------------------ 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))}
  .send-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .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){
  .plan-who,.plan-quote,.plan-how,.plan-receive{grid-column:1 / -1}
  .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}
  .project-note{flex-direction:column;align-items: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}
  .send-grid,.process-tiles{grid-template-columns:minmax(0,1fr)}
  .qualification-grid,.service-guide,.context-grid{grid-template-columns:minmax(0,1fr)}
  .plan-tile{padding:24px 20px 26px}
  .arrow-button{max-width:100%;height:54px;gap:12px;padding-left:22px;font-size:14.5px}
  .plan-steps li,.plan-tile>p:not(.plan-aside){font-size:15px}
  .qualification-item{padding:18px 14px;gap:10px}
  .qualification-item .mark{min-width:40px;height:44px}
  .qualification-item .mark svg{width:38px;height:38px}
  .proof-bar:not([data-motion=running]) .proof-list{flex-direction:column;flex-wrap:nowrap;width:100%}
  .proof-list li{font-size:13px}
  .proof-mark{width:36px;height:40px}
  .proof-mark svg{width:34px;height:34px}
  .guide-item{padding:18px 0 22px}
  .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:repeat(2,minmax(0,1fr))}
  .hero-actions .pill{padding:0 10px;font-size:12px;gap:6px}
  .contact-page .page-hero-actions .pill{height:auto;min-height:50px;white-space:normal;text-align:center;padding:12px 18px}
  .detail-strip{flex-direction:column}
  .detail-strip>div,.detail-strip>div+div{padding:14px 0 15px;border-left:0}
  .detail-strip>div+div{border-top:1px solid var(--line)}
  .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}
  /* Phone footer: one clear action, two equal alternatives, then links and the company lines each on their own row. */
  .footer-tile{padding:30px 22px 0}
  .footer-copy h2{font-size:1.7rem}
  .footer-copy p{margin-top:10px;font-size:14px;line-height:1.65}
  .footer-cta{gap:22px}
  .footer-cta .contact-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .footer-cta .pill{height:50px;padding:0 12px;font-size:14px;gap:8px}
  .footer-cta .pill-whatsapp{grid-column:1 / -1}
  /* Hidden from view only, so the link is still read as Call and the number. */
  .footer-phone-number{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .footer-bottom{display:block;margin-top:26px;padding:10px 0 24px}
  .footer-bottom nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:0}
  .footer-bottom nav a{padding:0;font-size:14px}
  .footer-company{margin-top:12px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;line-height:1.6}
  .footer-company span:not(.footer-phone-number){display:block}
  .footer-company span+span,.footer-company br+span{margin-top:4px}
  .footer-company br{display:none}
  .footer-company-name{color:rgba(255,255,255,.82)}
}
@media (max-width:360px){
  .hero-foot .pill{padding:0 8px;font-size:11px}
  .hero-foot .pill svg{width:16px;height:16px}
  .footer-tile{padding:26px 18px 0}
  .footer-bottom nav a{font-size:13px}
}
@media (max-width:349px){
  .hero-actions{grid-template-columns:minmax(0,1fr)}
}
@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){
  .working{grid-template-columns:minmax(0,1fr)}
  .page-hero-art .hero-circuit{top:60px;right:-4%;width:min(70%,420px);height:clamp(90px,26vw - 4px,110px)}
  .page-hero-art .hero-circuit[data-kind=symbol]{top:66px;right:4px;width:132px;height:132px;opacity:.5}
  .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,1.15fr) minmax(0,1fr)}
  .scene-kicker{padding-left:9px}
  .scene-kicker .service-heading{font-size:16px;text-wrap:balance}
  .scene-caption{padding:7px 9px;border-radius:8px}
  .scene-caption .scene-point{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}
  .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){
  .scene-labels{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}
  .scene-caption .scene-point{font-size:13px}
  .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))}
}

/* ------------------------------------------------------------------ print
   A printed or saved page carries the content, not the interface. Entrance
   states, closed answers (opened by the script) and the pinned drawing are all
   shown, and dark tiles print as ruled blocks, since browsers drop backgrounds. */
@media print{
  @page{margin:14mm}
  body{display:block;min-height:0;font-size:10.5pt}
  main,.site-footer{max-width:none;padding:0}
  .site-header,.scrim,.skip,.hero-circuit,.service-jumps,.scene-controls,.hotspots,.faq-icon,.arrow-circle,.copy-button,.proof-list[aria-hidden=true],.footer-bottom nav,.other-services,.related-more{display:none!important}
  .hero,.page-hero,.privacy-head{padding-top:0}
  .js .rise,.reveal-ready .reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .catalog-scene,.faq-title{position:static}
  .proof-bar{box-shadow:inset 0 0 0 1px var(--line)}
  .proof-bar .proof-track{-webkit-mask-image:none!important;mask-image:none!important}
  .proof-bar .proof-list{flex:1 1 auto!important;flex-wrap:wrap!important;gap:10px 24px!important;padding:0!important;animation:none!important}
  .proof-bar .proof-list li{white-space:normal!important}
  .tile-ink,.footer-tile{background:none!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)}
  .tile-ink p,.footer-tile p,.footer-bottom{color:var(--ink-2)!important}
  .tile-ink .accent,.footer-tile .accent{color:var(--orange-text)}
  .contact-pills-dark .pill-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(18,27,32,.22)}
  .ask-person{background:none;box-shadow:inset 0 0 0 1px var(--line)}
  .ask-person .chip-role{color:var(--ink-2)}
  .footer-phone-number{display:inline!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip-path:none!important}
  .faq-item>summary{min-height:0;padding-bottom:10px}
  .faq-title{min-height:0;break-inside:avoid}
  .job,.guide-item,.plan-tile,.standard,.send-tile,.faq-item,.process-tile,.profile,.help-band,.catalog-offerings li,.step-list li,.ask-person{break-inside:avoid}
}

/* Links in small print and answers, styled like the links on the privacy page. */
.plan-aside a,.faq-answer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* A quiet signpost for work at home, under the home page's hero buttons. */
.hero-actions .hero-home{flex-basis:100%;grid-column:1/-1;margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.hero-home a{display:inline-block;padding:3px 0}
/* Links in the signpost and in page intros, styled like the links on the privacy page. */
.hero-home a,.hero-intro a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}