:root {
    --ink: #142720;
    --accent: #d75b49;
    --paper: #f5f4ef;
    --white: #fff;
    --text: #66736d;
    --silver: #e8c8a7;
    --line: rgba(20, 39, 32, .16);
    --body-color: var(--ink);
    --hero-shade: rgba(11, 27, 22, .70);
    --hero-shade-mobile: rgba(11, 27, 22, .76);
    --hero-copy: rgba(255, 255, 255, .78);
    --hero-contact: rgba(255, 255, 255, .86);
    --hero-icon: #f1d9bb;
    --button-bg: #f1d9bb;
    --button-color: var(--ink);
    --button-hover-bg: var(--white);
    --button-hover-color: var(--ink);
    --note-bg: #eae9e2;
    --contact-label: #e8c8a7;
    --contact-email: #f1d9bb;
    --contact-phone: rgba(255, 255, 255, .7);
    --nav-bg: var(--paper);
    --nav-color: var(--ink);
    --nav-border: var(--ink);
    --nav-hover-bg: var(--ink);
    --nav-hover-color: var(--white);
    --footer-bg: var(--paper);
    --footer-text: var(--text);
    --footer-link: var(--ink);
    --display: 'DM Serif Display', Georgia, serif;
    --body: 'DM Sans', sans-serif;
}

.brand--consulting { --accent: #397966; }

.brand--technology {
    --ink: #080D5A;
    --accent: #C81018;
    --paper: #F5F3EE;
    --white: #FFFFFF;
    --text: #34364A;
    --silver: #A7ABC5;
    --line: #D8D8DE;
    --body-color: var(--text);
    --hero-shade: rgba(8, 13, 90, .76);
    --hero-shade-mobile: rgba(8, 13, 90, .82);
    --hero-copy: var(--silver);
    --hero-contact: var(--silver);
    --hero-icon: var(--accent);
    --button-bg: var(--accent);
    --button-color: var(--white);
    --button-hover-bg: var(--ink);
    --button-hover-color: var(--white);
    --note-bg: var(--white);
    --contact-label: var(--silver);
    --contact-email: var(--paper);
    --contact-phone: var(--silver);
    --nav-bg: var(--ink);
    --nav-color: var(--white);
    --nav-border: var(--silver);
    --nav-hover-bg: var(--accent);
    --nav-hover-color: var(--white);
    --footer-bg: var(--ink);
    --footer-text: var(--silver);
    --footer-link: var(--white);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--body-color); background: var(--paper); font-family: var(--body); }
a { color: inherit; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 20; padding: 10px 14px; background: var(--white); }
.skip-link:focus { top: 12px; }

.site-nav { position: relative; z-index: 5; color: var(--nav-color); background: var(--nav-bg); }
.site-nav__inner { min-height: 82px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--nav-color); text-decoration: none; font-weight: 700; }
.wordmark img { width: 42px; height: 42px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--nav-color); font-size: 14px; text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 17px; border: 1px solid var(--nav-border); color: var(--nav-color); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.nav-cta:hover { border-color: var(--nav-hover-bg); color: var(--nav-hover-color); background: var(--nav-hover-bg); }
.nav-toggle { border: 1px solid var(--nav-border); border-radius: 0; color: var(--nav-color); }

