/* ============================================================ Verified RCM - static site stylesheet Design tokens first, then base, layout, components. Dark mode is driven by [data-theme="dark"] on . ============================================================ */ /* One typeface: Instrument Sans, the same face and the same files SAMS uses. This replaces a Lexend + Source Sans 3 pairing. Two faces asked the reader to register a personality before they registered the argument, and the display face is a large part of why the marketing site and the product looked like two companies. Self-hosted, three static weights, latin only — 50KB total against 68KB for the two variable fonts it replaces. */ /* Display face: Lexend — a rounded geometric sans with soft, open terminals. Also already in fonts/ and SIL OFL, so no licensing decision needed. Replaced Fraunces: the serif gave the page authority but read formal and sharp, and a rounded face suits a service whose whole pitch is taking a painful admin burden off a practice. Kept for headings only — Instrument Sans still carries body copy, where Lexend's wide, generous letterforms would cost reading speed at 15px. */ @font-face{ font-family:"Lexend"; src:url("../fonts/Lexend-Variable.woff2") format("woff2-variations"), url("../fonts/Lexend-Variable.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:"Instrument Sans"; src:url("../fonts/instrument-sans-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Instrument Sans"; src:url("../fonts/instrument-sans-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Instrument Sans"; src:url("../fonts/instrument-sans-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } /* ------------------------------------------------------------------ Palette: considered blue + warm amber (the Verified RCM brand colours, updated from an earlier lime/amber system — the client wanted lime removed entirely, not just muted). Every text-bearing value below is contrast-verified against its own surface — ratios noted inline. Base --color-accent (#0b806a) is dark enough to carry WHITE text directly (4.87:1) — that's why --on-accent is white, not dark ink. ------------------------------------------------------------------ */ :root{ /* Teal brand. The category defaults to blue and so did we; this is the single cheapest way to stop looking like every other RCM company, and teal still reads healthcare and money at the same time. Surfaces are near-white only — #ffffff and #f9f9f9, nothing else — which is what lets the one saturated moment in the hero do all the work. */ --color-bg:#f9f9f9; --color-surface:#ffffff; --color-text:#141d1b; /* text 16.3:1 on bg */ --color-accent:#0b806a; --color-accent-2:#f5a524; --color-line:color-mix(in srgb, #141d1b 11%, transparent); /* Ramp keeps the existing token NAMES and their existing light/dark relationships, so every rule downstream follows without edits: -600 is LIGHTER than base here (as it was on the blue), -700/-800 are darker. */ --color-accent-100:#ecfdf7; --color-accent-200:#d0f7ea; --color-accent-300:#a3ecd7; --color-accent-400:#25bb99; --color-accent-600:#0d9e80; --color-accent-700:#0d6659; --color-accent-800:#0f5049; /* Measured: base 4.87:1 on white / 4.63:1 on #f9f9f9 — the lightest teal that carries white text AND works as text itself, which is why it is the workhorse. -700 6.86:1, -800 9.28:1. -600 is 3.38:1 and -400 is 2.43:1: fills and tints only, never text. */ --color-accent-2-100:#fff8e8; --color-accent-2-300:#ffdc93; --color-accent-2-800:#7c4c06; /* Coral — the contrasting accent, teal's complement. Kept SEPARATE from --color-accent-2 (amber), which is the semantic warning colour on claim pills. Promoting amber to brand accent would blur "this is our brand" and "this claim needs attention". The fill takes DARK ink, not white: white on -400 is 3.14:1 and fails, ink is 5.48:1. That inversion is deliberate — it is also what stops coral competing with the teal, which is a white-text colour. */ --color-accent-3:#f4633a; /* fill — ink on it 5.48:1 */ --color-accent-3-100:#ffe9e1; /* chip — ink on it 14.73:1 */ --color-accent-3-300:#fda58a; /* dark-mode text 10.07:1 */ --color-accent-3-700:#b03a17; /* text 6.06:1 white / 5.76 f9 */ --on-accent-3:#141d1b; /* Accent-coloured coral TEXT, flipping with the theme like --accent-ink. */ --coral-ink:#b03a17; /* -2-800 = 6.80:1 on bg — the safe token for amber-coloured text. */ /* Accent-coloured TEXT sitting on the page background. --color-accent-800 is a dark blue: correct on light paper, invisible on a dark one, and it was being used directly for taglines, "Required" markers, link CTAs and small labels with no dark override — every one of them failed AA in dark mode at ~1.9:1. Use this token for accent text, and -800 only where the background is known to stay light (chips on --color-accent-100). */ --accent-ink:#0f5049; /* 9.28:1 white / 8.81:1 on #f9f9f9 */ --accent-ink-hover:#0b806a; /* 4.87:1 white / 4.63:1 on #f9f9f9 */ --color-gold:#8a5006; /* star ratings — 6.5:1 on white, 6.09:1 on --color-bg. Previous #a9690a measured 4.46:1 via pa11y (axe/HTML_CS), just under AA — .stars is 15px, not large text, so 4.5:1 is the real requirement, not the 3:1 "large glyphs" this was mistakenly filed under. */ /* Ink used ON solid accent fills (chips, icon circles, buttons, checks). The blue fill is mid-toned, not light like the old lime, so it takes white ink instead of dark. */ --on-accent:#ffffff; /* 4.87:1 on base; every --grad-brand stop is darker, so safer */ --on-accent-2:#211603; /* 8.71:1 on --color-accent-2 */ /* SAMS's radii: rounded-md 6px on controls, rounded-lg 8px on cards, with 12px reserved for the few large panels. These were 14/22/32 — a 32px corner on a content card is the single loudest "consumer app" signal on the page, and it is most of why the two products did not look related. */ --radius-sm:10px; --radius-md:16px; --radius-lg:20px; /* Tinted shadows — brand-hued rather than neutral grey, for depth without mud */ /* Shadows carry a real offset + soft blur (never a zero-offset colour halo). */ /* Tinted to the blue brand. These were rgba(38,45,12) — an olive-green cast left over from the lime palette, still describing itself as "brand-hued" for a brand that no longer exists. */ --shadow-sm:0 1px 2px rgba(16,32,28,.05), 0 2px 8px rgba(16,32,28,.04); --shadow-md:0 6px 22px rgba(16,32,28,.07); --shadow-lg:0 20px 56px rgba(16,32,28,.10); --shadow-glow:0 16px 40px rgba(11,128,106,.26); --ease:cubic-bezier(.16,1,.3,1); --ease-out2:cubic-bezier(.25,.46,.45,.94); /* ≈ GSAP power2.out */ --color-ink-fixed:#141d1b; --muted:#5b6660; /* 5.88:1 on bg, 6.28:1 on white. Was #5b6152, a distinctly olive grey (green 15 points above blue) — the last of the lime showing through in the light theme's secondary text. */ /* Gradients */ /* Gradient stops are contrast-checked at EVERY stop, not just the average: button labels sit on the lightest AND darkest stop, so both set the floor. These carry white ink (--on-accent); the LIGHTEST stop is now the binding one (5.62:1) since white text gets safer as the fill darkens, the reverse of the old dark-ink-on-light-lime logic. */ --grad-brand:linear-gradient(135deg,#0b806a 0%,#0d6659 55%,#0f5049 100%); --grad-warm:linear-gradient(135deg,#ffc44d 0%,#f5a524 55%,#d98a12 100%); /* Glass */ --glass-bg:rgba(255,255,255,.62); --glass-bg-strong:rgba(255,255,255,.80); --glass-border:rgba(255,255,255,.65); --glass-blur:16px; } /* Dark theme neutrals sit on ONE cool ramp, hue-matched to the blue brand. They used to be olive (#0f110d / #181b15 / #b6bcae) — desaturated residue of the removed lime palette — while the ink panels below were navy. That put a navy hero card on an olive-black page at 1.00:1, identical lightness with opposing hue, which is the single most reliable way to make two surfaces look like a mistake rather than like depth. Ratios measured, not estimated; every value below clears 4.5:1 on the surface it sits on. */ [data-theme="dark"]{ /* Surface is raised well clear of the page (1.35:1, was 1.11:1). On a dark ground, elevation has to come from LIGHTNESS — see the shadow note below for why the light theme's approach does not survive the flip. */ --color-bg:#080f0e; --color-surface:#17241f; --color-text:#eaf3ef; --color-line:color-mix(in srgb, #eaf3ef 15%, transparent); --muted:#a2b3ac; /* 8.83:1 on bg, 7.32:1 on surface */ --accent-ink:#a3ecd7; /* 14.32:1 on bg — the dark-mode flip */ --accent-ink-hover:#d0f7ea; /* 16.75:1 on bg */ --coral-ink:#fda58a; /* 10.07:1 on bg, 8.35:1 on surface */ color-scheme:dark; /* native form popups follow the theme */ --color-gold:#ffc44d; /* 12.41:1 on bg */ /* Depth on a dark ground cannot be a drop shadow. The light theme lifts a white card off cream with rgba(...,.08) — that reads because the shadow is darker than the paper. Flipped, the same idea becomes black at 50% on a near-black page: mathematically present, visually nothing. Dark mode had inherited exactly that and so had no depth system at all. Elevation here is a lit top edge plus the raised surface above, with the black drop kept only to seat the card against lighter neighbours. */ --shadow-sm:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.55); --shadow-md:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.5); --shadow-lg:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.55); --shadow-glow:0 16px 40px rgba(11,128,106,.24); --glass-bg:rgba(23,36,31,.62); --glass-bg-strong:rgba(23,36,31,.84); --glass-border:rgba(255,255,255,.12); /* The dark-mode override of the --ink-* ramp is NOT here: that ramp is declared in a second :root block further down, and :root and [data-theme="dark"] have equal specificity, so source order decides. The override lives immediately after it instead. */ /* Blue fills stay the same darkness in dark mode (unlike the old lime, which lightened), so the ink on them stays white in both modes. */ --on-accent:#ffffff; --on-accent-2:#211603; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--color-bg);color:var(--color-text); font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--color-accent-800);text-decoration:none;transition:color .3s ease} /* Hover brightens from -800 (8.94:1) to base (5.26:1). It used to go to -600, which measures 4.38:1 on the paper — under AA for normal text. The token comment above claimed "base/-600 = 5.26:1", but that ratio belongs to base alone; -600 is a lighter step and was never measured separately. */ a:hover{color:var(--color-accent)} [data-theme="dark"] a{color:var(--color-accent-400)} /* teal-400, 7.97:1 */ [data-theme="dark"] a:hover{color:var(--color-accent-300)} :focus-visible{outline:2px solid var(--color-accent-700);outline-offset:2px} ::selection{background:var(--color-accent-200);color:var(--color-ink-fixed)} h1,h2,h3{ font-family:"Lexend","Instrument Sans",system-ui,sans-serif; font-synthesis-weight:none; letter-spacing:-.035em;font-weight:600;line-height:1.1;margin:0 0 16px; } h1{font-size:clamp(34px,4.8vw,64px);letter-spacing:-.04em;font-weight:600} h2{font-size:clamp(27px,3.3vw,46px)} h3{font-size:21px;letter-spacing:-.02em;line-height:1.25} /* Three h2 weights, not one. Every section heading on the homepage was the same 46px, which makes a long page read as a flat list of equal claims — the reader gets no signal about which sections carry the argument and which are supporting shelves. --lead is for the pillars (the problem, the offer, the reason to switch); the default carries the body of the page; --minor is for the utility sections at the foot, which currently shout as loudly as the pitch. */ h2.h2-lead{font-size:clamp(31px,4.1vw,58px);letter-spacing:-.042em;line-height:1.03} h2.h2-minor{font-size:clamp(23px,2.3vw,32px);letter-spacing:-.03em} p{margin:0 0 16px;text-wrap:pretty} .lede{font-size:18px;line-height:1.7;color:var(--muted);max-width:62ch} .tagline{font-size:19px;line-height:1.5;font-weight:600;color:var(--accent-ink);margin:0 0 20px} .muted{color:var(--muted)} .accent-text{color:var(--color-accent-800)} [data-theme="dark"] .accent-text{color:var(--color-accent-400)} .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:14px} .eyebrow-sm{font-size:11.5px;font-weight:600;color:var(--accent-ink);margin-bottom:6px} .section-sub{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 16px} /* ---------- layout ---------- */ .wrap{max-width:1280px;margin:0 auto;padding:0 24px} .section{padding-bottom:96px} /* Section rhythm: the intro block (badge / heading / lede) is a tight group, then a generous gap before the content it introduces. Previously the lede sat 16px from the content — the same gap as between two paragraphs — so the intro read as part of the content instead of as a header for it. */ .section>h2{margin-bottom:14px} /* ---------- vertical rhythm ---------- Every section used to sit 96px from the next — the same interval eleven times running. Uniform spacing carries no information: it cannot tell you that three sections belong to one argument and the fourth starts a new one. These modifiers group the page instead of listing it. */ .section--tight{padding-bottom:52px} /* continues the thought above it */ .section--break{padding-bottom:150px} /* closes an argument, opens another */ @media (max-width:700px){ .section--break{padding-bottom:96px} .section--tight{padding-bottom:40px} } /* ---------- lead + image split ---------- A section heading and two lines of lede across the full 1280px leaves most of the row empty. Pairing them with a photograph uses the space, and gives the page a second point where something other than a text box carries the width. */ .lead-split{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px;align-items:center;margin-bottom:40px; } .lead-split h2{margin-bottom:16px} .lead-split .lede{margin:0} /* Photograph on a coral block, offset — the reference's device for imagery. The block is what makes a stock photo read as art-directed rather than dropped in: the colour is the composition, the photo just sits in it. */ .lead-split-figure{ position:relative;margin:0;padding:18px 0 0 18px; } .lead-split-figure::before{ content:"";position:absolute;inset:0 18px 18px 0; background:var(--color-accent-3);border-radius:var(--radius-md); } .lead-split-img{ position:relative;display:block; width:100%;height:100%;max-height:340px;object-fit:cover;object-position:50% 40%; border-radius:var(--radius-md); } @media (max-width:900px){ .lead-split-figure{padding:14px 0 0 14px} .lead-split-figure::before{inset:0 14px 14px 0} .lead-split-img{max-height:240px} } @media (max-width:900px){ .lead-split{grid-template-columns:1fr;gap:28px;margin-bottom:30px} .lead-split-img{max-height:240px} } .section>h2+.lede,.section>.lede{margin-bottom:44px} .section>.lede:last-child{margin-bottom:0} /* A heading that follows content needs more air above it than below. */ .section>*+h2{margin-top:12px} .narrow{max-width:860px} /* The fixed nav occupies the first 86px, so this padding is not the gap the reader sees — it left only 44px of clearance once the badge that used to sit in that space was removed, and the h1 crowded the nav. */ .page-head{padding-top:176px} /* No top padding and no side padding: the hero's own full-bleed field owns its spacing now, and any padding here shows as a white strip between the nav and the colour, which breaks the one effect the hero exists for. */ .hero{padding:0 0 80px;max-width:1280px;margin:0 auto} .stack{display:flex;flex-direction:column;gap:18px} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center} /* When a split pairs a photo with a text column, centring leaves the image floating against a taller neighbour with uneven margins top and bottom. Stretching makes the photo match its partner's height exactly, so both columns share one top and bottom edge. */ .split:has(> .photo){align-items:stretch} .split > .photo{height:100%} .split > .photo img{height:100%;width:100%;object-fit:cover} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .article .grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:28px} /* A lede that introduces a whole section can run wider than a lede sitting beside a photo — it should use close to the full column so the row doesn't wrap into a narrow strip with a dead gap of empty page beside it. 82ch (~810px) left roughly 400px unused in the 1232px wrap; this uses effectively the whole row instead. */ .lede-wide{max-width:min(100%,1180px)} /* Engagement terms as an open strip with rules between items, not a boxed panel. Proximity does the grouping; a container would only add weight. */ .terms-strip{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;margin:30px 0 44px;padding:22px 0; border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line); } .terms-item{padding:0 26px;position:relative;min-width:0} .terms-item:first-child{padding-left:0} .terms-item+.terms-item::before{ content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--color-line); } .terms-value{ display:block;font-size:17px;font-weight:600; letter-spacing:-.02em;color:var(--color-accent-800);margin-bottom:4px; } [data-theme="dark"] .terms-value{color:var(--color-accent-300)} .terms-label{display:block;font-size:13.5px;line-height:1.45;color:var(--muted)} @media (max-width:900px){ .terms-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0} .terms-item:nth-child(3){padding-left:0} .terms-item:nth-child(3)::before{display:none} } @media (max-width:520px){ .terms-strip{grid-template-columns:minmax(0,1fr);gap:18px} .terms-item{padding:0} .terms-item::before{display:none} } /* ---------- skip link (rule 45) ---------- Offscreen until focused, then pinned top-left above the fixed nav so keyboard users can jump the whole nav block. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; display:inline-flex;align-items:center;min-height:44px;padding:0 20px; background:var(--color-accent-800);color:#fff;font-weight:600;font-size:14px; border-radius:0 0 var(--radius-sm) 0; } .skip-link:focus{left:0;color:#fff} /* ---------- nav ---------- */ .nav-wrap{position:fixed;top:0;left:0;right:0;z-index:70} /* A plain, solid, full-width bar with a hairline under it — the same header treatment SAMS uses. This was a floating translucent pill with a 16px backdrop blur, a 999px radius and a drop shadow, hovering over the page. Glass is a specific effect for showing that something sits above content; as permanent chrome it is just cost, and on a marketing site it was the first thing that said "template". */ .nav-wrap{ background:var(--color-surface); border-bottom:1px solid var(--color-line); transition:box-shadow .2s ease; } .nav-bar{ display:flex;align-items:center;gap:22px; max-width:1280px;margin:0 auto;padding:10px 24px; transition:padding .2s ease; } .nav-bar.scrolled{padding:6px 24px} .nav-bar.scrolled .nav-logo img{width:36px;height:36px} .nav-logo{flex:0 0 auto;display:block} .nav-logo img{width:44px;height:44px;border-radius:999px;object-fit:cover;transition:width .3s var(--ease),height .3s var(--ease)} .nav-links{display:flex;align-items:center;gap:2px} /* min-height 44px on every nav/chip/control below satisfies the 44x44 touch-target rule (iOS HIG / WCAG AAA 2.5.5). */ .nav-link{ display:inline-flex;align-items:center;min-height:44px; padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:600; color:var(--color-text);white-space:nowrap;transition:background .3s ease,color .3s ease; } .nav-link:hover{background:color-mix(in srgb, var(--color-accent) 14%, transparent);color:var(--color-text)} .nav-link.active{background:color-mix(in srgb, var(--color-accent) 20%, transparent);color:var(--color-accent-800)} [data-theme="dark"] .nav-link.active{color:var(--color-accent-300)} /* SAMS is a separate application (staff attendance/payroll), not a page on this site — a light border marks it as a distinct product without competing visually with the main nav items. */ .nav-link-sams{border:1.5px solid color-mix(in srgb, var(--color-accent) 45%, transparent)} .nav-link-sams:hover{border-color:var(--color-accent)} /* ---------- nav mega-menu ---------- Hover- and focus-triggered (CSS only, no JS) so it works without scripting; the mobile equivalent is the accordion inside .mobile-menu. Column links point at pages that already exist today, so the menu is never broken while more specialty coding articles get written. */ .nav-item-mega{position:relative} .nav-mega-trigger{cursor:pointer} .nav-mega-trigger::after{content:"";display:inline-block;margin-left:6px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease} .nav-item-mega:hover .nav-mega-trigger::after,.nav-item-mega:focus-within .nav-mega-trigger::after{transform:translateY(1px) rotate(225deg)} .nav-mega{ /* Anchored to the trigger's own left edge, not centered — "Services" sits near the left of the nav, so a centered 880px panel on a wide viewport ran off the left edge of the screen entirely. */ position:absolute;top:calc(100% + 12px);left:0; width:min(760px,80vw);padding:28px;display:none;grid-template-columns:repeat(4,1fr);gap:24px; background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);z-index:75; } /* The 12px gap above sits between the trigger and the panel with nothing painted in it, so a cursor moving diagonally toward a menu item drops out of :hover mid-transit and the panel closes before it's reached. This pseudo-element bridges that dead zone without affecting layout. */ .nav-mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .nav-item-mega:hover .nav-mega,.nav-item-mega:focus-within .nav-mega{display:grid} .nav-mega-col-title{ font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--color-accent-800);margin-bottom:12px; } [data-theme="dark"] .nav-mega-col-title{color:var(--color-accent-400)} .nav-mega-col a{ display:block;padding:8px 0;font-size:14px;font-weight:600;color:var(--color-text); border-radius:8px;transition:color .2s ease; } .nav-mega-col a:hover{color:var(--color-accent-800)} [data-theme="dark"] .nav-mega-col a:hover{color:var(--color-accent-400)} .nav-mega-col a.see-all{color:var(--muted);font-weight:600;font-size:12.5px;margin-top:2px} @media (max-width:1100px){.nav-mega{display:none !important}} .nav-spacer{flex:1} .theme-toggle,.burger{ appearance:none;width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center; background:transparent;border:1px solid var(--color-line);border-radius:999px; color:inherit;cursor:pointer;font-size:15px;transition:background .3s ease; } .theme-toggle:hover,.burger:hover{background:color-mix(in srgb, var(--color-accent) 14%, transparent)} .burger{display:none} .nav-cta{flex:0 0 auto} .mobile-menu{ display:none;max-width:1232px;margin:8px auto 0;background:var(--color-surface); border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:14px;flex-direction:column;gap:2px; } .mobile-menu.open{display:flex} .mobile-menu a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;font-size:16px;font-weight:600;color:var(--color-text)} .mobile-menu a:hover{background:color-mix(in srgb, var(--color-accent) 14%, transparent)} /* ---------- site search ---------- Sitewide (every page, not scoped to index.html): a real visible input box in the nav — not an icon that hides it behind a click — with results dropping down beneath it. Loads search-index.json once and filters client-side; there's no server to query on a static, no-build-step site. */ .nav-search{ position:relative;display:flex;align-items:center;gap:9px;flex:0 1 220px;min-width:0; height:44px;padding:0 14px;border-radius:999px; border:1px solid var(--color-line);background:var(--color-surface); transition:border-color .25s ease,box-shadow .25s ease,flex-basis .25s ease; } .nav-search:focus-within{ flex-basis:280px;border-color:var(--color-accent-700); box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 16%,transparent); } .nav-search-icon{flex:0 0 auto;color:var(--muted)} .nav-search-input{ flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--color-text); font-family:inherit;font-size:14px; } .nav-search-input::placeholder{color:color-mix(in srgb,var(--color-text) 45%,transparent)} .nav-search-results{ position:absolute;top:calc(100% + 10px);right:0;width:380px;max-width:min(90vw,380px); max-height:min(60vh,480px);overflow-y:auto;display:none;padding:8px;z-index:80; background:var(--color-surface);border:1px solid var(--color-line); border-radius:var(--radius-md);box-shadow:var(--shadow-lg); } .nav-search-results.open{display:block} .search-hint,.search-empty{padding:20px 14px;font-size:13px;color:var(--muted);text-align:center} .search-result{ display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm); color:var(--color-text);transition:background .2s ease; } .search-result:hover,.search-result.active{background:color-mix(in srgb, var(--color-accent) 10%, transparent);color:var(--color-text)} .search-result-cat{ flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--color-accent-800);background:var(--color-accent-100);border-radius:999px;padding:4px 8px; } [data-theme="dark"] .search-result-cat{color:var(--color-accent-300);background:color-mix(in srgb,var(--color-accent) 16%,transparent)} .search-result-body{min-width:0} .search-result-title{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:2px} .search-result-desc{font-size:12px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:1100px){ .nav-search{flex-basis:170px} .nav-search:focus-within{flex-basis:200px} } @media (max-width:640px){ .nav-bar{gap:12px} .nav-search{flex:0 1 130px;min-width:100px;padding:0 10px} .nav-search:focus-within{flex-basis:160px} .nav-search-results{right:-40px;width:min(94vw,340px)} } /* ---------- buttons ---------- */ /* Modern buttons: gradient fill, sweeping shine on hover, lift + glow. Min height 48px ≥ the 44×44px touch-target rule. */ /* Buttons follow SAMS's Button.vue exactly: a 6px radius, a flat brand fill, a small shadow, and a 0.98 press. Gone are the pill shape, the gradient fill, the lift on hover and the shine sweep that ran across the face of every button — four separate effects on a control whose whole job is to look pressable and say what it does. The press feedback is the one that earns its place, because it answers the click. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:40px;padding:0 16px;border:0;border-radius:var(--radius-sm); font-size:14px;font-weight:500;letter-spacing:0; cursor:pointer;white-space:nowrap; transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease; } .btn:active{transform:scale(.98)} @media (prefers-reduced-motion:reduce){.btn:active{transform:none}} .btn-lg{min-height:46px;padding:0 22px;font-size:15px} .btn-accent{background:var(--color-accent);color:var(--on-accent);box-shadow:var(--shadow-sm)} .btn-accent:hover{background:var(--color-accent-700);color:var(--on-accent)} /* Buttons are anchors here, and `[data-theme="dark"] a` is (0,1,1) against `.btn-accent`'s (0,1,0) — so in dark mode every primary button silently took the link colour: accent-400 text on an accent fill, 2.14:1. It has been wrong for as long as the dark theme has existed. It never surfaced because the fill used to be a gradient, and a contrast checker cannot evaluate a gradient, so it skipped these elements entirely. Flattening the fill to match SAMS is what made the bug visible. The other two variants have the identical flaw; they only escaped the checker because their colours happen to land above 4.5:1 by luck. A button should never inherit the link colour, so all three are pinned here. */ [data-theme="dark"] .btn-accent, [data-theme="dark"] .btn-accent:hover{color:var(--on-accent)} [data-theme="dark"] .btn-outline, [data-theme="dark"] .btn-outline:hover{color:var(--color-text)} [data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-ghost:hover{color:#fff} /* Secondary button. Deliberately NOT glass: a translucent white surface on a light page reads as an unfinished shape rather than a control. It needs a visible edge and a solid surface to look pressable. */ /* Matches SAMS's secondary: 1px neutral border, white surface, small shadow, and a hover that darkens the edge and tints the fill rather than growing the shadow. The 1.5px border and shadow-md hover read as a heavier control than the primary next to it, which inverted the hierarchy. */ .btn-outline{ background:var(--color-surface); border:1px solid color-mix(in srgb,var(--color-text) 22%, transparent); color:var(--color-text);box-shadow:var(--shadow-sm); } .btn-outline:hover{ background:color-mix(in srgb,var(--color-text) 4%, var(--color-surface)); color:var(--color-text); border-color:color-mix(in srgb,var(--color-text) 36%, transparent); } /* Reduced motion: kill the sweep + lift, keep colour feedback */ @media (prefers-reduced-motion:reduce){ .btn::after{display:none} .btn:hover,.btn:active{transform:none} } .crumb-back{ display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;padding:9px 16px; border-radius:999px;border:1px solid var(--color-line);background:var(--color-surface); color:var(--color-text);font-size:13.5px;font-weight:600;transition:background .3s ease; } .crumb-back:hover{background:color-mix(in srgb, var(--color-accent) 14%, transparent);color:var(--color-text)} /* ---------- tags, chips ---------- The .badge pill that sat above almost every heading on the site is gone. Nineteen of them, one per section, each restating its own heading in smaller, weaker words: "FAQ" over "Questions we get on the first call", "Specialties we bill for" over "Billing built around how your specialty actually works". A label that repeats the thing it labels is not wayfinding, it is a second, worse headline competing with the first. */ .tag,.tag-pill{ display:inline-block;padding:6px 13px;border-radius:999px; background:var(--color-accent-100);color:var(--color-accent-800);font-size:12px;font-weight:600; } .tag{background:var(--color-accent-2-100);color:var(--color-accent-2-800);padding:6px 12px} .tags{display:flex;flex-wrap:wrap;gap:6px} .filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .chip{ appearance:none;display:inline-flex;align-items:center;min-height:44px; padding:0 18px;border-radius:999px;border:1px solid var(--color-line); background:transparent;color:var(--color-text);font-family:inherit;font-size:13px;font-weight:600; cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease; } .chip:hover{background:color-mix(in srgb, var(--color-accent) 14%, transparent)} .chip.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--on-accent)} /* ---------- cards ---------- */ /* Soft fill, no border, no shadow — the reference's core surface. A card used to be white + 1px border + shadow, three separate devices all saying "this is a distinct block" on a page where almost everything is a distinct block. On near-white paper a single #f9f9f9 fill separates a card perfectly well, and with the borders gone the page stops looking like a wireframe. Shadow is reserved for things that genuinely float. */ .card{ position:relative; background:var(--color-surface);border:0; border-radius:var(--radius-md);padding:28px; transition:background .3s var(--ease),box-shadow .3s var(--ease); } .card:hover{box-shadow:var(--shadow-md)} @media (prefers-reduced-motion:reduce){ .card:hover{transform:none} } .card.dark{background:var(--color-ink-fixed);color:#fff;border-color:transparent} .card.dark .group-heading,.card.dark h2,.card.dark h3{color:#fff} .card.dark .check-list li{color:rgba(255,255,255,.85)} .card.dark p{color:rgba(255,255,255,.78)} .card-title-sm{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.28;margin:0 0 10px} .group-heading{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px} .mini{padding:20px;border-radius:var(--radius-md);box-shadow:none} .mini-title{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:5px} .mini-body{font-size:13.5px;line-height:1.5;color:var(--muted)} .mini.dark{background:var(--color-ink-fixed);color:#fff} .mini.dark .mini-body{color:rgba(255,255,255,.7)} .accent-fill{background:var(--color-accent);color:var(--on-accent);border-color:transparent} .accent-fill .stat-label,.accent-fill div{color:var(--on-accent)} /* Coral, not amber. This filled stat card was the last thing on the site wearing a third colour — amber is now reserved for the semantic "needs attention" state on claim pills, so a decorative amber block read as a warning about nothing. Coral takes dark ink (5.48:1), same as everywhere. */ .amber-fill{background:var(--color-accent-3);color:var(--on-accent-3);border-color:transparent} .amber-fill .stat-label,.amber-fill div{color:var(--on-accent-3)} .panel{border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:48px;background:var(--color-surface);box-shadow:var(--shadow-sm)} /* Inside a panel the photo was inheriting the base .photo min-height and sitting shorter than its text column, which is the height/width mismatch flagged in review. Stretching it to the row height fixes both sides. */ .panel .split{align-items:stretch} .panel .split > .photo{height:100%;min-height:340px;border-radius:var(--radius-md)} .panel .split > .photo img{height:100%;width:100%;object-fit:cover} @media (max-width:900px){ .panel .split > .photo{min-height:260px} } .link-card{display:block;color:var(--color-text)} .link-card:hover{color:var(--color-text)} .link-card-title{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px} .link-card p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0} .link-cta{font-size:13.5px;font-weight:600;color:var(--accent-ink)} .check-list li,.check-item{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:color-mix(in srgb, var(--color-text) 78%, transparent)} .check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .check,.warn,.x-mark,.check-mark{ width:20px;height:20px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center; font-size:11px;font-weight:600;margin-top:2px;background:var(--color-accent);color:var(--on-accent); } .warn{background:var(--color-accent-2);color:var(--on-accent-2)} .x-mark{background:color-mix(in srgb, var(--color-text) 10%, transparent);color:var(--color-text)} .why-panel .grid-2{gap:14px} .why-panel .check-item{color:rgba(255,255,255,.88);font-size:15px} .cta-mini{margin-top:24px;border-radius:var(--radius-lg);padding:28px} .cta-mini p{font-size:14.5px;margin-bottom:18px} .cta-banner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:40px 0} .cta-banner-title{font-size:20px;font-weight:600;letter-spacing:-.02em} /* ---------- stats ---------- */ /* Big and light, in brand colour — the reference sets its 200+ / 97% at 48px weight 500, not bold. A bolded stat shouts the number; a large light one states it. The restraint is the point, and it is free. */ .stat-big{ font-size:clamp(34px,3.4vw,46px);font-weight:500;letter-spacing:-.03em; line-height:1;color:var(--accent-ink); } /* Fills already carry their own ink (white on teal, dark on amber). */ .accent-fill .stat-big,.amber-fill .stat-big,.svc-stat .stat-big{color:inherit} .stat-label{font-size:13px;font-weight:600;color:var(--muted);margin-top:6px} .stat-card{padding:26px;border-radius:var(--radius-lg)} .stat-row{gap:14px} /* ---------- service page hero ---------- The intro copy used to run down the left of a full-width section with the entire right half empty, and the three proof figures sat in their own section underneath it. Pairing them fills the column with the numbers a reader wants next to the pitch, and shortens the page by a section. */ .service-head{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:64px;align-items:start; } .service-head-copy>*:last-child{margin-bottom:0} .service-head-copy .lede{max-width:60ch} /* One panel with ruled rows, not three stacked cards — same reasoning as the capability list: three bordered boxes to show three numbers is two borders too many. */ .service-head-stats{ background:var(--color-surface);border:1px solid var(--color-line); border-radius:var(--radius-md);padding:4px 28px;box-shadow:var(--shadow-sm); } .service-head-stats .stat-card{ background:none;border:0;box-shadow:none;border-radius:0;padding:24px 0; } .service-head-stats .stat-card+.stat-card{border-top:1px solid var(--color-line)} @media (max-width:900px){ .service-head{grid-template-columns:minmax(0,1fr);gap:34px} .service-head-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;padding:4px 24px} .service-head-stats .stat-card+.stat-card{border-top:0;border-left:1px solid var(--color-line);padding-left:26px} } @media (max-width:560px){ .service-head-stats{grid-template-columns:minmax(0,1fr)} .service-head-stats .stat-card+.stat-card{border-left:0;padding-left:0;border-top:1px solid var(--color-line)} } .hero-ctas{display:flex;flex-wrap:wrap;gap:12px} /* ---------- comparison ---------- Follows the comparison-table pattern: the winning column is visually elevated and runs edge to edge as a continuous band, rows alternate, and the whole row highlights on hover. Previously both columns were weighted identically, so the table stated a preference it never showed. */ .compare-card{padding:0;overflow:hidden;position:relative} .compare-card:hover{transform:none;box-shadow:var(--shadow-sm)} /* No divider rules. The two columns are already told apart by the tinted "with us" band running down the right; a grid of hairlines on top of that was drawing the table twice. */ .compare-head{ display:grid;grid-template-columns:1fr 1fr;gap:0; border-bottom:0; font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; } .compare-head span{padding:20px 30px;color:var(--muted)} .compare-head span:first-child{display:flex;align-items:center;gap:9px} .compare-head span:first-child::before{ content:"";width:8px;height:8px;border-radius:999px; background:var(--color-accent-3);flex:0 0 auto; } .compare-head span:last-child{ background:var(--color-accent-100);color:var(--color-accent-800); display:flex;align-items:center;gap:9px; } [data-theme="dark"] .compare-head span:last-child{ background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--color-accent-300); } .compare-head span:last-child::before{ content:"";width:8px;height:8px;border-radius:999px;background:var(--color-accent);flex:0 0 auto; } .compare-row{ display:grid;grid-template-columns:1fr 1fr;gap:0; border-bottom:0;transition:background .3s ease; } .compare-row:nth-child(even){background:color-mix(in srgb,var(--color-text) 2.5%,transparent)} .compare-row:hover{background:color-mix(in srgb, var(--color-accent) 9%, transparent)} .compare-row>div{ display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;padding:20px 30px; } /* The "with us" column reads as a continuous highlighted band down the table */ .compare-row>div:last-child{ font-weight:600;background:color-mix(in srgb,var(--color-accent) 7%,transparent); } .compare-row:hover>div:last-child{background:color-mix(in srgb,var(--color-accent) 15%,transparent)} @media (max-width:900px){ .compare-row>div:last-child{background:color-mix(in srgb,var(--color-accent) 9%,transparent)} } /* ---------- photos ---------- */ .photo{position:relative;min-height:320px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--color-accent-100)} .photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .photo:hover img{transform:scale(1.045)} .photo.tall{min-height:420px} .article-photo{height:360px;margin-bottom:36px} /* ---------- posts + specialties ---------- Post cards were uneven: headlines of different lengths pushed the "Read more" link to different heights across the row. The body is now a column with the link pinned to the bottom, so the row shares a baseline. */ .post-card{padding:0;overflow:hidden;display:flex} .post-card a{display:flex;flex-direction:column;color:var(--color-text);width:100%} .post-body{padding:24px;display:flex;flex-direction:column;flex:1} .post-body h3{font-size:18px;line-height:1.3;margin:0 0 14px} .post-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .post-body p{font-size:13.5px;line-height:1.55;color:var(--muted)} .post-body .tag-pill{align-self:flex-start;margin-bottom:12px} .post-body .link-cta{ margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;min-height:28px; } .post-card:hover .link-cta{color:var(--accent-ink-hover)} /* Image height is fixed so every card in the row starts its text at the same point regardless of the source photo's aspect ratio. */ .post-photo{height:210px;border-radius:0;box-shadow:none;min-height:0} .spec-card{display:block;color:var(--color-text)} .spec-card p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:8px 0 14px} .spec-card .tag-pill{margin-bottom:12px} .card-title-sm{margin-top:0} /* ---------- article body ---------- */ .article{max-width:860px;padding-top:130px} .article h2{font-size:24px;margin:32px 0 12px} .article p{font-size:16.5px;line-height:1.75;color:color-mix(in srgb, var(--color-text) 80%, transparent)} .article .check-list{margin-bottom:20px} /* Related-resources list — was a run-on paragraph with inline links */ .related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .related-list a{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 2px;border-bottom:1px solid var(--color-line); font-size:15px;font-weight:600;color:var(--color-text);transition:color .2s ease; } .related-list li:last-child a{border-bottom:0} .related-list a:hover{color:var(--color-accent-800)} [data-theme="dark"] .related-list a:hover{color:var(--color-accent-400)} .related-list a svg{flex:0 0 auto;color:var(--color-accent-800);opacity:.55;transition:opacity .2s ease,transform .2s ease} [data-theme="dark"] .related-list a svg{color:var(--color-accent-400)} .related-list a:hover svg{opacity:1;transform:translateX(3px)} /* ---------- quotes ---------- Each card carries the outcome it is evidence for, so the section argues with numbers instead of adjectives: situation -> what changed -> result. The whole section sits on an ink panel in BOTH themes, the same treatment the hero uses, so the page has two deliberate dark anchors. Everything inside therefore reads from --on-ink / --on-ink-muted, never --color-text, which would invert to near-black against the panel in light mode. */ /* Near-white, following the reference: after the saturated hero the page stays light the whole way down. A second dark slab here competed with the hero for "the bold moment" and there can only be one. */ .reviews-stage{ position:relative;isolation:isolate;overflow:hidden; background:var(--color-bg);color:var(--color-text); border-radius:var(--radius-md);padding:64px 56px 52px; } /* One soft brand wash off the top-right, not a decorative gradient mesh: it lifts the corner the figures sit in and stops the panel reading flat. */ .reviews-stage::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--color-accent) 9%,transparent), transparent 62%); } /* Width in % / px, not ch: a ch max-width here resolves against this element's own font-size (body scale), not the display heading inside it, which clamped the whole block to ~200px and broke the title onto six lines. It also has to clear the figures pinned top-right. */ .reviews-lead{max-width:min(660px,58%)} .reviews-title{ font-size:clamp(34px,5.2vw,60px);line-height:1.02;letter-spacing:-.04em; color:var(--color-text);margin:0 0 16px;text-wrap:balance; } .reviews-stage .lede{color:var(--muted);margin:0;max-width:46ch} /* Aggregate figures, top-right, at display scale — the section's headline numbers, kept out of the slider so they do not scroll away with a card. */ .reviews-figures{ position:absolute;top:72px;right:64px;display:flex;gap:44px;text-align:right; } .reviews-figure b{ display:block;font-size:44px;font-weight:500; letter-spacing:-.04em;line-height:1;color:var(--accent-ink); } .reviews-figure span{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:6px} .quote-card{display:flex;flex-direction:column;margin:0} .quote-card .quote-body{display:flex;flex-direction:column;flex:1;min-width:0} .quote-top{display:flex;align-items:baseline;gap:14px;margin-bottom:14px} .quote-index{ font-size:13px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--coral-ink); } .quote-context{ font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--muted); } .stars{font-size:15px;color:var(--color-gold);letter-spacing:.1em;margin-bottom:14px} .quote-card blockquote{ margin:0 0 22px;font-size:17.5px;line-height:1.55;font-weight:500; letter-spacing:-.015em;color:var(--color-text);flex:1; } /* Outcome, then attribution. The outcome used to sit in its own filled, bordered, rounded box inside the card — a card within a card. The number is already the loudest thing here through size and weight; wrapping it in a second container added an edge without adding meaning. */ .quote-meta{border-top:1px solid var(--color-line);padding-top:20px;margin-top:auto} .quote-result{display:flex;align-items:baseline;gap:12px;margin:0 0 18px} .quote-result b{ font-size:30px;font-weight:600;letter-spacing:-.035em; color:var(--accent-ink);line-height:1;flex:0 0 auto; } .quote-result span{font-size:13px;font-weight:500;color:var(--muted);line-height:1.35} .quote-card figcaption{font-size:14px;font-weight:600;color:var(--color-text)} .quote-card figcaption span{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px} @media (max-width:820px){ .reviews-stage{padding:44px 24px 40px;border-radius:var(--radius-md)} .reviews-figures{position:static;margin:26px 0 0;text-align:left;gap:32px} .reviews-figure b{font-size:34px} .reviews-lead{max-width:none} } /* ---------- contact: direct routes ---------- The phone number was a and the address plain text, so on a phone the one thing this page exists to make easy — calling — could not be tapped. They are real tel:/mailto: links now, given the room the empty left column already had. */ .contact-direct{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0} .contact-direct li{padding:20px 0;border-top:1px solid var(--color-line)} .contact-direct li:last-child{border-bottom:1px solid var(--color-line)} .contact-direct span{ display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);margin-bottom:6px; } .contact-direct a{ font-size:22px;font-weight:600;letter-spacing:-.02em; color:var(--accent-ink); } .contact-direct a:hover{color:var(--accent-ink-hover)} .contact-direct p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)} @media (max-width:560px){ .contact-direct a{font-size:19px} } /* Provenance note — states plainly what these quotes are */ .reviews-note{ display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px; border-radius:var(--radius-sm);border:1px dashed var(--color-line); font-size:12.5px;line-height:1.5;color:var(--muted); } .reviews-note svg{flex:0 0 auto;margin-top:1px} /* ---------- FAQ ---------- Rows share one bordered container rather than floating as separate cards, so the list reads as a single document. The open row lifts and takes an accent edge, which is the only state that needs emphasis. */ /* Separate soft rows with real gaps, not one bordered box subdivided by hairlines. Each question is its own object, so it should look like one — and the borders were the last wireframe lines on the page. */ /* Two columns and bigger type. Ten questions in one stack is a long scroll that buries the last five; splitting them halves the height and lets a reader scan both halves at once. CSS columns rather than a grid so the items flow naturally and a longer answer does not leave a hole opposite. */ .faq-list{ columns:2;column-gap:20px;border:0;background:none; } .faq-list > .faq-item{break-inside:avoid;margin-bottom:12px} @media (max-width:900px){.faq-list{columns:1}} .faq-item{ background:var(--color-surface);border:0; border-radius:var(--radius-md);padding:10px 26px;position:relative; transition:background .3s ease; } .faq-item:hover{background:color-mix(in srgb,var(--color-accent) 5%, var(--color-surface))} .faq-item[open]{background:var(--color-accent-100)} .faq-item summary{ font-size:17.5px;font-weight:600;letter-spacing:-.015em;cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px; } .faq-item summary::-webkit-details-marker{display:none} /* Coral marker: the one moving part in this list, and the second place the contrast accent earns its keep. Teal here would disappear into the open row's teal tint. */ /* Round marker, matching the display face's geometry. */ .faq-item summary::after{ content:"+";flex:0 0 auto; width:30px;height:30px;border-radius:999px; display:grid;place-items:center; font-size:19px;font-weight:600;line-height:1; background:var(--color-accent-3-100);color:var(--coral-ink); transition:background .25s ease,transform .25s var(--ease); } .faq-item[open] summary::after{transform:rotate(180deg)} .faq-item[open] summary::after{content:"\2013"} .faq-item p{margin:6px 0 16px;font-size:15px;line-height:1.7;color:var(--muted);max-width:60ch} /* ---------- lead capture form ---------- Two-column field grid so the form reads as short; a labelled header and a trust strip below the button answer the two questions that stall a form submit ("what happens next" / "who gets my data"). */ .contact-form{display:block;padding:0;overflow:hidden} .contact-form:hover{transform:none;box-shadow:var(--shadow-sm)} .form-header{ padding:26px 30px;border-bottom:1px solid var(--color-line); background:linear-gradient(150deg,var(--color-accent-100),transparent 70%); } [data-theme="dark"] .form-header{background:linear-gradient(150deg,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 70%)} .form-header-title{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px} .form-header-sub{font-size:14px;color:var(--muted);margin:0} .form-body{padding:26px 30px 30px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field-full{grid-column:1 / -1} .field label{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:5px} /* Required marker is a word, not a bare asterisk (rule 59) */ .req{font-size:11px;font-weight:600;color:var(--accent-ink);letter-spacing:.03em} .optional{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em} .field-hint{font-size:12.5px;color:var(--muted);margin:0} /* accent-color + color-scheme recolour the parts of a form control the BROWSER paints and CSS cannot reach — the option list in a