:root{--mist:#edf0f0;--paper:#fff;--ink:#12202b;--muted:#51606c;--blue:#2b5c7a;--sky:#cfdde6;--ochre:#c9962b;--line:#cbd5da;--max:1320px;--head:"Bricolage Grotesque","Segoe UI",Arial,sans-serif;--body:"Public Sans","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font:400 17px/1.7 var(--body);background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.wrap{width:min(var(--max),100% - 3rem);margin-inline:auto}
h1,h2,h3,.brand{font-family:var(--head);line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;margin-bottom:1.5rem}
h3{font-size:1.25rem;font-weight:700;margin-bottom:.6rem}
p+p{margin-top:1.1rem}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(237,240,240,.96);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:.7rem;font-size:1.4rem;font-weight:700;text-decoration:none}
.mark{width:26px;height:26px;background:var(--ink);position:relative}
.mark::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;background:var(--ochre)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a:not(.btn){text-decoration:none;font-weight:500;font-size:.98rem;padding:.3rem 0;background:linear-gradient(var(--ochre),var(--ochre)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.nav a:not(.btn):hover{background-size:100% 2px}
.btn{display:inline-block;padding:.95rem 1.7rem;background:var(--ink);color:#fff;font:600 1rem var(--body);text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.2rem;font-size:.95rem}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .3s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero */
.hero{padding:5rem 0 4.5rem}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.9rem);font-weight:700;max-width:16ch;margin-bottom:3.5rem}
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:end}
.hero-copy>p:first-child{font-size:1.2rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin:2rem 0}
.hero-note{font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.2rem}
.hero-art{position:relative}
.hero-art svg{display:block;width:100%;height:auto}
.hero-art figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:1rem 1.5rem;font-size:.92rem;line-height:1.4;border-top:4px solid var(--ochre)}
.hero-art figcaption strong{display:block;font:700 1.1rem var(--head)}
.hero h1,.hero-copy,.hero-art{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy{animation-delay:.15s}.hero-art{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}

/* facts */
.facts{background:var(--ink);color:#fff}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.facts-grid div{padding:1.8rem 1.5rem;border-left:1px solid rgba(255,255,255,.18)}
.facts-grid div:first-child{border-left:0;padding-left:0}
.facts-grid b{display:block;font:700 1.1rem var(--head)}
.facts-grid span{font-size:.92rem;color:#aebcc6}

/* sections */
.section{padding:7rem 0}
.section-tint{background:var(--paper)}
.about{display:grid;grid-template-columns:7fr 5fr;gap:5rem}
.about-text p{color:var(--muted);max-width:62ch}
.about-text p:first-of-type{color:var(--ink);font-size:1.15rem}
.block{height:260px;background:repeating-linear-gradient(90deg,var(--ink) 0 38px,var(--blue) 38px 76px);position:relative;margin-bottom:1.5rem}
.block::after{content:"";position:absolute;inset:auto 0 0 0;height:36px;background:var(--ochre)}
.panels{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.panel{background:var(--paper);padding:1.3rem 1.5rem;transition:background .25s}
.panel:hover{background:var(--sky)}
.panel h3{font-size:1.05rem;margin-bottom:.2rem}
.panel p{font-size:.95rem;color:var(--muted)}

/* services */
.services{display:grid;grid-template-columns:4fr 8fr;gap:5rem}
.svc-head{position:sticky;top:110px;align-self:start}
.svc-head p{color:var(--muted)}
.svc{display:grid;grid-template-columns:1fr 1.5fr;gap:.5rem 2.5rem;padding:2.2rem 0 2.2rem 1.5rem;border-top:1px solid var(--line);position:relative;transition:background .3s,padding .3s}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ochre);transform:scaleY(0);transform-origin:top;transition:transform .35s}
.svc:hover{background:var(--mist);padding-left:2rem}
.svc:hover::before{transform:scaleY(1)}
.svc h3{font-size:1.45rem;margin:0}
.svc p{color:var(--muted)}
.svc ul{grid-column:2;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.svc li{font-size:.85rem;padding:.2rem .7rem;background:var(--sky);color:var(--ink)}

/* benefits */
.dark{background:var(--blue);color:#fff;background:linear-gradient(0deg,#12202b,#12202b)}
.dark h2{max-width:20ch;margin-bottom:3rem}
.ben-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.ben{grid-column:span 2;padding:2rem 1.8rem;border:1px solid rgba(255,255,255,.2);border-top:4px solid var(--ochre);transition:background .3s}
.ben:hover{background:rgba(255,255,255,.06)}
.ben-wide{grid-column:span 3;padding:2.6rem 2.2rem}
.ben-wide h3{font-size:1.7rem}
.ben p{color:#c3cfd7}

/* contact */
.contact{display:grid;grid-template-columns:5fr 6fr;gap:5rem;align-items:start}
.contact-info>p{color:var(--muted);margin-bottom:2rem}
dl div{padding:1rem 0;border-top:1px solid var(--line)}
dl div:last-child{border-bottom:1px solid var(--line)}
dt{font-weight:600;font-size:.9rem;color:var(--blue)}
dd a{text-decoration-color:var(--ochre);text-underline-offset:4px}
.form{background:var(--paper);border:1px solid var(--line);border-top:6px solid var(--ink);padding:2.5rem}
.field{margin-bottom:1.3rem}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem}
input[type=text],input[type=email],select,textarea{width:100%;padding:.85rem 1rem;font:inherit;background:var(--mist);border:1px solid var(--line);border-radius:0;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.field.bad input,.field.bad textarea{border-color:#a8321f}
.check label{display:flex;gap:.7rem;font-weight:400;align-items:flex-start}
.check input{margin-top:.45rem;accent-color:var(--blue)}
.err{display:block;color:#a8321f;font-size:.88rem;min-height:1.1em;margin-top:.3rem}
.status{margin-top:1rem;font-size:.95rem;color:var(--blue)}

/* footer */
.footer{background:var(--ink);color:#c3cfd7;padding:3.5rem 0;font-size:.95rem}
.foot{display:grid;grid-template-columns:2fr 1fr 2fr;gap:3rem}
.foot strong{color:#fff;font:700 1.2rem var(--head)}
.foot p{margin-top:.5rem}
.foot nav{display:flex;flex-direction:column;gap:.4rem}
.foot a{text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.js .rv.in{opacity:1;transform:none}

@media(max-width:980px){
  .burger{display:block}
  .nav{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.2rem;background:var(--mist);padding:1.5rem;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .hero-grid,.about,.services,.contact{grid-template-columns:1fr;gap:3rem}
  .svc-head{position:static}
  .facts-grid{grid-template-columns:1fr 1fr}
  .facts-grid div:nth-child(3){border-left:0;padding-left:0}
  .ben,.ben-wide{grid-column:span 6}
  .foot{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:640px){
  body{font-size:16px}
  .section{padding:4.5rem 0}.hero{padding:3rem 0}
  .svc{grid-template-columns:1fr}.svc ul{grid-column:1}
  .form{padding:1.6rem}
  .facts-grid{grid-template-columns:1fr}.facts-grid div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .hero-art figcaption{position:static}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}