.hero { position: relative; display: flex; align-items: center; min-height: 550px; height: 76svh; max-height: 760px; overflow: hidden; color: var(--white); background: var(--ink); }
.hero__image, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: center 48%; }
.hero__shade { background: var(--hero-shade); }
.hero__content { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 70px; animation: rise-in .75s ease-out both; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--silver); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.eyebrow::before { width: 32px; height: 1px; background: var(--accent); content: ''; }
.hero h1 { max-width: 830px; margin: 0; font-family: var(--display); font-size: 76px; font-weight: 400; line-height: 1.04; }
.hero__tagline { max-width: 620px; margin: 22px 0 12px; font-size: 22px; font-weight: 500; }
.hero__description { max-width: 610px; margin: 0; color: var(--hero-copy); font-size: 16px; line-height: 1.8; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 32px; }
.button-primary { display: inline-flex; align-items: center; gap: 13px; min-height: 50px; padding: 0 20px; color: var(--button-color); background: var(--button-bg); text-decoration: none; font-size: 14px; font-weight: 700; transition: background .2s, transform .2s; }
.button-primary:hover { color: var(--button-hover-color); background: var(--button-hover-bg); transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-size: 14px; }
.text-link:hover { color: var(--silver); }
.hero__contact { position: absolute; right: 0; bottom: 24px; left: 0; z-index: 2; color: var(--hero-contact); font-size: 13px; }
.hero__contact-inner { display: flex; gap: 28px; }
.hero__contact a { text-decoration: none; }
.hero__contact i { margin-right: 8px; color: var(--hero-icon); }

.section-pad { padding: 112px 0; }
.section-label { margin-bottom: 20px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.section-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: 52px; font-weight: 400; line-height: 1.1; }
.intro-copy { max-width: 540px; color: var(--text); font-size: 16px; line-height: 1.8; }
.services { background: var(--white); }
.service-item { height: 100%; padding: 28px 20px 6px 0; border-top: 1px solid var(--line); }
.service-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; margin-bottom: 24px; color: var(--accent); font-size: 19px; }
.service-item h3 { margin: 0 0 12px; color: var(--ink); font-size: 19px; font-weight: 700; }
.service-item p { max-width: 320px; margin: 0; color: var(--text); font-size: 14px; line-height: 1.75; }

.approach { background: var(--paper); }
.approach-list { margin: 0; padding: 0; list-style: none; }
.approach-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.approach-number { color: var(--accent); font-size: 13px; font-weight: 700; }
.approach-list strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 16px; }
.approach-list span:last-child { color: var(--text); font-size: 14px; line-height: 1.65; }
.approach-note { padding: 32px; border-left: 3px solid var(--accent); background: var(--note-bg); }
.approach-note p { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.25; }
.approach-note span { display: block; margin-top: 18px; color: var(--text); font-size: 13px; }

.contact { padding: 88px 0; color: var(--white); background: var(--ink); }
.contact .section-label { color: var(--contact-label); }
.contact .section-title { max-width: 720px; color: var(--white); }
.contact__email { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--contact-email); font-size: 21px; text-decoration: none; overflow-wrap: anywhere; }
.contact__email:hover { color: var(--white); }
.contact__phone { display: block; margin-top: 12px; color: var(--contact-phone); text-decoration: none; }
.site-footer { padding: 24px 0; color: var(--footer-text); background: var(--footer-bg); font-size: 13px; }
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--footer-link); font-size: 15px; }
.footer-social a:hover { color: var(--accent); }

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767.98px) {
    .site-nav__inner { min-height: 70px; }
    .mobile-menu { padding: 12px 0 20px; border-top: 1px solid var(--line); }
    .mobile-menu .nav-links { align-items: flex-start; flex-direction: column; gap: 18px; padding: 10px 0 20px; }
    .hero { height: 74svh; min-height: 560px; max-height: 720px; }
    .hero__image { object-position: 58% center; }
    .hero__shade { background: var(--hero-shade-mobile); }
    .hero__content { padding-bottom: 84px; }
    .hero h1 { font-size: 52px; }
    .hero__tagline { font-size: 19px; }
    .hero__description { font-size: 15px; }
    .hero__contact-inner { flex-wrap: wrap; gap: 10px 20px; }
    .section-pad { padding: 76px 0; }
    .section-title { font-size: 40px; }
    .approach-note { margin-top: 30px; padding: 24px; }
    .approach-note p { font-size: 26px; }
    .contact { padding: 72px 0; }
    .contact__email { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}