/* Site styles — mirrors the design system components. Tokens live in tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--link)}a:hover{color:var(--link-hover)}
img{max-width:100%}
h1,h2,h3,p{margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:0;cursor:pointer;font-family:var(--font-body);border-radius:var(--radius-pill);line-height:1.2;white-space:nowrap;padding:16px 28px;font-size:var(--text-body-md);font-weight:var(--weight-semibold);background:var(--button-primary-bg);color:var(--button-primary-fg);transition:opacity .15s ease,transform .15s ease}
.btn:hover{opacity:.88;color:var(--button-primary-fg)}.btn:active{transform:translateY(1px)}
.btn--secondary,.btn--secondary:hover{background:var(--button-secondary-bg);color:var(--button-secondary-fg)}
.btn--nav,.btn--nav:hover{background:var(--button-nav-bg);color:var(--color-white)}
.btn--ghost,.btn--ghost:hover{background:transparent;color:var(--text-on-brand);padding:10px 4px}
.btn--sm{padding:12px 22px;font-size:var(--text-body-sm);font-weight:var(--weight-medium)}
.btn--lg{padding:18px 30px;font-size:var(--text-body-lg)}
.btn--ghost.btn--lg{padding:10px 4px}

/* Type helpers */
.eyebrow{font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;line-height:1.4;color:var(--text-accent)}
.eyebrow--sm{font-size:var(--text-eyebrow-sm)}
.eyebrow--dark{color:var(--text-accent-on-inverse)}
.eyebrow--brand{color:var(--text-on-brand-muted)}
.heading{display:flex;flex-direction:column;gap:12px}
.heading--body{gap:18px}
.heading h2{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h2);line-height:var(--leading-heading);text-wrap:pretty;color:var(--text-primary)}
.heading p{font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-secondary)}
.heading--dark h2{color:var(--text-on-inverse)}.heading--dark p{color:var(--text-on-inverse-muted)}

/* Wordmark (swap for <img src="assets/logo.svg"> when a logo exists) */
.wordmark{display:inline-flex;text-decoration:none;font-size:var(--text-wordmark);letter-spacing:var(--tracking-wordmark);color:var(--text-primary);line-height:1;white-space:nowrap}
.wordmark:hover{color:var(--text-primary)}
.wordmark b{font-weight:var(--weight-semibold)}.wordmark span{font-weight:var(--weight-light)}
.wordmark--sm{font-size:var(--text-wordmark-sm);letter-spacing:0}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.site-header__bar{display:flex;justify-content:space-between;align-items:center;padding:var(--header-pad-y) var(--page-gutter)}
.nav-links{display:flex;gap:var(--space-36);align-items:center}
.nav-link{text-decoration:none;color:var(--text-primary);font-size:var(--text-body-sm);font-weight:var(--weight-medium)}
.nav-link:hover{color:var(--text-accent)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text-primary);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{display:none;flex-direction:column;gap:4px;padding:8px var(--page-gutter) 24px;border-top:1px solid var(--border-subtle)}
.nav-panel .nav-link{font-size:var(--text-body-md);padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.nav-panel .btn{margin-top:16px;align-self:flex-start}

/* Hero */
.hero{background:var(--gradient-brand);padding:var(--hero-pad-top) var(--page-gutter) 0;display:flex;flex-direction:column;gap:56px}
.hero__copy{display:flex;flex-direction:column;gap:28px;max-width:var(--measure-hero)}
.hero h1{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-display);line-height:var(--leading-display);color:var(--text-on-brand);text-wrap:balance}
.hero__lead{font-size:var(--text-lead);line-height:var(--leading-body-tight);color:var(--text-on-brand-muted);max-width:var(--measure-lead)}
.hero__actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero__image{width:100%;height:var(--hero-image-h);object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:block}

/* Clients */
.clients{background:var(--surface-inverse);color:var(--text-on-inverse);padding:40px var(--page-gutter);display:flex;flex-direction:column;gap:20px}
.clients__list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h6);list-style:none;margin:0;padding:0}

/* Sections */
.section{padding:var(--section-pad-y) var(--page-gutter);display:flex;flex-direction:column;gap:48px}
.section--flush-top{padding-top:0}
.section--white{background:var(--surface-card)}
.section--dark{background:var(--surface-inverse)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap-split);padding:var(--section-pad-y) var(--page-gutter)}
.about__body{display:flex;flex-direction:column;gap:20px;font-size:var(--text-body-lg);line-height:var(--leading-body-loose);color:var(--text-secondary)}

/* Feature card */
.feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle)}
.feature--image-right>.feature__media{order:2}
.feature__media{width:100%;height:var(--feature-image-h);object-fit:cover;display:block}
.feature__body{padding:var(--feature-pad);display:flex;flex-direction:column;justify-content:center;gap:18px}
.feature__meta{font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);color:var(--text-accent)}
.feature h3{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h3);line-height:var(--leading-snug);text-wrap:pretty}
.feature p{font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}

/* Service + CTA cards */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-28)}
.service{display:flex;flex-direction:column;gap:16px}
.service img{width:100%;height:var(--service-image-h);object-fit:cover;border-radius:var(--radius-md);display:block}
.service h3{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h6);line-height:var(--leading-snug)}
.service p{font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-secondary)}
.cta-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:40px;border-radius:var(--radius-md);background:var(--gradient-brand);min-height:240px}
.cta-card h3{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h4);line-height:var(--leading-cta);color:var(--text-on-brand);text-wrap:pretty}

/* Hubs */
.grid-hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
.hub{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--radius-md);background:var(--surface-inverse-raised);color:var(--text-on-inverse)}
.hub__code{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h5)}
.hub__region{font-size:var(--text-small);color:var(--text-on-inverse-muted)}

/* Team */
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-20)}
.team{display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.team__name{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h6)}
.team__bio{font-size:var(--text-body-sm);line-height:var(--leading-body-tight);color:var(--text-secondary)}

/* Contact */
.contact{display:flex;justify-content:space-between;align-items:center;gap:var(--space-48);margin:0 var(--page-gutter) var(--page-gutter);padding:var(--contact-pad);border-radius:var(--radius-xl);background:var(--gradient-brand)}
.contact__copy{display:flex;flex-direction:column;gap:14px}
.contact h2{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-h2-xl);line-height:var(--leading-heading);color:var(--text-on-brand)}
.contact p{font-size:var(--text-body-xl);line-height:var(--leading-body-tight);color:var(--text-on-brand-muted)}
.contact__actions{display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-end}
.contact__actions .btn:first-child{white-space:normal;overflow-wrap:anywhere}

/* Footer */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:32px var(--page-gutter);border-top:1px solid var(--border-subtle);font-size:var(--text-small);color:var(--text-tertiary)}

@media (max-width:1024px){
.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.nav-links{display:none}.nav-toggle{display:inline-flex}
.nav-panel[data-open="true"]{display:flex}
}
@media (max-width:860px){
.split,.feature{grid-template-columns:minmax(0,1fr)}
.feature--image-right>.feature__media{order:0}
.contact{flex-direction:column;align-items:flex-start}
.contact__actions{align-items:flex-start}
}
@media (max-width:720px){
.grid-3,.grid-5{grid-template-columns:minmax(0,1fr)}
.site-footer{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){.grid-hubs{grid-template-columns:minmax(0,1fr)}}