@font-face{font-family:Helios;src:url('assets/helios.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aileron;src:url('assets/aileron.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aileron;src:url('assets/aileron-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Aileron;src:url('assets/aileron-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--navy:#304254;--ink:#222;--paper:#f4f4f4;--header-height:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
body{margin:0;color:var(--ink);font-family:Aileron,Arial,sans-serif;font-size:1.125rem;line-height:1.4;overflow-wrap:anywhere}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #567d9f;outline-offset:5px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-family:Helios,Arial,sans-serif;font-weight:400;line-height:1.12}
h2{font-size:clamp(2.25rem,4.3vw,3.667rem);letter-spacing:-.025em}
.container{width:calc(100% - 108px);max-width:1260px;margin-inline:auto}
.section{padding:54px 0}
.skip-link{position:fixed;top:-100px;left:16px;z-index:20;background:white;padding:12px 20px;color:var(--navy)}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid #ddd}
.nav-shell{max-width:1440px;min-height:var(--header-height);padding:8px 24px;margin:auto;display:flex;align-items:center;justify-content:flex-end;gap:32px}
.nav-shell nav{display:flex;align-items:center;gap:32px}
.nav-shell a,.menu-toggle{font-size:.9375rem;font-weight:700;color:var(--navy)}
.nav-shell nav a{padding:10px 0}
.nav-shell nav a:hover{color:#55718c}
.button{display:inline-flex;justify-content:center;align-items:center;background:var(--navy);color:white!important;border:1px solid var(--navy);border-radius:3px;min-height:44px;padding:10px 25px;font-weight:700;cursor:pointer;transition:background .15s}
.button:hover{background:#415b73}
.button:disabled{cursor:not-allowed;opacity:.6}
.menu-toggle{display:none}
.hero{height:768px;min-height:560px;background:#767780;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(17,24,33,.24),rgba(17,24,33,.24)),url('assets/hero.png') center 49%/cover no-repeat}
.hero-content{position:relative;padding-top:76px}
.brand-logo{width:125px;height:auto}
.hero h1{font-size:clamp(3rem,5.86vw,5rem);letter-spacing:-.03em;margin:30px 0 12px}
.hero p{max-width:430px;font-weight:300;font-size:1.167rem;line-height:1.38}
.locations{padding-top:30px;background:#fff}
.intro{max-width:565px;font-weight:300;margin-top:16px;line-height:1.42}
.locations-heading{font-family:Helios,Arial,sans-serif;font-weight:400;font-size:2.333rem;line-height:1.2;margin:46px 0 23px}
.locations-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.locations-grid figure{position:relative;transition:transform .2s ease}
.locations-grid img{width:100%;aspect-ratio:309/173;object-fit:cover}
.locations-grid figure:hover{z-index:1;transform:scale(1.035)}
.locations-grid figcaption{font-size:1.333rem;margin-top:12px}
.projects{background:var(--paper);padding-bottom:65px}
.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:122px}
.project img{width:100%;aspect-ratio:407/374;object-fit:cover}
.project h3{font-size:1.333rem;line-height:1.3;margin:20px 0 11px;font-weight:700}
.project p{font-size:1.167rem}
.team{background:#d9d9d9;overflow:hidden}
.team-layout{min-height:768px;display:grid;grid-template-columns:46% 54%;align-items:center;position:relative}
.team-copy{position:relative;z-index:1;padding:70px 0}
.team-copy p{font-weight:300;font-size:1.167rem;line-height:1.45;margin-top:26px}
.team-copy h2{margin-bottom:28px}
.team-portrait{width:100%;height:768px;object-fit:cover;object-position:center top;align-self:end}
.contact{background:var(--paper)}
.contact-layout{display:grid;grid-template-columns:44% 44%;justify-content:space-between;gap:6%}
.contact-photo{width:100%;height:659px;object-fit:cover;filter:grayscale(1)}
.contact-copy{display:flex;flex-direction:column;align-items:flex-start;padding-left:10px}
.contact-copy h2{font-size:clamp(2.5rem,4.7vw,4rem)}
address{font-style:normal;font-size:1.333rem;line-height:1.25;margin-top:96px}
address p+p{margin-top:25px}
address a:hover{text-decoration:underline}
.business-hours{margin-top:110px;font-size:1.167rem;line-height:1.3}
.business-hours h3{font-size:1.25rem;font-weight:400;margin-bottom:16px}
.business-hours p{font-weight:300;margin-bottom:24px}
.business-hours strong{font-weight:400}
.footer-brand{align-self:flex-end;margin:0 25% 0 0}
.login-page{background:var(--paper)}
.login-layout{min-height:100svh;display:grid;grid-template-columns:48% 52%}
.login-brand-panel{background:linear-gradient(180deg,rgba(28,43,58,.3),rgba(28,43,58,.65)),url('assets/hero.png') center/cover;color:white;padding:64px;display:flex;flex-direction:column;justify-content:space-between;gap:120px}
.login-form-panel{display:grid;place-items:center;padding:64px 40px;min-width:0}
.login-card{width:100%;max-width:400px}
.login-brand{width:115px;margin:0 0 40px}
#login-form{margin-top:32px}
#login-form label{display:block;font-size:.9375rem;font-weight:700;margin-bottom:9px;color:var(--navy)}
#login-form input{border:1px solid #bec5cc;background:#fff;border-radius:3px;width:100%;min-height:52px;padding:13px 15px;font-size:1rem;color:var(--ink)}
#email{margin-bottom:24px}
.password-field{position:relative}
#login-form .password-field input{padding-right:4.75rem}
.password-field button{position:absolute;right:4px;top:4px;min-height:44px;padding:8px 12px;border:0;background:transparent;font-size:.875rem;font-weight:700;color:var(--navy);cursor:pointer}
.sign-in{width:100%;margin-top:28px;font-size:1rem;min-height:50px}
.login-status{font-size:.9375rem;background:#e7edf2;color:#304254;padding:14px 16px;border-left:3px solid var(--navy);margin-top:20px}
.login-page [hidden]{display:none!important}
.demo-link{display:block;margin-top:24px;text-align:center;color:var(--navy);font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
.back-to-site{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;color:var(--navy);font-size:.9375rem;text-decoration:underline;text-underline-offset:3px}
@media screen and (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;translate:0 28px}
  .reveal.is-visible{opacity:1;translate:0 0;transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),translate .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),transform .3s ease}
  .reveal:focus-within{opacity:1;translate:none;transition:none}
  .hero-content>:nth-child(2){--reveal-delay:.1s}
  .hero-content>:nth-child(3){--reveal-delay:.2s}
  .locations-grid>:nth-child(4n+2){--reveal-delay:.075s}
  .locations-grid>:nth-child(4n+3){--reveal-delay:.15s}
  .locations-grid>:nth-child(4n+4){--reveal-delay:.225s}
  .projects-grid>:nth-child(2){--reveal-delay:.1s}
  .projects-grid>:nth-child(3){--reveal-delay:.2s}
  @supports(animation-timeline:view()){
    @media(min-width:701px){
      .hero{view-timeline-name:--hero-scroll;view-timeline-axis:block}
      .hero::before{animation:hero-drift linear both;animation-timeline:--hero-scroll;animation-range:exit 0% exit 100%}
    }
  }
}
@keyframes hero-drift{from{transform:translateY(0) scale(1)}to{transform:translateY(64px) scale(1.035)}}
@media(max-width:1000px){
  .container{width:calc(100% - 64px)}
  .hero{height:650px}
  .hero h1{font-size:4rem}
  .projects-grid{margin-top:72px;gap:22px}
  .team-layout{min-height:620px;grid-template-columns:48% 52%}
  .team-portrait{height:620px}
  .contact-photo{height:620px}
  address{margin-top:64px;font-size:1.167rem}
  .business-hours{margin-top:75px}
  .footer-brand{margin-right:0}
  .login-brand-panel{padding:40px}
}
@media(max-width:700px){
  :root{--header-height:64px}
  .container{width:calc(100% - 40px)}
  .section{padding:48px 0}
  .nav-shell{padding-inline:20px;justify-content:space-between;gap:16px}
  .menu-toggle{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;border:0;background:transparent;cursor:pointer}
  .menu-icon{width:19px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .menu-icon::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px solid currentColor}
  .nav-shell nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid #ddd;padding:12px 20px 20px;flex-direction:column;align-items:stretch;gap:0}
  .nav-shell nav.is-open{display:flex}
  .nav-shell nav a{padding:13px 0}
  .hero{height:650px;min-height:0}
  .hero::before{background-position:56% center}
  .hero-content{padding-top:48px}
  .hero .brand-logo{width:112px}
  .hero h1{font-size:clamp(2.75rem,9vw,4rem);max-width:560px;margin-top:40px}
  .hero p{font-size:1.0625rem;max-width:365px}
  .intro{font-size:1.0625rem}
  .locations-heading{font-size:1.875rem;margin-top:36px}
  .locations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .locations-grid>:nth-child(n),.projects-grid>:nth-child(n){--reveal-delay:0s}
  .locations-grid>:nth-child(even){--reveal-delay:.075s}
  .locations-grid figcaption{font-size:1.0625rem;margin-top:9px}
  .projects-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .project img{aspect-ratio:4/3}
  .project h3{margin-top:16px;font-size:1.25rem}
  .team-layout{grid-template-columns:1fr;min-height:0}
  .team-copy{padding:48px 0 24px}
  .team-copy p{font-size:1.0625rem}
  .team-portrait{height:auto;max-height:620px;width:min(100%,450px);margin:auto;object-fit:contain;object-position:bottom}
  .contact-layout{grid-template-columns:1fr;gap:40px}
  .contact-photo{height:360px;object-position:center 57%}
  .contact-copy{padding:0}
  address{margin-top:34px;font-size:1.167rem}
  .business-hours{margin-top:40px}
  .footer-brand{margin-top:12px}
  .login-layout{grid-template-columns:1fr}
  .login-brand-panel{display:none}
  .login-form-panel{padding:48px 24px;align-items:start}
  .login-brand{margin-bottom:36px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.locations-grid figure:hover{transform:none}}

.login-card h1{font-size:2.5rem;color:var(--navy)}
#sign-in-controls,#sign-in-controls .cl-cardBox{width:100%;max-width:100%;box-shadow:none;border:0;border-radius:0;background:transparent;overflow:visible}
#sign-in-controls .cl-card{width:100%;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;gap:32px}
#sign-in-controls .cl-header{align-items:flex-start;text-align:left}
#sign-in-controls .cl-headerTitle{font-family:Helios,Arial,sans-serif;font-size:2.5rem;font-weight:400;line-height:1.12;color:var(--navy)}
#sign-in-controls .cl-headerSubtitle:empty{display:none}
#sign-in-controls .cl-formFieldLabel{font-size:.9375rem;font-weight:700;color:var(--navy)}
#sign-in-controls .cl-formFieldInput{min-height:52px;padding:13px 15px;border:1px solid #bec5cc;border-radius:3px;background:#fff;color:var(--ink);font-size:1rem;box-shadow:none}
#sign-in-controls .cl-formFieldInput__password{padding-right:3rem}
#sign-in-controls .cl-formFieldInputShowPasswordButton{min-width:44px;min-height:44px}
#sign-in-controls .cl-formButtonPrimary{min-height:50px;border:1px solid var(--navy);border-radius:3px;background:var(--navy);color:#fff;font-size:1rem;font-weight:700;box-shadow:none}
#sign-in-controls .cl-formButtonPrimary:hover{background:#415b73}
#sign-in-controls .cl-formButtonPrimary::after{background:none;box-shadow:none}
