/* SKG Financial
Editorial system built around the serif wordmark and the heritage crest.
Brand: green #186340, ink #2E2E2E. Paper tones are derived, not invented. */
@font-face{font-family:'Lora';src:url('/assets/fonts/lora-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Lora';src:url('/assets/fonts/lora-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Lora';src:url('/assets/fonts/lora-latin-400-italic.woff2') format('woff2');font-weight:400;font-display:swap;font-style:italic}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
/* The monospace is for figures only: the numerals on the lane cards, the
checkpoint and step counters, the table-of-contents numbers and inline code.
Words used to be set in it too, wide-letterspaced and in caps, which the
owners read as robotic and slow. Labels made of words belong in the sans. */
@font-face{font-family:'PlexMono';src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
:root{
--green:#186340;
--green-dk:#0d3f28;
--green-dp:#0a3421;
--green-lt:#e8efe9;
--ink:#1f221f;
--ink-2:#2E2E2E;
--body:#4a504b;
--muted:#6a706b;
--paper:#fbfaf7;
--paper-2:#f4f2ec;
--rule:#ddd8cd;
--rule-lt:#e9e5dc;
--gold:#8a6a1c;
--maxw:1180px;
--col:70ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:'Plex',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
font-size:17.5px;
line-height:1.62;
color:var(--body);
background:var(--paper);
-webkit-font-smoothing:antialiased;
font-feature-settings:"kern" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-dk)}
h1,h2{font-family:'Lora',Georgia,'Times New Roman',serif;color:var(--ink);font-weight:600;letter-spacing:-.005em;margin:0 0 .5em;line-height:1.14}
h3{font-family:'Plex',sans-serif;color:var(--ink);margin:0 0 .5em;line-height:1.14}
h1{font-size:clamp(2.05rem,4.1vw,3.3rem);line-height:1.1;letter-spacing:-.012em;font-weight:600;text-wrap:balance}
h2{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.15;font-weight:600;text-wrap:balance}
h3{font-size:1.09rem;line-height:1.35;font-weight:600;letter-spacing:-.008em}
h4{font-family:'Plex',sans-serif;font-size:.79rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 .9em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
li{margin-bottom:.55em}
li::marker{color:var(--muted)}
strong,b{color:var(--ink);font-weight:600}
em{font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;font-size:1.07em}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:var(--maxw)}
.wrap.narrow>*{max-width:74ch}
.wrap.narrow>h1{max-width:20ch}
.wrap.narrow>h2{max-width:26ch}
.narrow{max-width:760px}
section{padding:84px 0}
section.tight{padding:52px 0}
.paper2{background:var(--paper-2)}
.ruled{border-top:1px solid var(--rule)}
/* The eyebrow is set in sentence case rather than letterspaced caps. Half of
these labels are whole clauses ("Corporate tax, HST and bookkeeping",
"Worth knowing before anything else") and letterspaced caps make a sentence
slow to read, which the owners read as machine-set. Size, weight and the
green still mark it as a label without shouting. Caps are kept only for the
genuinely short tags: the breadcrumb, table headers, the HST chips, the
review date and the footer column heads.
It is set in the Lora italic, the same face as the headline it introduces, so
the two read as one unit rather than a sans tag stuck above a serif. Only the
400 italic is loaded, so the weight stays 400 and the italic plus the green
carry the emphasis. */
.eyebrow{
font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;
font-size:1.02rem;font-weight:400;line-height:1.35;
letter-spacing:.005em;color:var(--green);
margin:0 0 .8rem;display:flex;align-items:center
}
.center .eyebrow{justify-content:center}
.lede{font-size:1.16rem;line-height:1.6;color:var(--ink);font-weight:400;max-width:52ch}
.small{font-size:.905rem;line-height:1.55}
.muted{color:var(--muted)}
.center{text-align:center}
.serif{font-family:'Lora',Georgia,'Times New Roman',serif}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:300}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dark :focus-visible,.band :focus-visible,footer.site :focus-visible,.topbar :focus-visible{outline-color:#fff}
/* ---------------- header ---------------- */
.topbar{background:var(--ink);color:#b9beb8;font-family:'Plex',sans-serif;font-size:.75rem;font-weight:500;letter-spacing:.02em}
.topbar .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:36px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .tb-hide{opacity:.85}
header.site{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:22px;min-height:82px}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{height:54px;width:auto}
footer.site .logo img{height:62px}
@media (max-width:520px){.logo img{height:42px}header.site .wrap{min-height:66px}}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.main a,.has-drop>button{
font-family:'Plex',sans-serif;color:var(--ink);text-decoration:none;font-weight:500;font-size:.925rem;
padding:10px 13px;background:none;border:0;cursor:pointer;white-space:nowrap;
border-bottom:2px solid transparent;letter-spacing:.005em
}
nav.main a:hover,.has-drop>button:hover{color:var(--green);border-bottom-color:var(--green)}
nav.main a[aria-current="page"],.has-drop.active>button{color:var(--green);border-bottom-color:var(--green)}
.has-drop{position:relative}
.has-drop>button{display:flex;align-items:center;gap:6px}
.has-drop>button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop{
position:absolute;top:100%;left:-4px;min-width:320px;background:var(--paper);
border:1px solid var(--rule);box-shadow:0 20px 44px -22px rgba(20,30,22,.4);
padding:6px;display:none
}
.has-drop.open .drop,.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;padding:11px 14px;border-bottom:0;text-decoration:none}
.drop a strong{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.drop a small{display:block;color:var(--muted);font-weight:400;font-size:.83rem;line-height:1.45;margin-top:1px}
.drop a:hover{background:var(--paper-2)}
.drop a:hover strong{color:var(--green)}
.navcta{margin-left:10px}
nav.main .navcta a.btn{
background:var(--green);color:#fff;border:1px solid var(--green);border-bottom:1px solid var(--green);
padding:11px 20px;font-weight:600;font-size:.875rem
}
nav.main .navcta a.btn:hover{background:var(--green-dk);border-color:var(--green-dk);color:#fff}
/* 44x44 is the smallest reliable touch target on a phone, and the button must
not be treated as a double-tap-to-zoom candidate or the first tap is eaten. */
.burger{
margin-left:auto;display:none;width:44px;height:44px;border:1px solid var(--rule);
background:none;cursor:pointer;padding:0;place-items:center;
touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.burger span,.burger span::before,.burger span::after{
content:"";display:block;width:19px;height:1.5px;background:var(--ink);position:relative
}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
@media (max-width:1060px){
.js nav.main{display:none}
/* The panel must stop above .stickybar, which is fixed at z-index 120 and
otherwise covers the last rows of an open accordion so they cannot be
tapped. site.js sets an exact max-height on open; these are the fallbacks
for no-JS and for the moment before the first measurement. dvh keeps the
phone's collapsing URL bar out of the sum. */
nav.main{
position:absolute;top:100%;left:0;right:0;background:var(--paper);
border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
padding:10px 26px 20px;gap:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
max-height:calc(100vh - 180px);
max-height:calc(100dvh - 180px);
box-shadow:0 24px 40px -26px rgba(20,30,22,.45)
}
nav.main.open{display:flex}
nav.main a,.has-drop>button{padding:13px 2px;font-size:1.02rem;border-bottom:1px solid var(--rule-lt);width:100%;touch-action:manipulation}
.has-drop{width:100%}
.has-drop>button{justify-content:space-between;text-align:left}
/* Accordion, not a permanently expanded list. Tapping the row opens it.
Scoped to .js so that with scripting off every link is still reachable. */
.drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 10px 2px;min-width:0;background:none}
.js .has-drop .drop,.js .has-drop:hover .drop,.js .has-drop:focus-within .drop{display:none}
.js .has-drop.open .drop,.js .has-drop.open:hover .drop{display:block}
.has-drop>button::after{transition:transform .15s ease}
.has-drop.open>button::after{transform:rotate(-135deg) translateY(2px)}
.has-drop.open>button{color:var(--green)}
.drop a{border-bottom:0;padding:10px 0 10px 14px;border-left:2px solid var(--rule)}
.drop a:hover,.drop a:active{background:none;border-left-color:var(--green)}
.navcta{margin:14px 0 0}
/* Full width and a 48px tall tap target, not the small desktop pill. The
selector matches the one that sets the panel button's colours, otherwise
that rule's specificity keeps the small desktop padding. */
nav.main .navcta a.btn{width:100%;padding:15px 18px;font-size:1rem}
.burger{display:grid}
/* On a phone the top strip is only the phone number and the email, both of
which are already in the hero, in the sticky bar and in the footer. It was
36px of chrome in front of the headline, so it goes and the content starts
that much sooner. */
.topbar{display:none}
}
/* ---------------- buttons ---------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:'Plex',sans-serif;font-weight:600;font-size:.965rem;letter-spacing:.01em;
background:var(--green);color:#fff!important;text-decoration:none;
padding:15px 28px;border:1px solid var(--green);border-radius:2px;cursor:pointer;
transition:background .16s ease,border-color .16s ease;line-height:1.2
}
.btn:hover{background:var(--green-dk);border-color:var(--green-dk)}
.btn.sm{padding:10px 18px;font-size:.875rem}
.btn.lg{padding:18px 34px;font-size:1.02rem}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff!important}
.btn.white{background:#fff;color:var(--green-dk)!important;border-color:#fff}
.btn.white:hover{background:var(--paper-2)}
.btn.onlight{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.btn.onlight:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:1.9rem 0 0}
.btn-note{font-size:.865rem;color:var(--muted);margin:1rem 0 0}
/* A row of small buttons used as navigation rather than as a call to action, so
they keep sitting side by side on a phone instead of each taking a full row
the way .btn-row makes a real CTA do. */
.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0 0}
/* Post count beside a category jump link. */
.jcount{color:var(--muted);font-weight:500;margin-left:2px}
/* Proof under the hero call to action. The pages search sends people to had
none of it: no rating, no price, no reassurance, just words and a button.
This is the compact form of the homepage trust column, one row rather than
a stacked panel, so it costs about 50px rather than 150px. */
.tstrip{
list-style:none;display:flex;flex-wrap:wrap;gap:9px 24px;
margin:1.35rem 0 0;padding:0;font-size:.9rem;color:var(--muted)
}
.tstrip li{display:flex;align-items:center;gap:8px}
.tstrip b{color:var(--ink);font-weight:600}
.tstrip .ico{width:17px;height:17px;color:var(--green);flex:0 0 auto}
.tstrip a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.tstrip a:hover{border-bottom-color:var(--green)}
@media (max-width:600px){.tstrip{gap:7px 18px;font-size:.86rem;margin-top:1.15rem}}
/* The mid-page call to action. Quieter than the green band that closes a page
so the two do not compete, but it is a real stop rather than a link. */
/* The band had padding:0 and relied on whatever the neighbouring sections
happened to leave, which measured as exactly zero either side: the card's
edges sat flush on the section boundaries, so the gap above and below came
only from the neighbours and never matched. It carries about half a
section's rhythm of its own now, so it is spaced the same wherever the
inserter drops it. */
/* The band declares the page ground rather than inheriting it. A neighbour's
own padding is that neighbour's colour, so without this the clear space
above and below the card depended on what the inserter happened to land
next to and never matched. */
.cta-mid{background:var(--paper);padding:42px 0}
/* The card was --paper-2, the same colour as a paper2 section. Sitting flush
under one, its top edge dissolved into the section above. The pale green is
distinct from both the white and the warm paper grounds it lands on, and it
reads as something to act on without competing with the green band that
closes a page. */
.cmid{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;
background:var(--green-lt);border:1px solid #cfe0d5;border-radius:14px;padding:26px 28px
}
.cmid-h{font-family:'Lora',Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:600;
line-height:1.3;color:var(--ink);margin:0 0 .25em}
.cmid-s{font-size:.94rem;color:var(--muted);margin:0;max-width:56ch}
.cmid .btn{flex:0 0 auto}
.cmid-inline{margin:2.6rem 0}
.prose .cmid-h{margin:0 0 .25em}
.prose .cmid-s{margin:0}
@media (max-width:980px){.cta-mid{padding:30px 0}}
@media (max-width:760px){
.cmid{padding:20px;gap:16px}
.cmid-h{font-size:1.15rem}
.cmid-s{font-size:.9rem}
.cmid .btn{width:100%}
}
@media (max-width:600px){main section.cta-mid{padding-top:20px;padding-bottom:20px}}
@media (max-width:760px){.pillrow .btn{flex:0 1 auto;padding:10px 15px;font-size:.86rem}}
/* arrow link */
.arrow{
font-family:'Plex',sans-serif;font-weight:600;font-size:.94rem;text-decoration:none;
border-bottom:1px solid currentColor;padding-bottom:2px;display:inline-block;
touch-action:manipulation
}
/* Same reason as .go: 25px is too small to hit reliably with a thumb. */
@media (max-width:1060px){
.arrow{padding-top:9px;padding-bottom:4px}
}
.arrow::after{content:" →"}
.arrow:hover{border-bottom-color:transparent}
/* ---------------- hero ---------------- */
.hero{padding:96px 0 78px;background:var(--paper);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero h1{max-width:17ch;margin-bottom:.42em}
.hero .lede{max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:0;align-items:stretch}
.hero-grid>div:first-child{padding-right:64px}
.hero-grid>aside{border-left:1px solid var(--rule);padding-left:44px}
@media (max-width:980px){
.hero{padding:52px 0 46px}
.hero-grid{grid-template-columns:1fr;gap:44px}
.hero-grid>div:first-child{padding-right:0}
.hero-grid>aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:36px}
}
.hero .crest{
position:absolute;right:-130px;bottom:-150px;width:440px;opacity:.028;pointer-events:none;
filter:grayscale(1)
}
@media (max-width:980px){.hero .crest{display:none}}
/* stat strip */
.strip{border-top:1px solid var(--rule);margin-top:38px;padding-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 26px;align-items:start}
.strip div{font-size:.82rem;line-height:1.4;color:var(--muted)}
.strip b{display:block;font-family:'Lora',Georgia,'Times New Roman',serif;font-size:1.32rem;color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin-bottom:3px}
.strip b.stars{font-family:'Plex',sans-serif;font-size:.92rem;letter-spacing:1.5px;color:#936d18}
.stars{color:#936d18;letter-spacing:2px;font-size:.95rem}
.rating{text-decoration:none;font-weight:600;color:var(--ink)}
.rating b{color:#936d18;letter-spacing:2px}
.rating:hover{color:var(--green)}
/* ---------------- lanes (replaces card grid) ---------------- */
.lanes{display:grid;gap:0}
.lane{
border-top:1px solid var(--rule);padding:34px 0 30px;
display:grid;grid-template-columns:64px 1fr;gap:24px;text-decoration:none;color:inherit
}
.lane:last-child{border-bottom:1px solid var(--rule)}
.lane .num{
font-family:'PlexMono',monospace;font-size:.78rem;color:var(--green);letter-spacing:.1em;
padding-top:6px
}
.lane h3{font-size:1.34rem;line-height:1.25;margin-bottom:.35em;transition:color .15s ease}
.lane p{margin-bottom:.7em;max-width:var(--col)}
.small{max-width:var(--col)}
a.lane:hover h3{color:var(--green)}
a.lane:hover .go{border-bottom-color:transparent}
.go{
font-weight:600;font-size:.92rem;color:var(--green);border-bottom:1px solid currentColor;
padding-bottom:2px;display:inline-block;margin-top:4px;touch-action:manipulation
}
/* On a phone these sat at 25px tall, which is a fiddly thumb target. The extra
padding is on the block box only, so the underline stays tight to the text. */
@media (max-width:1060px){
.go{padding-top:9px;padding-bottom:4px;margin-top:2px}
}
.go::after{content:" →"}
@media (max-width:600px){.lane{grid-template-columns:1fr;gap:8px}.lane .num{padding-top:0}}
/* Grid items default to min-width:auto, so a wide table stops the column
shrinking and the whole page scrolls sideways on mobile. */
.split>*,.cols>*,.feature>*,.feature-body>*,.hero-grid>*,.band-grid>*,.fgrid>*{min-width:0}
/* ---------------- editorial columns ---------------- */
.cols{display:grid;gap:0 56px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.c3{grid-template-columns:repeat(2,1fr);gap:0 40px}}
@media (max-width:660px){.c2,.c3{grid-template-columns:1fr}}
.item{border-top:2px solid var(--ink);padding:22px 0 32px}
.item.green{border-top-color:var(--green)}
.item h3{font-size:1.34rem;line-height:1.25;margin-bottom:.45em}
.item p:last-child{margin-bottom:0}
/* The sub-lines that sit under a heading take the same Lora italic as the
eyebrow, so a label above a heading and a label below one match. */
.kicker{
font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;
font-size:.97rem;font-weight:400;letter-spacing:.005em;line-height:1.4;
color:var(--muted);display:block;margin-bottom:9px
}
.priceblock.highlight .kicker{color:var(--green)}
a.item{text-decoration:none;color:inherit;transition:border-color .15s ease}
a.item:hover{border-top-color:var(--green)}
a.item:hover h3{color:var(--green)}
/* split: heading left, content right */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 72px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.split-sticky{position:sticky;top:110px}
@media (max-width:900px){.split-sticky{position:static}}
/* ---------------- feature block (dark) ---------------- */
.dark{background:var(--green-dp);color:#c6d9cc;border-top:1px solid var(--green-dp)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#a9d6bd}
.dark .kicker{color:#a9d6bd}
.dark .lede{color:#dcebe1}
.dark .muted{color:#9ab5a4}
.dark a{color:#fff}
.dark .item{border-top-color:rgba(255,255,255,.3)}
.dark .lane{border-color:rgba(255,255,255,.16)}
.dark .go{color:#fff}
.dark strong,.dark b{color:#fff}
.dark .btn-note{color:#9ab5a4}
.dark table{background:transparent;color:#c6d9cc}
.dark .tablewrap{border-color:rgba(255,255,255,.18)}
.dark th,.dark td{border-color:rgba(255,255,255,.14)}
.dark thead th{background:rgba(0,0,0,.25);color:#fff}
.dark tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
/* feature block: asymmetric, not another 3-up */
.feature{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:0 76px;align-items:start}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:30px}}
.feature-body{display:grid;gap:44px}
.ex{border-left:1px solid rgba(255,255,255,.22);padding-left:30px}
.ex p:first-of-type{font-size:1.06rem;color:#e6f1ea}
.ex p:last-child{margin-bottom:0}
.ex .kicker{
font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;
font-size:.97rem;font-weight:400;letter-spacing:.005em;line-height:1.4;
color:#a9d6bd;display:block;margin-bottom:11px
}
@media (max-width:900px){.ex{padding-left:22px}}
/* ---------------- pull quote / notes ---------------- */
.pull{font-family:'Lora',Georgia,'Times New Roman',serif;
background:#fff;border:1px solid rgba(31,34,31,.10);border-radius:14px;
padding:26px 26px 22px;margin:0;box-shadow:0 1px 2px rgba(31,34,31,.04);
display:flex;flex-direction:column
}
.pull>p{flex:1 0 auto}
.cols.rail{gap:20px}
.pull cite{display:block;font-family:'Plex',sans-serif;font-size:.85rem;font-style:normal;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.note{border:1px solid var(--rule);border-left:2px solid var(--green);background:var(--paper-2);padding:26px 28px}
.note>:last-child{margin-bottom:0}
.callout{border:1px solid #e0d4ae;border-left:2px solid #b8901f;background:#fdfaf1;padding:30px 32px}
.callout h3{color:#6b5210;margin-top:0}
.callout>:last-child{margin-bottom:0}
/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.945rem;background:transparent}
th,td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--rule-lt);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
thead th{
font-family:'Plex',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.085em;
text-transform:uppercase;color:var(--muted);padding-top:14px;padding-bottom:12px;
border-bottom:1px solid var(--rule)
}
tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
table{font-size:.9rem}
th,td{padding:13px 14px 13px 0}
/* two-column tables have room to wrap, so drop the scroll entirely */
table.wrap2{min-width:0}
table.wrap2 th,table.wrap2 td{padding-right:10px}
/* Anything still scrolling gets a fade that stays pinned to the viewport
edge instead of scrolling away with the content. */
.tablewrap{position:relative;overflow-x:auto}
.tablewrap>table{min-width:470px}
.tablewrap>table.wrap2{min-width:0}
.fadewrap{position:relative}
.fadewrap::after{
content:"";position:absolute;top:0;right:0;bottom:0;width:30px;pointer-events:none;
background:linear-gradient(to right,rgba(251,250,247,0),var(--paper))
}
}
/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--rule);margin-top:8px}
.faq details,.rfold{border-bottom:1px solid var(--rule)}
/* The reference page is nine sections of tables with a prose explainer between
each, and those ran 45 to 125 words apiece, which turned a lookup page into
thirty-nine phone screens of reading. The explainers are collapsed now and
borrow the FAQ accordion so there is one interaction to learn, not two. The
heading stays visible as the summary, so the page still scans as a list of
what it covers, and collapsed text is still indexed. */
.rfolds{margin-top:30px;border-top:1px solid var(--rule)}
.rfold-body{padding-bottom:8px}
.rfold-body>:last-child{margin-bottom:18px}
/* Thirty-six screens of rate tables, and the jump links are all at the top.
Every section ends with a way back to them. */
.totop{margin:26px 0 0;font-size:.86rem}
.totop a{color:var(--green);text-decoration:none;font-weight:600}
.totop a::before{content:"\2191";margin-right:6px}
.totop a:hover{text-decoration:underline}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The display serif was unreadable here at 17px back when it was a Didone, so
FAQ questions moved to the sans and stayed there: at that size a heavier sans
reads at a glance, whatever the display face is. */
.faq summary,.rfold summary{font-family:'Plex',sans-serif;
font-size:1.045rem;font-weight:600;line-height:1.4;letter-spacing:-.006em;color:var(--ink);
cursor:pointer;padding:21px 44px 21px 0;list-style:none;position:relative;
}
.faq details[open] summary,.rfold[open] summary{color:var(--green)}
.faq summary::-webkit-details-marker,.rfold summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after,.rfold summary::before,.rfold summary::after{
content:"";position:absolute;right:4px;background:var(--green);transition:transform .2s ease,opacity .2s ease
}
.faq summary::before,.rfold summary::before{top:33px;width:13px;height:1.5px}
.faq summary::after,.rfold summary::after{top:27px;right:9.75px;width:1.5px;height:13px}
.faq details[open] summary::after,.rfold[open] summary::after{opacity:0;transform:rotate(90deg)}
.faq summary:hover{color:var(--green)}
.faq .answer{padding:0 0 24px;max-width:var(--col)}
.faq .answer>:last-child{margin-bottom:0}
/* ---------------- steps ---------------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{
counter-increment:s;padding:24px 0 24px 74px;position:relative;margin:0;
border-top:1px solid var(--rule)
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{
content:counter(s,decimal-leading-zero);position:absolute;left:0;top:24px;
font-family:'PlexMono',monospace;font-size:.82rem;color:var(--green);letter-spacing:.08em
}
.steps li strong{display:block;color:var(--ink);margin-bottom:2px;font-size:1.06rem}
/* ---------------- tick / cross lists ---------------- */
.ticks,.crosses{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li,.crosses li{position:relative;padding-left:30px;margin-bottom:.68em}
.ticks li::before{
content:"";position:absolute;left:2px;top:.52em;width:11px;height:6px;
border-left:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(-45deg)
}
.crosses li::before{
content:"";position:absolute;left:4px;top:.72em;width:11px;height:1.8px;background:#9b4b3f;
box-shadow:0 0 0 0 transparent;transform:rotate(45deg)
}
.crosses li::after{
content:"";position:absolute;left:4px;top:.72em;width:11px;height:1.8px;background:#9b4b3f;transform:rotate(-45deg)
}
/* ---------------- breadcrumb ---------------- */
.crumb{
font-family:'Plex',sans-serif;font-size:.74rem;font-weight:500;letter-spacing:.05em;color:var(--muted);
padding:20px 0 0;text-transform:uppercase
}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--green)}
.crumb span{margin:0 9px;opacity:.5}
/* ---------------- CTA band ---------------- */
.band{background:var(--green-dp);color:#c6d9cc;padding:88px 0}
.band h2{color:#fff;max-width:18ch;font-size:clamp(1.9rem,3.4vw,2.85rem)}
.band p{color:#c9e0d3;max-width:56ch;font-size:1.1rem}
.band .btn-note{color:#93b5a1}
.band .eyebrow{color:#a9d6bd}
.band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0 72px;align-items:end}
.band-grid>div:last-child{border-left:1px solid rgba(255,255,255,.18);padding-left:52px}
@media (max-width:860px){
.band{padding:56px 0}
.band-grid{grid-template-columns:1fr;gap:32px}
.band-grid>div:last-child{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
}
/* ---------------- tools ---------------- */
.tool{background:#fff;border:1px solid var(--rule);border-top:2px solid var(--green);padding:38px 40px;max-width:720px}
@media (max-width:600px){.tool{padding:26px 22px}}
.tool .field{margin-bottom:26px;border-bottom:1px solid var(--rule-lt);padding-bottom:26px}
.tool .field:last-of-type{border-bottom:0}
.tool label{
display:block;font-family:'Plex',sans-serif;font-weight:600;color:var(--ink);
margin-bottom:9px;font-size:1rem
}
.tool .hint{font-size:.86rem;color:var(--muted);margin:-5px 0 10px}
.tool select,.tool input[type=text],.tool input[type=email],.tool input[type=number],.tool input[type=date],.tool input[type=tel]{
display:block;width:100%;max-width:100%;min-height:50px;
padding:13px 14px;border:1px solid var(--rule);border-radius:2px;
font-family:'Plex',sans-serif;font-size:16px;line-height:1.25;
background:var(--paper);color:var(--ink);
-webkit-appearance:none;appearance:none
}
/* Safari centres the date text and shrinks the field to its content unless
both of these are set. 16px stops iOS zooming the page on focus. */
.tool input[type=date]{text-align:left}
.tool input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.tool input[type=date]::-webkit-calendar-picker-indicator{opacity:.55}
.tool select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236a706b' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:38px
}
.tool select:focus,.tool input:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
display:block;padding:10px 16px;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
font-size:.92rem;font-weight:500;color:var(--ink);background:var(--paper);transition:.13s ease;user-select:none
}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.chip span:hover{border-color:var(--green)}
.tool input,.tool select,.tool textarea{border-color:#96928b}
.result{margin-top:30px;padding:30px 0 0;border-top:2px solid var(--green);display:none}
.result.show{display:block}
.result h3{margin-top:0;font-family:'Plex',sans-serif;font-weight:600;letter-spacing:.004em;color:var(--muted);font-size:.86rem}
.result h3 .figure{display:block;font-family:'Lora',Georgia,'Times New Roman',serif;font-size:2.6rem;letter-spacing:-.02em;line-height:1.1;text-transform:none;color:var(--green-dk);font-weight:600;margin-top:6px}
.result .figure{font-family:'Lora',Georgia,'Times New Roman',serif;
color:var(--green-dk);letter-spacing:-.02em;line-height:1.08;margin:6px 0 6px;font-size:2.6rem
}
.result ul{margin-bottom:1.1em}
.scorebar{height:4px;background:var(--rule);margin:16px 0 20px;overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--green);transition:width .55s ease}
.checklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--rule-lt)}
.checklist input{margin-top:5px;width:17px;height:17px;accent-color:var(--green);flex:0 0 auto}
.checklist label{font-weight:400;color:var(--body);cursor:pointer}
.checklist label b{color:var(--ink);display:block;font-weight:500}
/* ---------------- HST lookup ---------------- */
.hst-filter{
font-family:'Plex',sans-serif;padding:9px 16px;border:1px solid var(--rule);border-radius:2px;
background:var(--paper);font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer
}
.hst-filter:hover{border-color:var(--green)}
.hst-filter.on{background:var(--green);border-color:var(--green);color:#fff}
.hst-list{border-top:1px solid var(--rule)}
.hst-row{border-bottom:1px solid var(--rule-lt)}
.hst-row summary{
cursor:pointer;list-style:none;padding:15px 0;display:flex;gap:14px;align-items:baseline;
justify-content:space-between
}
.hst-row summary::-webkit-details-marker{display:none}
.hst-row summary::after{content:"+";font-family:'PlexMono',monospace;color:var(--green);
font-size:1.1rem;line-height:1;flex:0 0 auto;transition:transform .2s ease}
.hst-row[open] summary::after{content:"\2212"}
.hst-name{font-weight:600;color:var(--ink);font-size:1.02rem}
.hst-row:hover .hst-name{color:var(--green)}
.hst-tag{
font-family:'Plex',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
white-space:nowrap;padding:4px 9px;border:1px solid;flex:0 0 auto
}
.hst-exempt .hst-tag{color:var(--green);border-color:#bcd6c6;background:#eef5f0}
.hst-taxable .hst-tag{color:#8c3d31;border-color:#e2c3bd;background:#fbf1ef}
.hst-depends .hst-tag{color:#7a5f12;border-color:#e4d5a8;background:#fdf8ec}
.hst-body{padding:0 0 18px;max-width:72ch}
.hst-body p{margin-bottom:.7em}
.hst-body p:last-child{margin-bottom:0}
.hst-empty{padding:26px 0}
@media (max-width:520px){
.hst-row summary{flex-direction:column;gap:8px}
.hst-tag{align-self:flex-start}
}
/* ---------------- subcontractor check ---------------- */
.se-lists{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin:20px 0}
@media (max-width:640px){.se-lists{grid-template-columns:1fr;gap:22px}}
.se-col ul{padding-left:1.1em;margin-bottom:0}
.se-h-bad{color:#8c3d31}
.se-h-ok{color:var(--green)}
.result.se-bad{border-top-color:#8c3d31}
.result.se-warn{border-top-color:#b8901f}
.result.se-ok{border-top-color:var(--green)}
/* ---------------- footer ---------------- */
footer.site{background:var(--ink);color:#a8afa9;padding:72px 0 32px;font-size:.93rem}
footer.site a{color:#dfe4e0;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site h4{color:#fff;margin-bottom:16px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px}
@media (max-width:1100px){.fgrid{grid-template-columns:1.4fr repeat(2,1fr);gap:36px}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:10px}
.fbot{
margin-top:52px;padding-top:24px;border-top:1px solid #3d423e;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-family:'Plex',sans-serif;font-size:.75rem;letter-spacing:.02em;color:#828a83
}
.disclaimer{font-size:.85rem;color:#828a83;max-width:74ch;margin-top:18px;line-height:1.6}
.fcrest{width:104px;opacity:.62;margin:0 0 20px}
/* The address, the phone and the email used to be one paragraph of
lines,
so a wrapped street line sat at the same distance as the phone and the whole
block read as five unrelated lines. The address is its own element on tighter
leading, with a gap before the two contact lines. */
.faddr{font-style:normal;color:#b8c2bc;line-height:1.5;margin:0 0 15px}
.fcontact{color:#b8c2bc;line-height:1.75;margin:0}
/* ---------------- sticky mobile bar ---------------- */
.stickybar{
position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
background:var(--paper);border-top:1px solid var(--rule);padding:9px 12px;gap:9px;
box-shadow:0 -8px 22px -14px rgba(20,30,22,.5)
}
.stickybar .btn{flex:1;padding:13px 8px;font-size:.92rem}
@media (max-width:1060px){.stickybar{display:flex}body{padding-bottom:70px}
/* The panel keeps its own booking button. The sticky bar carries one too,
but the bar is held back over the homepage hero, so opening the menu at
the top of the homepage used to leave no way to book anywhere on screen.
The panel ends well above where the bar sits, so they do not collide. */
nav.main{padding-bottom:22px}
nav.main .navcta{margin-top:16px}
}
/* ---------------- misc ---------------- */
.reviewed{
font-family:'Plex',sans-serif;font-size:.74rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin:0 0 1.6rem
}
/* The review date is relocated here from under the h1 by _move_reviewed() in
shell.py, so it sits at the foot of the content instead of taking the best
space on the page. */
.rev-foot{padding:20px 0 34px}
.rev-foot .reviewed{margin:0;font-size:.68rem;color:var(--muted)}
.postlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.postlist li{border-bottom:1px solid var(--rule-lt)}
.postlist a{font-family:'Plex',sans-serif;
font-size:1.035rem;font-weight:600;letter-spacing:-.006em;
text-decoration:none;color:var(--ink);line-height:1.4
}
.postlist a:hover{color:var(--green)}
.priceblock{border-top:2px solid var(--ink);padding:26px 0 30px;display:flex;flex-direction:column}
.priceblock .go{margin-top:auto;padding-top:18px}
.priceblock.highlight{border-top-color:var(--green)}
.priceblock .amt{font-family:'Lora',Georgia,'Times New Roman',serif;
font-size:clamp(1.42rem,1.9vw,1.72rem);color:var(--ink);font-weight:600;
letter-spacing:-.015em;line-height:1.2;margin:6px 0 2px
}
.priceblock.highlight .amt{color:var(--green-dk)}
.priceblock .per{display:block;font-size:.85rem;color:var(--muted);font-weight:400;font-family:'Plex',sans-serif;letter-spacing:.04em;margin-top:4px}
/* ---------------- post body ---------------- */
.prose>*{max-width:74ch}
.prose h2{font-size:clamp(1.55rem,2.3vw,1.85rem);margin:2.6rem 0 .6em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Plex',sans-serif;font-size:1.04rem;font-weight:600;margin:2rem 0 .5em;letter-spacing:-.005em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em}
.prose li{margin-bottom:.55em}
.prose blockquote{
border-left:2px solid var(--green);margin:2rem 0;padding:2px 0 2px 26px;
font-family:'Lora',Georgia,'Times New Roman',serif;font-size:1.28rem;line-height:1.4;color:var(--ink)
}
.prose blockquote p:last-child{margin-bottom:0}
.prose .tablewrap{margin:1.8rem 0;max-width:100%}
.prose code{
font-family:'PlexMono',monospace;font-size:.88em;background:var(--paper-2);
padding:2px 6px;border:1px solid var(--rule-lt)
}
.prose hr{margin:2.6rem 0}
/* ---------------- phone ---------------- */
@media (max-width:640px){
body{font-size:16.5px;line-height:1.58}
section{padding:52px 0}
section.tight{padding:36px 0}
.wrap{padding:0 20px}
.hero{padding:36px 0 34px}
.hero h1{max-width:none}
.lede{font-size:1.08rem;line-height:1.5}
.eyebrow{margin-bottom:.8rem}
/* stat strip reads better as a row of three than a stack */
.strip{grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:26px;padding-top:20px}
.strip b{font-size:1.14rem}
.strip div{font-size:.79rem;line-height:1.35}
/* editorial blocks: tighter, with the rule doing more work */
.item{padding:18px 0 24px}
.cols{gap:0}
.lane{padding:24px 0 22px}
.steps li{padding:20px 0 20px 60px}
.steps li::before{top:20px}
.btn{width:100%;padding:15px 20px}
.btn-row{gap:10px;margin-top:1.5rem}
.btn-row .btn{flex:1 1 100%}
.faq summary{padding:17px 34px 17px 0}
.faq summary::before{top:29px}
.faq summary::after{top:23px}
.band{padding:52px 0}
.band h2{max-width:none}
.pull{font-size:1.18rem;padding-left:20px;margin:1.8rem 0}
.tool{padding:24px 20px}
.tool .field{margin-bottom:20px;padding-bottom:20px}
.result .figure{font-size:2rem}
.priceblock{padding:20px 0 24px}
footer.site{padding:48px 0 26px}
.fbot{margin-top:34px;font-size:.68rem}
.crumb{font-size:.66rem;padding:14px 0 0}
}
@media print{header.site,footer.site,.stickybar,.band,.topbar{display:none}body{background:#fff}}
/* Blog index and hub listings: the description under each title */
.postlist li{padding:2px 0}
.postlist a{display:block;padding:16px 0 4px}
.postlist .pdesc{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;padding:0 0 16px;max-width:70ch}
/* Salary vs dividends on a phone: the fourth column is hidden and repeated as
its own row underneath, so the table fits without a sideways scroll. */
.sdnote{display:none}
@media (max-width:640px){
#sdForm .tablewrap>table{min-width:0}
#sdForm .tablewrap::after{display:none}
#sdBody td:nth-child(4),#sdForm thead th:nth-child(4){display:none}
#sdBody tr:not(.sdnote) td{border-bottom:0;padding-bottom:6px}
.sdnote{display:table-row}
.sdnote td{padding:0 0 15px;color:var(--muted);font-size:.85rem;line-height:1.5}
}
/* Tool cards sat on a different vertical axis from everything above them */
.tool{margin-left:0;margin-right:0}
/* Footer and aside column labels. These were , which skipped heading
levels on every page; they are labels, not headings. */
.fcol{font-family:'Plex',sans-serif;font-size:.79rem;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:#fff;margin:0 0 16px}
/* The compliance-only tier is a real option, positioned last and pitched
quieter than the two we actually recommend. */
.priceblock.lite{border-top-color:var(--rule)}
.priceblock.lite h3{color:var(--body)}
.priceblock.lite .amt{font-size:clamp(1.24rem,1.6vw,1.44rem);color:var(--body);font-weight:500}
.priceblock.lite .ticks li{font-size:.92rem}
.priceblock.lite .ticks li::before{opacity:.65}
/* CRA deadline checker on a phone. The third column carries a long sentence,
so it becomes its own row rather than forcing a sideways scroll. */
.dlnote{display:none}
@media (max-width:640px){
#dlForm .tablewrap>table{min-width:0}
#dlBody td:nth-child(3),#dlForm thead th:nth-child(3){display:none}
#dlForm thead th:nth-child(1),#dlBody td:nth-child(1){width:52%}
#dlBody tr:not(.dlnote) td{border-bottom:0;padding-bottom:6px}
.dlnote{display:table-row}
.dlnote td{padding:0 0 15px;color:var(--muted);font-size:.85rem;line-height:1.5}
}
/* The four checkpoints */
.ckpts{display:grid;gap:0}
.ckpt{
border-top:1px solid var(--rule);padding:26px 0 24px;
display:grid;grid-template-columns:56px 1fr;gap:20px
}
.ckpt:last-child{border-bottom:1px solid var(--rule)}
.ckpt .num{font-family:'PlexMono',monospace;font-size:.78rem;color:var(--green);letter-spacing:.1em;padding-top:5px}
.ckpt h3{font-size:1.28rem;line-height:1.25;margin-bottom:.15em}
.ckpt .kick{
font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;
font-size:.97rem;font-weight:400;letter-spacing:.005em;line-height:1.4;
color:var(--muted);margin:0 0 .5em
}
.ckpt p:last-child{margin-bottom:0;max-width:var(--col)}
@media (max-width:600px){.ckpt{grid-template-columns:1fr;gap:6px}.ckpt .num{padding-top:0}}
/* Contents list for the long reference page */
.toc{
list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:2px 40px;counter-reset:toc
}
.toc li{margin:0;border-top:1px solid var(--rule-lt);counter-increment:toc}
.toc a{
display:block;padding:11px 0 11px 30px;text-decoration:none;color:var(--ink);
font-size:.945rem;position:relative
}
.toc a::before{
content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:11px;
font-family:'PlexMono',monospace;font-size:.7rem;color:var(--green);letter-spacing:.06em
}
.toc a:hover{color:var(--green)}
@media (max-width:820px){.toc{grid-template-columns:repeat(2,1fr);gap:2px 28px}}
@media (max-width:520px){.toc{grid-template-columns:1fr}}
/* jump links must not land under the sticky header */
:target{scroll-margin-top:104px}
/* Mobile density. The homepage read as a wall of text on a phone: 17px body at a
1.58 line-height meant a three-sentence paragraph ran seven lines. Type stays at
or above 16px so nothing gets harder to read, the savings come from leading,
section padding and the gaps between stacked blocks. */
@media (max-width:600px){
main section{padding-top:26px;padding-bottom:26px}
main p,.ex p,.lede,.ckpt p,.item .small{line-height:1.45}
.ex p{font-size:16px}
.lede{font-size:16.5px}
.feature{gap:22px}
.ex{margin-bottom:18px}
h2{margin-bottom:10px}
.split{gap:20px}
.lanes{gap:14px}
.strip{gap:14px 18px}
}
/* Stacked-block density on phones. Everything below 900px stacks into one column,
so the gaps that read as breathing room on desktop turn into dead vertical space. */
@media (max-width:600px){
.lane{padding-top:12px;padding-bottom:12px}
.lane .small{margin:2px 0 4px}
.ckpts{gap:16px}
.ckpt{padding-top:12px;padding-bottom:12px}
.ckpt .kick{margin:1px 0 4px}
.hero{padding-top:22px}
.band-grid{gap:18px}
}
/* ============================================================
Phone layout. Under 760px every two-column split collapses, and the page
was left as heading, prose, hairline rule, repeat, which reads as an article
rather than a business. Three fixes: contain the blocks in cards, turn the
two repeating lists into swipeable rails, and let the bands differ in colour.
Desktop is untouched.
============================================================ */
@media (max-width:760px){
/* --- cards: blocks get an edge instead of sitting loose on the page --- */
.lane,.ckpt,.pull,.faq details{
background:#fff;border:1px solid rgba(31,34,31,.10);border-radius:14px;
box-shadow:0 1px 2px rgba(31,34,31,.04)
}
.lane,.ckpt{border-top:0;padding:18px 16px}
.lane:last-child,.ckpt:last-child{border-bottom:1px solid rgba(31,34,31,.10)}
.pull{border-left:0;padding:18px 16px;margin:0}
.faq{border-top:0;margin-top:14px}
.faq details{border-bottom:1px solid rgba(31,34,31,.10);padding:2px 16px;margin-bottom:10px}
.faq summary::before{top:35px;right:26px}
.faq summary::after{top:29px;right:31.75px}
.faq .answer{padding-bottom:18px}
/* --- rails: swipe instead of scroll past --- */
.rail{
display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
margin-inline:calc(var(--pad,20px) * -1);padding:2px var(--pad,20px) 10px;
scrollbar-width:none
}
.rail::-webkit-scrollbar{display:none}
/* Stacked, not scrolled. Three rails on one page was too much sideways motion,
so only the testimonials keep it. These are compact enough to stack cheaply. */
.lanes{display:grid;gap:10px}
.ckpts{display:grid;gap:10px}
.lanes>.lane,.ckpts>.ckpt{display:block;padding:14px 16px}
.lane h3{font-size:1.16rem;margin-bottom:.2em}
.lane p,.ckpt p{margin-bottom:.45em}
.ckpt h3{font-size:1.1rem;margin-bottom:.1em}
.ckpt .kick{margin:0 0 .4em}
.rail>.pull{flex:0 0 83%;scroll-snap-align:start}
.lane:last-child,.ckpt:last-child{border-bottom:1px solid rgba(31,34,31,.10)}
/* --- bands: colour separates the sections, not a hairline --- */
main>section{background:#fff}
main>section.paper2{background:var(--paper-2)}
main>section.hero{background:var(--paper)}
/* The call-to-action band takes the same ground as a plain section, which is
white here and the body's paper on a wide screen, so the clear space it
puts around the card never shows as a seam against its neighbours. */
main>section.cta-mid{background:#fff}
.ruled{border-top:1px solid rgba(31,34,31,.08)}
}
/* --- tool chips: six things, so a grid rather than a wrap.
Flex-wrap orphaned the sixth onto a row of its own on desktop and
staircased on mobile, because the labels are different lengths.
Equal columns line the edges up and the rows stay full. --- */
.toolbar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.toolbar-head .eyebrow{margin:0}
.toolrail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tchip{
display:flex;align-items:center;justify-content:center;text-align:center;
min-height:48px;padding:8px 16px;
border:1px solid var(--green);border-radius:999px;background:#fff;
font-family:'Plex',sans-serif;font-size:.92rem;font-weight:500;line-height:1.25;
color:var(--green);text-decoration:none;
transition:background .15s ease,color .15s ease
}
.tchip:hover{background:var(--green);color:#fff}
@media (max-width:900px){.toolrail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
.toolrail{grid-template-columns:repeat(2,1fr);gap:8px}
.tchip{min-height:52px;padding:8px 12px;font-size:.83rem;border-radius:14px}
}
@media (max-width:400px){.tchip{font-size:.79rem;padding:8px 9px}}
/* Client marks on the testimonials. Three logos from three unrelated businesses,
in red, black and red-on-black, sitting on a page built from green and ink.
Muted by default so they read as proof rather than competing with the brand,
full colour on hover and for anyone who has asked for reduced motion off. */
.pull footer{display:flex;align-items:center;gap:12px;margin-top:14px}
.clogo{
height:30px;width:auto;flex:0 0 auto;object-fit:contain;
filter:grayscale(1);opacity:.62;transition:filter .18s ease,opacity .18s ease
}
.pull:hover .clogo{filter:none;opacity:1}
.pull footer cite{margin-top:0}
@media (max-width:760px){.clogo{height:26px}}
/* Contrast through the middle. The page ran cream and white from the hero all the
way to the footer, with the only dark band right at the bottom. The checkpoints
now carry a full dark green band mid-page and the tools sit on the soft green,
so the sequence reads cream, white, soft green, dark green, cream, white, dark. */
.tint{background:var(--green-lt)}
.dark .ckpt{border-top-color:rgba(255,255,255,.16)}
.dark .ckpt:last-child{border-bottom-color:rgba(255,255,255,.16)}
.dark .ckpt .num{color:#8fc4a5}
.dark .ckpt .kick{color:#a9d6bd}
.dark .ckpt p{color:#c6d9cc}
@media (max-width:760px){
/* cards on the dark band are tinted glass, not white, or the light text vanishes */
.dark .ckpt{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.dark .ckpt:last-child{border-color:rgba(255,255,255,.16)}
main>section.tint{background:var(--green-lt)}
main>section.dark{background:var(--green-dp)}
}
/* Disclaimer inside a tool result. The footer and the notes below each tool already
carry the site-wide wording, but neither is on screen at the moment someone reads
a number off a calculator, which is the moment it matters. */
.toolnote{
font-size:.83rem;line-height:1.5;color:var(--muted);
border-left:2px solid var(--rule);padding:2px 0 2px 12px;margin:18px 0 14px
}
.dark .toolnote{color:#9ab5a4;border-left-color:rgba(255,255,255,.22)}
/* ============================================================
v8.0, direction B. Deep green header and homepage hero, a card system for
the blocks that were hairline rows, brand line icons (src/icons.py), a
timeline for the checkpoints. Copy, section order and type sizes unchanged.
============================================================ */
/* ---- icons ---- */
.ico{display:block;width:1em;height:1em}
.itile{
display:inline-grid;place-items:center;flex:0 0 auto;
width:44px;height:44px;border-radius:10px;background:var(--green-lt);color:var(--green)
}
.itile .ico{width:24px;height:24px}
.itile.sm{width:34px;height:34px;border-radius:8px}
.itile.sm .ico{width:19px;height:19px}
.itile.gold{color:#936d18;background:#f6efdc}
.dark .itile,.band .itile,.hero-dark .itile{background:rgba(255,255,255,.10);color:#fff}
.hero-dark .itile.gold{color:#e6c46a}
/* ---- header: deep green, white logo ---- */
header.site{background:var(--green-dp);border-bottom:1px solid rgba(255,255,255,.08)}
nav.main a,.has-drop>button{color:#fff}
nav.main a:hover,.has-drop>button:hover{color:#fff;border-bottom-color:#8fc4a5}
nav.main a[aria-current="page"],.has-drop.active>button{color:#fff;border-bottom-color:#8fc4a5}
nav.main .navcta a.btn{background:#fff;color:var(--green-dk)!important;border-color:#fff}
nav.main .navcta a.btn:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--green-dk)!important}
.burger{border-color:rgba(255,255,255,.3)}
.burger span,.burger span::before,.burger span::after{background:#fff}
header.site :focus-visible{outline-color:#fff}
/* dropdown rows carry the icon */
.drop a{display:flex;gap:12px;align-items:flex-start}
.drop a .nico{color:var(--green);margin-top:2px;flex:0 0 auto}
.drop a .nico .ico{width:20px;height:20px}
.drop a strong{display:block}
@media (max-width:1060px){
/* the open panel is paper, so the links go back to ink inside it */
nav.main a,.has-drop>button{color:var(--ink)}
.has-drop.open>button{color:var(--green)}
nav.main a:hover,.has-drop>button:hover{color:var(--green);border-bottom-color:var(--rule-lt)}
.drop a{padding:10px 0 10px 12px}
/* The current page keeps the white it needs in the green desktop bar, and an
attribute selector outranks the reset above, so on the paper panel the one
row you are actually on was white on cream and invisible. It gets the green
and a bar down its left edge here, so "you are here" reads at a glance
rather than depending on colour alone. */
nav.main a[aria-current="page"]{
color:var(--green);border-bottom-color:var(--rule-lt);font-weight:600;
padding-left:13px;box-shadow:inset 3px 0 0 var(--green)
}
/* Inside an open dropdown the row already has a left rule, so the marker is
that rule turning green rather than a second bar. */
.drop a[aria-current="page"]{
border-left-color:var(--green);padding-left:12px;box-shadow:none;font-weight:600
}
.drop a[aria-current="page"] strong{color:var(--green)}
/* The group holding the current page is marked too, so somebody on
/contractors/ does not have to open "Who we serve" to find out where they
are. */
.has-drop.active>button{
color:var(--green);font-weight:600;padding-left:13px;
box-shadow:inset 3px 0 0 var(--green)
}
}
/* ---- homepage hero, dark ---- */
.hero-dark{background:var(--green-dp);color:#c6d9cc;border-bottom:0;padding:84px 0 150px}
.hero-dark::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 85% 10%,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.hero-dark .wrap{position:relative;z-index:1}
.hero-dark .hero-grid{grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
.hero-dark .hero-grid>div:first-child{padding-right:0}
.hero-dark .hero-grid>aside{border-left:1px solid rgba(255,255,255,.18);padding-left:36px}
.hero-dark .eyebrow{color:#a9d6bd}
.hero-dark h1{color:#fff;max-width:16ch}
.hero-dark .lede{color:#dcebe1;max-width:50ch}
/* The one sentence the homepage exists to say. It used to be the opening clause
of the lede, where it read as background rather than as the answer to the
headline above it. On its own line, larger than the lede and in full white,
the hero now reads problem, answer, then detail. */
.hero-dark .answer{
font-family:'Plex',sans-serif;font-size:1.36rem;font-weight:500;line-height:1.4;
color:#fff;margin:0 0 .8rem;max-width:44ch;text-wrap:balance
}
/* No brightness lift: this crest is an engraving and tripling its tones pushes
the fine light lines past white, which flattens the whole seal into a pale
smear. Its own tonal range plus a higher opacity is what gives it depth. */
.hero-dark .crest{opacity:.10;filter:grayscale(1);right:-120px;top:-60px;bottom:auto;width:520px}
.trust{display:grid;gap:14px}
.trust>div{display:flex;gap:14px;align-items:center;font-size:.9rem;color:#c6d9cc}
.trust b{display:block;color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.trust a{color:#fff;text-decoration:none}
.trust a:hover{text-decoration:underline}
@media (max-width:980px){
.hero-dark,main>section.hero-dark{padding:44px 0 76px;background:var(--green-dp)}
.hero-dark .hero-grid{grid-template-columns:1fr;gap:30px}
.hero-dark .answer{font-size:1.22rem;max-width:40ch}
.hero-dark .hero-grid>aside{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
/* The crest sits in the bottom right corner on a narrow screen, below the
white call-to-action and behind the trust list, where the green is flat and
nothing punches a hole through it. Anchored to the bottom rather than the
top so the seal's monogram is the part that shows rather than an anonymous
arc of the outer ring. The hero is position:relative with overflow:hidden,
so the negative offsets crop it rather than widening the page. */
/* No brightness lift here. The desktop rule multiplies the crest's tones by
three, which blows its light engraving lines out to flat white and leaves a
washed smudge. Keeping the natural tonal range and lifting the opacity
instead gives the seal actual depth against the green. */
.hero-dark .crest{
display:block;width:360px;right:-30px;top:auto;bottom:-42px;
opacity:.12;filter:grayscale(1)
}
}
/* ---- lanes become cards, everywhere ---- */
.lanes{display:grid;gap:12px}
.lane,.lane:last-child{
background:#fff;border:1px solid var(--rule);border-radius:12px;
padding:22px 22px 20px;grid-template-columns:44px 1fr;gap:18px;align-items:start;
box-shadow:0 1px 2px rgba(31,34,31,.04);
transition:border-color .15s ease,box-shadow .18s ease
}
.lane .itile{margin-top:1px}
a.lane:hover{border-color:var(--green);box-shadow:0 10px 26px -18px rgba(24,99,64,.45)}
a.lane:hover .itile{background:var(--green);color:#fff}
.lane h3{font-size:1.18rem}
.paper2 .lane,.tint .lane{background:#fff}
/* the homepage row that overlaps the hero */
.lanes.overlap{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-96px;position:relative;z-index:2}
.lanes.overlap .lane{display:flex;flex-direction:column;gap:10px;padding:24px 22px 20px;box-shadow:0 18px 40px -28px rgba(10,52,33,.5)}
.lanes.overlap .lane h3{margin:6px 0 0;font-size:1.12rem}
.lanes.overlap .lane p{margin:0;font-size:.9rem;color:var(--muted)}
.lanes.overlap .lane .go{margin-top:auto;font-size:.9rem}
.lanes.overlap+p{margin-top:22px}
/* ---- item blocks become cards, everywhere ---- */
.cols{gap:14px}
.cols.c3{gap:14px}
.item,.item.green{
background:#fff;border:1px solid var(--rule);border-top:1px solid var(--rule);border-radius:12px;
padding:22px 22px 22px;box-shadow:0 1px 2px rgba(31,34,31,.04)
}
.item .itile{margin-bottom:14px}
.item .itile+h3{margin-top:0}
.item h3{font-size:1.18rem}
a.item:hover{border-color:var(--green)}
.dark .item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.dark .item h3{color:#fff}
/* ---- services grid on the homepage ---- */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.svc{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--rule);border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s ease}
a.svc:hover{border-color:var(--green)}
.svc h3{font-size:1.02rem;margin:0 0 2px}
.svc p{margin:0;font-size:.9rem;color:var(--muted)}
.tcell{display:flex;align-items:center;gap:12px}
.tcell .ico{width:22px;height:22px;color:var(--green);flex:0 0 auto}
/* ---- tool chips carry their icon ---- */
.tchip{gap:10px;justify-content:flex-start;text-align:left;padding:8px 16px 8px 12px}
.tchip .ico{width:22px;height:22px;flex:0 0 auto}
.toolband{padding:40px 0}
.toolband .toolrail{display:flex;flex-wrap:wrap;gap:10px}
.toolband .tchip{white-space:nowrap}
.toolband .tchip{min-height:44px}
/* ---- checkpoints as a timeline ---- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--rule)}
.tl{position:relative;padding-top:56px}
.tl .dot{
position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
display:grid;place-items:center;font-family:'Lora',Georgia,'Times New Roman',serif;font-size:1.25rem;font-weight:600
}
.tl h3{font-size:1.1rem;margin-bottom:.2em}
.tl .kick{font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;font-size:.95rem;font-weight:400;letter-spacing:.005em;line-height:1.4;color:var(--muted);margin:0 0 .45em}
.tl p:last-child{margin:0;font-size:.95rem}
.dark .timeline::before{background:rgba(255,255,255,.2)}
.dark .tl .dot{background:#fff;color:var(--green-dp)}
.dark .tl .kick{color:#a9d6bd}
/* ---- guarantee on the dark band ---- */
.guar .ggrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
.guar .g{border-top:1px solid rgba(255,255,255,.2);padding-top:22px}
.guar .g .itile{margin-bottom:14px}
.guar .g h3{color:#fff;font-size:1.25rem}
.guar .g p:last-child{margin:0}
/* ---- centred closing CTA ---- */
.cta-center{text-align:center;background:#fff}
.cta-center h2{max-width:20ch;margin:0 auto .5em}
.cta-center p{max-width:56ch;margin:0 auto}
.cta-center .btn-row{justify-content:center}
/* ---- phone ---- */
@media (max-width:980px){
/* The top row sits half on the green and half on the light section. The pull
has to be smaller than one row is tall, so the edge cuts through the first
two cards rather than between the rows, which is what made this look like
two unrelated blocks before. The hero's bottom padding carries the green
behind them and keeps a gap between the trust list and the cards. */
.lanes.overlap{grid-template-columns:1fr 1fr;gap:10px;margin-top:-35px}
.svcgrid{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr;gap:0}
.timeline::before{top:0;bottom:0;left:22px;right:auto;width:1px;height:auto}
.tl{padding:0 0 26px 64px}
.guar .ggrid{grid-template-columns:1fr;gap:22px}
.toolband .toolrail{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toolband .tchip{white-space:normal}
}
/* Between 761 and 980px the cards are still the tall stacked kind, so half of
one row is a much bigger pull than on a phone, and the hero needs more green
below it to sit behind them. */
@media (min-width:761px) and (max-width:980px){
.hero-dark,main>section.hero-dark{padding-bottom:150px}
.lanes.overlap{margin-top:-108px}
}
@media (max-width:760px){
.lane,.lanes>.lane,.ckpt,.pull,.faq details{border-radius:12px}
.lanes>.lane{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 16px 14px 14px}
.lane .itile{width:40px;height:40px;margin-top:0}
.lane .itile .ico{width:22px;height:22px}
.lane h3{font-size:1.1rem}
/* Icon beside the title rather than above it. These four cards overlap the
hero on purpose, so the top of them sits above the fold and the reader knows
to keep going, but how much shows depends on the handset's height and cannot
be pinned down. Stacked, a tall phone landed the fold exactly on the icon and
showed a symbol in a white box, which reads as a broken crop. Side by side,
whatever shows includes words. */
.lanes.overlap>.lane{
display:grid;grid-template-columns:28px 1fr;align-items:start;
column-gap:11px;row-gap:0;padding:13px 13px 15px
}
.lanes.overlap .lane .itile{width:28px;height:28px;border-radius:8px;margin-top:1px}
.lanes.overlap .lane .itile .ico{width:16px;height:16px}
.lanes.overlap .lane h3{grid-column:2;font-size:.95rem;margin:0;line-height:1.28}
.lanes.overlap .lane p{display:none}
.lanes.overlap .lane .go{grid-column:2;font-size:.82rem;margin-top:4px}
.cols>.item{padding:18px 16px;margin-bottom:0}
.cols>.item .itile{width:40px;height:40px;margin-bottom:12px}
.cols>.item h3{font-size:1.1rem}
.trust{gap:10px}
.trust>div{font-size:.84rem}
.trust .itile{width:38px;height:38px}
.tchip{justify-content:flex-start;text-align:left;min-height:56px;padding:8px 12px;gap:10px}
.tcell{gap:9px}
.tcell .ico{width:19px;height:19px}
.tl .dot{width:40px;height:40px;font-size:1.1rem}
.tl{padding-left:58px}
.timeline::before{left:20px}
}
@media (max-width:600px){
.lane{grid-template-columns:40px 1fr;gap:14px}
.hero-dark{padding-top:34px}
.hero-dark h1{font-size:2.15rem}
}
@media (hover:hover){
.tchip:hover{transform:translateY(-1px)}
.tchip{transition:transform .18s ease,background .15s ease,color .15s ease}
}
/* ============================================================
v8.0.1
1. The phone hero. The three trust points sat below the fold on a real
handset, which is the one thing the owners asked to be able to see on
landing, so the block above them gives up about 120px: tighter hero
padding, a smaller display size on the h1, the secondary phone CTA
demoted to a link (the number is also in the top bar and the sticky
bar, so it is the third copy on the page), and denser trust rows.
2. The office panel: photo, click-to-load map, address.
============================================================ */
/* ---- 1. phone hero density ---- */
@media (max-width:600px){
.hero-dark .crest{width:300px;right:-24px;bottom:-34px;opacity:.125}
/* The text column in these cards is about 104px wide at phone width, where the
keyword line wrapped to three lines and became the loudest thing in the card.
The whole card is a link, so here the icon and the title carry it. */
.lanes.overlap .lane .go{display:none}
.hero-dark,main>section.hero-dark{padding-top:26px}
.hero-dark .eyebrow{display:none}
.hero-dark h1{font-size:1.95rem;line-height:1.08;margin-bottom:.6em}
.hero-dark .answer{font-size:1.12rem;margin-bottom:.6rem}
.hero-dark .lede{font-size:16px;line-height:1.45}
.hero-dark .hero-grid{gap:24px}
.hero-dark .hero-grid>aside{padding-top:22px}
.hero-dark .btn-row{margin-top:1.6rem;gap:0}
/* The phone number is a full-width outlined button under the primary one,
which costs about 30px of height against the underlined link it replaced.
The short-handset tiers below give that back so all three trust points stay
above the fold. */
.hero-dark .btn-row{gap:9px}
.hero-dark .btn-row .btn.onlight{padding:13px 20px;font-size:1rem}
.trust{gap:12px}
.trust>div{gap:11px;font-size:.82rem}
.trust b{font-size:.93rem;line-height:1.25}
.trust .itile{width:34px;height:34px;border-radius:8px}
.trust .itile .ico{width:19px;height:19px}
}
/* Short handsets (SE, older Androids) give up a little more. */
/* The second sentence of the hero lede repeats the third trust row verbatim,
two blocks apart on a phone. It stays on desktop where they sit side by side. */
@media (max-width:600px){
.hide-phone{display:none}
.hero-dark .btn-row .btn.white{padding:15px 26px;font-size:.99rem}
.hero-dark h1{font-size:1.88rem}
}
@media (max-width:600px) and (max-height:730px){
.hero-dark,main>section.hero-dark{padding:12px 0 62px}
.hero-dark h1{font-size:1.78rem;margin-bottom:.44em}
.hero-dark .answer{font-size:1.1rem;margin-bottom:.5rem}
.hero-dark .lede{font-size:15.2px;line-height:1.34}
.hero-dark .hero-grid{gap:17px}
.hero-dark .hero-grid>aside{padding-top:16px}
.hero-dark .btn-row{margin-top:1.15rem;gap:7px}
.hero-dark .btn-row .btn.white{padding:14px 26px}
.hero-dark .btn-row .btn.onlight{padding:12px 20px}
.trust{gap:8px}
}
/* The shortest handsets still in use, an iPhone SE class screen, where the
visible area is about 553px once Safari's own bars are counted. The eyebrow
is a keyword label and the headline says the same thing better, so it is the
one piece that goes, which buys the third trust row its place on the screen. */
@media (max-width:600px) and (max-height:600px){
.hero-dark,main>section.hero-dark{padding:14px 0 62px}
.hero-dark h1{font-size:1.7rem;margin-bottom:.4em}
.hero-dark .answer{font-size:1.04rem;line-height:1.32;margin-bottom:.4rem}
/* The lede used to be hidden here because nothing else fitted. Dropping the
top strip and tightening the rest bought it back. */
.hero-dark .lede{font-size:14.4px;line-height:1.3}
.hero-dark .hero-grid{gap:12px}
.hero-dark .hero-grid>aside{padding-top:10px}
.hero-dark .btn-row{margin-top:.8rem;gap:7px}
/* Both buttons run shorter here so the phone number can stay a button on an
SE-class screen without pushing the third trust point off the fold. */
.hero-dark .btn-row .btn.white{padding:12px 24px}
.hero-dark .btn-row .btn.onlight{padding:11px 20px;font-size:.97rem}
.trust{gap:4px}
}
/* ---- 2. the office panel ---- */
.office{border-top:1px solid var(--rule)}
/* ---------------- the office panel ----------------
It sat on the pale tint, which is the same ground as half the other bands,
so "where to find us" read as one more content section. It is on the deep
green now: the photograph, the white address card and the map all read as
light objects against it, and the section becomes a deliberate stop rather
than more page.
The photograph and the map used to stack, two tall blocks one after the
other. They sit side by side under the text now, which makes the whole
section about a third shorter and reads as one unit. */
/* On /locations/ the office panel is followed straight away by the green call
to action band, and both are the same deep green, so without this the two
merge into one very long block. */
.office.dark + .band{border-top:1px solid rgba(255,255,255,.14)}
.office{overflow:hidden}
.ogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.oinfo h2{margin-bottom:.55em;max-width:22ch}
.olist{margin-bottom:0}
.olist li{font-size:.95rem}
.dark .olist li{color:#cfe0d5}
/* The tick is drawn in the brand green, which disappears on the deep green. */
.dark .ticks li::before{border-left-color:#8fc4a5;border-bottom-color:#8fc4a5}
.ocard{
background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:14px;
padding:22px;box-shadow:0 22px 44px -34px rgba(3,20,12,.75)
}
.oaddr{
display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--ink);
line-height:1.45;margin:0
}
.oaddr b{display:block;font-family:'Lora',Georgia,serif;font-size:1.3rem;font-weight:600;
color:var(--ink);margin-bottom:2px;letter-spacing:.01em}
/* The card is white inside a dark section, so every .dark rule that assumes a
dark ground has to be undone inside it: white links and white would
both vanish. */
.dark .ocard,.dark .ocard .oaddr,.dark .ocard .oaddr b,.dark .ocard .ocontact{color:var(--ink)}
.dark .ocard .ocontact{color:var(--muted)}
.dark .ocard a{color:var(--green-dk)}
.dark .ocard .ocontact strong{color:var(--green-dk)}
.dark .ocard .btn{color:#fff!important}
.dark .ocard .btn.ghost{color:var(--ink)!important;border-color:var(--ink)}
.dark .ocard .btn.ghost:hover{background:var(--ink);color:#fff!important}
.oaddr:hover .itile{background:var(--green);color:#fff}
.dark .ocard .itile{background:var(--green-lt);color:var(--green)}
.ocontact{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--rule-lt);color:var(--muted)}
.ocard .pillrow{margin-top:16px}
.omedia{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.oframe{margin:0}
.ofr-media{
position:relative;border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;
background:var(--green-dk);aspect-ratio:3/2;box-shadow:0 22px 44px -34px rgba(3,20,12,.8)
}
.ofr-media img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
/* The address card behind the photograph only shows if the image fails to
decode, which onerror in office_html() turns into a clean fallback rather
than a broken image icon. */
/* The map is a live Google frame in the markup, so it loads with the page.
See office_html() in shell.py and the privacy policy before changing that. */
.omap{
border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;
background:var(--green-dk);aspect-ratio:3/2;box-shadow:0 22px 44px -34px rgba(3,20,12,.8)
}
.omap iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){
.ogrid{grid-template-columns:1fr;gap:26px}
.omedia{margin-top:28px}
}
@media (max-width:600px){
.ogrid{gap:22px}
.omedia{grid-template-columns:1fr;gap:16px;margin-top:24px}
.ofr-media,.omap{aspect-ratio:4/3}
.ocard{padding:18px}
.oaddr b{font-size:1.15rem}
.olist li{font-size:.9rem}
}
/* ---- 3. the sticky bar keeps out of the homepage hero ----
The bar carries Call us and Book a call. The dark hero carries both of those
already, one screen up, so at the top of the homepage the bar is a third copy
sitting on top of the trust points the owners want visible on landing. It
tucks away while the hero is on screen and slides in once you scroll past it.
Scoped to .hero-dark, which only the homepage has. */
.stickybar{transition:transform .22s ease}
.stickybar.tucked{transform:translateY(118%)}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}
/* the office frame before there is a photograph of the office in it */
.ofr-blank{
position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
align-items:center;justify-content:center;text-align:center;padding:24px;
background:linear-gradient(160deg,var(--green-lt),var(--paper-2));
color:var(--green-dk);font-weight:500;font-size:.95rem;line-height:1.4
}
.ofr-blank .itile{width:46px;height:46px}
.ofr-blank .itile .ico{width:25px;height:25px}
/* ---- 4. the desktop hero fits a small laptop ----
The four industry cards overlap the bottom of the hero, and on a 1280x640 or
1366x680 window the hero alone was taller than the visible area, so a visitor
landed on the headline and nothing else. These two steps compress the hero by
viewport height, not by width: a 1080p screen and anything taller keeps the
generous spacing it always had, and only short windows tighten up. Keyed to
min-width:981px so the phone and tablet rules above are untouched. */
@media (min-width:981px) and (max-height:820px){
.hero-dark,main>section.hero-dark{padding:56px 0 128px}
.hero-dark h1{font-size:clamp(2.05rem,3.3vw,2.95rem)}
.hero-dark .hero-grid{gap:52px}
.trust{gap:12px}
}
@media (min-width:981px) and (max-height:700px){
.hero-dark,main>section.hero-dark{padding:40px 0 112px}
.hero-dark h1{font-size:2.5rem}
.hero-dark .lede{font-size:1rem;line-height:1.5}
.hero-dark .hero-grid{gap:44px}
.hero-dark .btn-row{margin-top:1.3rem}
.trust{gap:10px}
}