/* ==========================================================================
NovaPoint Consulting - site styles
NOVAPOINT VISUAL IDENTITY v1.0
Montserrat (display/headings) + Inter (body/UI), deep navy grounding with
electric blue for action and cyan as a restrained accent on dark surfaces.
This is a brand migration over the existing layout - no structural redesign.
APPROVED PALETTE DERIVED VALUES (documented, accessibility-driven)
deep navy #0E1B2E --surface-alt #F2F5FA soft tint of Light Gray
navy #132A4D --border #DCE3EC hairline between LG/Slate
electric blue#1D5EFF --blue-ink #1749CC small text links
cyan #00C8E6 --blue-hover #1749CC button hover
slate #6B7C93 --text-muted #5A6A80 muted text on light
light gray #E6EBF2 --footer-muted #8FA0B5 secondary text on navy
--navy-line #223A5C hairlines on navy
Why the derived values exist - measured contrast ratios:
Slate #6B7C93 on white 4.26:1 FAILS AA for body text
-> --text-muted #5A6A80 5.51:1 on white, 4.60:1 on --surface-alt
Cyan #00C8E6 on white 2.02:1 FAILS badly - cyan is DARK-SURFACE
ONLY for text; on white it is decorative or nothing.
Cyan on deep navy 8.56:1 PASSES - its proper home.
Electric blue #1D5EFF on white 5.13:1 PASSES. White ON electric blue is
also 5.13:1, so a blue button with a white label is AA.
Electric blue on deep navy 3.37:1 FAILS - never blue text on navy.
-> use cyan or light gray on dark instead.
--blue-ink #1749CC on white 7.34:1, on --surface-alt 6.13:1 - used for
small links/eyebrows so they pass on every light surface with margin.
Slate on deep navy 4.06:1 FAILS for normal text
-> --footer-muted #8FA0B5 6.47:1 on deep navy.
========================================================================== */
:root{
/* Approved brand palette */
--deep-navy:#0E1B2E;
--navy:#132A4D;
--electric-blue:#1D5EFF;
--cyan:#00C8E6;
--slate:#6B7C93;
--light-gray:#E6EBF2;
--white:#fff;
/* Derived, accessibility-driven (see header note) */
--surface-alt:#F2F5FA;
--border:#DCE3EC;
--blue-ink:#1749CC;
--blue-hover:#1749CC;
--text-muted:#5A6A80;
--footer-muted:#8FA0B5;
--navy-line:#223A5C;
/* Semantic aliases */
--color-bg-dark:var(--deep-navy);
--color-surface:var(--white);
--color-surface-alt:var(--surface-alt);
--color-primary:var(--electric-blue);
--color-accent:var(--cyan);
--color-heading:var(--deep-navy);
--color-text:var(--navy);
--color-text-muted:var(--text-muted);
/* Functional UI colour, NOT part of the brand palette. Used only for
validation errors. Measured 6.54:1 on white - clears AA for normal text,
so no new error colour was needed in the Phase 1A pass. */
--error:#B3261E;
/* ---- READING MEASURE ----------------------------------------------
Long-form body copy targets ~62-64 characters per line. The list and
step values differ because the marker/number, its gap and the row
padding all sit inside the box: set against the container, they land at
~63ch of actual text. Never applied to nav, buttons, grids or tables. */
--measure:63ch; /* paragraphs */
--measure-list:64ch; /* list rows: ~3.5ch lost to marker + gap */
--measure-step:68ch; /* step rows: number, gap and padding sit inside */
--measure-narrow:52ch; /* small print, captions */
/* ---- SECTION RHYTHM ------------------------------------------------
Three deliberate tiers instead of one uniform value. Hierarchy decides
spacing: .s-major for the moments that carry the page, the default for
supporting sections, .s-compact for asides and short codas. */
--space-major:112px;
--space-section:80px;
--space-compact:56px;
--shadow-sm:0 1px 2px rgba(14,27,46,.04),0 6px 18px rgba(14,27,46,.05);
--shadow-md:0 1px 3px rgba(14,27,46,.05),0 10px 28px rgba(14,27,46,.06);
--shadow-lg:0 2px 6px rgba(14,27,46,.06),0 14px 30px rgba(14,27,46,.09);
--radius:14px;
--maxw:1080px;
--logo-w:184px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--color-text);line-height:1.65;background:var(--white);overflow-x:hidden;}
h1,h2,h3,h4{font-family:"Montserrat","Inter",-apple-system,"Segoe UI",Arial,sans-serif;
color:var(--color-heading);}
h1,h2,h3{text-wrap:balance;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
a{color:var(--blue-ink);}
img,svg{display:block;max-width:100%;}
ul{list-style:none;}
/* Visible focus on every interactive element, on light and dark ground. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
outline:3px solid var(--electric-blue);outline-offset:3px;border-radius:3px;}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--cyan);}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--deep-navy);
color:#fff;padding:12px 20px;text-decoration:none;font-weight:600;font-size:14px;
border-radius:0 0 6px 0;}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
/* ---------- ICONS ---------- */
.icon{width:26px;height:26px;stroke:var(--electric-blue);fill:none;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.icon-lg{width:34px;height:34px;}
/* ---------- NAVIGATION ---------- */
.sitenav{position:sticky;top:0;background:rgba(255,255,255,.94);
backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);z-index:50;}
.sitenav > .wrap{display:flex;justify-content:space-between;align-items:center;
min-height:76px;gap:20px;}
/* The logo is the approved brand asset, not type. Width drives the size; the
intrinsic width/height attributes on the ![]()
hold the aspect ratio so
there is no layout shift while it loads. */
.logo{display:block;flex:0 0 auto;line-height:0;text-decoration:none;}
.logo img{width:var(--logo-w);height:auto;}
.navtoggle{display:none;align-items:center;gap:9px;background:none;
border:1px solid var(--border);border-radius:8px;padding:9px 14px;
font:600 14px/1 "Inter",sans-serif;color:var(--deep-navy);cursor:pointer;}
.navtoggle-bars{position:relative;width:16px;height:11px;flex:0 0 auto;}
.navtoggle-bars::before,.navtoggle-bars::after,.navtoggle-bars i{
content:"";position:absolute;left:0;width:100%;height:2px;background:var(--deep-navy);
border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.navtoggle-bars::before{top:0;}
.navtoggle-bars i{top:4.5px;}
.navtoggle-bars::after{bottom:0;}
.navtoggle[aria-expanded="true"] .navtoggle-bars::before{transform:translateY(4.5px) rotate(45deg);}
.navtoggle[aria-expanded="true"] .navtoggle-bars i{opacity:0;}
.navtoggle[aria-expanded="true"] .navtoggle-bars::after{transform:translateY(-4.5px) rotate(-45deg);}
.navpanel{display:flex;align-items:center;gap:28px;}
.navlist{display:flex;align-items:center;gap:26px;}
.navlist > li{position:relative;}
.navlink{position:relative;color:var(--color-text);text-decoration:none;font-size:14.5px;
font-weight:500;padding:6px 0;display:inline-block;}
.navlink::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
background:var(--electric-blue);transition:width .2s ease;}
.navlink:hover::after,.navlink[aria-current="page"]::after,
.has-sub:hover > .navlink::after,.has-sub:focus-within > .navlink::after{width:100%;}
.navlink:hover{color:var(--deep-navy);}
/* Current page: the indicator is already drawn, slightly heavier, and the
label takes a small weight step. Restrained on purpose - it should read as
orientation, not emphasis. */
.navlink[aria-current="page"]{color:var(--deep-navy);font-weight:600;}
.navlink[aria-current="page"]::after{height:3px;}
/* Section-current: on a /services/* page the child carries aria-current, so
the top-level Services link would otherwise show no state at all. :has()
surfaces it without touching markup, and simply does nothing on engines
that lack support. */
.has-sub:has(.subnav a[aria-current="page"]) > .navlink{color:var(--deep-navy);font-weight:600;}
.has-sub:has(.subnav a[aria-current="page"]) > .navlink::after{width:100%;height:3px;}
.has-sub > .navlink::before{content:"";display:inline-block;width:5px;height:5px;
margin-left:7px;vertical-align:2px;border-right:1.5px solid var(--slate);
border-bottom:1.5px solid var(--slate);transform:rotate(45deg);}
/* Services dropdown - CSS only. :hover serves pointers; :focus-within serves
keyboards (tabbing onto the Services link opens it, tabbing into the list
keeps it open). "Services" stays a real link to /services either way. */
.subnav{position:absolute;top:100%;left:-16px;min-width:290px;background:var(--white);
border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);
padding:10px;margin-top:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;}
.has-sub:hover > .subnav,.has-sub:focus-within > .subnav{
opacity:1;visibility:visible;transform:translateY(0);}
.subnav::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px;}
.subnav a{display:block;padding:10px 14px;border-radius:8px;color:var(--color-text);
text-decoration:none;font-size:14px;font-weight:500;line-height:1.4;}
.subnav a:hover{background:var(--surface-alt);color:var(--deep-navy);}
.subnav a[aria-current="page"]{background:var(--surface-alt);color:var(--deep-navy);font-weight:600;}
.nav-cta{padding:11px 20px;font-size:14px;}
/* ---------- BUTTONS & LINKS ---------- */
.btn{display:inline-block;background:var(--electric-blue);color:var(--white);
text-decoration:none;padding:14px 28px;border-radius:6px;font-weight:600;
font-size:15px;line-height:1.35;border:none;cursor:pointer;font-family:inherit;
text-align:center;transition:transform .15s ease,background-color .15s ease;}
.btn:hover{background:var(--blue-hover);transform:translateY(-1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}
.btn.outline{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:var(--white);}
.btn.outline:hover{background:rgba(255,255,255,.10);border-color:#fff;}
/* Cyan is the accent on dark surfaces, where it clears AA comfortably. */
.anchor-link{display:inline-block;color:var(--cyan);font-size:15px;font-weight:500;
text-decoration:none;border-bottom:1px solid rgba(0,200,230,.45);padding-bottom:2px;}
.anchor-link:hover{border-bottom-color:var(--cyan);}
.arrow-link{color:var(--blue-ink);font-weight:600;font-size:14.5px;
text-decoration:none;display:inline-block;}
.arrow-link:hover{text-decoration:underline;}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;}
/* ---------- HEROES ---------- */
.hero,.pagehead{background:var(--deep-navy);color:var(--white);position:relative;overflow:hidden;}
/* One restrained brand glow, not a gradient background. */
.hero::before,.pagehead::before{content:"";position:absolute;top:-140px;right:-120px;
width:440px;height:440px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(29,94,255,.28),transparent 70%);}
.hero{padding:100px 0 104px;}
.pagehead{padding:76px 0 72px;}
.hero .wrap,.pagehead .wrap{position:relative;}
.hero h1,.pagehead h1{color:var(--white);font-weight:700;letter-spacing:-.02em;
line-height:1.14;margin-bottom:20px;}
.hero h1{font-size:clamp(29px,5vw,45px);max-width:17ch;}
.pagehead h1{font-size:clamp(26px,4.2vw,37px);max-width:23ch;}
.hero .lead,.pagehead .lead{font-size:clamp(16px,2.1vw,19px);color:var(--light-gray);
max-width:var(--measure);margin-bottom:34px;}
.hero .eyebrow,.pagehead .eyebrow{color:var(--cyan);}
/* ---------- SECTIONS ---------- */
/* Supporting sections are the default. Reach for a modifier deliberately. */
section{padding:var(--space-section) 0;}
section.alt{background:var(--surface-alt);}
section.s-major{padding:var(--space-major) 0;}
section.s-compact{padding:var(--space-compact) 0;}
section.tight{padding:var(--space-compact) 0;}
.section-title{font-size:clamp(23px,3.4vw,30px);font-weight:700;margin-bottom:12px;
letter-spacing:-.015em;max-width:34ch;}
/* A major section earns a slightly larger heading and more air beneath it. */
.s-major .section-title{font-size:clamp(25px,3.9vw,34px);margin-bottom:16px;}
.section-sub{color:var(--text-muted);font-size:16px;max-width:var(--measure);margin-bottom:44px;}
.section-sub:last-child{margin-bottom:0;}
.eyebrow{display:inline-block;color:var(--blue-ink);font-size:12.5px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.prose{max-width:var(--measure);}
.prose p{font-size:16px;color:var(--text-muted);margin-bottom:18px;}
.prose p:last-child{margin-bottom:0;}
.prose p strong{color:var(--color-text);}
.lede{font-size:16.5px;color:var(--text-muted);max-width:var(--measure);}
/* Small reusable utilities, replacing the handful of one-off inline styles
that had accumulated in the markup. */
.mt-s{margin-top:22px;}
.mt-m{margin-top:32px;}
.mt-l{margin-top:44px;}
.mb-s{margin-bottom:22px;}
.mb-l{margin-bottom:34px;}
.measure-none{max-width:none;}
.h-sub{font-size:20px;font-weight:700;}
/* Scroll reveal - progressive enhancement only. Content is visible by default;
the inline head script sets html.js before paint, so no-JS never hides it.
Fully disabled for reduced-motion users. */
html.js .reveal{opacity:0;transform:translateY(16px);
transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
html.js .reveal{opacity:1;transform:none;transition:none;}
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
/* ---------- SERVICE CARDS (Home "What We Do" + Services hub) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.svc-card{display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--border);border-radius:var(--radius);padding:32px;
box-shadow:var(--shadow-md);transition:transform .18s ease,box-shadow .18s ease;}
.svc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.svc-card .icon{margin-bottom:18px;}
.svc-card h2,.svc-card h3{font-size:20px;font-weight:700;margin-bottom:10px;}
.svc-card p{font-size:15px;color:var(--text-muted);margin-bottom:20px;flex:1 1 auto;}
.svc-card .arrow-link{margin-top:auto;align-self:flex-start;}
/* AI Solutions leads: first position, heaviest weight. One component, one
modifier - no second card component. The tint is deliberately faint so the
other three services still read as full-quality, not second tier. */
/* Prominence comes from proportion - footprint, padding, icon and type scale -
not from decoration. The tint is a flat surface, not a gradient, and the
other three keep full white cards with the same elevation so they read as
equally available, just not the lead. */
.svc-card.featured{grid-column:1 / -1;flex-direction:row;gap:32px;align-items:flex-start;
padding:40px;border-color:#C9D8F7;background:#F7FAFF;}
.svc-card.featured .icon{width:48px;height:48px;margin-bottom:0;}
.svc-card.featured .featured-body{flex:1 1 auto;display:flex;flex-direction:column;}
.svc-card.featured h2,.svc-card.featured h3{font-size:clamp(23px,2.6vw,28px);
margin-bottom:12px;letter-spacing:-.015em;}
.svc-card.featured p{font-size:16.5px;max-width:var(--measure);margin-bottom:22px;}
.svc-tag{display:inline-block;align-self:flex-start;background:var(--light-gray);
color:var(--blue-ink);border:1px solid #C9D8F7;border-radius:999px;
padding:4px 12px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;margin-bottom:14px;}
/* ---------- GENERIC ITEM GRID ---------- */
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.item-grid.three{grid-template-columns:repeat(3,1fr);}
.item{background:var(--white);border:1px solid var(--border);border-radius:12px;
padding:28px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;}
.item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.item .icon{margin-bottom:14px;}
.item h4{font-size:16px;color:var(--color-heading);margin-bottom:8px;font-weight:700;}
.item p{font-size:14.5px;color:var(--text-muted);}
/* display:block so .num works as a inside the stat , which lets the
heading carry the whole approved sentence as one accessible string. */
.item .num{display:block;font-family:"Montserrat","Inter",sans-serif;font-weight:700;
font-size:34px;color:var(--electric-blue);line-height:1.1;margin-bottom:10px;
letter-spacing:-.02em;}
/* ---------- STAT BLOCK ----------
Isolated on purpose: the two BrightLocal figures live here and the block can
be deleted whole without touching the surrounding page. See the HTML comment
around it. */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:32px;}
.statgrid h3{font-size:16px;font-weight:600;color:var(--color-heading);}
.stat-source{font-size:12.5px;color:var(--text-muted);margin-top:10px;}
/* ---------- TWO-TRACK PROCESS (Home "How We Work") ---------- */
.tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.track{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
padding:30px;box-shadow:var(--shadow-md);}
.track h3{font-size:17px;font-weight:700;margin-bottom:18px;padding-bottom:14px;
border-bottom:1px solid var(--border);}
.track ol{list-style:none;counter-reset:stage;}
.track li{counter-increment:stage;display:flex;align-items:center;gap:14px;
font-size:15px;font-weight:500;color:var(--color-text);padding:11px 0;position:relative;}
.track li::before{content:counter(stage);flex:0 0 auto;width:30px;height:30px;
border-radius:50%;border:1.5px solid var(--electric-blue);color:var(--blue-ink);
background:var(--white);font-family:"Montserrat","Inter",sans-serif;font-size:14px;
font-weight:700;display:flex;align-items:center;justify-content:center;}
.track li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:41px;
bottom:-11px;width:1px;background:var(--border);}
.track-note{margin-top:28px;font-size:15.5px;color:var(--text-muted);max-width:var(--measure);}
/* ---------- NUMBERED STEPS ----------
A sequence, not a stack of equal cards. The connector line between the
numbered markers is what communicates order at a glance; circle geometry
lives in custom properties so the connector follows it at every size. */
.steps{display:flex;flex-direction:column;gap:14px;counter-reset:stepnum;
max-width:var(--measure-step);position:relative;}
.step{--circle:42px;--pad-x:28px;--pad-y:24px;
counter-increment:stepnum;display:flex;gap:20px;align-items:flex-start;
position:relative;background:var(--white);border:1px solid var(--border);
border-radius:12px;padding:var(--pad-y) var(--pad-x);box-shadow:var(--shadow-sm);}
.step::before{content:counter(stepnum);flex:0 0 auto;
width:var(--circle);height:var(--circle);
border-radius:50%;background:var(--electric-blue);color:#fff;display:flex;
align-items:center;justify-content:center;font-family:"Montserrat","Inter",sans-serif;
font-weight:700;font-size:17px;}
.step:not(:last-child)::after{content:"";position:absolute;
left:calc(var(--pad-x) + (var(--circle) / 2) - 1px);
top:calc(var(--pad-y) + var(--circle));bottom:-15px;width:2px;
background:var(--border);}
.step h3,.step h4{font-size:16px;color:var(--color-heading);margin-bottom:5px;font-weight:700;}
.step p{font-size:14.5px;color:var(--text-muted);}
/* ---------- CHECKLIST / OUTCOME LIST ---------- */
.checklist{display:flex;flex-direction:column;max-width:var(--measure-list);}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;
border-bottom:1px solid var(--border);font-size:15.5px;color:var(--text-muted);}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:4px;
border-radius:50%;background-color:var(--light-gray);border:1px solid var(--border);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231749CC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size:12px;background-position:center;background-repeat:no-repeat;}
/* Problem/symptom lists are not achievements. A tick beside "leads sit too
long before anyone follows up" reads wrong and makes two very different
lists look identical. .plain gives them a neutral marker instead. */
.checklist.plain li::before{background-image:none;background-color:transparent;
border:none;width:8px;height:8px;margin-top:11px;margin-left:6px;
border-radius:50%;background-color:var(--slate);}
.checklist.plain li{gap:20px;}
/* ---------- PRINCIPLE LIST ("How We Decide") ---------- */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;max-width:none;}
.principles li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;
border-bottom:1px solid var(--border);font-size:15.5px;color:var(--color-text);}
.principles li::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:4px;
border-radius:50%;background-color:var(--light-gray);border:1px solid var(--border);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231749CC' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
background-size:11px;background-position:center;background-repeat:no-repeat;}
.closing-note{margin-top:34px;font-size:15.5px;color:var(--text-muted);max-width:var(--measure);
padding-left:20px;border-left:2px solid var(--electric-blue);}
/* ---------- HONESTY BAND ----------
The independence moment ("We might tell you not to do this"). It earns its
weight from air and type scale, not from a louder treatment - the point is
that it reads calm and self-assured. Pair with .s-major on its section. */
.honesty-band{background:var(--deep-navy);color:var(--white);border-radius:16px;
padding:clamp(32px,5vw,60px);}
.honesty-band h2{color:var(--white);font-size:clamp(23px,3.6vw,32px);
margin-bottom:20px;max-width:20ch;letter-spacing:-.015em;}
.honesty-band p{color:var(--light-gray);font-size:16.5px;max-width:var(--measure);}
.honesty-band strong{color:var(--cyan);}
.honesty-band .eyebrow{color:var(--cyan);}
/* ---------- THREE-UP ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.why-item .n{font-family:"Montserrat","Inter",sans-serif;font-size:30px;
color:var(--electric-blue);font-weight:700;margin-bottom:8px;letter-spacing:-.02em;}
.why-item p{color:var(--text-muted);font-size:14.5px;}
/* ---------- VERTICALS ---------- */
.vertical-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.vertical-card{background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md);}
.vertical-card .icon{margin-bottom:16px;}
.vertical-card h3{font-size:19px;margin-bottom:10px;font-weight:700;}
.vertical-card p{font-size:14.5px;color:var(--text-muted);}
.vertical-block{padding:52px 0;border-bottom:1px solid var(--border);}
.vertical-block:first-child{padding-top:0;}
.vertical-block:last-child{border-bottom:none;padding-bottom:0;}
.vertical-block .head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.vertical-block .head .icon{width:30px;height:30px;}
.vertical-block h3{font-size:23px;font-weight:700;}
.vertical-block > p{max-width:var(--measure);color:var(--text-muted);font-size:15.5px;}
/* auto-fit so the point set balances at any count - these blocks carry three
points each since the economics slot was removed, and would otherwise leave
a lone half-width cell on a second row. */
.vertical-block .points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:26px 32px;margin-top:26px;}
.vertical-block .points h4{font-family:"Inter",sans-serif;font-size:12.5px;
color:var(--blue-ink);text-transform:uppercase;letter-spacing:.06em;
margin-bottom:7px;font-weight:700;}
.vertical-block .points p{font-size:14.5px;color:var(--text-muted);}
/* ---------- DISCOVERY CTA BLOCK (reused microcopy) ---------- */
.discovery-block{background:var(--surface-alt);border:1px solid var(--border);
border-left:3px solid var(--electric-blue);border-radius:12px;padding:26px 30px;max-width:var(--measure-list);}
.discovery-block h3{font-size:16px;font-weight:700;margin-bottom:8px;}
.discovery-block p{font-size:15px;color:var(--text-muted);}
.cta-microcopy{font-size:13.5px;color:var(--text-muted);margin-top:14px;}
.on-dark .cta-microcopy{color:var(--footer-muted);}
/* ---------- FOUNDER SECTION ----------
There is no founder photograph, and this section is built to look
deliberate without one rather than to look like it is waiting for an
image. The attribution is typographic: a short accent rule, the name at
heading weight, the role beneath it, then the narrative at reading
measure. The old photo frame, monogram placeholder and two-column grid
were removed with the image, not left behind as dead rules. */
.founder-lede{max-width:var(--measure);}
.founder-id{border-left:3px solid var(--cyan);padding-left:18px;margin-bottom:26px;}
.founder-name{font-size:17px;font-weight:700;color:var(--color-heading);
font-family:"Montserrat","Inter",sans-serif;}
.founder-role{font-size:13.5px;color:var(--text-muted);margin-top:2px;}
/* Experience, expressed as capability areas rather than a job history.
Fixed two-up rather than auto-fit: with four items and a wrap this wide,
auto-fit resolved to three columns and stranded the fourth alone on a
second row. Two columns give a clean 2x2, matching .tracks and
.principles, and collapse to one column on phones. */
.capabilities{display:grid;grid-template-columns:repeat(2,1fr);
gap:30px 40px;margin-top:34px;}
.capabilities h3{font-family:"Montserrat","Inter",sans-serif;font-size:16px;font-weight:700;
color:var(--color-heading);padding-bottom:10px;margin-bottom:10px;
border-bottom:1px solid var(--border);}
.capabilities p{font-size:14.5px;color:var(--text-muted);max-width:var(--measure-narrow);}
/* Small qualifying note set below a block, quieter than body copy. The About
page's credentials line was removed in the content revision; the Local
Visibility audit "what it isn't" note still uses this, so the rule stays. */
.creds-note{margin-top:32px;padding-top:18px;border-top:1px solid var(--border);
font-size:13.5px;color:var(--text-muted);max-width:var(--measure);}
.creds-note strong{color:var(--color-text);font-weight:600;}
/* ---------- CTA BAND ---------- */
.ctaband{background:var(--deep-navy);color:var(--white);padding:80px 0;}
.ctaband h2{color:var(--white);font-size:clamp(22px,3.2vw,29px);font-weight:700;
margin-bottom:14px;max-width:26ch;letter-spacing:-.015em;}
.ctaband p{color:var(--light-gray);font-size:16px;max-width:var(--measure);margin-bottom:32px;}
/* ---------- FORMS ---------- */
.form-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:start;}
.leadform{background:var(--white);border:1px solid var(--border);
border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-md);}
.leadform h2,.leadform h3{font-size:19px;font-weight:700;margin-bottom:6px;}
.leadform .form-intro{font-size:14.5px;color:var(--text-muted);margin-bottom:26px;}
.field{margin-bottom:22px;}
/* Two short, compatible fields share a row on wide viewports and stack
cleanly below. Purely visual grouping - no field, requirement or
validation rule changes. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--color-heading);
margin-bottom:6px;letter-spacing:.01em;}
.field .opt{font-weight:400;color:var(--text-muted);font-size:13px;}
.field .hint{font-size:13px;color:var(--text-muted);margin-top:6px;}
/* Field borders use approved Slate, not the lighter --border hairline. A form
control's boundary is a UI component boundary under WCAG 1.4.11 and needs
3:1; Slate on white is 4.26:1. The faint --border tone used on cards is
1.24:1 and is fine there (decorative) but would fail here. */
.field input,.field select,.field textarea{width:100%;
font:400 15px/1.55 "Inter",sans-serif;color:var(--color-text);background:var(--white);
border:1px solid var(--slate);border-radius:8px;padding:12px 14px;
transition:border-color .15s ease,box-shadow .15s ease;}
.field textarea{min-height:132px;resize:vertical;}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6A80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;background-size:17px;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--navy);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--electric-blue);
box-shadow:0 0 0 3px rgba(29,94,255,.15);}
/* Error state is carried by border, a tinted ring and the message together -
never by colour alone. --error measures 6.54:1 on white. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:var(--error);
box-shadow:0 0 0 3px rgba(179,38,30,.12);}
.field-error{display:block;font-size:13px;font-weight:600;color:var(--error);margin-top:7px;}
.field-error:empty{display:none;}
/* Honeypot: off-screen, not announced, not tabbable. */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px;}
.form-privacy{font-size:13px;color:var(--text-muted);margin-top:18px;max-width:var(--measure-narrow);}
/* Status messages read as a distinct block, not another paragraph: a solid
left rule plus tinted surface, so state is obvious at a glance and not
conveyed by colour alone. */
.form-status{margin-top:22px;padding:16px 18px;border-radius:10px;font-size:14.5px;
border:1px solid var(--border);border-left:4px solid var(--slate);
background:var(--surface-alt);color:var(--color-text);}
.form-status[data-state="success"]{border-color:#b7d4be;border-left-color:#2E7D46;
background:#F1F8F2;color:#184023;}
.form-status[data-state="error"]{border-color:#e3b8b5;border-left-color:var(--error);
background:#FDF3F2;color:#78201a;}
.form-status:empty{display:none;}
.is-busy{opacity:.6;pointer-events:none;}
/* Contact side panel */
.contact-box{background:var(--deep-navy);color:var(--white);border-radius:var(--radius);padding:32px;}
.contact-box h2{color:var(--white);font-size:18px;font-weight:700;margin-bottom:20px;}
.contact-box .row{display:flex;flex-direction:column;gap:2px;margin-bottom:20px;font-size:15.5px;}
.contact-box .row:last-child{margin-bottom:0;}
.contact-box .label{color:var(--footer-muted);font-size:11.5px;text-transform:uppercase;
letter-spacing:.07em;font-weight:600;}
.contact-box a{color:var(--cyan);font-weight:600;text-decoration:none;}
.contact-box a:hover{text-decoration:underline;}
.contact-box .plain{color:var(--light-gray);}
.alt-paths{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);}
.alt-paths h2{font-size:16px;margin-bottom:12px;}
.alt-paths li{font-size:14.5px;color:var(--light-gray);padding:8px 0;line-height:1.55;}
.alt-paths a{color:var(--cyan);font-weight:600;}
/* ---------- FOOTER ---------- */
.sitefooter{background:var(--deep-navy);color:var(--white);padding:64px 0 32px;}
.footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;}
.sitefooter .logo img{width:170px;}
.foot-h{font-family:"Inter",sans-serif;font-size:11.5px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--footer-muted);margin-bottom:14px;}
.sitefooter li{padding:5px 0;}
.sitefooter a{color:var(--light-gray);text-decoration:none;font-size:14.5px;}
.sitefooter a:hover{color:var(--cyan);text-decoration:underline;}
.foot-sub{margin:4px 0 0 4px;padding-left:14px;border-left:1px solid var(--navy-line);}
.foot-sub li{padding:4px 0;}
.foot-sub a{font-size:13.5px;color:var(--footer-muted);}
.foot-sub a:hover{color:var(--cyan);}
.foot-contact li{font-size:14.5px;color:var(--light-gray);}
.footbar{margin-top:52px;padding-top:22px;border-top:1px solid var(--navy-line);
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;}
.footbar p{font-size:12.5px;color:var(--footer-muted);}
/* Brand essence - deliberately quiet, footer only, never a headline. */
.brandline{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--footer-muted);font-weight:600;}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:980px){
.footgrid{grid-template-columns:1fr 1fr;gap:36px;}
.form-layout{grid-template-columns:1fr;gap:36px;}
.why-grid,.vertical-grid,.item-grid.three{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
/* Below this width four nav items plus a CTA no longer fit - switch to a
disclosure panel. Without JS the panel simply stays open and wraps. */
.navtoggle{display:inline-flex;}
html.js .navpanel{display:none;}
html.js .navpanel[data-open="true"]{display:flex;}
.sitenav > .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;min-height:0;}
.navpanel{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
padding:4px 0 8px;border-top:1px solid var(--border);margin-top:12px;}
.navlist{flex-direction:column;align-items:stretch;gap:0;}
.navlist > li{border-bottom:1px solid var(--border);}
.navlist > li:last-child{border-bottom:none;}
.navlink{padding:16px 2px;font-size:16px;width:100%;font-weight:600;}
.navlink::after{display:none;}
/* On mobile the underline is gone, so current page is carried by colour
plus a left rule - legible without shouting. */
.navlink[aria-current="page"]{color:var(--blue-ink);
border-left:3px solid var(--electric-blue);padding-left:12px;margin-left:-15px;}
.has-sub > .navlink::before{display:none;}
/* Sub-links stay visible inside the panel - no nested tap target to fight -
but they step down in weight and size so the panel reads as two levels
rather than eight equal rows. */
.subnav{position:static;opacity:1;visibility:visible;transform:none;border:none;
box-shadow:none;padding:0 0 10px 10px;margin:0;min-width:0;
border-left:2px solid var(--border);transition:none;}
.subnav::before{display:none;}
.subnav a{padding:12px 10px;font-size:14.5px;font-weight:500;color:var(--text-muted);}
.subnav a[aria-current="page"]{background:none;color:var(--blue-ink);font-weight:600;}
.nav-cta{margin-top:20px;margin-bottom:4px;width:100%;padding:15px 20px;font-size:15px;}
.navtoggle{padding:11px 15px;}
}
@media (max-width:980px){
/* Scale the rhythm down but keep the three tiers distinguishable - the
point of the system is modulation, so mobile must not flatten back to
one uniform value. */
:root{--space-major:88px;--space-section:64px;--space-compact:48px;}
}
@media (max-width:760px){
:root{--logo-w:158px;--space-major:72px;--space-section:56px;--space-compact:40px;}
.field-row{grid-template-columns:1fr;gap:0;}
.hero{padding:64px 0 68px;}
.pagehead{padding:54px 0 50px;}
.ctaband{padding:58px 0;}
.section-sub{margin-bottom:32px;}
.svc-grid,.item-grid,.item-grid.three,.statgrid,.why-grid,.vertical-grid,
.tracks,.principles,.footgrid{grid-template-columns:1fr;}
.svc-card.featured{flex-direction:column;gap:0;grid-column:auto;}
.svc-card.featured .icon{margin-bottom:18px;}
.vertical-block .points{grid-template-columns:1fr;gap:22px;}
.capabilities{grid-template-columns:1fr;gap:26px;}
.honesty-band{padding:32px 26px;}
.leadform{padding:26px 22px;}
.contact-box{padding:26px 22px;}
.cta-row .btn,.cta-row .anchor-link{width:100%;}
.cta-row .anchor-link{text-align:center;}
.footbar{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media (max-width:400px){
:root{--logo-w:140px;}
.wrap{padding:0 18px;}
/* Circle geometry moves as custom properties so the step connector line
stays aligned to the smaller markers. */
.step{--circle:34px;--pad-x:20px;--pad-y:20px;gap:14px;}
.step::before{font-size:15px;}
.svc-card{padding:26px 22px;}
.svc-card.featured{padding:26px 22px;}
}
/* ---------- PRINT ---------- */
@media print{
.sitenav,.ctaband,.sitefooter,.leadform{display:none;}
body{color:#000;}
.hero,.pagehead{background:none;color:#000;}
.hero h1,.pagehead h1,.hero .lead,.pagehead .lead{color:#000;}
}