/* ================================================================= AcuServe Global — "The Quiet Ledger" Design system: deep navy authority · emerald accent · ivory paper Display: Playfair Display · Body: Hanken Grotesk · Labels: IBM Plex Mono ================================================================= */ :root{ /* brand */ --navy:#0C1E33; --navy-700:#13294A; --navy-600:#1C3A60; --emerald:#15936A; --emerald-bright:#1FA978; --emerald-deep:#0B5E43; --emerald-tint:#E3F1EA; --mega-bg:#E2DBC6; /* full-bleed mega-menu bar (darker warm ivory); overridden per theme */ --brass:#B5923B; --brass-soft:#CBAE6B; /* surfaces */ --paper:#F3F1EA; --paper-2:#ECE8DD; --surface:#FBFAF6; --surface-2:#FFFFFF; /* text */ --ink:#0C1E33; --ink-soft:#33475A; --muted:#69757F; --on-navy:#EAF1F0; --on-navy-soft:rgba(234,241,240,.66); /* lines */ --line:rgba(12,30,51,.12); --line-soft:rgba(12,30,51,.07); --line-navy:rgba(234,241,240,.16); /* effects */ --shadow-sm:0 1px 2px rgba(12,30,51,.05); --shadow:0 2px 6px rgba(12,30,51,.05), 0 22px 48px -24px rgba(12,30,51,.28); --shadow-lg:0 40px 80px -40px rgba(12,30,51,.45); /* type */ --font-display:"Playfair Display", Georgia, "Times New Roman", serif; --font-sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --shell:1240px; } /* --------------------------------------------------------------- BACKGROUND-PALETTE TRIALS — applied per page via a class. The default (no class) is the original WARM IVORY. Two cool alternatives are defined below; put ONE of these classes on a page's to preview it: • theme-cool — cool blue-grey paper • theme-green — very light sage/mint-green paper Both keep the navy/emerald/brass brand intact and only shift the surface tones. To revert a page: remove the class. To roll out site-wide: add the chosen class to every page's . --------------------------------------------------------------- */ body.theme-cool{ --paper:#EAEEF3; --paper-2:#DCE4EC; --surface:#F6F9FC; --surface-2:#FFFFFF; --mega-bg:#D3DEEA; --line:rgba(12,30,51,.13); --line-soft:rgba(12,30,51,.08); } body.theme-green{ --paper:#E8F1EB; --paper-2:#D8E7DD; --surface:#F4FAF6; --surface-2:#FFFFFF; --mega-bg:#CFE3D6; --line:rgba(12,30,51,.13); --line-soft:rgba(12,30,51,.08); } /* TEMPORARY palette-decision widget — injected by main.js. Remove with its JS block once a palette is chosen. */ .theme-switch{ position:fixed; right:18px; bottom:76px; z-index:200; display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--navy); box-shadow:var(--shadow-lg); border:1px solid var(--line-navy); } .theme-switch__label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-soft); margin-right:2px; } .theme-switch__sw{ width:22px; height:22px; padding:0; cursor:pointer; background:var(--sw); border:1px solid rgba(255,255,255,.35); transition:transform .12s ease, box-shadow .12s ease; } .theme-switch__sw:hover{ transform:translateY(-1px); } .theme-switch__sw.is-on{ box-shadow:0 0 0 2px var(--navy), 0 0 0 3px var(--emerald-bright); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* The nav is fixed, so an anchor jump would tuck the section heading underneath it. Reserve its height plus a little air. */ section[id]{scroll-margin-top:96px} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0} ::selection{background:var(--emerald);color:#fff} /* subtle paper grain over the whole page */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } /* ---------------- Typography ---------------- */ .display{ font-family:var(--font-display); font-weight:400; font-size:clamp(44px,7vw,104px); line-height:1.0; letter-spacing:-0.025em; margin:0; } .h1{ font-family:var(--font-display);font-weight:400; font-size:clamp(38px,5.2vw,76px);line-height:1.04;letter-spacing:-0.022em;margin:0; } .h2{ font-family:var(--font-display);font-weight:400; font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-0.018em;margin:0; } .h3{ font-family:var(--font-display);font-weight:500; font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-0.01em;margin:0; } .serif{font-family:var(--font-display);font-weight:400} em,.ital{font-style:italic} .accent{color:var(--emerald-deep)} .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-soft);font-weight:400;max-width:60ch} .muted{color:var(--muted)} .numeral{font-family:var(--font-display);font-weight:400;letter-spacing:-0.03em;line-height:.9} /* eyebrow / kicker */ .eyebrow{ font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--emerald-deep); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:18px;height:1px;background:var(--brass)} .eyebrow.on-navy{color:var(--emerald-bright)} .eyebrow.bare::before{display:none} .mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase} /* ---------------- Layout ---------------- */ .shell{max-width:var(--shell);margin:0 auto;padding:0 32px;position:relative;z-index:2} @media (max-width:640px){ .shell{padding:0 20px} } section{position:relative} .pad{padding:clamp(72px,11vw,140px) 0} .pad-sm{padding:clamp(48px,7vw,88px) 0} .rule{height:1px;background:var(--line);border:0;margin:0} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center} .split.top{align-items:start} .split--wide{grid-template-columns:1.5fr .85fr} @media (max-width:900px){ .split,.split--wide{grid-template-columns:1fr;gap:40px} } .measure{max-width:38ch} .stack-sm > * + *{margin-top:14px} /* index number that decorates section headers */ .sec-head{display:flex;flex-direction:column;gap:20px;max-width:60ch} .sec-index{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--brass)} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex;align-items:center;gap:12px; padding:15px 26px;border-radius:0; font-family:var(--font-sans);font-weight:600;font-size:15px;letter-spacing:-.01em; border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s; white-space:nowrap; } .btn svg{width:16px;height:16px;transition:transform .25s ease} .btn:hover svg{transform:translateX(4px)} .btn--solid{background:var(--navy);color:var(--on-navy)} .btn--solid:hover{background:var(--navy-700);box-shadow:var(--shadow);transform:translateY(-1px)} .btn--accent{background:var(--emerald);color:#fff} .btn--accent:hover{background:var(--emerald-deep);box-shadow:0 16px 30px -14px rgba(11,94,67,.6);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)} .btn--light{background:var(--on-navy);color:var(--navy)} .btn--light:hover{background:#fff;transform:translateY(-1px)} .btn--outline-light{border-color:var(--line-navy);color:var(--on-navy)} .btn--outline-light:hover{background:rgba(255,255,255,.08)} .linkarrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--emerald-deep);font-size:15px} .linkarrow svg{width:15px;height:15px;transition:transform .25s ease} .linkarrow:hover svg{transform:translateX(4px)} /* Touch: these are real navigation, so grow the 24px line box toward the ~44px thumb target without shifting the layout (negative margin absorbs it). */ @media (max-width:880px){ .linkarrow{padding:10px 0;margin-top:-10px;margin-bottom:-10px} } /* underline-on-hover */ .ul{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1);padding-bottom:1px} .ul:hover{background-size:100% 1px} /* ---------------- Nav ---------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; background:rgba(243,241,234,.82); background:color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; } .nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb, var(--paper) 92%, transparent)} .nav__bar{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:inline-flex;align-items:center} .brand img{height:30px;width:auto} .nav__links{display:flex;align-items:center;gap:6px} .nav__link{ position:relative;padding:9px 16px;font-size:15px;font-weight:500;color:var(--ink-soft);border-radius:0;transition:color .2s; } .nav__link::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:1.5px;background:var(--emerald);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .nav__link:hover{color:var(--ink)} .nav__link:hover::after{transform:scaleX(1);transform-origin:left} .nav__link.active{color:var(--ink)} .nav__link.active::after{transform:scaleX(1);transform-origin:left} .nav__cta{display:flex;align-items:center;gap:12px} .nav__toggle{display:none;width:42px;height:42px;border-radius:0;border:1px solid var(--line);align-items:center;justify-content:center} .nav__toggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:.3s} .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:.3s} .nav__toggle span::before{top:-5px}.nav__toggle span::after{top:5px} .nav.open .nav__toggle span{background:transparent} .nav.open .nav__toggle span::before{top:0;transform:rotate(45deg)} .nav.open .nav__toggle span::after{top:0;transform:rotate(-45deg)} .drawer{display:none;border-top:1px solid var(--line);background:var(--paper)} .drawer__link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;border-bottom:1px solid var(--line-soft);font-family:var(--font-display);font-size:26px;color:var(--ink);text-align:left} .drawer__link span{font-family:var(--font-mono);font-size:11px;color:var(--brass);display:inline-flex;align-items:center;gap:8px} .drawer__caret{width:13px;height:13px;color:var(--brass);transition:transform .3s} .drawer__acc.open .drawer__caret{transform:rotate(180deg)} .drawer__sub{overflow:hidden;max-height:0;transition:max-height .42s cubic-bezier(.2,.7,.2,1)} .drawer__acc.open .drawer__sub{max-height:520px} .drawer__sub a{display:block;padding:13px 0 13px 4px;border-bottom:1px solid var(--line-soft);font-size:16px;color:var(--ink-soft)} .drawer__sub a:hover{color:var(--ink)} .drawer__sub-all{color:var(--emerald-deep);font-weight:600} .nav.open .drawer{display:block} @media (max-width:880px){ .nav__links{display:none} .nav__cta .btn{display:none} .nav__toggle{display:inline-flex} } /* ---------------- Mega menu (Services) ---------------- */ .nav__item{position:static;display:inline-flex;align-items:center} .nav__caret{width:11px;height:11px;margin-left:6px;opacity:.65;transition:transform .3s ease} .nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg);opacity:1} .mega{position:absolute;top:100%;left:0;right:0;padding-top:8px;z-index:70; opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none; transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1),visibility .26s} /* invisible bridge over the empty band below the centered nav link, so moving the cursor from "Services" down into the panel never drops :hover */ .mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px} .nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .mega__in{position:relative;display:grid;grid-template-columns:1.7fr .82fr} /* full-bleed deeper-green bar painted edge-to-edge behind the shell-width content */ .mega__in::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%); background:var(--mega-bg); border-top:1px solid var(--emerald);border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);z-index:-1} .mega__panel{padding:22px 18px} .mega__head{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:0 14px;margin-bottom:8px} .mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px} .mega__link{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:start;padding:13px 14px;transition:background .2s} .mega__link:hover{background:rgba(255,255,255,.6)} .mega__n{font-family:var(--font-mono);font-size:11px;color:var(--brass);grid-row:1 / span 2;padding-top:4px} .mega__name{font-family:var(--font-display);font-size:18px;line-height:1.2;color:var(--ink)} .mega__link:hover .mega__name{color:var(--emerald-deep)} .mega__desc{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:2px} /* wide variant — Industries (12 sectors, full-width 3-col, no side CTA card) */ .mega--wide .mega__in{display:block} .mega--wide .mega__grid{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){ .mega--wide .mega__grid{grid-template-columns:1fr 1fr} } .mega__cta{background:var(--navy);color:var(--on-navy);padding:26px;display:flex;flex-direction:column;justify-content:center} .mega__cta-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-bright);margin-bottom:12px} .mega__cta-t{font-family:var(--font-display);font-size:19px;line-height:1.25;color:#fff;margin:0 0 18px} .mega__cta .btn{align-self:flex-start} /* ---------------- Hero ---------------- */ .hero{padding-top:140px;padding-bottom:clamp(48px,7vw,96px);overflow:hidden} /* Playfair's descenders hang outside a line-height:1.0 line box. Where a heading is the last thing in the hero (about/services/contact set padding-bottom:0), .hero's overflow:hidden shears the tail off a "g" or "y" — so reserve a sliver of room for it. */ .hero__inner .display:last-child, .hero__inner .h1:last-child{padding-bottom:.12em} .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero__glow{position:absolute;width:760px;height:760px;border-radius:0; background:radial-gradient(circle, rgba(31,169,120,.18), rgba(31,169,120,0) 62%); top:-280px;right:-180px;filter:blur(8px)} .hero__glow.two{background:radial-gradient(circle, rgba(181,146,59,.12), rgba(181,146,59,0) 62%);left:-260px;top:120px;right:auto;width:560px;height:560px} .hero__grid{position:absolute;inset:0;opacity:.6; background-image:radial-gradient(var(--line) 1.4px,transparent 1.6px); background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 70%)} .hero__inner{position:relative;z-index:2} .hero__tag{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:30px} .hero__tag .dot{width:7px;height:7px;border-radius:0;background:var(--emerald);box-shadow:0 0 0 4px rgba(21,147,106,.16)} .hero__title{margin:0 0 26px;max-width:16ch} .hero__title .mark{position:relative;white-space:nowrap;color:var(--emerald-deep);font-style:italic} .hero__title .mark::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.5em;background:var(--emerald-tint);z-index:-1;border-radius:0} .hero__sub{max-width:46ch;margin:0 0 34px} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero__panel{ position:relative;background:var(--navy);color:var(--on-navy);border-radius:0;padding:34px; box-shadow:var(--shadow-lg);overflow:hidden; } .hero__panel::before{content:"";position:absolute;inset:0;opacity:.5; background-image:radial-gradient(circle at 80% 0%, rgba(31,169,120,.25), transparent 45%)} .hero__panel-h{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-soft)} .ledger-row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line-navy)} .ledger-row:first-of-type{border-top:0} .ledger-row .lr-label{font-size:14.5px;color:var(--on-navy);max-width:24ch} .ledger-row .lr-val{font-family:var(--font-display);font-size:26px;color:#fff;white-space:nowrap} .ledger-row .lr-val .u{font-size:13px;color:var(--emerald-bright);font-family:var(--font-mono);margin-left:4px} /* ---------------- Trust marquee ---------------- */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden} .trust__track{display:flex;gap:56px;width:max-content;padding:20px 0;animation:slide 38s linear infinite;align-items:center} .trust:hover .trust__track{animation-play-state:paused} .trust__item{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .trust__item b{color:var(--ink);font-weight:600} .trust__item .tick{color:var(--emerald)} @keyframes slide{to{transform:translateX(-50%)}} /* ---------------- Stats ---------------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:40px 28px;border-left:1px solid var(--line)} .stat:first-child{border-left:0;padding-left:0} .stat__n{font-family:var(--font-display);font-size:clamp(48px,6vw,84px);line-height:.92;letter-spacing:-.03em;color:var(--navy)} .stat__n .u{color:var(--emerald);font-size:.5em;vertical-align:super;margin-left:2px} .stat__l{margin-top:16px;font-size:14.5px;color:var(--ink-soft);max-width:26ch} .stat__rule{width:26px;height:2px;background:var(--brass);margin-top:18px} @media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} .stat{padding:30px 0;border-left:0;border-top:1px solid var(--line)} .stat:nth-child(-n+2){border-top:0} .stat:nth-child(even){padding-left:28px;border-left:1px solid var(--line)} } @media (max-width:480px){ .stats{grid-template-columns:1fr} .stat:nth-child(even){padding-left:0;border-left:0} .stat:nth-child(n+2){border-top:1px solid var(--line)} } /* ---------------- Service rows ---------------- */ .srv{border-top:1px solid var(--line)} .srv:last-child{border-bottom:1px solid var(--line)} .srv__a{display:grid;grid-template-columns:64px 1.1fr 1.5fr auto;gap:28px;align-items:center;padding:30px 8px;transition:padding .3s cubic-bezier(.2,.7,.2,1), background .3s} .srv__a:hover{padding-left:24px;padding-right:24px;background:var(--surface)} .srv__num{font-family:var(--font-mono);font-size:13px;color:var(--brass)} .srv__name{font-family:var(--font-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.015em} .srv__desc{color:var(--ink-soft);font-size:15.5px;max-width:42ch} .srv__arc{width:46px;height:46px;border-radius:0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;justify-self:end;transition:.3s;color:var(--ink)} .srv__arc svg{width:16px;height:16px;transition:transform .3s} .srv__a:hover .srv__arc{background:var(--emerald);border-color:var(--emerald);color:#fff} .srv__a:hover .srv__arc svg{transform:rotate(-45deg)} @media (max-width:780px){ .srv__a{grid-template-columns:auto 1fr auto;gap:18px} .srv__desc{display:none} } /* card grid (capabilities / pillars / steps) */ .cards{display:grid;gap:20px} .cards.c2{grid-template-columns:repeat(2,1fr)} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){ .cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr} } .card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:30px;transition:transform .3s, box-shadow .3s, border-color .3s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .card__k{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--brass);margin-bottom:18px} .card__icon{width:46px;height:46px;border-radius:0;background:var(--emerald-tint);color:var(--emerald-deep);display:flex;align-items:center;justify-content:center;margin-bottom:22px} .card__icon svg{width:22px;height:22px} .card h3{margin:0 0 10px} .card p{margin:0;color:var(--ink-soft);font-size:15.5px} /* checklist */ .checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} @media (max-width:540px){ .checks{grid-template-columns:1fr} } .checks li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;padding-top:11px;border-top:1px solid var(--line-soft);color:var(--ink-soft)} .checks li::before{content:"";flex:none;width:7px;height:7px;border-radius:0;background:var(--emerald);transform:translateY(-1px)} /* ---------------- Industries grid ---------------- */ .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)} .ind-grid .ind{display:flex;align-items:center;gap:14px;padding:22px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-soft);text-decoration:none;transition:background .25s, color .25s} .ind-grid .ind:hover{background:var(--surface);color:var(--ink)} .ind-grid .ind .d{flex:none;width:7px;height:7px;background:var(--emerald);transform:rotate(45deg)} @media (max-width:860px){ .ind-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:460px){ .ind-grid{grid-template-columns:1fr} } /* ---------------- Panels (dark) ---------------- */ .navy{background:var(--navy);color:var(--on-navy)} .navy .h1,.navy .h2,.navy .display,.navy .h3{color:#fff} .navy .lead{color:var(--on-navy-soft)} .navy .rule{background:var(--line-navy)} .navy .eyebrow{color:var(--emerald-bright)} .navy .eyebrow::before{background:var(--brass-soft)} /* process steps */ .steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:0} .step{padding:34px 26px 34px 0;border-top:1px solid var(--line-navy);position:relative} .step__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--emerald-bright);margin-bottom:18px} .step h3{margin:0 0 12px} .step p{margin:0;color:var(--on-navy-soft);font-size:15px} @media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .steps{grid-template-columns:1fr} } /* quote / testimonial */ .quote{max-width:24ch} .quote__mark{font-family:var(--font-display);font-size:120px;line-height:.4;color:var(--emerald-bright);font-style:italic;display:block;height:60px} .quote__t{font-family:var(--font-display);font-size:clamp(28px,3.6vw,52px);line-height:1.16;letter-spacing:-.012em;max-width:20ch} /* ---------------- CTA ---------------- */ .cta{position:relative;overflow:hidden;border-radius:0;background:var(--navy);color:var(--on-navy);padding:clamp(48px,7vw,84px)} .cta::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:0;background:radial-gradient(circle, rgba(31,169,120,.35), transparent 65%);pointer-events:none} .cta::after{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(var(--line-navy) 1.5px,transparent 1.7px);background-size:24px 24px;mask-image:radial-gradient(circle at 20% 100%, #000, transparent 70%);pointer-events:none} .cta__in{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end} @media (max-width:820px){ .cta__in{grid-template-columns:1fr;gap:28px;align-items:start} } /* ---------------- Forms ---------------- */ .field{display:flex;flex-direction:column;gap:9px;margin-bottom:26px} .field label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{ font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--surface-2); border:1px solid var(--line);border-radius:0;padding:14px 16px;outline:none;transition:border-color .2s, box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);box-shadow:0 0 0 4px rgba(21,147,106,.12)} .field input::placeholder,.field textarea::placeholder{color:var(--muted)} .form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} @media (max-width:560px){ .form-2{grid-template-columns:1fr} } /* Honeypot — must stay reachable to bots parsing the DOM, so it is moved off-screen rather than display:none'd. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-error{margin:0 0 4px;padding:12px 14px;border-left:3px solid #B3261E;background:rgba(179,38,30,.07);color:#8C1D18;font-size:14.5px;line-height:1.5} .field input.err,.field select.err,.field textarea.err{border-color:#B3261E} .btn.is-busy{opacity:.65;pointer-events:none} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{padding:10px 16px;border-radius:0;border:1px solid var(--line);background:var(--surface-2);font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:.2s} .chip:hover{border-color:var(--emerald)} .chip.on{background:var(--navy);border-color:var(--navy);color:#fff} .chip.on::before{content:"✓ "} .aside-card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:30px} .contact-row{padding:18px 0;border-top:1px solid var(--line)} .contact-row:first-of-type{border-top:0;padding-top:0} .contact-row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .contact-row a,.contact-row p{font-size:17px;margin:6px 0 0;color:var(--ink)} @media (max-width:880px){ .contact-row a{display:inline-block;padding:8px 0} } /* ---------------- Footer ---------------- */ .footer{background:var(--navy);color:var(--on-navy);padding-top:clamp(64px,9vw,110px);overflow:hidden;position:relative;z-index:2} .footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px} @media (max-width:880px){ .footer__grid{grid-template-columns:1fr 1fr;gap:40px} } @media (max-width:520px){ .footer__grid{grid-template-columns:1fr} } .footer__logo{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:22px} .footer__cols h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 18px;font-weight:500} .footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .footer__cols a,.footer__cols li{color:var(--on-navy-soft);font-size:15px} .footer__cols a:hover{color:#fff} /* Touch widths: a 15px link is a ~21px-tall target, well under the ~44px thumb guidance, so pad the rows out where there's no mouse. */ @media (max-width:880px){ .footer__cols ul{gap:2px} .footer__cols a{display:block;padding:10px 0} .footer__bar{font-size:12px;line-height:1.6} .footer__bar a{display:inline-block;padding:8px 0;margin-left:0} .footer__bar span{display:block} } .footer__word{font-family:var(--font-display);font-size:clamp(64px,16vw,220px);line-height:.8;letter-spacing:-.04em;color:#fff;opacity:.06;user-select:none;white-space:nowrap;margin-top:20px} .footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:26px 0;border-top:1px solid var(--line-navy);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-navy-soft)} .footer__bar a{margin-left:22px} .footer__bar a:hover{color:#fff} /* ---------------- Scroll-to-top button ---------------- */ .to-top{ position:fixed; right:18px; bottom:18px; z-index:190; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--on-navy); border:1px solid var(--line-navy); box-shadow:var(--shadow-lg); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, background .2s ease; } .to-top.show{opacity:1; visibility:visible; transform:none} .to-top:hover{background:var(--emerald-deep)} .to-top svg{width:20px; height:20px} /* ---------------- Reveal animations ---------------- */ @media (prefers-reduced-motion:no-preference){ [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)} [data-reveal].in{opacity:1;transform:none} .hero__inner [data-stagger]{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)} @keyframes rise{to{opacity:1;transform:none}} } /* ---------------- About: timeline ---------------- */ .tl{display:grid;grid-template-columns:84px 1fr;gap:24px;padding:18px 0;align-items:baseline} .tl__y{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--brass)} .tl__t{font-size:16px;color:var(--ink-soft)} /* About: team shape */ /* minmax(0,…) so a long role name can't blow the track out past the viewport */ .team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} @media (max-width:980px){ .team{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:560px){ .team{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Under ~380px two cards leave less room than "Engagement" needs at .h3 size, so the grid drops to one column rather than pushing the page wider. */ @media (max-width:380px){ .team{grid-template-columns:1fr} .team__card{min-height:0;padding:22px} } .team__card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:26px;min-height:170px;display:flex;flex-direction:column} .team__card .h3{margin-top:auto} .team__card--lead{background:var(--navy);color:#fff;border-color:var(--navy)} .team__card--lead .h3{color:#fff} .team__av{width:46px;height:46px;border-radius:0;background:var(--emerald-tint);color:var(--emerald-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:18px} .team__card--lead .team__av{background:var(--emerald);color:#fff} /* About: what we won't do */ .wont{display:grid;grid-template-columns:36px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line);align-items:start} .wont:first-child{border-top:0;padding-top:0} .wont__x{font-family:var(--font-display);font-size:26px;color:var(--brass);line-height:1} .wont p{margin:8px 0 0;color:var(--ink-soft);font-size:15.5px} /* form invalid shake */ .shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)} @keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}} /* utilities */ .tag-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:0;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-soft)} .tag-pill .ar{color:var(--emerald-deep)} .hidden{display:none!important} .center{text-align:center} .mt-s{margin-top:18px}.mt-m{margin-top:32px}.mt-l{margin-top:52px} .maxw{max-width:62ch}