/* site.css - one-page company site. Colours, radius and fonts come from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;min-width:320px}
[hidden]{display:none!important}
svg{flex:none}
.sprite{position:absolute}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
[id]{scroll-margin-top:72px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.hero :focus-visible,.hdr :focus-visible,.mnav :focus-visible{outline-color:var(--focus-band)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.ic{width:20px;height:20px;fill:currentColor}
.ic-lg{width:24px;height:24px}

.wrap{width:100%;max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:768px){.wrap{padding-inline:var(--gutter-lg)}}
.sec{padding-block:64px}
.sec-alt{background:var(--alt)}
@media (min-width:768px){.sec{padding-block:88px}}
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
h2{font-size:1.75rem;line-height:1.2}
h3{font-size:1.1875rem;line-height:1.3}
@media (min-width:768px){h2{font-size:2.125rem}}
.sec-head{margin-bottom:40px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:1rem;text-decoration:none;text-align:center;line-height:1.2;transition:background-color .15s,border-color .15s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-h)}
.btn-line{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-line:hover{background:var(--alt)}
.btn-band{background:var(--btn-band);color:var(--btn-band-ink)}
.btn-band:hover{background:var(--btn-band-h)}
.btn-band-line{background:transparent;color:var(--on-band);border-color:var(--band-line)}
.btn-band-line:hover{border-color:var(--on-band)}
.btn-sm{min-height:44px;padding:0 18px;font-size:.9375rem}

/* header, sits on the band */
.hdr{position:sticky;top:0;z-index:50;background:var(--band);color:var(--on-band)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--font-mark);font-weight:700;font-size:1.375rem;letter-spacing:-.03em;white-space:nowrap;color:inherit}
.brand .dot{color:var(--dot)}
.hdr .brand .dot,.mnav .brand .dot{color:#5fd68a}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:500;font-size:.9375rem;text-decoration:none;color:var(--on-band-mute);border-radius:var(--r)}
.nav a:hover{color:var(--on-band)}
.nav a[aria-current]{color:var(--on-band);box-shadow:inset 0 -2px 0 var(--on-band);border-radius:0}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r);border:1px solid transparent;background:transparent;color:inherit}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}
[data-theme="dark"] .theme-btn .i-moon{display:none}
.hdr-cta{display:none}
@media (min-width:768px){
  .nav{display:flex}
  .menu-btn{display:none}
  .hdr-actions{margin-left:0}
  .hdr-cta{display:inline-flex}
}

/* phone menu */
.mnav{position:fixed;inset:0;z-index:80;background:var(--band);color:var(--on-band);display:none;flex-direction:column;overflow-y:auto}
.mnav.is-open{display:flex}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding:12px var(--gutter);min-height:68px}
.mnav ul{padding:16px var(--gutter)}
.mnav li a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--band-line);font-family:var(--font-head);font-size:1.375rem;font-weight:700;text-decoration:none}
.mnav li a[aria-current]{color:#5fd68a}
.mnav-foot{margin-top:auto;padding:20px var(--gutter) 32px;display:grid}
@media (min-width:768px){.mnav{display:none!important}}

/* hero band */
.hero{background:var(--band);color:var(--on-band);padding-block:40px 64px}
.eyebrow{font-size:.9375rem;font-weight:600;letter-spacing:.02em;color:var(--on-band-mute);margin-bottom:20px}
.hero h1{font-size:2.25rem;line-height:1.08;letter-spacing:-.03em;max-width:20ch;color:var(--on-band);text-wrap:balance}
@media (min-width:768px){.hero h1{max-width:19ch}}
.hero-sub{margin-top:24px;font-size:1.125rem;max-width:40ch;color:var(--on-band-mute)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:480px){.hero-actions .btn{width:100%}.hero h1{font-size:2rem}}
@media (min-width:768px){
  .hero{padding-block:64px 104px}
  .hero h1{font-size:3.75rem}
  .hero-sub{font-size:1.25rem}
}

/* services */
.tiles{display:grid;gap:16px;grid-template-columns:1fr}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.tile-n{display:block;font-family:var(--font-head);font-weight:700;font-size:.9375rem;color:var(--accent);margin-bottom:16px}
.tile p{margin-top:8px;color:var(--mute);max-width:36ch}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.tiles{grid-template-columns:repeat(3,1fr)}}

/* how we work */
.steps{display:grid;gap:32px;grid-template-columns:1fr}
.step-n{display:block;font-family:var(--font-head);font-weight:700;font-size:.9375rem;color:var(--accent);margin-bottom:12px}
.step p{margin-top:8px;color:var(--mute)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}}

/* about */
.about{display:grid;gap:20px}
.about p{max-width:62ch}
@media (min-width:960px){.about{grid-template-columns:1fr 2fr;gap:64px}}

/* contact */
.sec-contact{border-top:1px solid var(--line)}
.card{border:1px solid var(--field);border-radius:var(--r);padding:28px 24px;display:grid;gap:32px}
.card-lead{margin-top:12px;color:var(--mute);max-width:40ch}
.card-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.card dl{display:grid;gap:20px;align-content:start}
.card dt{font-size:.875rem;font-weight:600;color:var(--mute);margin-bottom:2px}
.card dd a{color:var(--accent);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:480px){.card-actions .btn{width:100%}}
@media (min-width:768px){.card{padding:48px;grid-template-columns:1.2fr 1fr;gap:64px}}

/* footer */
.ftr{border-top:1px solid var(--line);padding-block:32px;font-size:.9375rem;color:var(--mute)}
.ftr .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.ftr .brand{color:var(--ink);font-size:1.25rem}
.ftr p+p{margin-left:auto}
@media (max-width:767px){.ftr p+p{margin-left:0}}

/* 404 */
.nf{padding-block:80px 120px}
.nf p{margin-top:16px;color:var(--mute)}
.nf .btn{margin-top:28px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}