/* BUTLERS site styles shared by every page. Tokens come from the BUTLERS design system. */
/* ---------- BUTLERS tokens (from the design system) ---------- */
:root{
  --header-h:76px;
  --gutter:16px;
  /* one shared edge: the 1200px content column, never closer than the gutter */
  --edge:max(var(--gutter), calc((100% - 1200px) / 2));
  --blue-500:#0077c3; --blue-600:#0466a3; --blue-700:#035386; --blue-800:#024065; --blue-900:#002540; --blue-100:#e6f1f9;
  --surface:#ffffff; --surface-alt:#f4f7fa; --ink:#231f20; --ink-muted:#565656; --ink-on-brand:#ffffff;
  --accent:#0466a3; --primary:#0077c3; --primary-hover:#0466a3; --on-primary:#ffffff;
  --line:#d5dde4; --line-strong:#788592; --focus:#0077c3;
  --font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-sans:"Fira Sans","Myriad Pro","Segoe UI",system-ui,sans-serif;
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px; --space-128:128px;
  --radius-sm:2px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--surface);color:var(--ink);font:400 16px/26px var(--font-sans);-webkit-font-smoothing:antialiased;animation:pagein .8s var(--ease-out) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
a{color:inherit}
.skip{position:absolute;left:var(--space-16);top:-60px;background:var(--blue-900);color:#fff;padding:var(--space-8) var(--space-16);z-index:100;transition:top .2s var(--ease-out)}
.skip:focus{top:var(--space-16)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- type ---------- */
.eyebrow{margin:0 0 var(--space-16);font:600 13px/16px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.display-xl{margin:0;font:300 72px/76px var(--font-display);letter-spacing:-.01em;max-width:13ch}
.display-l{margin:0;font:300 56px/60px var(--font-display)}
.h2{margin:0;font:400 44px/52px var(--font-display);max-width:18ch}
.lead{margin:var(--space-24) 0 0;font:300 20px/30px var(--font-sans);color:var(--ink-muted);max-width:34ch}

/* ---------- buttons (design system classes) ---------- */
.bt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);font:500 14px/20px var(--font-sans);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.bt-btn--md{padding:var(--space-12) var(--space-24)}
.bt-btn--lg{padding:var(--space-16) var(--space-32);font-size:16px;line-height:24px}
.bt-btn--primary{background:var(--primary);color:var(--on-primary)}
.bt-btn--primary:hover{background:var(--primary-hover)}
.bt-btn--link{background:none;padding:var(--space-4) 0;color:var(--accent)}
.bt-btn--link:hover{text-decoration:underline;text-underline-offset:4px}
.bt-btn__arrow{transition:transform .15s ease}
.bt-btn--link:hover .bt-btn__arrow{transform:translateX(3px)}
@media (pointer:coarse), (max-width:720px){.bt-btn{min-height:44px}}

/* ---------- fixed environment: a faint drafting grid ---------- */
.env{position:fixed;inset:-80px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(0,37,64,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,37,64,.045) 1px,transparent 1px);
  background-size:80px 80px;animation:drift 90s linear infinite;animation-delay:-20s}
@keyframes drift{to{transform:translate(80px,80px)}}

@media (max-width: 720px){
  .display-xl{font-size:44px;line-height:48px}
  .display-l{font-size:44px;line-height:48px}
  .h2{font-size:32px;line-height:40px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal,.reveal .part{opacity:1!important;transform:none!important}
}

/* ---------- services (below the hero) ---------- */
main{display:block}
.section{padding:var(--space-96) var(--edge);background:var(--surface)}
.section .inner{max-width:1200px;margin:0 auto}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-48);align-items:end;margin-bottom:var(--space-64)}
.section-head .lead{margin:0}
@media (max-width:860px){.section-head{grid-template-columns:1fr}.section{padding:var(--space-64) var(--edge)}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-32)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.bt-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-12)}
.bt-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--blue-500);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease-out)}
.bt-card__num{font:300 14px/20px var(--font-display);color:var(--ink-muted);letter-spacing:.08em}
.bt-card__title{margin:0;font:400 24px/32px var(--font-display);color:var(--ink)}
.bt-card__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-8)}
.bt-card__list li{position:relative;padding-left:var(--space-24);font-size:14px;line-height:22px;color:var(--ink-muted)}
.bt-card__list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;background:var(--blue-500)}
.reveal .part{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .bt-card::before{transform:scaleX(1)}
.reveal.in .part:nth-child(2){transition-delay:.09s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.27s}
.reveal.in .part:nth-child(5){transition-delay:.36s}
.reveal.in .part:nth-child(6){transition-delay:.45s}
.reveal.done .part:nth-child(n){transition-delay:0s}

footer{background:var(--blue-900);color:#c9d6e2;padding:var(--space-64) var(--edge) var(--space-32)}
footer .inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-24);text-align:center}
footer img{height:72px;width:auto;display:block}
footer .sign{font:300 28px/36px var(--font-display);color:#fff;margin:0}
.bt-contact{font:300 15px/26px var(--font-sans)}
.bt-contact__lines{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4) var(--space-12)}
.bt-contact a{color:inherit;text-decoration:none}
.bt-contact a:hover{color:#fff}
.bt-contact__sep{color:rgba(255,255,255,.35)}
footer small{font:400 12px/16px var(--font-sans);color:#8fa3b5}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- BuildingLine: fixed roof, the long vertical grows to whatever height the box has ---------- */
.bline{position:absolute;pointer-events:none;width:var(--bw,64px);color:var(--blue-500)}
.bline svg{display:block;width:100%;height:auto;overflow:visible}
.bline svg path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:square;stroke-linejoin:miter}
.bline::after{content:"";position:absolute;left:calc(var(--bw,64px) * 102 / 140 - 1px);top:calc(var(--bw,64px) / 140);bottom:0;width:2px;background:currentColor}
.bline--white{color:#fff}

/* ---------- header ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);padding:0 var(--edge);background:rgba(255,255,255,.96);border-bottom:1px solid transparent;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.nav.scrolled,.menu-open .nav{background:#fff;border-bottom-color:var(--line)}
.nav-brand{display:block;flex:none}
.nav-brand img{height:40px;width:auto;display:block}
.nav-main{display:flex;align-items:center;gap:var(--space-48)}
.nav-links{display:flex;align-items:center;gap:var(--space-32);list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:block;padding:var(--space-8) 0;text-decoration:none;font:500 14px/20px var(--font-sans);color:var(--ink-muted);transition:color .15s ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);background:var(--line-strong)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--blue-500)}
.nav-toggle{display:none;align-items:center;gap:var(--space-12);min-height:44px;padding:0 var(--space-4) 0 var(--space-12);background:none;border:0;cursor:pointer;font:500 14px/20px var(--font-sans);color:var(--ink)}
.nav-toggle__lines{position:relative;width:22px;height:12px;display:block}
.nav-toggle__lines i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
.nav-toggle__lines i:first-child{top:0}
.nav-toggle__lines i:last-child{top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines i:first-child{top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines i:last-child{top:5px;transform:rotate(-45deg)}
@media (max-width:960px){.nav-main{display:none}.nav-toggle{display:inline-flex}}

/* the mobile menu */
.menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:29;background:var(--surface);overflow-y:auto;padding:var(--space-32) var(--edge) var(--space-48);opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.menu.open{opacity:1;transform:none}
.menu[hidden]{display:none}
.menu nav{position:relative;z-index:1;max-width:560px}
.menu-links{list-style:none;margin:0 0 var(--space-32);padding:0}
.menu-links li{border-bottom:1px solid var(--line)}
.menu-links a{display:flex;align-items:baseline;gap:var(--space-16);padding:var(--space-16) 0;text-decoration:none;color:var(--ink);font:300 32px/40px var(--font-display)}
.menu-links a span{font:300 14px/20px var(--font-display);color:var(--line-strong);min-width:24px}
.menu-links a[aria-current="page"]{color:var(--blue-500)}
.menu-links a[aria-current="page"] span{color:var(--blue-500)}
.menu-cta{width:100%;justify-content:center}
.menu-contact{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-24) 0 0;font-size:15px;line-height:24px;color:var(--ink-muted)}
.menu-contact a{color:var(--ink);text-decoration:none}
.menu .bline{right:var(--edge);top:auto;bottom:0;height:42%;--bw:72px}
@media (min-width:961px){.menu{display:none!important}}
body.menu-open{overflow:hidden}

/* anchors land just below the header */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
main{scroll-margin-top:var(--header-h)}

/* footer page links */
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8) var(--space-32);list-style:none;margin:0;padding:0}
.foot-links a{display:inline-block;padding:var(--space-12) 0;color:#fff;text-decoration:none;font:500 14px/20px var(--font-sans);border-bottom:1px solid transparent;transition:border-color .2s ease}
.foot-links a:hover{border-bottom-color:#8ccaf0}
.foot-links a[aria-current="page"]{border-bottom-color:#8ccaf0}
footer a:focus-visible{outline-color:#8ccaf0}

/* ---------- gutters: 16px on phones (brand guide), wider on tablets and desktops ---------- */
@media (min-width:721px){:root{--gutter:32px}}
@media (min-width:1101px){:root{--gutter:48px}}

/* ---------- headlines never strand a single word ---------- */
h1,h2,h3,.display-xl,.display-l,.h2{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.h2{max-width:22ch}

/* ---------- link buttons wrap like text, with the arrow on the last word ---------- */
.bt-btn.bt-btn--link{display:inline;line-height:24px}
.bt-btn--link .bt-btn__arrow{display:inline-block;margin-left:4px}
@media (pointer:coarse), (max-width:720px){.bt-btn.bt-btn--link{padding:13px 0;min-height:0}.bt-contact a{display:inline-block;padding:9px 0}.nav-brand{padding:2px 0}.skip{padding:12px 16px}}

/* ---------- one page hero for Services, About and Contact ---------- */
.page-hero{position:relative;padding:calc(var(--header-h) + 96px) var(--edge) var(--space-64);border-bottom:1px solid var(--line-strong);overflow:hidden}
.page-hero h1{margin:0;font:300 56px/62px var(--font-display);letter-spacing:-.01em;max-width:20ch}
.page-hero .lead{max-width:52ch}
.page-hero .bline{right:var(--edge);top:calc(var(--header-h) + 64px);bottom:0;--bw:72px}
@media (max-width:860px){.page-hero{padding-top:calc(var(--header-h) + 48px)}.page-hero h1{font-size:40px;line-height:46px}.page-hero .bline{display:none}}

/* ---------- one closing call to action for every page ---------- */
.closing{background:var(--surface-alt);padding:var(--space-96) var(--edge);border-top:1px solid var(--line)}
.closing .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-48);align-items:end}
.closing .ctas{display:flex;gap:var(--space-32);align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.closing{padding:var(--space-64) var(--edge)}.closing .inner{grid-template-columns:1fr;gap:var(--space-32)}.closing .ctas{justify-content:flex-start}}

/* ---------- card titles share a two-line slot so lists start level ---------- */
@media (min-width:641px){.bt-card__title{min-height:64px}}

/* footer social links */
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4) var(--space-24);list-style:none;margin:0;padding:0}
.social a{display:inline-block;padding:var(--space-8) 0;font:400 14px/20px var(--font-sans);color:#c9d6e2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);transition:color .2s ease,border-color .2s ease}
.social a:hover{color:#fff;border-bottom-color:#8ccaf0}
@media (pointer:coarse), (max-width:720px){.social a{padding:12px 0}}