:root{ --bg:#ffffff; --panel:#ffffff; --ink:#000000; --muted:#000000; --muted2:#000000; --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.2); --sage:#3c6b50; --sage-press:#2e5540; /* the one dark ground. Near-black on purpose: #000 stays reserved for type */ --dark-ink:#14171a; /* reserved for form ghost text ONLY — every other glyph on the page is #000 */ --ghost:#767676; /* full-strength pill hues, for ICONS only, never text. --ink-purple is the purple pill's own hue (#9A587E) darkened until it joins the band: at source it measures 5.16:1 on white, under the 5.35 floor the other three hold; #8E4F73 measures 5.97:1, between ochre and green. */ --ink-green:#3C6B50; --ink-blue:#265E85; --ink-ochre:#7A6A2A; --ink-purple:#8E4F73; /* one fluid UI step: nav, pills, lede and the explore link all sit here */ --ui:clamp(14px, 0.3vw + 11px, 16px); --green-bg:#ccdbc2; --green-line:rgba(60,107,80,.42); --green-ink:#000000; --yellow-bg:#eadc8f;--yellow-line:rgba(122,106,42,.45);--yellow-ink:#000000; --blue-bg:#add9f4; --blue-line:rgba(38,94,133,.40); --blue-ink:#000000; --purple-bg:#e8c7de;--purple-line:rgba(154,88,126,.38);--purple-ink:#000000; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ display:flex; flex-direction:column; min-height:100vh; background:var(--bg); color:var(--ink); font-family:'Work Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} /* Every "Book 15 Minute Call" is href="#book" and nothing more — no script. A dialog was built and cut: Calendly's widget would not initialise reliably inside one (stuck on its spinner, then failing to create the iframe at all), while the same embed in the section works. A booking button that sometimes opens an empty box is worse than one that always lands on a working scheduler. */ @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } /* the nav is sticky, so the target has to clear it */ #book, #pricing, #how-it-works{ scroll-margin-top:76px; } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s !important; animation-iteration-count:1 !important} /* the timeline arrives fully drawn and fully lit rather than not at all */ .tl-card, .tl-node{ opacity:1 !important; transform:none !important; transition:none !important; } .tl-draw{ stroke-dashoffset:0 !important; } /* all three stages arrive complete rather than as three empty tracks */ .why-prog i{ animation:none !important; transform:scaleX(1) !important; opacity:1 !important; } /* the trust rules arrive green rather than sitting grey forever */ .trust{ --trust-p:1 !important; } } /* ---------------------------------------------------------------- nav */ .nav{ position:sticky; top:0; z-index:50; flex:none; display:flex; align-items:center; gap:40px; padding:13px clamp(20px,4vw,44px); background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav-mark{ display:block; height:20px; width:auto; flex:none; color:#000000; } .nav-links{ display:flex; align-items:center; justify-content:center; gap:30px; flex:1; } .nav-links > a{ font:500 var(--ui)/1 'Work Sans',sans-serif; color:var(--ink); padding:8px 0; white-space:nowrap; transition:color .18s ease; } .nav-links > a:hover{ color:var(--sage); } .nav-item{ position:relative; display:flex; } .nav-item > .nav-trigger{ display:flex; align-items:center; gap:7px; font:500 var(--ui)/1 'Work Sans',sans-serif; color:var(--ink); padding:8px 0; cursor:default; transition:color .18s ease; } .nav-item:hover > .nav-trigger, .nav-item:focus-within > .nav-trigger{ color:var(--sage); } .caret{ width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7; } .mega{ position:absolute; top:calc(100% + 14px); left:0; display:grid; gap:2px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:calc(100vw - 24px); box-shadow:0 30px 60px -30px rgba(0,0,0,.4), 0 2px 6px -3px rgba(0,0,0,.1); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); z-index:20; } /* invisible bridge over the 14px visual gap between trigger and panel — without it, :hover dies the instant the cursor leaves the trigger's own box, since nothing is painted in that gap to keep .nav-item:hover true. Inherits .mega's own pointer-events (none until hover/focus-within flips it to auto), so it's only ever interactive while the menu is already open. */ .mega::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; } /* single column now — the four items are a parent, its one child, and two more parents at the same indent, not a grid of peers. */ .mega--services{ grid-template-columns:clamp(220px,20vw,280px); } /* One group, two cards across. Business Stage was the left column until 2026-08-31; the practice does not segment by stage any more, so the panel is a single group and matches .mega--services' shape — no label, no internal divider, items straight under the trigger. */ .mega--serve{ grid-template-columns:clamp(440px,44vw,560px); } .nav-item:hover > .mega, .nav-item:focus-within > .mega{ opacity:1; transform:none; pointer-events:auto; } .mega a{ display:flex; flex-direction:column; gap:3px; padding:11px 14px; border-radius:8px; } .mega a:hover{ background:rgba(0,0,0,.04); } /* Group F, like everywhere else: one size, weight carries the distinction — 500 names the destination, 400 describes it. The panel grows ~50px taller than it did at 13.5/12 and both panels land on the same height; measured, nothing clips and nothing goes offscreen. */ .mega a b{ font:500 var(--ui)/1.2 'Work Sans',sans-serif; color:var(--ink); } .mega a span{ font:400 var(--ui)/1.35 'Work Sans',sans-serif; color:var(--ink); } /* Who We Serve — four type cards, two across. No label and no divider: with one group left, the trigger already names it. */ .mega-types{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:8px; row-gap:2px; } /* spans both columns but does not stretch across them — as a stretched grid item its underline ran the full panel width, well past the label. */ .mega-types .mega-more{ grid-column:1 / -1; justify-self:start; } /* explore-link inside a mega column would otherwise inherit .mega a's column-flex tile padding — restore its own inline-flex underline shape. Qualified as `.mega a.mega-more` (not `.mega-more` alone): `.mega a` is one class + one type, and a bare single-class override loses to it. */ .mega a.mega-more{ display:inline-flex; flex-direction:row; align-items:center; gap:8px; margin-top:6px; padding:9px 14px 0; border-radius:0; white-space:nowrap; } .mega a.mega-more:hover{ background:none; } /* What We Do — Accounting nests under Ongoing Management, and the nesting is real: Ongoing Management is the retainer, Accounting is what sits inside it. The URLs follow the same shape (/what-we-do/ongoing-management/accounting); the corner arrow is the connector, indent does the rest. Same row flow, not the tile's column flow the other three items use. Same specificity note as .mega-more above. */ .mega a.mega-child{ flex-direction:row; align-items:baseline; gap:6px; padding-left:30px; } .mega-connector{ color:#000000; line-height:1; } .nav-cta{ display:flex; align-items:center; gap:12px; flex:none; } .btn-solid{ display:inline-flex; align-items:center; padding:12px 22px; border-radius:0; background:var(--sage); color:#ffffff; font:500 var(--ui)/1 'Work Sans',sans-serif; } .btn-solid:hover{ background:var(--sage-press); } .nav-toggle{ display:none; flex:none; padding:8px; } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; } .mobile-panel{ display:none; position:fixed; inset:0; z-index:60; background:var(--bg); padding:20px clamp(20px,6vw,44px); overflow-y:auto; } .mobile-panel.is-open{ display:block; } .mobile-panel .mobile-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } .mobile-panel a, .mobile-panel .mobile-group b{ display:block; font:500 calc(var(--ui) * 1.4)/1 'Work Sans',sans-serif; padding:14px 0; border-bottom:1px solid var(--line); } .mobile-panel .mobile-group b{ color:var(--ink); font-size:var(--ui); letter-spacing:.06em; text-transform:uppercase; border-bottom:none; padding-bottom:4px; } /* a nested item sits one indent in — the only device mobile has for the nesting the mega menu draws with a connector. Sub-GROUP labels retired 2026-08-31 with Business Stage; only Accounting nests now. */ .mobile-panel a.mobile-sub{ padding-left:16px; } .mobile-cta{ display:flex; flex-direction:column; gap:12px; margin-top:24px; } .mobile-cta a{ text-align:center; border-bottom:none; border-radius:0; } @media (max-width:900px){ .nav{ justify-content:space-between; } .nav-links{ display:none; } .nav-cta{ display:none; } .nav-toggle{ display:block; } } /* ---------------------------------------------------------------- hero */ .hero{ position:relative; overflow:hidden; background:var(--bg); flex:1; min-height:calc(100vh - 135px); display:grid; grid-template-rows:1fr auto 1fr; } .hero-grid{ grid-row:2; position:relative; z-index:1; width:100%; max-width:1240px; max-height:100%; margin:0 auto; padding:0 44px; } /* centred stack: question card, headline, sub, then the two actions. The pills ring this — see the safe zone note on .hero-pills. */ .hero-center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; max-width:940px; margin:0 auto; opacity:0; transform:translateY(14px); animation:fadeUp .7s cubic-bezier(.4,0,.2,1) .15s forwards; } @keyframes fadeUp{ to{ opacity:1; transform:none; } } /* max-width in ch, not px: the claim must break after "growth" at every width, and a pixel cap cannot promise that because the size depends on viewport HEIGHT too (2.3vh). Between roughly 770 and 1250 the line was landing just under the 940 container and collapsing to one line. 20ch is measured in the claim's own font, so it scales with the clamp: the string is 35ch, the longest half is 18ch, so the only two-line split that fits is the one we want, and text-wrap:balance picks it. */ .hero-center h1{ margin:0; max-width:20ch; font:600 clamp(32px,2.3vw + 2.3vh,58px)/1.1 'Work Sans',sans-serif; letter-spacing:-.015em; color:#000000; text-wrap:balance; } /* second line: same size, lighter weight — one thought, two registers */ .hero-center p{ margin:0; max-width:620px; font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; color:#000000; text-wrap:pretty; } .hero-center p strong{ font-weight:600; } /* phone capture and the explore link share a row, capture first */ /* phone capture on top, the two underline links in their own row below — not one wrapping row of three, so the links always sit under the field rather than beside it at in-between widths. */ .hero-actions{ display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; margin-top:8px; } .hero-links{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; } /* all-caps tracked CTA treatment, borrowed for the nav button, the lead-capture CTA, and the explore link — kept in Work Sans rather than a new mono face */ .caps-cta{ text-transform:uppercase; letter-spacing:.07em; font-weight:600; } /* width, not flex-basis: .hero-actions is a flex column now (phone field over the two links, not beside them), and a basis sizes the *main* axis — on a column that's height, which is exactly the 400px-tall box this used to render before the fix. */ .lead-capture{ display:flex; align-items:center; gap:6px; width:100%; max-width:400px; padding:6px 6px 6px 22px; border-radius:8px; background:var(--panel); border:1px solid var(--line-strong); box-shadow:0 16px 34px -22px rgba(0,0,0,.35); } .lead-capture input{ flex:1; min-width:0; border:none; outline:none; background:none; font:400 var(--ui)/1 'Work Sans',sans-serif; color:var(--ink); padding:10px 0; } .lead-capture input::placeholder{ color:var(--ghost); } .lead-capture button{ flex:none; padding:13px 22px; border-radius:5px; background:var(--sage); color:#fff; white-space:nowrap; } .lead-capture button:hover{ background:var(--sage-press); } .explore-link{ display:inline-flex; align-items:center; gap:8px; font-size:var(--ui); color:var(--ink); padding-bottom:2px; border-bottom:1px solid rgba(0,0,0,.35); transition:color .2s linear, border-color .2s linear; } .explore-link:hover{ color:var(--sage); border-color:var(--sage); } .explore-link .arrow{ transition:transform .2s ease; } .explore-link:hover .arrow{ transform:translateX(3px); } /* Full-bleed layer behind the copy. Pills ring the centred column and stay out of it: the safe zone is roughly x 26-74%, y 20-84% at desktop, which is where the question card, headline, sub and actions live. Sharp pills sit in the side margins and the top/bottom bands; blurred ones sit further in, where they read as colour rather than text. */ .hero-pills{ position:absolute; inset:0; z-index:0; } /* pill-pos: reveal (opacity/scale) via CSS keyframe + delay. pill: ambient drift, on a separate element — one node can't carry both a one-shot reveal transform and a continuous keyframe transform without one clobbering the other. */ /* entrance: one-shot CSS animation. JS hands off to the transition below once each entrance finishes (a forwards-filled animation would otherwise keep overriding any inline opacity/transform the swap timer sets). */ .pill-pos{ position:absolute; opacity:0; transform:scale(.9) translateY(10px); animation:popIn .7s cubic-bezier(.16,.9,.22,1) both; animation-delay:var(--d,0s); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); } @keyframes popIn{ from{ opacity:0; transform:scale(.9) translateY(10px); } to{ opacity:var(--op,1); transform:none; } } .pill{ display:inline-block; white-space:nowrap; border-radius:999px; font-family:'Work Sans',sans-serif; font-weight:500; } /* One size now — both pill shapes sit on var(--ui), the interface step. Depth comes from blur and opacity, not from a second size. */ /* The blurred pills sit further in than the sharp ones by design — they are colour, not text. Their width is fixed but the safe zone is a percentage, so as the viewport narrows they walk inward and cross the copy: at ~1100 the purple one was running through the end of the claim's second line and the green one sat behind the phone field. Below 1320 the .pill-side pair is hidden and both margins are empty, so these move out into that space. */ /* the two sharp pills in the top band travel outward on the same schedule */ .pill-top-l{ left:8%; } .pill-top-r{ right:7%; } .pill-blur-r{ right:10%; top:35%; } .pill-blur-l{ left:10%; top:62%; } .pill-blur-b{ right:26%; top:91%; } @media (max-width:1320px){ .pill-side{ display:none; } .pill-top-l{ left:1%; } .pill-top-r{ right:1%; } .pill-blur-r{ right:0; } /* left:0 alone is not enough for this one — it is the longest string in either pool, so even flush to the edge it still reached the centred phone field. It drops instead into the empty band under the actions, clear of slot6 at 88%. */ .pill-blur-l{ left:0; top:74%; } .pill-blur-b{ right:14%; } } .pill--a{ padding:12px 22px; font-size:var(--ui); box-shadow:0 16px 30px -22px rgba(0,0,0,.5); } .pill--b{ padding:9px 17px; font-size:var(--ui); box-shadow:0 12px 24px -22px rgba(0,0,0,.4); } /* two roles only: sharp pills you read, blurred ones that are just colour */ .blur-4{ filter:blur(7px); } .blur-3{ filter:blur(4px); } .blur-2{ filter:blur(2px); } .blur-1{ filter:blur(.6px); } .pill--green{ background:var(--green-bg); border:1px solid var(--green-line); color:var(--green-ink); } .pill--yellow{ background:var(--yellow-bg); border:1px solid var(--yellow-line); color:var(--yellow-ink); } .pill--blue{ background:var(--blue-bg); border:1px solid var(--blue-line); color:var(--blue-ink); } .pill--purple{ background:var(--purple-bg); border:1px solid var(--purple-line); color:var(--purple-ink); } @keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-16px,0)}} @keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-12px,14px,0)}} @keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(16px,12px,0)}} @keyframes drift4{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-14px,-12px,0)}} .pill--d1{ animation:drift1 28s ease-in-out infinite; } .pill--d2{ animation:drift2 32s ease-in-out infinite; } .pill--d3{ animation:drift3 30s ease-in-out infinite; } .pill--d4{ animation:drift4 34s ease-in-out infinite; } /* The one question that sits inside the safe zone, above the headline — roughly half way between the nav and the centre. A step above the pills but deliberately quieter than the headline: still white, softer shadow. */ .hero-q{ grid-row:1; align-self:center; justify-self:center; position:relative; z-index:2; display:block; padding:15px 26px; border-radius:999px; background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 38px -26px rgba(0,0,0,.35), 0 1px 3px -2px rgba(0,0,0,.08); color:#000000; white-space:nowrap; opacity:0; animation:qIn .9s cubic-bezier(.16,.9,.22,1) 1.6s both; } @keyframes qIn{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } } /* --- mobile: left content only, pills become a muted background --- */ @media (max-width:900px){ .hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .hero-grid{ padding:40px 24px; } /* background texture only — nothing legible, just colour so it is not a blank white page */ .hero-pills{ opacity:.22; pointer-events:none; filter:saturate(.8); } .hero-pills .pill{ filter:blur(7px); box-shadow:none; } .hero-center h1{ font-size:clamp(28px,7vw,36px); } /* max-width stays 20ch — the container caps it below ~420px anyway */ .hero-center p{ max-width:100%; } .hero-actions{ gap:16px; width:100%; } .hero-links{ flex-direction:column; gap:12px; } .lead-capture{ max-width:100%; } /* the capsule stops being one nowrap line here, and a wrapped descriptor inherits the body's left alignment — centre it explicitly */ /* font-size lives in the page-wide mobile block at the foot of this stylesheet — the shared label rule below would otherwise win on source order and this override would silently do nothing. */ .hero-q{ align-self:auto; justify-self:auto; white-space:normal; text-wrap:balance; text-align:center; padding:12px 20px; margin:0 auto 22px; } } /* ================= LOCKED: variant C typography ================= M PLUS Code Latin carries the claim and every control. Optically corrected: its cap-height is 73% of em vs Work Sans' 66%, so all-caps controls step to .9em or they outweigh everything near them. */ :root{ --mp:'M PLUS Code Latin', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ================= A · statements ================= The hero claim and every section head share ONE clamp and differ only by weight: the claim is 600, the heads are 500. Written once here rather than once per section — eight copies of a clamp is what DESIGN.md's own tripwire warns about, and it meant a new section's h2 was only correct if you remembered to copy the right one. Sections keep ONLY what is local to them: margin, colour on the two inverted grounds, max-width, text-wrap, and the one left-aligned head. Line-height is 1.1 for all of them — at this size the old 1.15/1.20/1.25 split was three values doing one job. Tracking is -.02em; .hiw h2's -.015em was the only element rendering that value. NOT included: .grt-title. At this size in the guarantee's narrow left cell it broke to three lines on a hanging hyphen and became a peer of the section head directly above it. It keeps the old head clamp and is now the one member of its own step — the boxed claim. */ .svc h2, .grt h2, .why h2, .handoff h2, .hiw h2, .prc h2, .faq h2, .cta h2, .mtg-copy h2, .quad h2, .bridge h2, .lens h2, .gets h2, .eng h2, .opt h2, .band h2, .plans h2, .incl h2, .cx h2, .sys h2, .callout-h, .projs h2, .dqs h2, .lvr h2, .ex-sec h2{ font:500 clamp(32px, 2.3vw + 2.3vh, 58px)/1.1 'Work Sans',sans-serif; letter-spacing:-.02em; text-align:center; } /* ================= D · labels ================= A label says what a block IS. It is never a sentence and never clicked. ONE rule for all six: C2's size and weight, and ALL CAPS + .06em tracking is the only thing that makes a label a label. Tracking came down from .09em/.14em as the size went up, and it more than pays for itself — the descriptor capsule measures 615px here against 626px at the old 15.32/.14em, so the label got bigger AND narrower. A label inside a shape (the month pills) may take this size safely, because the capsule separates it from whatever sits below. A bare label above a bare heading cannot — which is why .svc-name is the one to watch: it now sits 2.15px under .svc-benefit rather than 4.6px. */ .hero-q, .trust-stat, .svc-name, .why-name, .hiw-cue, .ft-h, .prc-name, .quad-name, .chain-name, .stage-name, .eng-cue, .eng-name, .plans-table th[scope=col], .dq-name, .sig-name, .ex-name, .ex-cue, .ex-headcue, .lever-end{ font:500 calc(var(--ui) * 1.1)/1.3 'Work Sans',sans-serif; letter-spacing:.06em; text-transform:uppercase; } /* ================= C1 · section thesis ================= The paragraph that carries a whole section. ONE rule — it was written out four times (.why-lede, .grt-copy, .cta-sub, .mtg-copy p) until 2026-08-31, which is the duplicated-clamp tripwire in DESIGN.md §8: four copies drift. Members keep only what is local — margin, colour, measure, wrapping. */ .why-lede, .grt-copy, .cta-sub, .mtg-copy p, .hero-center .phero-lede, .bridge-lede, .lens-lede, .eng-lede, .opt-lede, .incl-lede{ font:400 calc(var(--ui) * 1.6)/1.5 'Work Sans',sans-serif; } .hero-center h1{ font-family:'Work Sans',sans-serif; letter-spacing:-.02em; } .btn-solid, .lead-capture button, .explore-link, .caps-cta{ font-family:var(--mp); font-size:.9em; letter-spacing:.09em; font-weight:600; } /* Group E is now ONE size. Both of these used to opt out: .btn-solid via calc(var(--ui) * .9) -> 13.79px, the phone submit via a bare 11.3px. */ /* ================= descriptor — LOCKED 2026-08-29 ================= AA caps · pill · Work Sans. Takes group D like every other label; the only thing local to it is the capsule. Grid-row 1, centred in the top third, 15px 26px padding. The capsule is load-bearing: it rhymes with the drifting question pills, so the descriptor reads as the answer in the same shape as the questions. Do not strip it. */ /* ================= trust bar — LOCKED T4 ================= Stacked, anchored at the fold below the hero, not under the nav. Top placement stacked a third centred band ahead of the claim: nav, trust, then the descriptor pill — two centred caps lines ~70px apart doing different jobs. Here it closes the fold instead. */ /* Both hairlines belong to .trust, and both ease from --line to --sage as the bar rises through the viewport. --trust-p is 0..1, written by the script; colour-mix interpolates between two members of the closed set, so no third value is authored. Paint-only, like the timeline's stroke-dashoffset. .svc used to own the rule below this one — it was moved here so the two read as a pair and animate together. */ .trust{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:15px clamp(20px,4vw,44px); background:#ffffff; --trust-p:0; border-top:1px solid; border-bottom:1px solid; border-color:color-mix(in srgb, var(--sage) calc(var(--trust-p) * 100%), var(--line)); } .trust-stat{ margin:0; color:#000000; white-space:nowrap; } /* "200+" is the only emphasis inside a line on the page. Without this the UA's `bolder` against the label weight resolves to 700 — outside the set. */ .trust-stat strong{ font-weight:600; } .trust-list{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; } /* Nav styling — these become links. Same for the footer identity line. */ .trust-list li{ position:relative; color:#000000; font:500 var(--ui)/1 'Work Sans',sans-serif; white-space:nowrap; } .trust-list li + li::before{ content:''; position:absolute; left:-16px; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:rgba(0,0,0,.4); } /* ================= services ================= Reference: Inbox/services .png — rules top and bottom, vertical rules between the three, icon in a perfect square. Numerals are gone. 01/02/03 as section markers is a machine default, and the icons carry the same ordering job while actually saying something. .svc-name is group D and the Learn more link is group E — they are no longer the same size, and the label is now the larger of the two. This is the tightest label/heading pair on the page: .svc-name sits 2.15px under .svc-benefit. Check it first if group D ever moves again. */ /* The horizontal padding moved off the section and onto the two children, so .svc-rail can be the full width of the page. Its rules are the only thing on the page that runs edge to edge — the tile block inside it stays on the 1240 measure, which is what makes the bleed read as deliberate rather than as a container that forgot its max-width. */ /* no border-top: .trust's bottom rule is the one above this section */ .svc{ padding:clamp(72px,10vh,124px) 0; background:#ffffff; } .svc-head{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,44px); } .svc-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .svc h2, .grt h2{ margin:0 auto clamp(44px,6.5vh,72px); color:#000000; text-wrap:balance; max-width:26ch; } /* rules top and bottom; verticals do the separating */ /* Closed on both flanks so the three cells are whole squares. The sides are --line, the same weight as the dividers between them; the top and bottom are --line-strong and live on .svc-rail, where they can run past 1240. */ .svc-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* subgrid so icon / label / benefit / copy / link line up across all three columns. Without it the third benefit wraps to two lines and drags its paragraph down, leaving the row tops ragged. */ .svc-list{ grid-template-rows:auto auto auto 1fr auto; } .svc-item{ display:grid; grid-row:span 5; grid-template-rows:subgrid; gap:14px; justify-items:start; align-content:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .svc-item + .svc-item{ border-left:1px solid var(--line); } /* the perfect square */ .svc-icon{ display:block; margin-bottom:6px; } .svc-icon svg, .grt-icon svg, .why-icon svg{ width:46px; height:46px; display:block; } /* h2 cap height is ~23px; this clears it */ .svc-name{ color:#000000; } .svc-benefit, .grt-title, .quad-claim, .get-name, .eng-price, .hero-center .phero-price, .proj-name, .dq-q, .sig-price, .ex-price, .lever-name, .pp-price{ margin:0; color:#000000; font:600 clamp(19px,.7vw + .9vh,25px)/1.25 'Work Sans',sans-serif; letter-spacing:-.012em; text-wrap:balance; } .svc-desc, .why-desc, .why-qs, .quad-copy, .bridge-copy, .stage-q, .get-copy, .eng-copy, .band-copy, .callout-copy, .incl-note, .cx-note, .sys-note, .opt-note, .proj-copy, .dq-copy, .lever-copy, .ex-focus, .ex-copy, .lvr-note, .pp-what{ margin:0; color:#000000; font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; text-wrap:pretty; } .svc-item .explore-link{ align-self:end; padding-top:14px; } /* Icon colour is the whole device — no filled square. The three glyphs are happy faces, each a step happier than the last; the order is the point, so do not reshuffle them. Full-strength versions of the pill border hues. */ .svc-item:nth-child(1) .svc-icon{ color:var(--ink-green); } .svc-item:nth-child(2) .svc-icon{ color:var(--ink-blue); } .svc-item:nth-child(3) .svc-icon{ color:var(--ink-ochre); } /* ================= guarantee ================= Reference: Inbox/guarantee.png — one outlined box, no fill, split by a single vertical hairline. Same cell language as the services row: the outer edge is --line-strong (the section rule weight), the internal divider is --line (the between-columns weight), radius 0. The promise sits left and its terms sit right, so the box is read in the order it is argued: what we call it, then what it actually costs us. No new type roles — the claim borrows .svc-benefit, the terms borrow .svc-desc, the icon borrows the 46px services square. */ /* No section rule of its own: the services block's bottom rule already runs the full width of the page a hundred pixels up, and a second full-width line under it was two rules doing one job. */ /* No padding-top: with no rule between them, .svc's padding-bottom is already the whole gap. Keeping both stacked them into 180px against the 91px that separates the trust bar from the services heading. */ /* Full-bleed like .svc and .why: the section carries no horizontal padding, .grt-head and .grt-rail pay it, and the rail's two rules run edge to edge while the box stays on the 1240 measure. */ .grt{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .grt-head{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,44px); } .grt-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } /* 1fr 2fr, not 1fr 1fr: the divider lands on the services grid's first vertical rule, so the claim occupies one square and the terms occupy two. The horizontals live on the rail; the box closes its own flanks with --line, the same as the tile blocks. */ .grt-box{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 2fr; border-left:1px solid var(--line); border-right:1px solid var(--line); } .grt-claim, .grt-terms{ padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } /* Icon above the claim, not above the terms. It used to sit on the right, which pushed the terms down and left the left cell half empty; moving it over evens the two cells and takes the wasted space out of the box. Still vertically centred, so the pair reads as one block against six lines. */ .grt-claim{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; } .grt-terms{ display:grid; align-content:center; border-left:1px solid var(--line); } .grt-icon{ display:block; margin-bottom:6px; color:var(--ink-purple); } /* Both halves step up one rung. No new numbers: the claim takes the section head's clamp in Work Sans, the terms take the benefit head's clamp at 400. The claim keeps text-wrap:balance on purpose — greedy wrapping fills line one with "Our 90-Day Value" and orphans "Guarantee"; balance minimises the longest line and breaks it after "Our 90-Day", which is the reading. */ /* The boxed claim — the one member of its own step. It keeps the clamp the section heads used before they moved up to the hero's, because at the head size it broke to three lines in this cell and outranked the h2 above it. */ .grt-title{ font-size:clamp(26px,1.5vw + 1.1vh,38px); line-height:1.15; } /* The terms run the full two squares, so the size has to set the measure: at var(--ui) the line hit ~100ch and at the benefit clamp ~79ch. .grt-copy is C1 and ONLY C1. It used to sit in the C2 rule for its margin and colour and then override the size — two groups claiming one element, which broke the moment the override was folded into the shared C1 rule. Local props only here; the size lives in the C1 rule and nowhere else. */ .grt-copy{ margin:0; color:#000000; text-wrap:pretty; } /* ================= who we serve ================= Centred head, centred thesis, then a three-tile rail on the services device, then the disqualifier and the CTA. The two-column version and its single boxed list retired 2026-08-31 — the three stages of the buyer are the content now, and a stage is a tile, not a bullet. The tiles carry only two things forward from .svc: the D label and the C2 copy. Everything else here is local — the progression rail is what makes three tiles read as one sequence rather than three options. No padding-top: .grt's padding-bottom is already the whole gap. */ .why{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } /* Same full-bleed device as .svc: the section carries no horizontal padding, so .why-rail's rules run edge to edge while .why-list stays on the 1240 measure. Head and foot pay the padding themselves. */ .why-head{ max-width:1240px; margin:0 auto clamp(44px,6.5vh,72px); padding:0 clamp(20px,4vw,44px); text-align:center; } /* local margin only — the clamp is group A's, shared */ .why h2{ margin:0 auto clamp(18px,2.4vh,28px); color:#000000; text-wrap:balance; max-width:26ch; } /* C1, centred under the head. 54ch sets two lines at 1440; balance keeps them even. The three sage .q underlines retired with the two-column layout — the animated rail is the section's sage now. */ .why-lede{ margin:0 auto; color:#000000; text-wrap:balance; max-width:54ch; } /* The ask and the read-on sit as one row, ask first. Both are group E, so centring the pair and letting the row's align-items do the vertical work is the whole rule — no per-element margin. */ .why-cta{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:clamp(16px,1.6vw,26px); margin-top:1.35em; } .why-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .why-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* subgrid so icon / label / rail / copy / questions line up across all three tiles — without it a two-line label drags one column's rail off the row the other two share, and the progression stops reading as one line. */ .why-list{ grid-template-rows:auto auto auto auto auto; } .why-item{ display:grid; grid-row:span 5; grid-template-rows:subgrid; gap:14px; justify-items:start; align-content:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .why-item + .why-item{ border-left:1px solid var(--line); } .why-icon{ display:block; margin-bottom:6px; } .why-name{ color:#000000; } /* Icon ink runs green -> blue -> ochre in the same order as the services rail. Here the order is the progression the rails animate, so it is content: do not reshuffle. */ .why-item:nth-child(1) .why-icon{ color:var(--ink-green); } .why-item:nth-child(2) .why-icon{ color:var(--ink-blue); } .why-item:nth-child(3) .why-icon{ color:var(--ink-ochre); } /* ---- the progression rail ---- One 2px track per tile, at --line like every other edge in the box, with a sage bar that scales out of its left edge. Transform and opacity only — the width never changes, so this stays inside the motion rule. 2px sage is the thickness the retired .q underline used. Cycle is 10.5s, one third per tile. A tile fills over 2.73s, holds, then fades back to the track as the next one starts — the handoff overlaps by design, so the eye is never looking at three dead rails. */ .why-prog{ display:block; width:100%; height:2px; background:var(--line); position:relative; overflow:hidden; } .why-prog i{ position:absolute; inset:0; background:var(--sage); transform:scaleX(0); transform-origin:left center; animation:why-prog 10.5s linear infinite both; } .why-item:nth-child(2) .why-prog i{ animation-delay:3.5s; } .why-item:nth-child(3) .why-prog i{ animation-delay:7s; } @keyframes why-prog{ 0% { transform:scaleX(0); opacity:1; } 26% { transform:scaleX(1); opacity:1; } 31% { transform:scaleX(1); opacity:1; } 33.2% { transform:scaleX(1); opacity:0; } 33.3% { transform:scaleX(0); opacity:0; } 100% { transform:scaleX(0); opacity:0; } } .why-desc{ margin:0; } /* C2 as bullets. The disc is the marker the rest of the page does not use, and it is what separates a question from the statement above it. */ .why-qs{ margin:0; padding:0 0 0 1.15em; list-style:disc; display:grid; gap:7px; } .why-qs li{ color:#000000; } /* ================= /what-we-do ================= Layout only. Every type role here is a GROUP taken by widening an existing selector — A for the heads, B for the card claim, C1 for the theses, C2 for the body, D for the labels, E for the links. No size is written twice. The page reuses .hero-center for its hero, so the fade-up entrance and the h1's clamp come for free and cannot drift from the home page's. */ .phero{ padding:clamp(56px,9vh,104px) clamp(20px,4vw,44px) clamp(64px,9vh,110px); background:#ffffff; } .phero-lede{ margin:0; max-width:52ch; color:#000000; text-wrap:pretty; } /* the same pair as who-we-serve: ask first, read-on second, baselines aligned */ .phero-cta{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:clamp(16px,1.6vw,26px); margin-top:clamp(10px,1.4vh,18px); } /* ---- the four services, 2x2 ---- The rail pattern (7.5), but the block inside is two rows rather than one. The only --line-strong horizontals are the rail's own, top and bottom, so the bottom rule lands under the SECOND row — the four cards read as one block of four, not as two rows of two. Everything between is --line. */ .quad{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .quad-head{ max-width:1240px; margin:0 auto clamp(44px,6.5vh,72px); padding:0 clamp(20px,4vw,44px); text-align:center; } .quad h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .quad-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .quad-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* 1fr on the body row pins every link to the bottom of its cell, so the four links sit on two lines rather than four. No subgrid needed: cells in a row already stretch to equal height. */ .quad-item{ display:grid; grid-template-rows:auto auto auto 1fr auto; gap:14px; justify-items:start; padding:clamp(32px,3.2vw,46px) clamp(24px,2.4vw,36px); } .quad-item:nth-child(even){ border-left:1px solid var(--line); } .quad-item:nth-child(n+3){ border-top:1px solid var(--line); } .quad-icon{ display:block; margin-bottom:6px; } .quad-icon svg{ width:46px; height:46px; display:block; } .quad-name{ color:#000000; } /* four services, the four inks, in the order the page lists them */ .quad-item:nth-child(1) .quad-icon{ color:var(--ink-blue); } .quad-item:nth-child(2) .quad-icon{ color:var(--ink-green); } .quad-item:nth-child(3) .quad-icon{ color:var(--ink-purple); } .quad-item:nth-child(4) .quad-icon{ color:var(--ink-ochre); } /* ---- the bridge, and the quote-to-profit chain ---- Same device as the who-we-serve progression rails, doing the same job: showing that a set has an ORDER. scaleX off a left origin plus opacity, one segment at a time, looping. Reusing it rather than inventing a second sequence gesture is the point. */ .bridge{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } .bridge-inner{ max-width:1240px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .bridge h2{ margin:0 auto clamp(18px,2.4vh,28px); color:#000000; text-wrap:balance; max-width:26ch; } .bridge-lede{ margin:0 auto; max-width:62ch; color:#000000; text-wrap:pretty; } .bridge-copy{ max-width:62ch; color:#000000; text-wrap:pretty; } .bridge .explore-link{ margin-top:1.35em; } .chain{ list-style:none; margin:clamp(38px,5vh,56px) 0; padding:0; width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,20px); } .chain-step{ white-space:nowrap; } .chain-name{ color:#000000; } .chain-link{ flex:1 1 0; min-width:28px; max-width:120px; } .chain-track{ display:block; width:100%; height:2px; background:var(--line); position:relative; overflow:hidden; } .chain-track i{ position:absolute; inset:0; background:var(--sage); transform:scaleX(0); transform-origin:left center; animation:chain-fill 8s linear infinite both; } .chain-link:nth-of-type(2) .chain-track i{ animation-delay:.9s; } .chain-link:nth-of-type(3) .chain-track i{ animation-delay:1.8s; } .chain-link:nth-of-type(4) .chain-track i{ animation-delay:2.7s; } @keyframes chain-fill{ 0% { transform:scaleX(0); opacity:1; } 11% { transform:scaleX(1); opacity:1; } 46% { transform:scaleX(1); opacity:1; } 55% { transform:scaleX(1); opacity:0; } 56% { transform:scaleX(0); opacity:0; } 100% { transform:scaleX(0); opacity:0; } } /* ---- closing CTA ---- EVERY page ends on the scheduler, not on a link to it. Getting onto the calendar is the point of the page, and one extra hop is where people stop. A link that survives beside it is the SAME underline-with-arrow button recoloured for the inverted ground the way §3 recolours every glyph in this block — not a third type. */ .cta-link{ margin-top:clamp(26px,3.4vh,40px); color:var(--on); border-bottom-color:rgba(255,255,255,.5); } .cta-link:hover{ color:var(--on); border-bottom-color:var(--on); } /* the timeline's own closing link, inside the dark block */ .hiw-more{ margin-top:clamp(34px,4.5vh,56px); color:#ffffff; border-bottom-color:rgba(255,255,255,.5); } .hiw-more:hover{ color:#ffffff; border-bottom-color:#ffffff; } /* ================= service sub-pages ================= /what-we-do/ongoing-management/ and .../accounting/. Same discipline: no type, no colour, no radius that is not already in the set. */ /* screen-reader-only, for the table caption */ .vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* the down arrow points at a section on this page, so it must not slide sideways on hover like the ones that navigate away */ .explore-link:hover .arrow--down{ transform:translateY(3px); } /* ---- four things you get: the lightest rail on the site ---- */ .gets{ padding:0 0 clamp(56px,8vh,88px); background:#ffffff; } .gets-head{ max-width:1240px; margin:0 auto clamp(36px,5vh,56px); padding:0 clamp(20px,4vw,44px); text-align:center; } .gets h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .gets-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .gets-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* no icons and less padding than the tile blocks — "visually light" is a smaller cell, not a smaller typeface */ .get{ display:grid; grid-template-rows:auto 1fr; gap:10px; justify-items:start; padding:clamp(24px,2.4vw,32px) clamp(20px,2vw,28px); } .get + .get{ border-left:1px solid var(--line); } .get-name{ color:#000000; } .get-copy{ color:#000000; text-wrap:pretty; } /* ---- example engagements ---- */ .eng{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .eng-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; display:flex; flex-direction:column; align-items:center; } .eng-cue{ display:block; margin-bottom:18px; color:#000000; } .eng h2{ margin:0 auto clamp(16px,2vh,24px); color:#000000; text-wrap:balance; max-width:26ch; } .eng-lede{ margin:0 auto; max-width:60ch; color:#000000; text-wrap:pretty; } .eng-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .eng-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* the price sits ABOVE the description on purpose: the whole point of the section is that the number is scannable before anyone reads prose */ .eng-item{ display:grid; grid-template-rows:auto auto auto 1fr; gap:14px; justify-items:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .eng-item + .eng-item{ border-left:1px solid var(--line); } .eng-name{ color:#000000; } .eng-price{ color:#000000; } .eng-copy{ color:#000000; text-wrap:pretty; } /* the dot TRAILS its item and is inline, so the row wraps without orphaning a leading dot onto the next line */ .eng-meta{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 11px; } .eng-meta li{ position:relative; color:#000000; font:400 var(--ui)/1.4 'Work Sans',sans-serif; } .eng-meta li:not(:last-child)::after{ content:''; display:inline-block; vertical-align:middle; width:3px; height:3px; margin:0 0 2px 11px; border-radius:50%; background:rgba(0,0,0,.4); } /* ---- keep your bookkeeper, or don't ---- */ .opt{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } .opt-inner{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; } .opt h2{ margin:0 auto clamp(16px,2vh,24px); color:#000000; text-wrap:balance; max-width:26ch; } .opt-lede{ margin:0 auto; max-width:64ch; color:#000000; text-wrap:pretty; } .opt-ways{ list-style:none; margin:clamp(34px,4.5vh,52px) 0 0; padding:0; width:100%; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-strong); } .opt-way{ display:grid; gap:12px; justify-items:center; padding:clamp(28px,3vw,40px) clamp(22px,2.2vw,32px); } .opt-way + .opt-way{ border-left:1px solid var(--line); } /* the two configurations, said as a sum. The part Avanza owns is the filled one — colour is not doing the work, weight and ground are. */ .opt-parts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; } .opt-part{ display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong); color:#000000; font:500 var(--ui)/1.2 'Work Sans',sans-serif; } .opt-part--us{ background:var(--sage); border-color:var(--sage); color:#ffffff; } .opt-plus{ color:#000000; font:500 var(--ui)/1 'Work Sans',sans-serif; } .opt-note{ color:#000000; text-wrap:pretty; max-width:34ch; } .opt .explore-link{ margin-top:clamp(26px,3vh,36px); } /* ---- the narrow band ---- */ .band{ padding:clamp(44px,6vh,72px) clamp(20px,4vw,44px); background:#ffffff; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); } .band-inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; } .band h2{ margin:0 auto clamp(14px,1.8vh,20px); color:#000000; text-wrap:balance; max-width:26ch; } .band-copy{ color:#000000; text-wrap:pretty; } .band .explore-link{ margin-top:clamp(20px,2.6vh,30px); } /* ---- one small callout, deliberately not a second service menu ---- */ .callout{ padding:clamp(72px,10vh,124px) clamp(20px,4vw,44px); background:#ffffff; } .callout-box{ max-width:760px; margin:0 auto; border:1px solid var(--line-strong); padding:clamp(30px,3.4vw,46px) clamp(24px,2.8vw,40px); display:flex; flex-direction:column; align-items:center; text-align:center; } .callout-h{ margin:0 0 clamp(14px,1.8vh,20px); color:#000000; text-wrap:balance; } .callout-copy{ color:#000000; text-wrap:pretty; } .callout .explore-link{ margin-top:clamp(22px,2.8vh,32px); } /* ---- the plans table ---- The one genuinely new component on these pages, and it is built out of the hairlines the rest of the site already uses: --line between rows, --line down the column gutters, --line-strong closing the rail. No fills, no zebra striping, no rounded plan cards. */ .plans{ padding:0 0 clamp(56px,8vh,88px); background:#ffffff; } .plans-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; } .plans h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .plans-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } /* the table scrolls INSIDE its rail rather than pushing the page sideways — the a11y rule is no horizontal overflow on the document, not no scrolling container */ .plans-scroll{ max-width:1240px; margin:0 auto; overflow-x:auto; } .plans-table{ width:100%; min-width:720px; border-collapse:collapse; text-align:left; } .plans-table th, .plans-table td{ padding:14px clamp(12px,1.4vw,20px); vertical-align:top; color:#000000; } .plans-table thead th{ border-bottom:1px solid var(--line-strong); } .plans-table tbody tr + tr th, .plans-table tbody tr + tr td{ border-top:1px solid var(--line); } .plans-table th[scope=row]{ font:400 var(--ui)/1.45 'Work Sans',sans-serif; width:30%; } .plans-table td{ font:400 var(--ui)/1.45 'Work Sans',sans-serif; } .plans-table td + td, .plans-table th + th, .plans-table th + td{ border-left:1px solid var(--line); } /* the row people came for */ .plans-price th, .plans-price td{ border-top:1px solid var(--line-strong) !important; padding-top:20px; padding-bottom:20px; } .plans-price td{ font:600 clamp(19px,.7vw + .9vh,25px)/1.25 'Work Sans',sans-serif; letter-spacing:-.012em; } /* no font-size: a tick is not its own type step. It inherits the cell's C2 size. Writing 1.15x here resolved to 17.87px — an eighth size on the page. */ .tick{ line-height:1; } .tick--no{ color:#000000; opacity:.35; } .plans-foot{ max-width:1240px; margin:0 auto; padding:clamp(28px,3.6vh,40px) clamp(20px,4vw,44px) 0; text-align:center; } /* ---- what accounting includes ---- */ .incl{ padding:clamp(72px,10vh,124px) clamp(20px,4vw,44px); background:#ffffff; } .incl-inner{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; } .incl h2{ margin:0 auto clamp(16px,2vh,24px); color:#000000; text-wrap:balance; max-width:26ch; } .incl-lede{ margin:0 auto clamp(26px,3.2vh,38px); color:#000000; } .incl-list{ list-style:none; margin:0; padding:0; width:100%; max-width:940px; display:grid; grid-template-columns:1fr 1fr; gap:14px clamp(24px,3vw,44px); text-align:left; } .incl-list li{ position:relative; padding-left:28px; color:#000000; text-wrap:pretty; } /* black, not sage. §3: every glyph is #000 outside the two inverted grounds, and a tick is a glyph. --sage stays on the button, the rails and the CTA ground; it does not leak into type just because it would look nice. */ .incl-list li::before{ content:'\2713'; position:absolute; left:0; top:0; color:#000000; line-height:1.6; } .incl-note{ margin-top:clamp(26px,3.2vh,38px); max-width:62ch; color:#000000; text-wrap:pretty; } /* ---- chips: what moves the price, and what we plug into ---- Not clickable, so not a button. Outline + 999px, both already in the set. */ .chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .chip{ display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong); color:#000000; font:500 var(--ui)/1.2 'Work Sans',sans-serif; } .cx{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } .cx-inner, .sys-inner{ max-width:940px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; } .cx h2, .sys h2{ margin:0 auto clamp(24px,3vh,34px); color:#000000; text-wrap:balance; max-width:26ch; } .cx-note{ margin-top:clamp(24px,3vh,34px); color:#000000; } .cx .explore-link{ margin-top:clamp(18px,2.2vh,26px); } .sys{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } .sys-note{ margin-top:clamp(24px,3vh,34px); max-width:62ch; color:#000000; text-wrap:pretty; } /* ---- Setup: a project MENU, scannable in fifteen seconds ---- Six tight cells, three across. The name leads and the explanation follows, because someone scanning is reading names, not sentences. This is the densest grid on the site and that density IS the difference between this page and /what-we-do/financial-decisions/. */ .projs{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .projs-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; } .projs h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .projs-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .projs-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .proj{ display:grid; grid-template-rows:auto 1fr; gap:10px; justify-items:start; padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px); } .proj:not(:nth-child(3n+1)){ border-left:1px solid var(--line); } .proj:nth-child(n+4){ border-top:1px solid var(--line); } .proj-name{ color:#000000; text-wrap:balance; } .proj-copy{ color:#000000; text-wrap:pretty; } /* ---- Financial Decisions: a page of the owner's own questions ---- Two across, not three, and the QUESTION is the largest thing in the cell with the formal project name demoted to a label beneath it. Someone lands here already holding the question; the job is to let them find it, not to teach them a taxonomy. */ .dqs{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .dqs-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; } .dqs h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .dqs-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .dq-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .dq{ display:grid; grid-template-rows:auto auto 1fr; gap:8px; justify-items:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .dq:nth-child(even){ border-left:1px solid var(--line); } .dq:nth-child(n+3){ border-top:1px solid var(--line); } .dq-q{ color:#000000; text-wrap:balance; } .dq-name{ color:#000000; } .dq-copy{ margin-top:6px; color:#000000; text-wrap:pretty; } /* ================= /pricing ================= The page answers one question: what might I pay, and why. Everything here is either an existing component or a thin wrapper on one. */ /* ---- the three headline signals, straight under the hero ---- */ .sigs{ padding:0 0 clamp(56px,8vh,88px); background:#ffffff; } .sigs-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .sig-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .sig + .sig{ border-left:1px solid var(--line); } .sig-link{ display:grid; gap:10px; justify-items:start; padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,30px); } .sig-link:hover{ background:rgba(0,0,0,.03); } .sig-name{ color:#000000; } .sig-price{ color:#000000; } /* ---- the two levers ---- A scale that increases to the right is the same statement the progression rail already makes: this has an order. So it IS the progression rail — .chain-track and its keyframe, unchanged. No slider, no gradient, no new device to explain. */ .lvr{ padding:0 0 clamp(56px,8vh,88px); background:#ffffff; } .lvr-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; } .lvr h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .lvr-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .lever-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .lever{ display:grid; grid-template-rows:auto 1fr auto; gap:14px; justify-items:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .lever + .lever{ border-left:1px solid var(--line); } .lever-name{ color:#000000; } .lever-copy{ color:#000000; text-wrap:pretty; } /* rail on its own row, ends beneath it. Side-by-side, a long right-hand label squeezed the rail to ~40px and it stopped reading as a scale. */ .lever-scale{ width:100%; display:grid; gap:10px; } .lever-ends{ display:flex; justify-content:space-between; gap:16px; } .lever-end{ color:#000000; } .lever-end:last-child{ text-align:right; } .lever .chain-track{ width:100%; } .lever:nth-child(2) .chain-track i{ animation-delay:1.4s; } .lvr-foot{ max-width:1240px; margin:0 auto; padding:clamp(28px,3.6vh,40px) clamp(20px,4vw,44px) 0; text-align:center; } .lvr-note{ max-width:70ch; margin:0 auto; color:#000000; text-wrap:pretty; } /* ---- example engagements: the centrepiece ---- Wide horizontal rows, not a column of cards. Facts and price on the left, what the engagement actually is on the right. The four rows are meant to be triangulated between — "more than the $1,500 one, nowhere near the $4,000 one" — which only works if they read as one continuous scale, so they share a rail and are divided by --line rather than boxed separately. */ .ex-sec{ padding:0 0 clamp(72px,10vh,124px); background:#ffffff; } .ex-head{ max-width:1240px; margin:0 auto clamp(40px,5.5vh,64px); padding:0 clamp(20px,4vw,44px); text-align:center; display:flex; flex-direction:column; align-items:center; } .ex-headcue{ display:block; margin-bottom:18px; color:#000000; } .ex-sec h2{ margin:0 auto; color:#000000; text-wrap:balance; max-width:26ch; } .ex-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } .ex-list{ margin:0 auto; padding:0; list-style:none; max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .ex{ display:grid; grid-template-columns:1fr 1fr; } .ex + .ex{ border-top:1px solid var(--line); } .ex-facts{ display:grid; gap:12px; align-content:start; justify-items:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .ex-detail{ display:grid; gap:10px; align-content:start; justify-items:start; border-left:1px solid var(--line); padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .ex-name{ color:#000000; } .ex-price{ color:#000000; } .ex-cue{ margin-top:8px; color:#000000; } .ex-focus{ color:#000000; text-wrap:pretty; } .ex-copy{ color:#000000; text-wrap:pretty; } .ex-cadence{ margin-top:6px; } /* ---- project pricing: the two-cell block, left-aligned ---- */ .opt-ways--start .opt-way{ justify-items:start; text-align:left; } .pp-lines{ list-style:none; margin:0; padding:0; display:grid; gap:12px; width:100%; } .pp-lines li{ display:grid; gap:2px; } .pp-what{ color:#000000; } .pp-price{ color:#000000; } /* ================= /how-it-works ================= Layout only again. The page's spine is the SAME dark .hiw timeline and the SAME .grt guarantee box the home page uses — reused wholesale, not restyled, so the two pages cannot tell different stories about the 90 days. */ /* ---- the field-service lens: the five stages ---- */ .lens{ padding:0 0 clamp(56px,8vh,88px); background:#ffffff; } .lens-inner{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,44px); text-align:center; display:flex; flex-direction:column; align-items:center; } .lens h2{ margin:0 auto clamp(18px,2.4vh,28px); color:#000000; text-wrap:balance; max-width:26ch; } .lens-lede{ margin:0 auto; max-width:62ch; color:#000000; text-wrap:pretty; } .lens-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } /* five across on the rail. Each stage is a question, not a paragraph, so the columns can be narrow — but five columns of 43ch is not a thing below 1240, which is why they go to two and then one. */ .stage-list{ margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); max-width:1240px; border-left:1px solid var(--line); border-right:1px solid var(--line); } .stage{ display:grid; grid-template-rows:auto 1fr; gap:12px; justify-items:start; padding:clamp(26px,2.6vw,36px) clamp(18px,1.8vw,26px); } .stage + .stage{ border-left:1px solid var(--line); } .stage-name{ color:#000000; } .stage-q{ color:#000000; text-wrap:pretty; } /* ================= how it works ================= The one dark section on the site. Two rules in DESIGN.md give way here and both are recorded as amendments there: every glyph is no longer #000 (type inverts to white on the dark ground), and this h2 is Work Sans rather than M PLUS. Ground is #14171A — near-black, deliberately not #000, which stays reserved for type. The 90-day line hands off on white; the dark opens straight on the cue, no rule between them. */ .handoff{ padding:clamp(56px,8vh,96px) clamp(20px,4vw,44px); background:#ffffff; } /* no max-width and no text-wrap:balance: the string fits one line down to ~1000px and both were forcing three cramped lines out of it */ /* Authored line breaks in a heading. Three headers use this now, so it is one rule rather than three: the spans stack above 900 and go inline below it, where the copy re-wraps to the column. **The space between the spans in the markup is load-bearing** — inline, it is the only thing keeping the two halves apart. A heading using .l should not also carry text-wrap:balance or a max-width; the breaks are the point. */ .l{ display:block; } .handoff h2{ max-width:none; margin:0 auto; color:#000000; } .hiw{ --on:#ffffff; background:var(--dark-ink); color:var(--on); padding:clamp(72px,10vh,124px) clamp(20px,4vw,44px); } .hiw-inner{ max-width:1240px; margin:0 auto; } .hiw-cue{ display:block; text-align:center; color:var(--on); } .hiw h2{ max-width:none; margin:18px auto clamp(52px,7vh,86px); color:var(--on); } /* the break is authored, not left to the wrap. Below 900 they go inline and the copy re-wraps — the space between the spans in the markup is what keeps "field" and "to" apart there, so do not remove it. */ /* The gutter is the snake's amplitude: a left-hand stop's node sits on the gutter's LEFT edge and a right-hand stop's on its RIGHT edge, so the path swings the full gutter width. Nodes on the centre line would give a straight spine with alternating cards, which is not a snake. ol for the sequence, markers off: auto-numbering renders the exact "1. 2. 3." that AI Slop Tells bans, and the month pills carry the order. */ .tl{ position:relative; display:grid; grid-template-columns:1fr clamp(80px,11vw,170px) 1fr; row-gap:clamp(52px,8vh,104px); margin:0; padding:0; list-style:none; } .tl-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } .tl-track{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:2; stroke-linecap:round; } .tl-draw{ fill:none; stroke:var(--on); stroke-width:2; stroke-linecap:round; } /* rows are pinned: auto-placement drops stop 2 into the free right-hand cell of row 1, which puts all three nodes on two rows and collapses the path */ .tl-stop{ position:relative; z-index:1; } .tl-stop:nth-child(1){ grid-row:1; } .tl-stop:nth-child(2){ grid-row:2; } .tl-stop:nth-child(3){ grid-row:3; } .tl-stop[data-side="l"]{ grid-column:1; } .tl-stop[data-side="r"]{ grid-column:3; } .tl-node{ position:absolute; top:26px; width:11px; height:11px; border-radius:50%; background:var(--dark-ink); border:2px solid var(--on); z-index:2; transform:scale(.55); opacity:.45; transition:transform .45s cubic-bezier(.16,.9,.22,1), opacity .45s linear; } .tl-stop[data-side="l"] .tl-node{ right:-5.5px; } .tl-stop[data-side="r"] .tl-node{ left:-5.5px; } .tl-stop.is-on .tl-node{ transform:none; opacity:1; } .tl-card{ opacity:.28; transform:translateY(14px); transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); } .tl-stop.is-on .tl-card{ opacity:1; transform:none; } /* the node sits on the card's inner edge, so without this the rail runs down the first character of every line */ .tl-stop[data-side="l"] .tl-card{ padding-right:26px; } .tl-stop[data-side="r"] .tl-card{ padding-left:26px; } /* pill, then the icon on its own line beneath it, then the title */ .tl-head{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:18px; } .tl-pill{ display:inline-block; white-space:nowrap; border-radius:999px; padding:9px 17px; font:500 calc(var(--ui) * 1.1)/1 'Work Sans',sans-serif; color:#000000; } .tl-pill--green{ background:var(--green-bg); border:1px solid var(--green-line); } .tl-pill--blue{ background:var(--blue-bg); border:1px solid var(--blue-line); } .tl-pill--yellow{ background:var(--yellow-bg); border:1px solid var(--yellow-line); } .tl-icon{ display:block; color:var(--on); } .tl-icon svg{ width:36px; height:36px; display:block; } .tl-title{ margin:0 0 12px; color:var(--on); font:600 clamp(19px,.7vw + .9vh,25px)/1.25 'Work Sans',sans-serif; letter-spacing:-.012em; text-wrap:balance; } .tl-copy{ margin:0; color:var(--on); font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; text-wrap:pretty; max-width:46ch; } /* ================= pricing ================= A box, like the guarantee, but split into two EQUAL cells rather than the guarantee's 1fr/2fr: these two are parallel offers, where the guarantee is one claim against its terms. Same edges as every other box on the page — --line-strong across, --line down the sides, radius 0. Each cell stacks icon, title, copy, action. The actions bottom-align because the cells stretch and each action takes margin-top:auto, the same device the who-we-serve column uses. */ .prc{ padding:clamp(72px,10vh,124px) 0; background:#ffffff; } .prc-head{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,44px); } .prc-rail{ border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:0 clamp(20px,4vw,44px); } /* no max-width, no text-wrap:balance — the .l spans author the two lines */ .prc h2{ margin:0 auto clamp(44px,6.5vh,72px); color:#000000; } /* subgrid, same device as .svc-list: icon / name / price / copy / list / action each get one shared row across both cells, so a shorter intro sentence on one side can't pull its bullets up above the other's. */ .prc-box{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto 1fr auto; align-items:stretch; border-left:1px solid var(--line); border-right:1px solid var(--line); } .prc-cell{ display:grid; grid-row:span 6; grid-template-rows:subgrid; justify-items:start; align-content:start; padding:clamp(30px,3vw,42px) clamp(24px,2.4vw,36px); } .prc-cell + .prc-cell{ border-left:1px solid var(--line); } /* blue for the ongoing offer, sage for the one-off work — the same device as the services row, where colour lives in the icon and not in a filled box */ /* icon takes the services row's own square — 46px, same margin-bottom as .svc-icon — so the two rows read as one family of tiles. */ .prc-icon{ display:block; margin-bottom:6px; color:var(--sage); } .prc-cell:nth-child(1) .prc-icon{ color:var(--ink-blue); } .prc-icon svg{ width:46px; height:46px; display:block; } /* label takes .svc-name's D-group style (folded into that shared rule above); only margin and colour stay local. */ .prc-name{ display:block; margin:0 0 10px; color:#000000; } /* price/scope line takes the B-group size .prc-name used to carry — the bolder step, now freed up for the number instead of the label. */ .prc-price{ margin:0 0 14px; color:#000000; font:600 clamp(19px,.7vw + .9vh,25px)/1.25 'Work Sans',sans-serif; letter-spacing:-.012em; text-wrap:balance; } /* 1.1x, not the guarantee's 1.4x: that size was chosen for a column two squares wide, and half a box is 550px, where it set a 36-character line — under the floor. 1.1x is the signal text's size, already in the file. */ .prc-copy{ margin:0 0 18px; color:#000000; font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; text-wrap:pretty; } .prc-list{ margin:0 0 clamp(26px,3vh,34px); padding-left:1.1em; color:#000000; font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; } .prc-list li + li{ margin-top:6px; } /* auto, with the clearance above paid by the list's margin-bottom — the two actions then sit on the same line whichever cell runs longer */ .prc-cell .btn-solid, .prc-cell .explore-link{ margin-top:auto; } /* ================= closing CTA ================= The second and last non-white ground, and the one that retires "--sage, filled button only, never a large area". White on sage measures 6.16:1 and passes AA; black on it is 3.41:1 and does not, which is why type inverts here exactly as it does on the dark block. Ground change on both sides, so this section pays its own top padding — the one-padding-per-gap rule is for two sections sharing a ground. */ .cta{ --on:#ffffff; background:var(--sage); color:var(--on); padding:clamp(72px,10vh,124px) clamp(20px,4vw,44px); } .cta-inner{ max-width:1240px; margin:0 auto; text-align:center; } /* the h2 and .cta-sub already centre themselves; the inner pages' link is inline-flex, so it needs the block to be centred for it to follow */ .cta h2{ margin:0 auto; max-width:22ch; color:var(--on); text-wrap:balance; } .cta-sub{ margin:18px auto clamp(40px,5.5vh,64px); max-width:58ch; color:var(--on); text-align:center; text-wrap:pretty; } /* The scheduler is Google's page in an iframe, so nothing inside it can be styled from here. The wrapper does the work: white ground so the embed's own background never shows a seam, 16px to match the portrait — the site's other radius for an embedded object rather than a typographic box — and overflow:hidden, without which the iframe's square corners punch straight through the rounding. Runs the full 1240 measure, so it lines up with the services row and every box above it. */ .cta-embed{ margin:0 auto; background:#ffffff; border-radius:16px; overflow:hidden; } /* Calendly injects its own iframe into .calendly-inline-widget and sizes it to the container, so the height lives on the container. */ .cta-embed .calendly-inline-widget{ height:700px; } .cta-embed iframe{ display:block; border:0; } /* ================= FAQ ================= Four tiles that do NOT touch. Every other box on the page shares its edges with its neighbour — services cells, the guarantee halves, the pricing halves — so the gap here is the whole point: four separate answers, not one object split four ways. Each tile is therefore closed on all four sides at the outer-edge weight (--line-strong), where a shared-edge cell would use --line down the join. Tiles stretch to their row so the pair in each row reads as a set. The last answer is about two and a half times the others, so its row runs taller — that trailing space is the cost of equal tiles and is preferred to ragged bottoms in a two-column grid. No padding-top: meet-Joaquin is white too and its padding-bottom is the gap. */ .faq{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } .faq-inner{ max-width:1240px; margin:0 auto; } .faq h2{ margin:0 auto clamp(44px,6.5vh,72px); color:#000000; } .faq-list{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); align-items:stretch; } .faq-item{ border:1px solid var(--line-strong); padding:clamp(28px,2.8vw,38px) clamp(24px,2.4vw,34px); } .faq-q{ margin:0 0 12px; color:#000000; font:600 clamp(19px,.7vw + .9vh,25px)/1.3 'Work Sans',sans-serif; letter-spacing:-.012em; text-wrap:balance; } .faq-a{ margin:0; color:#000000; font:400 calc(var(--ui) * 1.1)/1.6 'Work Sans',sans-serif; text-wrap:pretty; } /* ================= meet Joaquin ================= Back to white, and no centred head — this one opens on the person, so the heading sits left in the copy column rather than over the whole section. Full padding top and bottom: the one-padding-per-gap rule is for two sections sharing a ground, and the dark block above owns its own. */ /* no padding-top: pricing is white too, and its padding-bottom is already the whole gap. (It kept a top padding while the dark block was its neighbour — a ground change means both sides pay.) */ .mtg{ padding:0 clamp(20px,4vw,44px) clamp(72px,10vh,124px); background:#ffffff; } /* The photo column is sized to the photo, not to half the section: at half the measure the portrait ran ~600px against ~290px of copy and read as twice its weight. 360px caps it a quarter down from that. Both columns are content-sized and the pair is centred with justify-content, rather than the copy column taking 1fr. As 1fr the copy box ran to the right edge of the measure while the text stopped at its own cap ~200px short, so the whole section hung to the left with dead space on the right. Capping the copy column and centring the pair puts the weight in the middle without touching the left alignment of the text itself. */ .mtg-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:clamp(250px,26vw,360px) minmax(0,680px); justify-content:center; gap:clamp(40px,5vw,84px); align-items:center; } .mtg-copy{ display:flex; flex-direction:column; align-items:flex-start; } /* the one head that is not centred — this section opens on the person */ .mtg-copy h2{ margin:0; color:#000000; text-align:left; text-wrap:balance; } /* lighter than the head, and 400 rather than 300 on purpose: 300 exists for the disqualifier alone, and a second use would mean that amendment was wrong. Against a 600 head, 400 is already the lighter weight. */ /* no max-width: the column caps the measure now, and a second cap inside it would silently shorten the line again. The column is 630 rather than 560 because C1 is 1.6x: at 560 this bio set 40.6 characters, under the floor, and 630 only fixed it below 1240. 680 holds 6 lines at 47.3 characters at 1440, 1240 and 1100 alike, and the gutters stay symmetric (64/64, 44/44, 0/0). Wider inverts it — 720 drops to 5 lines at 1240 but not at 1440. */ .mtg-copy p{ margin:22px 0 0; color:#000000; text-wrap:pretty; } .mtg-copy .explore-link{ margin-top:clamp(26px,3vh,36px); } /* Capped and pushed right rather than filling the column: at the full column width the portrait runs ~700px tall and towers over three short blocks of copy. 16px is the radius that reads as deliberately rounded at this size — 8px on a 480px image is invisible. Both are in the closed set. */ .mtg-shot{ margin:0; width:100%; } .mtg-shot img{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 26%; border-radius:16px; } /* ================= footer ================= Same ground as the page and separated by a hairline, exactly as the nav is at the other end — one line, no slab of colour. The mark is the nav's own inline SVG so it inherits currentColor and never needs a second asset. */ .ft{ flex:none; background:#ffffff; border-top:1px solid var(--line); padding:clamp(48px,7vh,72px) clamp(20px,4vw,44px) clamp(28px,3vh,36px); } .ft-inner{ max-width:1240px; margin:0 auto; } .ft-top{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,3vw,60px); align-items:start; } .ft-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,2.6vw,44px); } .ft-mark{ display:block; color:#000000; } .ft-mark svg{ display:block; height:20px; width:auto; } .ft-h{ display:block; margin-bottom:16px; color:#000000; } .ft-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; } .ft-col a{ color:#000000; font:500 var(--ui)/1.35 'Work Sans',sans-serif; transition:color .18s ease; } .ft-col a:hover{ color:var(--sage); } .ft-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-top:clamp(40px,5vh,64px); padding-top:clamp(20px,2.4vh,26px); border-top:1px solid var(--line); } /* the trust bar's dot separators, same construction */ .ft-id{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:30px; flex-wrap:wrap; } .ft-id li{ position:relative; color:#000000; font:500 var(--ui)/1 'Work Sans',sans-serif; white-space:nowrap; } .ft-id li + li::before{ content:''; position:absolute; left:-16px; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:rgba(0,0,0,.4); } .ft-legal{ margin:0; color:#000000; font:500 var(--ui)/1 'Work Sans',sans-serif; } .ft-legal a{ transition:color .18s ease; } .ft-legal a:hover{ color:var(--sage); } /* Five stage columns hold to 1240 and no further: below that each is under 20 characters, which is a column of single words. Two, then one. */ @media (max-width:1240px){ /* four light cells go to two before they go to one */ .gets-list{ grid-template-columns:repeat(2,1fr); } /* six project cells do the same */ .projs-list{ grid-template-columns:repeat(2,1fr); } .proj:not(:nth-child(3n+1)){ border-left:1px solid var(--line); } .proj:nth-child(odd){ border-left:none; } .proj:nth-child(n+3){ border-top:1px solid var(--line); } .get:nth-child(odd){ border-left:none; } .get:nth-child(n+3){ border-top:1px solid var(--line); } .stage-list{ grid-template-columns:repeat(2,1fr); } .stage + .stage{ border-left:1px solid var(--line); } .stage:nth-child(odd){ border-left:none; } .stage:nth-child(n+3){ border-top:1px solid var(--line); } } @media (max-width:900px){ /* the dot separators are absolutely positioned; once the row wraps they orphan onto the next line, so the gap does the separating instead */ .trust-list{ gap:8px 26px; } .trust-list li + li::before{ display:none; } .svc-list{ grid-template-columns:1fr; } .svc-item + .svc-item{ border-left:none; border-top:1px solid var(--line); } .grt-box{ grid-template-columns:1fr; } .grt-terms{ border-left:none; border-top:1px solid var(--line); } /* 1.4x --ui sets a 57ch measure across two squares; in a stacked 300px column it sets a 31ch one, which is below the floor. The terms drop back to the body size here, where they measure the same 43ch as .svc-desc. */ .stage-list{ grid-template-columns:1fr; } .stage + .stage{ border-left:none; border-top:1px solid var(--line); } .why-list{ grid-template-columns:1fr; } .why-item + .why-item{ border-left:none; border-top:1px solid var(--line); } /* the 2x2 stacks like every other tile block; at 390 two columns are 174px, which is under the measure floor for a paragraph */ .sig-list{ grid-template-columns:1fr; } .sig + .sig{ border-left:none; border-top:1px solid var(--line); } .lever-list{ grid-template-columns:1fr; } .lever + .lever{ border-left:none; border-top:1px solid var(--line); } .ex{ grid-template-columns:1fr; } .ex-detail{ border-left:none; border-top:1px solid var(--line); } .projs-list{ grid-template-columns:1fr; } .proj:not(:nth-child(3n+1)){ border-left:none; } .proj + .proj{ border-top:1px solid var(--line); } .dq-list{ grid-template-columns:1fr; } .dq:nth-child(even){ border-left:none; } .dq + .dq{ border-top:1px solid var(--line); } .gets-list{ grid-template-columns:1fr; } .get + .get{ border-left:none; border-top:1px solid var(--line); } .eng-list{ grid-template-columns:1fr; } .eng-item + .eng-item{ border-left:none; border-top:1px solid var(--line); } .opt-ways{ grid-template-columns:1fr; } .opt-way + .opt-way{ border-left:none; border-top:1px solid var(--line); } .incl-list{ grid-template-columns:1fr; } .quad-list{ grid-template-columns:1fr; } .quad-item:nth-child(even){ border-left:none; } .quad-item + .quad-item{ border-top:1px solid var(--line); } /* one rail down the left; a snake has nowhere to swing in a single column */ .l{ display:inline; } .tl{ grid-template-columns:30px 1fr; row-gap:clamp(38px,5vh,56px); } .tl-stop[data-side="l"], .tl-stop[data-side="r"]{ grid-column:2; } .tl-stop[data-side="l"] .tl-node, .tl-stop[data-side="r"] .tl-node{ left:-30px; right:auto; } .tl-stop[data-side="l"] .tl-card, .tl-stop[data-side="r"] .tl-card{ padding:0; } .tl-head{ gap:12px; margin-bottom:14px; } .tl-copy{ max-width:none; } /* stacked, and the photo already leads in the DOM. Capped: allowed to fill a 700px column the portrait runs ~805px tall, which is most of a phone screen of scroll for one image. */ .prc-box{ grid-template-columns:1fr; } .prc-cell + .prc-cell{ border-left:none; border-top:1px solid var(--line); } /* full-width cell plus the body size runs ~72 characters around 700px */ .prc-copy{ max-width:560px; } /* Labels drop to the interface step on mobile — at 1.1x of a 14px --ui the tracked caps ran wider than a 390px column in three places. */ .hero-q, .trust-stat, .svc-name, .why-name, .hiw-cue, .ft-h, .prc-name, .quad-name, .chain-name, .stage-name, .eng-cue, .eng-name, .plans-table th[scope=col], .dq-name, .sig-name, .ex-name, .ex-cue, .ex-headcue, .lever-end{ font-size:var(--ui); } .cta-embed .calendly-inline-widget{ height:760px; } /* the mark takes its own row, the four columns pair up beneath it */ .ft-top{ grid-template-columns:1fr; } .ft-mark{ margin-bottom:8px; } .ft-cols{ grid-template-columns:1fr 1fr; gap:30px 24px; } .ft-bottom{ flex-direction:column; align-items:flex-start; } .faq-list{ grid-template-columns:1fr; } /* one full-width tile at the body size runs ~76 characters around 700px */ .faq-a{ max-width:520px; } .mtg-inner{ grid-template-columns:1fr; justify-content:normal; gap:clamp(30px,4vh,42px); } .mtg-shot{ max-width:340px; } .mtg-copy p{ max-width:none; } /* ---- the groups step down together below 900 ---- Each of these was a per-element font-size before the groups existed, and the coverage had gone ragged: C1 sat at var(--ui) in three places and 1.25x in one, while three C2 members had no mobile rule at all and stayed on the desktop 1.1x — so the section thesis was rendering SMALLER than the item copy beside it. One rule per group, same two steps as desktop. */ /* A — the heads share the claim's mobile clamp. Without this an h2 rendered larger than the h1 at every width below 900. */ .svc h2, .grt h2, .why h2, .handoff h2, .hiw h2, .prc h2, .faq h2, .cta h2, .mtg-copy h2, .quad h2, .bridge h2, .lens h2, .gets h2, .eng h2, .opt h2, .band h2, .plans h2, .incl h2, .cx h2, .sys h2, .callout-h, .projs h2, .dqs h2, .lvr h2, .ex-sec h2{ font-size:clamp(28px,7vw,36px); } /* C1 — 1.6x of a 14px --ui in a ~300px column sets ~31 characters, under the floor. One step down holds the measure. */ .why-lede, .grt-copy, .mtg-copy p, .cta-sub, .hero-center .phero-lede, .bridge-lede, .lens-lede, .eng-lede, .opt-lede, .incl-lede{ font-size:calc(var(--ui) * 1.25); } /* C2 */ .hero-center p, .svc-desc, .tl-copy, .prc-copy, .faq-a, .why-desc, .why-qs, .quad-copy, .bridge-copy, .stage-q, .get-copy, .eng-copy, .band-copy, .callout-copy, .incl-note, .cx-note, .sys-note, .opt-note, .eng-meta li, .plans-table td, .plans-table th[scope=row], .incl-list li, .chip, .proj-copy, .dq-copy, .lever-copy, .ex-focus, .ex-copy, .lvr-note, .pp-what{ font-size:var(--ui); } } /* ---- toggle bar ---- */