/* ============================================================
MOMENTUM — StaffingSolutions.io design system (production)
Chosen direction (turn 4c/5b). Warm sand, blue #1560F0, Bricolage
Grotesque display, rounded panels. Same sg-* class API as before —
re-skins all 238 generated pages with zero structural change.
============================================================ */
/* @import removed — fonts are ed in . See scripts/prepare-assets.mjs. */
:root{
--sand:#F3EEE3; --warm:#FBF8F2; --white:#FFFFFF;
--ink:#14181F; --ink-2:#25292F;
--muted:#6E685C; --faint:#736B5A;
--blue:#1560F0; --blue-h:#0F4FD0; --blue-tint:#F4F8FF; --blue-line:#DCE8FF;
--blue-soft:#A9C6FF; --blue-lede:#DCE7FF;
--tan:#F0D9A8; --tan-ink:#6B5E3E;
--green:#177247; --green-bright:#7DE0AE;
--line:#EDE6D6; --line-strong:#DED6C6;
--display:'Bricolage Grotesque',sans-serif; --body:'Instrument Sans',system-ui,sans-serif;
--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--wrap:1316px; --pad:0px;
--r-panel:24px; --r-card:20px; --r-btn:999px;
--peach:#FBF8F2; --sage:#E2EDE6; --tile-blue:#E3ECFB; --tile-peach:#F9E4D4; --tile-lilac:#ECE3F6; --purple:#6E2D91;
/* legacy aliases so any stray var refs still resolve */
--text:#14181F; --panel:#FBF8F2; --panel-2:#F3EEE3; --bright:#1560F0; --ink-deep:#070D18;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:88px}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p a,.sg-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--blue);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* Outer frame — centres the page, guarantees a gutter, Momentum panel rhythm */
main{display:block;max-width:1380px;margin:0 auto;padding:0 32px}
.sg-wrap{padding-left:0;padding-right:0}
.sg-section{padding:76px 0}
.sg-kicker{font:700 12.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.sg-display{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02}
h1.sg-display{font-size:clamp(46px,5.4vw,72px)}
h2.sg-display{font-size:clamp(32px,3.4vw,52px);line-height:1.04}
.sg-sub{font-size:17.5px;line-height:1.6;color:var(--muted);max-width:560px}
.sg-mono-label{font:700 11.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.sg-muted{color:var(--muted)} .sg-faint{color:var(--faint)}
/* Buttons — dark on light surfaces, inverted to white on blue/dark panels */
.sg-btn{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;font:700 15.5px/1 var(--body);padding:16px 32px;border-radius:var(--r-btn);border:1.5px solid transparent;box-shadow:0 10px 24px -10px rgba(21,96,240,.5);transition:transform .18s,background .18s,box-shadow .18s;cursor:pointer}
.sg-btn:hover{background:var(--blue-h);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(21,96,240,.55)}
.sg-btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink);box-shadow:none}
.sg-btn--ghost:hover{border-color:var(--ink);background:var(--warm);box-shadow:none}
.sg-btn--lg{font-size:17px;padding:19px 38px}
.sg-btn--sm{font-size:14px;padding:12px 24px}
.sg-cta-panel .sg-btn{background:#fff;color:var(--ink);box-shadow:0 16px 32px -14px rgba(0,0,0,.35)}
.sg-cta-panel .sg-btn:hover{background:#fff;box-shadow:0 20px 38px -16px rgba(0,0,0,.4)}
.sg-cta-panel .sg-btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;box-shadow:none}
.sg-cta-panel .sg-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* ===== Nav (injected by nav.js) — light sand bar ===== */
.sg-nav{position:sticky;top:0;z-index:50;background:rgba(243,238,227,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sg-nav-inner{max-width:1380px;margin:0 auto;padding:0 32px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.sg-nav-logo{flex:0 0 auto;min-width:150px}
.sg-nav-logo img{height:32px}
.sg-nav-links{display:flex;align-items:center;gap:2px}
.sg-nav-links>.sg-menu{position:relative}
.sg-nav-links a.sg-top{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--body);color:var(--ink);padding:12px 13px;border-radius:8px;transition:color .15s}
.sg-nav-links a.sg-top:hover,.sg-menu:hover a.sg-top{color:var(--blue)}
.sg-nav-links a.sg-top.sg-accent{color:var(--blue)}
/* ===== Mega menu (ported from approved Momentum homepage) ===== */
.mm-item{position:static}
.mm-trigger,.mm-link{display:inline-flex;align-items:center;gap:6px;height:74px;padding:0 13px;cursor:pointer;color:var(--ink);text-decoration:none;font:700 14px var(--body);transition:color .15s}
.mm-trigger:hover,.mm-link:hover,.mm-item:hover .mm-trigger{color:var(--blue)}
.mm-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.45;transition:transform .2s,opacity .2s}
.mm-item:hover .mm-caret{transform:rotate(-135deg);margin-top:2px;opacity:.9}
.mm-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;background:#FFFDF9;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -24px rgba(20,24,31,.4);padding:28px 32px;z-index:60}
.mm-item:hover .mm-panel,.mm-item:focus-within .mm-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mm-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mm-colh{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.mm-sys{display:flex;flex-direction:column;gap:1px;padding:9px 12px;margin:0 -12px;border-radius:11px;text-decoration:none;transition:background .15s}
.mm-sys:hover{background:var(--peach)}
.mm-sys b{font:700 14px var(--display);letter-spacing:-.01em;color:var(--ink)}
.mm-sys span{font:400 12px var(--body);color:var(--muted)}
.mm-colh a{color:inherit;text-decoration:none}
.mm-colh a:hover{color:var(--blue)}
.mm-ri{display:block;padding:7px 10px;margin:0 -10px;border-radius:9px;text-decoration:none;color:var(--ink);font:700 14px var(--display);letter-spacing:-.01em;transition:background .12s,color .12s}
.mm-ri:hover{background:var(--peach);color:var(--blue)}
.sg-nav-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.sg-nav-right .sg-btn--sm{white-space:nowrap;flex:0 0 auto}
.sg-nav-contact{white-space:nowrap;flex:0 0 auto}
.sg-nav-jobs{font:600 12px var(--body);color:var(--faint)}
.sg-nav-jobs:hover{color:var(--muted)}
.sg-nav-contact{font:700 14px var(--body);color:var(--ink);padding:0 4px}
.sg-nav-contact:hover{color:var(--blue);opacity:1}
/* ===== Utility bar (shared, above nav) ===== */
.sg-util{background:var(--ink);color:#B9BEC8;font:500 12.5px var(--body)}
.sg-util-in{max-width:1380px;margin:0 auto;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sg-util-l,.sg-util-r{display:flex;align-items:center;gap:12px}
.sg-util a{color:#D6DAE2}
.sg-util a:hover{color:#fff}
.sg-util span{color:#788193}
.sg-util-r a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.sg-util-note{display:none}.sg-util-in{padding:8px 20px;font-size:12px}}
/* ===== Mobile menu ===== */
.sg-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;cursor:pointer}
.sg-burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.sg-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sg-burger.on span:nth-child(2){opacity:0}
.sg-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sg-mob{display:none;border-top:1px solid var(--line);background:var(--warm);padding:20px 24px 28px;max-height:calc(100vh - 74px);overflow:auto}
.sg-mob[hidden]{display:none !important}
.sg-mob-grp{padding:12px 0;border-bottom:1px solid var(--line)}
.sg-mob-grp h4{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.sg-mob-grp a{display:block;font:600 16px var(--body);color:var(--ink);padding:8px 0}
.sg-mob-jobs{display:block;margin-top:16px;font:600 13px var(--body);color:var(--muted)}
@media (max-width:1180px){
.sg-burger{display:flex}
.sg-mob:not([hidden]){display:block}
.sg-nav-jobs,.sg-nav-contact{display:none}
.sg-nav-right .sg-btn--sm{font-size:13px;padding:11px 18px}
}
/* ===== Hero panel — blue, with Filipino-VA photo (matches homepage) ===== */
.sg-phero{position:relative;background:transparent;color:var(--ink);border-radius:0;margin:8px 0 28px;padding:44px 500px 44px 0;min-height:440px;display:flex;flex-direction:column;justify-content:center;overflow-x:clip}
.sg-phero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:460px;border-radius:24px;background:url('/brand/photos/hero-panel-1024.webp') center 20%/cover no-repeat;box-shadow:0 30px 60px -28px rgba(35,32,26,.35)}
.sg-phero::after{content:"";position:absolute;top:-90px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(240,217,168,.5),rgba(240,217,168,0) 65%);pointer-events:none;z-index:-1}
.sg-phero>*{position:relative;z-index:2;max-width:640px}
.sg-phero .sg-kicker{color:var(--blue)}
.sg-phero .sg-lede{color:var(--muted);max-width:520px}
.sg-phero .sg-mono-label,.sg-phero .sg-mono-label a{color:var(--faint);font:400 12.5px var(--body);letter-spacing:0;text-transform:none}
.sg-phero .sg-mono-label a{text-decoration:underline;text-underline-offset:3px}
.sg-phero .sg-display span{color:var(--blue)!important;background:linear-gradient(var(--tan),var(--tan)) 0 86%/100% .17em no-repeat;padding:0 .05em .03em}
.sg-phero.has-card::before{display:none}
.sg-herocard{position:absolute;top:50%;right:0;transform:translateY(-50%);width:460px;max-width:100%;border-radius:24px;overflow:hidden;background:var(--warm);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(35,32,26,.35);z-index:2}
.sg-herocard .hc-img{position:relative;height:300px}
.sg-herocard .hc-img img{width:100%;height:100%;object-fit:cover}
.sg-herocard .hc-badge{position:absolute;left:16px;bottom:16px;background:rgba(20,24,31,.72);color:#fff;backdrop-filter:blur(6px);border-radius:99px;padding:7px 14px;font:600 12px var(--body)}
.sg-herocard .hc-body{padding:20px 24px 24px}
.sg-herocard .hc-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sg-herocard .hc-name{font:700 20px var(--display);letter-spacing:-.015em}
.sg-herocard .hc-ver{font:700 12px var(--body);color:var(--green);background:var(--sage);border-radius:99px;padding:5px 12px;flex:none}
.sg-herocard .hc-role{font:500 13.5px var(--body);color:var(--muted);margin-top:3px}
.sg-herocard .hc-exp{font:400 13.5px/1.6 var(--body);color:var(--ink);margin-top:12px}
.sg-herocard .hc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.sg-herocard .hc-chips span{font:600 12px var(--body);color:var(--muted);background:var(--sand);border:1px solid var(--line);border-radius:99px;padding:5px 11px}
.sg-tlink{align-self:center;font:600 14px var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.sg-tlink:hover{color:var(--blue)}
@media (max-width:1180px){
.sg-phero{padding-right:0;min-height:0}
.sg-herocard{position:static;transform:none;width:100%;max-width:460px;margin-top:36px}
/* card has stacked below — uncap the text column or a dead gutter opens on its right.
Exclude the card itself: it is a direct child and would lose its 460px cap. */
.sg-phero>*:not(.sg-herocard){max-width:none}
.sg-phero .sg-lede{max-width:760px}
}
.sg-phero h1.sg-display{font-size:clamp(40px,4.6vw,64px)}
.sg-lede{font-size:20px;line-height:1.55;color:var(--muted);max-width:660px}
/* ===== Crumb ===== */
.sg-crumb{font:600 11.5px var(--body);letter-spacing:.04em;color:var(--faint);padding-top:22px}
.sg-crumb a{color:var(--muted)}
.sg-crumb a:hover{color:var(--blue)}
.sg-crumb span{margin:0 9px;color:var(--line-strong)}
.sg-crumb b{color:var(--muted);font-weight:600}
/* ===== Stat band — tan panel ===== */
.sg-statband{display:grid;grid-template-columns:repeat(4,1fr);background:var(--peach);border:1px solid var(--line);border-radius:var(--r-panel);padding:32px 40px;margin:0 0 16px}
.sg-stat{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8px 34px;min-height:76px}
.sg-stat:first-child{padding-left:0}
.sg-stat:last-child{padding-right:0}
.sg-stat + .sg-stat::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.sg-stat b{display:block;font:800 clamp(30px,2.9vw,42px)/1.04 var(--display);letter-spacing:-.025em;color:var(--blue);text-wrap:balance}
.sg-stat b.sg-blue{color:var(--blue)}
.sg-stat b span{font-size:18px!important;font-weight:700;letter-spacing:0}
.sg-stat span{display:block;font:600 12.5px var(--body);color:var(--muted);margin-top:8px;line-height:1.4}
/* ===== Placeholder imagery — warm ===== */
.sg-ph{background:repeating-linear-gradient(45deg,var(--warm) 0 14px,#EFE7D7 14px 28px);border:1px solid var(--line-strong);border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;min-height:220px}
.sg-ph span{font:600 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* ===== Role / link cards ===== */
.sg-rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sg-rolecard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:box-shadow .15s,transform .12s}
.sg-rolecard:hover{box-shadow:0 18px 40px -24px rgba(20,24,31,.35);transform:translateY(-2px)}
.sg-rolecard .sg-tag{display:none}
.sg-rolecard h3{font:800 27px/1.04 var(--display);margin:0 0 10px;letter-spacing:-.02em}
.sg-rolecard p{font-size:14px;line-height:1.65;color:var(--muted)}
.sg-rolecard .sg-more{display:inline-block;margin-top:14px;font:700 13px var(--body);color:var(--blue)}
/* ===== Steps ===== */
.sg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sg-step{background:transparent;border:0;border-top:2px dotted var(--line-strong);border-radius:0;padding:20px 0 0}
.sg-step .n{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.sg-step h3{font:700 19px var(--display);margin:10px 0 8px;letter-spacing:-.015em}
.sg-step p{font-size:14px;line-height:1.6;color:var(--muted)}
/* ===== CTA panel — blue ===== */
.sg-cta-panel{border-radius:var(--r-panel);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:40px;background:var(--blue);color:#fff}
.sg-cta-panel h2{font:800 clamp(32px,3.4vw,56px)/1.02 var(--display);letter-spacing:-.025em}
.sg-cta-panel .sg-sub{margin-top:10px;max-width:none;color:var(--blue-lede)}
.sg-cta-panel .sg-sub b{color:#fff}
.sg-cta-panel .sg-sub a{color:#fff;text-decoration:underline}
/* ===== Footer (injected) — sand ===== */
.sg-foot{background:var(--sand);border-top:2px solid var(--line-strong);margin-top:56px}
.sg-foot .sg-wrap{max-width:1380px;margin:0 auto;padding:0 32px !important}
.sg-foot-grid{display:grid;grid-template-columns:1.15fr repeat(6,1fr);gap:24px;padding:52px 0 40px}
.sg-foot-brand img{height:30px}
.sg-foot-brand p{margin-top:14px;font-size:13px;line-height:1.65;color:var(--muted);max-width:240px}
.sg-foot-col h4{font:700 13px var(--body);letter-spacing:0;color:var(--ink);margin-bottom:14px}
.sg-foot-col a{display:block;font-size:13.5px;color:var(--muted);padding:4.5px 0}
.sg-foot-col a:hover{color:var(--blue)}
[id]{scroll-margin-top:96px}
.sg-foot-locs{border-top:1px solid var(--line-strong);padding:18px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:600 13px var(--body)}
.sg-foot-locs>span{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sg-foot-locs a{color:var(--muted)}
.sg-foot-locs a:hover{color:var(--blue)}
.sg-foot-bar{border-top:1px solid var(--line-strong);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 12px var(--body);color:var(--faint)}
.sg-foot-bar a:hover{color:var(--muted)}
/* ===== Responsive squeeze (desktop-first) ===== */
@media (max-width:1180px){
.sg-nav-links{display:none}
.sg-phero{padding:36px 0 36px;min-height:0}
.sg-phero::before{position:relative;display:block;order:2;width:100%;height:280px;margin-top:28px;right:auto;top:auto;bottom:auto}
.sg-statband,.sg-steps{grid-template-columns:repeat(2,1fr)}
.sg-statband{row-gap:6px}
.sg-statband .sg-stat:nth-child(odd){padding-left:0}
.sg-statband .sg-stat:nth-child(even){padding-right:0}
.sg-statband .sg-stat:nth-child(odd)::before{display:none}
.sg-rolegrid{grid-template-columns:repeat(2,1fr)}
.sg-bento{grid-template-columns:repeat(2,1fr)!important}
.sg-foot-grid{grid-template-columns:repeat(2,1fr)}
.sg-cta-panel{flex-direction:column;align-items:flex-start}
}
@media (max-width:680px){
.sg-statband,.sg-steps,.sg-rolegrid,.sg-foot-grid{grid-template-columns:1fr}
.sg-statband .sg-stat{padding:10px 0}
.sg-statband .sg-stat::before{display:none}
h1.sg-display{font-size:44px}
.sg-phero{min-height:0;padding:28px 0 32px}
.sg-phero::before{display:none}
.sg-phero>*{max-width:none}
}
/* ============================================================
PAGE TEMPLATE KIT — roles / NDIS / software / industries / compare
============================================================ */
.sg-prose-sec{padding:56px 0}
.sg-body{max-width:760px}
h2.sg-h2,.sg-body h2{font:800 clamp(30px,3vw,46px)/1.04 var(--display);letter-spacing:-.025em;color:var(--ink)}
.sg-body h3{font:700 21px var(--display);margin:28px 0 8px;letter-spacing:-.015em}
.sg-body p{color:var(--muted);margin:16px 0}
.sg-body p:first-of-type{margin-top:18px}
.sg-body strong{color:var(--ink);font-weight:700}
.sg-check{list-style:none;display:grid;gap:12px;margin-top:12px}
.sg-check li{position:relative;padding-left:30px;color:var(--muted);font-size:15.5px;line-height:1.55}
.sg-check li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--green);font-weight:800}
.sg-check li strong{color:var(--ink);font-weight:700}
.sg-featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sg-feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.sg-feat .l{font:700 11.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.sg-feat h3{font:700 20px var(--display);margin:12px 0 8px;letter-spacing:-.015em}
.sg-feat p{font-size:14px;line-height:1.6;color:var(--muted)}
.sg-spokes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sg-spoke{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:box-shadow .15s,transform .12s}
.sg-spoke:hover{box-shadow:0 18px 40px -24px rgba(20,24,31,.35);transform:translateY(-2px)}
.sg-spoke .k{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.sg-spoke h3{font:700 20px var(--display);margin:10px 0 8px;letter-spacing:-.015em}
.sg-spoke p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.sg-spoke .sg-more{display:inline-block;margin-top:12px;font:700 12.5px var(--body);color:var(--blue)}
.sg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sg-chip{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font:600 14px var(--body);color:var(--ink);transition:border-color .12s,background .12s,transform .12s}
.sg-chip:hover{transform:translateY(-1px)}
.sg-chip:hover{border-color:var(--blue);background:var(--blue-tint)}
.sg-chip b{color:var(--blue);font:700 11px var(--body);letter-spacing:.06em}
.sg-faq{max-width:880px;display:grid;gap:10px}
.sg-faq details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.sg-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font:700 17px var(--display);letter-spacing:-.01em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.sg-faq summary::-webkit-details-marker{display:none}
.sg-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:99px;background:var(--peach);color:var(--blue);font-size:17px;font-weight:600;line-height:28px;text-align:center;transition:transform .25s,background .25s,color .25s}
.sg-faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff}
.sg-faq details[open] summary{border-bottom:1px solid var(--line)}
.sg-faq .a{padding:16px 24px 22px;color:var(--muted);font-size:15px;line-height:1.65}
.sg-faq .a a{color:var(--blue);text-decoration:underline}
.sg-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
/* a standfirst note next to a heading reads as orphaned right-aligned text — sit it under the heading */
.sg-sec-head>p{flex:1 1 100%;max-width:760px !important;margin:14px 0 0 !important;font-size:16.5px !important;line-height:1.65;text-wrap:pretty}
.sg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.sg-aside{background:var(--warm);border:1px solid var(--line);border-radius:var(--r-panel);padding:32px}
.sg-aside h3{font:700 18px var(--display);margin-bottom:16px;letter-spacing:-.015em}
@media (max-width:1060px){
.sg-featgrid,.sg-spokes{grid-template-columns:repeat(2,1fr)}
.sg-split{grid-template-columns:1fr;gap:32px}
}
@media (max-width:680px){
.sg-featgrid,.sg-spokes{grid-template-columns:1fr}
}
/* ============================================================
CONVERSION BLOCKS (blocks.js) — promise · offer · calc
· profiles · compare · reviews · cta
============================================================ */
/* ⚠ RULE: EVERY SECTION OWNS ITS OWN TOP SPACING. Do not rely on the bottom padding of whatever
happens to sit above it.
This has been reported five separate times and I twice "fixed" it by scoping a rule to the
adjacencies I had measured — .sg-calcwrap + .sg-block and so on. That is the wrong shape of fix:
the set of things that can sit above a block changes every time a page is edited or a block is
mounted by JS, so a scoped rule is correct until the next change and then silently is not.
Unconditional. 80px top, 80px bottom. Two stacked blocks give 160px, which is the intended
rhythm; a block under a painted band gives 80px, which is the thing that kept breaking. */
.sg-block{padding:80px 0}
/* Exception, and note what it keys on: a block that OPENS WITH ITS OWN PAINTED PANEL — the dark
offer stack, the blue CTA — already has an edge and 48-56px of interior padding doing this job.
Adding 80px on top pushed those boundaries to 274px of empty sand. This keys on what the block
CONTAINS, not on what happens to precede it, so unlike the previous attempt it cannot fall out
of date when a page is reordered or a block is mounted by JS. */
.sg-block:has(> .sg-cta-panel),
.sg-block:has(> .sg-offer){padding-top:0}
/* Same defect, but where the following section is a bare .sg-wrap carrying an inline
`padding:0 var(--pad) Npx` shorthand — which sets padding-top:0 and, being inline, beats any
stylesheet rule. Measured at 0px on /locations/sydney, /locations/perth, /va-for, /guides and
/compare: a painted band ends and the next heading begins on the same pixel.
!important is load-bearing here rather than lazy: the inline shorthand is the bug, and these
four adjacencies are the only places a painted edge meets a zero-padding wrap. */
.sg-faqsec + .sg-wrap:not(.sg-block),
.sg-statband + .sg-wrap:not(.sg-block),
.gl-filterbar + .sg-wrap:not(.sg-block){padding-top:72px!important}
.sg-more{font:700 13.5px var(--body);color:var(--blue)}
/* guarantee cards */
.sg-promise{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sg-pcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px 30px;box-shadow:0 18px 36px -22px rgba(20,24,31,.25)}
.sg-pnum{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;font:800 19px var(--display)}
.sg-pnum--blue{background:var(--blue-tint);color:var(--blue);transform:rotate(-6deg)}
.sg-pnum--green{background:var(--sage);color:var(--green);transform:rotate(5deg)}
.sg-pnum--tan{background:var(--tan);color:#7A5E1E;transform:rotate(-4deg)}
.sg-pcard h3{font:700 21px var(--display);letter-spacing:-.015em;margin:18px 0 8px}
.sg-pcard p{font-size:14.5px;line-height:1.6;color:var(--muted)}
/* offer stack */
.sg-offer{background:var(--ink);border-radius:28px;padding:72px 60px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;color:var(--sand)}
.sg-orow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;color:#E6E9EF}
.sg-orow--last{border-bottom:0}
.sg-orow b{color:var(--green-bright)}
.sg-orow span:last-child{color:#8891A0;font-size:13px;text-align:right;flex:none}
.sg-ototal{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px solid rgba(255,255,255,.35);margin-top:10px;padding-top:18px;font:700 16px var(--body);color:#fff}
.sg-ototal s{color:#8891A0;font-size:20px;font-weight:600}
.sg-ototal b{font:800 30px var(--display);letter-spacing:-.02em;color:var(--green-bright)}
.sg-onote{font-size:12px;color:#8891A0;margin-top:10px}
.sg-block .sg-onote,.sg-calc .sg-onote{color:var(--faint)}
/* calculator */
/* border-bottom removed 2026-08-10, margin kept. These three wrappers are full-bleed over a page
background that differs from their own. With a hairline on BOTH edges, the 96px margin below one
read as a framed empty section rather than as whitespace — reported on /va-for/xero, present on
253 pages. Dropping the margin instead was the first attempt and was wrong: it left the next
section's kicker flush against the seam with no breathing room. The bottom rule is what created
the box, so that is what goes; the background change already marks where the section ends. */
.sg-calcwrap{background:var(--warm);border-top:1px solid var(--line);margin-bottom:96px}
.sg-calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;padding-top:96px;padding-bottom:96px}
.sg-slabel{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;font:500 14px var(--body);color:var(--muted)}
.sg-slabel b{font:800 30px var(--display);letter-spacing:-.02em;color:var(--ink)}
.sg-calc input[type=range]{width:100%;accent-color:#1560F0}
.sg-srange{display:flex;justify-content:space-between;font:500 12px var(--body);color:var(--faint);margin-top:8px}
.sg-calccard{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:38px 42px;box-shadow:0 30px 60px -30px rgba(20,24,31,.35)}
.sg-clabel{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sg-rchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sg-rchip{font:600 13px var(--body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 15px;cursor:pointer;transition:all .15s}
.sg-rchip:hover{border-color:var(--ink);color:var(--ink)}
.sg-rchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sg-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 14px 0;font:700 14px var(--body);text-decoration:none}
.sg-skip:focus{left:0}
.sg-hours{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px;cursor:pointer;float:right;margin-bottom:14px}
.sg-hours span,.sg-hours button{font:700 12.5px var(--body);color:var(--muted);padding:8px 15px;border-radius:999px;border:0;background:transparent;cursor:pointer}
.sg-hours span.on,.sg-hours button.on{background:var(--ink);color:#fff}
.sg-crow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);clear:both}
.sg-crow span{font-size:15px;color:var(--muted)}
.sg-crow i{font-style:normal;font-size:12px;color:var(--faint)}
.sg-crow b{font:800 26px var(--display);letter-spacing:-.02em}
.sg-crow b.sg-blue{color:var(--blue)}
.sg-ckeep{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:20px}
.sg-ckeep span{font:700 16px var(--body)}
.sg-ckeep i{display:block;font-style:normal;font:700 12.5px var(--body);color:var(--green)}
.sg-ckeep b{font:800 50px var(--display);letter-spacing:-.025em;color:var(--green)}
/* profiles */
.sg-profwrap{background:var(--white);border-top:1px solid var(--line);margin-bottom:96px}
.sg-prof{display:grid;grid-template-columns:1fr 460px;gap:72px;align-items:center;padding-top:96px;padding-bottom:96px}
.sg-profcard{background:var(--warm);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 60px -30px rgba(20,24,31,.35);position:relative}
.sg-proftag{position:absolute;top:-14px;right:26px;background:var(--tan);color:#7A5E1E;border-radius:99px;padding:7px 14px;font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;transform:rotate(2deg)}
.sg-profhead{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.sg-profhead img{width:62px;height:62px;border-radius:16px;object-fit:cover;object-position:center 25%}
.sg-profhead b{display:block;font:700 20px var(--display);letter-spacing:-.015em}
.sg-profhead span{display:block;font:500 13.5px var(--body);color:var(--muted);margin-top:3px}
.sg-profbox{background:var(--white);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.sg-profbox .l,.sg-profstats .l{font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.sg-profbox p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0}
.sg-profchips{display:flex;gap:6px;flex-wrap:wrap}
.sg-profchips span{font:600 12px var(--body);background:var(--warm);border-radius:99px;padding:5px 11px}
.sg-profstats{display:flex;gap:12px}
.sg-profstats>div{flex:1;background:var(--white);border-radius:14px;padding:14px 18px}
.sg-profstats b{font:700 19px var(--display);letter-spacing:-.015em}
/* comparison table */
.sg-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.sg-table{width:100%;border-collapse:collapse;min-width:760px}
.sg-table th,.sg-table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.sg-table thead th{font:700 14px var(--body);color:var(--ink);background:var(--warm)}
.sg-table thead th.sg-ok,.sg-table td.sg-ok{background:var(--blue-tint);color:var(--blue);font-weight:700}
.sg-table tbody th{font:600 14.5px var(--body);color:var(--ink)}
.sg-table tbody tr:last-child th,.sg-table tbody tr:last-child td{border-bottom:0}
/* reviews */
.sg-reviewcard{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px 26px 20px;box-shadow:0 18px 36px -22px rgba(20,24,31,.2);overflow:hidden}
.sg-reviewcard iframe{display:block;width:100%;min-height:900px}
@media (max-width:1060px){.sg-reviewcard iframe{min-height:1400px}}
.sg-block .sg-sec-head{align-items:center;margin-bottom:22px}
/* full-bleed rhythm for block sections */
.sg-profwrap,.sg-calcwrap,.sg-comparewrap{margin-left:calc(50% - 50vw + var(--sbw)/2);margin-right:calc(50% - 50vw + var(--sbw)/2);padding-left:calc(50vw - 50% - var(--sbw)/2);padding-right:calc(50vw - 50% - var(--sbw)/2)}
.sg-profwrap .sg-wrap,.sg-calcwrap .sg-wrap,.sg-comparewrap .sg-wrap{max-width:var(--wrap);margin:0 auto}
.sg-comparewrap{background:var(--white);border-top:1px solid var(--line);margin-bottom:96px}
.sg-comparewrap .sg-tablewrap{background:var(--warm)}
/* centred CTA + call strip */
/* overflow:CLIP, not hidden. The decorative circle below is 480px wide at left:-120px, so on a
375px screen it reaches 49px past the panel. hidden clipped it visually but still turned the
panel into a horizontal scroll container — the primary CTA on nearly every page could be swiped
sideways to reveal blank blue. clip crops without creating a scroll box. */
.sg-cta-panel--center{position:relative;overflow:clip;flex-direction:column;align-items:center;text-align:center;padding:96px 56px}
.sg-cta-panel--center::before{content:"";position:absolute;left:-120px;bottom:-160px;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.sg-cta-panel--center>*{position:relative;z-index:1}
.sg-cta-panel--center h2{font-size:clamp(40px,4.2vw,64px);line-height:1.02}
.sg-cta-panel--center .sg-sub{max-width:520px;margin:16px auto 32px}
.sg-callstrip{display:flex;justify-content:center;gap:14px 40px;flex-wrap:wrap;margin-top:38px;font:500 14px var(--body);color:var(--blue-lede)}
.sg-callstrip span{display:flex;align-items:center;gap:10px}
.sg-callstrip i{font-style:normal;width:26px;height:26px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px}
@media (max-width:1060px){
.sg-promise{grid-template-columns:1fr}
.sg-offer,.sg-calc,.sg-prof{grid-template-columns:1fr;gap:36px}
.sg-offer{padding:48px 30px}
.sg-calc,.sg-prof{padding-top:56px;padding-bottom:56px}
.sg-calccard{padding:28px 24px}
.sg-cta-panel--center{padding:56px 28px}
}
.sg-guarline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px;font:500 13.5px var(--body);color:var(--muted)}
.sg-guarline b{color:var(--green)}
/* FAQ — centred, sits directly above the CTA */
.sg-faqsec{max-width:none;margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2);background:var(--white);border-top:1px solid var(--line);padding:88px max(32px,calc(50vw - 440px - var(--sbw)/2));text-align:center}
@media (max-width:900px){.sg-faqsec{margin-left:0;margin-right:0;padding:64px 24px}}
.sg-faqsec .sg-sec-head{display:block;text-align:center;margin-bottom:28px}
.sg-faqsec .sg-sec-head>div{max-width:none}
.sg-faqsec .sg-faq{text-align:left;max-width:880px;margin:0 auto;width:100%}
/* Full-bleed panels — match homepage (viewport minus 24px gutters, content capped) */
/* --sbw is measured in blocks.js while the document is still parsing, before the page is tall
enough to have a scrollbar, so it almost always records 0 and every full-bleed band overshoots by
half a scrollbar. blocks.js says that overshoot "is clipped by body{overflow-x:clip} and is
invisible". It is not: the overflow lands on the HTML element, which was overflow-x:visible, so
every desktop page could genuinely be dragged 8px sideways. Verified by scrolling it.
Clipped here rather than by re-measuring after load, which is the other fix: re-measuring moves
every band on the page 7.5px once the load event fires, which is a layout shift traded for
nothing a reader can see. clip, not hidden — hidden would create a scroll container and break the
sticky contents rail on blog posts. */
html{--sbw:0px;overflow-x:clip}
body{overflow-x:clip}
.sg-bleed{margin-left:calc(-50vw + 50% + 24px + var(--sbw)/2);margin-right:calc(-50vw + 50% + 24px + var(--sbw)/2);padding-left:0;padding-right:0}
.sg-bleed .sg-offer,.sg-bleed .sg-cta-panel{border-radius:32px}
.sg-bleed .sg-offer{padding-left:max(44px,calc((100% - 1192px)/2));padding-right:max(44px,calc((100% - 1192px)/2))}
.sg-cta-panel--center{padding-left:max(44px,calc((100% - 1192px)/2));padding-right:max(44px,calc((100% - 1192px)/2))}
@media (max-width:900px){
.sg-bleed{margin-left:0;margin-right:0}
.sg-bleed .sg-offer,.sg-cta-panel--center{padding-left:28px;padding-right:28px}
}
/* Stat band — match approved homepage: full-bleed warm band, no card, no dividers */
.sg-statband{
margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2);
margin-bottom:0;background:var(--peach);border:0;border-radius:0;
padding:46px max(32px,calc(50vw - 658px - var(--sbw)/2)) 42px;
gap:36px;column-gap:36px
}
.sg-stat{padding:0;min-height:0}
.sg-stat + .sg-stat::before{display:none}
.sg-stat b{font:800 clamp(38px,3.6vw,54px)/1.02 var(--display);letter-spacing:-.03em;color:var(--blue);text-wrap:balance}
.sg-stat b span{display:inline!important;font-size:.52em!important;margin:0!important;color:inherit!important;font-weight:700}
.sg-stat>span{display:block;font:600 13px var(--body);color:var(--muted);margin-top:9px}
@media (max-width:900px){
.sg-statband{margin-left:0;margin-right:0;padding:36px 28px;grid-template-columns:1fr 1fr;row-gap:30px}
.sg-stat b{font-size:42px}
}
@media (max-width:680px){.sg-statband{grid-template-columns:1fr}}
/* ===== Testimonial — centred pull quote (matches homepage) ===== */
.sg-testi{max-width:1020px;margin:0 auto;padding:96px 0;text-align:center}
.sg-testi q{display:block;quotes:none;font:600 clamp(28px,3.1vw,40px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.sg-testi .who{margin-top:26px;font:600 14px var(--body);color:var(--muted)}
.sg-testi .who span{display:block;font-weight:500;color:var(--faint);margin-top:4px;font-size:13px}
@media (max-width:900px){.sg-testi{padding:64px 0}}
/* mega-menu software icons */
.mm-sys{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:center;row-gap:1px}
.mm-ico{width:18px;height:18px;flex:none;border-radius:4px;object-fit:contain}
.mm-sys-t{display:contents}
.mm-sys-t b{grid-column:2}
.mm-sys-t span{grid-column:2;display:block}
/* prose section — heading left, body right (no half-empty rows).
Only splits into two columns when there IS a heading to fill the left one;
a headless intro (guide pages) stays a single measured column. */
.sg-prose-sec .sg-body{max-width:none}
.sg-prose-sec .sg-body>h2:first-child{margin-bottom:18px}
/* headless intro (guide pages): magazine lead + two-column body, so the
full measure is used instead of leaving a dead column on the right */
.sg-prose-sec .sg-body:not(:has(>h2:first-child)){max-width:none}
.sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child{font:400 22px/1.55 var(--body);color:var(--ink);margin:0 0 26px}
@media (min-width:1000px){
.sg-prose-sec .sg-body:not(:has(>h2:first-child)){column-count:1}
.sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child{font-size:24px;line-height:1.5;letter-spacing:-.011em}
.sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child+p{margin-top:0}
.sg-prose-sec .sg-body:not(:has(>h2:first-child)) .gl-lead-rest{column-count:2;column-gap:72px}
.sg-prose-sec .sg-body:not(:has(>h2:first-child)) .gl-lead-rest>p:first-child{margin-top:0}
}
@media (min-width:1000px){
.sg-prose-sec .sg-body:has(>h2:first-child){display:grid;grid-template-columns:.8fr 1.2fr;gap:24px 72px;align-items:start}
.sg-prose-sec .sg-body:has(>h2:first-child)>h2:first-child{grid-column:1;margin:0}
.sg-prose-sec .sg-body:has(>h2:first-child)>*:not(h2:first-child){grid-column:2}
}
/* ===== Branded icon set (icons.js) ===== */
.sg-ico{display:inline-block;width:1em;height:1em;font-size:20px;flex:none;vertical-align:-.16em;color:inherit}
.sg-ico .a{stroke:var(--blue)}
[data-sg-icon]{display:inline-flex;line-height:0}
.sg-icochip{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--peach);border:1px solid var(--line);color:var(--ink);flex:none}
.sg-icochip .sg-ico{font-size:23px}
.sg-icochip--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.sg-icochip--blue .sg-ico .a{stroke:var(--tan)}
.sg-icochip--tan{background:var(--tan);border-color:#E7CD97;color:#5C4E2C}
.sg-icochip--tan .sg-ico .a{stroke:var(--ink)}
.sg-icochip--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.sg-icochip--ink .sg-ico .a{stroke:var(--green-bright)}
.sg-icochip--sm{width:36px;height:36px;border-radius:11px}
.sg-icochip--sm .sg-ico{font-size:19px}
/* Vendor mark instead of a glyph, on the software cards. White tile rather than peach so a
brand colour is not fighting the panel behind it, and contain so nothing is cropped. */
.sg-icochip--logo{background:#fff;border-color:var(--line);padding:6px}
.sg-icochip--logo img{width:100%;height:100%;object-fit:contain;display:block}
.mm-ri{display:flex;align-items:center;gap:9px}
.mm-ri .sg-ico{font-size:17px;color:var(--faint);transition:color .12s}
.mm-ri:hover .sg-ico{color:var(--blue)}
.sg-spoke .sg-icochip{margin-bottom:12px}
.sg-spoke .sg-icochip+.k{margin-top:0}
/* ===== Team cards ===== */
.sg-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sg-tcard{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 36px -30px rgba(20,24,31,.28);transition:transform .18s ease,box-shadow .18s ease}
.sg-tcard:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(20,24,31,.35)}
.sg-tcard .tph{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 8%;background:var(--warm);border-bottom:1px solid var(--line)}
.sg-tcard .tb{padding:20px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.sg-tcard .tr{font:700 10.5px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.sg-tcard .tn{font:800 19px/1.15 var(--display);letter-spacing:-.022em;color:var(--ink)}
.sg-tcard p{font:400 13.5px/1.6 var(--body);color:var(--muted);margin:0}
.sg-tcard .tl{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);margin-top:16px;font:700 13px var(--body);color:var(--ink);text-decoration:none}
.sg-tcard .tl:hover{color:var(--blue)}
@media (max-width:1060px){.sg-team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sg-team{grid-template-columns:1fr}}
/* ===== Process flow diagram ===== */
.sg-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:44px;position:relative}
/* Three-up variant. /about/our-why had What we do, How we do it and Why we do it as three
stacked prose sections capped at 74ch, which left the right half of the page empty down the
whole run. Three columns fill the measure and echo the four-failure row above them. */
.sg-flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-fstep{position:relative;padding:0 26px;min-width:0}
.sg-fstep:first-child{padding-left:0}
.sg-fstep:last-child{padding-right:0}
.sg-fstep::before{content:"";position:absolute;left:0;top:26px;bottom:8px;width:1px;background:var(--line)}
.sg-fstep:first-child::before{display:none}
.sg-fhead{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sg-fnum{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sg-fstep h3{font:800 19px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.sg-fstep p{font:400 15px/1.62 var(--body);color:var(--muted);margin:0;text-wrap:pretty}
/* The answer paired to each failure. The flow named four ways offshore staffing fails and never
said what we do instead — which leaves the page indicting the category it is asking you to buy.
Ruled off and set in ink rather than muted, so the eye reads problem, then answer. */
.sg-fstep p.sg-fanswer{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink)}
.sg-fstep p.sg-fanswer b{display:block;font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.sg-fwho{display:inline-block;margin-top:14px;font:700 13px var(--body);color:var(--blue)}
.sg-fnote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.sg-fnote>div{display:flex;gap:13px;align-items:flex-start}
.sg-fnote .sg-ico{font-size:21px;color:var(--ink);margin-top:2px;flex:none}
.sg-fnote strong{display:block;font:700 15px var(--body);color:var(--ink);margin-bottom:3px}
.sg-fnote span{font:400 15px/1.6 var(--body);color:var(--muted)}
@media (max-width:1060px){
.sg-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
.sg-fstep:nth-child(odd){padding-left:0}
.sg-fstep:nth-child(odd)::before{display:none}
.sg-fnote{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
.sg-flow{grid-template-columns:1fr;gap:30px}
.sg-fstep{padding:0}
.sg-fstep::before{display:none}
}
.mm-person{display:flex;align-items:center;gap:11px;padding:6px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;transition:background .12s}
.mm-person:hover{background:var(--peach)}
.mm-person img{width:40px;height:40px;border-radius:999px;object-fit:cover;object-position:50% 12%;background:var(--warm);flex:none}
.mm-person span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mm-person b{font:700 13.5px var(--display);letter-spacing:-.01em;color:var(--ink)}
.mm-person em{font:400 11.5px var(--body);font-style:normal;color:var(--muted)}
/* ===== Edge-to-edge band — background spans the viewport, content stays on grid ===== */
.sg-band{margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2);padding-left:calc(50vw - 50% - var(--sbw)/2);padding-right:calc(50vw - 50% - var(--sbw)/2)}
.sg-band>.sg-wrap{max-width:var(--wrap);margin:0 auto}
/* ===== Role brief survey (shared block: rolebrief) ===== */
.sv-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr) 300px;gap:48px;align-items:start;margin-bottom:44px}
.sv-why{display:grid;gap:16px;align-content:start;padding-top:6px}
.sv-why>div{padding-left:16px;border-left:2px solid var(--peach)}
.sv-why b{display:block;font:800 15px var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:2px}
.sv-why span{font:400 14px/1.55 var(--body);color:var(--muted)}
.sv-prog{background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.sv-pnum{font:800 46px/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.sv-pnum span{font-size:24px;color:var(--faint)}
.sv-plab{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:8px 0 14px}
.sv-bar{height:7px;border-radius:99px;background:#E6DFD1;overflow:hidden}
.sv-bar i{display:block;height:100%;width:100%;background:var(--green);border-radius:99px}
.sv-pdone{font:600 13.5px/1.75 var(--body);color:var(--green);margin-top:16px}
.sv-pnext{font:400 13px/1.55 var(--body);color:var(--muted);margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.sv-form{background:var(--sand);border:1px solid var(--line);border-radius:24px;padding:38px 36px;display:grid;gap:30px}
.sv-row{display:grid;gap:12px;min-width:0}
.sv-lab{font:700 14.5px var(--body);color:var(--ink)}
.sv-lab em{font-style:normal;font-weight:500;color:var(--faint);font-size:13px;margin-left:8px}
.sv-in{width:100%;box-sizing:border-box;background:var(--white);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;font:400 15px var(--body);color:var(--ink)}
.sv-in:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,96,240,.12)}
.sv-grp{margin-top:4px}
.sv-glab{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sv-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin-bottom:18px}
.sv-chk{display:flex;gap:9px;align-items:flex-start;font:400 14.5px/1.45 var(--body);color:var(--ink);cursor:pointer}
.sv-chk input{margin:2px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none}
.sv-chk:hover span{color:var(--blue)}
.sv-chips,.sv-radios{display:flex;flex-wrap:wrap;gap:9px}
.sv-chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line-strong);border-radius:99px;padding:9px 15px;font:600 14px var(--body);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.sv-chip:hover{border-color:var(--blue)}
.sv-chip input{accent-color:var(--blue);width:15px;height:15px;margin:0}
.sv-chip:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}
.sv-two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.sv-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:6px}
@media (max-width:1060px){.sv-top{grid-template-columns:1fr;gap:32px}.sv-checks{grid-template-columns:1fr 1fr}.sv-two{grid-template-columns:1fr}}
@media (max-width:620px){.sv-checks{grid-template-columns:1fr}.sv-form{padding:26px 20px}}
.sg-btn--dark{background:var(--ink);color:#fff}
.sg-btn--dark:hover{background:#000}
@media(max-width:1080px){.sv-top{grid-template-columns:1fr}.sv-why{padding-top:0}}
/* ===== Guides ===== */
.sg-byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sg-byline img{width:46px;height:46px;border-radius:999px;object-fit:cover;object-position:50% 14%;background:var(--warm);flex:none}
.sg-byline b{display:block;font:700 14.5px var(--body);color:var(--ink)}
.sg-byline span{display:block;font:400 13px var(--body);color:var(--muted)}
.sg-byline em{margin-left:auto;font:600 12px var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sg-forwho{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sg-forwho>div{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 30px}
.sg-forwho h3{display:flex;align-items:center;gap:10px;font:800 18px var(--display);letter-spacing:-.018em;color:var(--ink);margin:0 0 14px}
.sg-forwho h3 i{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font:700 14px var(--body);font-style:normal;flex:none}
.sg-forwho ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sg-forwho li{font:400 15px/1.6 var(--body);color:var(--muted);padding-left:18px;position:relative}
.sg-forwho li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:99px;background:var(--line-strong)}
.sg-tasks{display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)}
/* Column header for the task table. Without it the card opened straight into data — a two-column
grid with no indication that the left column is the task and the right is what it involves. */
.sg-taskhead{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:15px 28px;background:var(--warm);border-bottom:1px solid var(--line)}
.sg-taskhead span{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sg-taskrow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:22px 28px;border-bottom:1px solid var(--line)}
.sg-taskrow:last-child{border-bottom:0}
.sg-taskrow b{font:800 16px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.sg-taskrow p{font:400 15px/1.65 var(--body);color:var(--muted);margin:0;text-wrap:pretty}
.sg-bound{background:var(--ink);color:#fff;border-radius:22px;padding:38px 40px}
.sg-bound h3{font:800 26px/1.22 var(--display);letter-spacing:-.025em;margin:0 0 12px;color:#fff}
.sg-bound>p{font:400 16px/1.65 var(--body);color:#C4C9D2;margin:0 0 24px;max-width:820px}
.sg-bound ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.sg-bound li{font:400 15px/1.6 var(--body);color:#DDE1E7;padding-left:26px;position:relative}
.sg-bound li::before{content:"✕";position:absolute;left:0;top:0;color:#FF8B7A;font-weight:700}
/* Same panel used for what you GET rather than what you cannot delegate. A salmon cross on
"From $14 per hour + GST" reads as an exclusion. --bright is the on-dark green token. */
.sg-bound--inc li::before{content:"✓";color:#7DE0AE}
/* Some lists are genuinely mixed — "Access: what to grant and what to withhold" has two dos and
two donts. Heading-level classification cannot express that, so an item can opt back out. */
.sg-bound--inc li.no::before{content:"✕";color:#FF8B7A}
.sg-bound li b{display:block;color:#fff;font:700 15px var(--body)}
/* The source under each boundary item. It was set as an uppercase, letter-spaced micro-label,
which works for a two-word tag and fails badly for a citation — 37 of the 104 run past 90
characters and the longest is 327. Uppercase plus tracking plus no line-height made those
unreadable and made the panel look broken. Sentence case, real line-height, quieter colour. */
.sg-bound li cite{display:block;margin-top:9px;font:400 12.5px/1.55 var(--body);font-style:normal;color:#9AA3B0;letter-spacing:0;text-transform:none}
.sg-seq{display:grid;gap:0;counter-reset:sq}
.sg-seqitem{display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.sg-seqitem:last-child{border-bottom:0}
.sg-seqitem>b{width:44px;height:44px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 17px var(--display)}
.sg-seqitem h3{font:800 19px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 7px}
.sg-seqitem p{font:400 15px/1.65 var(--body);color:var(--muted);margin:0;text-wrap:pretty}
@media (min-width:1100px){
.sg-seq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.sg-seqitem:nth-child(odd):last-child{grid-column:1/-1}
}
.sg-warn{background:#FFF4E2;border:1px solid #F0D9A8;border-radius:20px;padding:30px 32px}
.sg-warn b{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8A6A18;margin-bottom:10px}
.sg-warn h3{font:800 22px/1.25 var(--display);letter-spacing:-.02em;color:#4A3608;margin:0 0 10px}
.sg-warn p{font:400 15.5px/1.68 var(--body);color:#6B4E14;margin:0;text-wrap:pretty}
@media (min-width:1100px){
.sg-warn{display:grid;grid-template-columns:.7fr 1.3fr;grid-template-rows:min-content 1fr;gap:10px 56px;align-items:start;padding:36px 40px}
.sg-warn b{grid-column:1;margin:0}
.sg-warn h3{grid-column:1;grid-row:2;margin:0}
.sg-warn p{grid-column:2;grid-row:1/3}
}
.sg-srcs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sg-srcs a{font:600 13px var(--body);color:var(--ink);background:var(--white);border:1px solid var(--line-strong);border-radius:11px;padding:9px 14px}
.sg-srcs a:hover{border-color:var(--ink)}
@media (max-width:900px){
.sg-forwho{grid-template-columns:1fr}
.sg-taskrow{grid-template-columns:1fr;gap:8px}
.sg-taskhead{display:none}
.sg-bound ul{grid-template-columns:1fr}
.sg-seqitem{grid-template-columns:44px minmax(0,1fr);gap:18px}
}
/* ===== Mobile hardening ===== */
@media (max-width:640px){
.sg-nav-inner{padding:0 18px;height:64px}
.sg-nav-right .sg-btn--sm{display:none}
.sg-nav-right{gap:10px}
.sg-util-in{padding:7px 18px}
.sg-wrap{--pad:18px}
.sg-foot-grid a,.sg-foot-grid .sg-foot-link{display:inline-block;padding:7px 0}
.sg-2col{grid-template-columns:1fr !important;gap:28px !important;padding:28px !important}
.sg-crumb{font-size:12px}
}
@media (max-width:900px){
.sg-2col{grid-template-columns:1fr;gap:32px}
}
.sg-2col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
img,svg,video,iframe{max-width:100%}
.sg-ctarow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.sg-ctarow{gap:12px}.sg-ctarow .sg-btn{width:100%;text-align:center}}
.sg-tablewrap{min-width:0;max-width:100%}
.sg-body,.sg-prose-sec,.sg-wrap>*{min-width:0}
@media (max-width:640px){
.sg-profstats{flex-wrap:wrap}
.sg-profstats>div{flex:1 1 calc(50% - 6px);min-width:0}
.sg-profcard,.sg-prof>*{min-width:0}
.sg-prof{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.sg-foot a,.sg-mob a,.sg-util-in a{min-height:40px;display:inline-flex;align-items:center}
.sg-crumb a,.sg-crumb b{min-height:36px;display:inline-flex;align-items:center}
}
@media (max-width:400px){
.sg-foot-grid{grid-template-columns:1fr}
}
.sg-foot-grid>*{min-width:0}
.sg-foot a{overflow-wrap:anywhere}
@media (max-width:400px){
.sg-ckeep{flex-wrap:wrap;gap:8px}
.sg-ckeep b{font-size:38px}
.sg-herocard .hc-top{flex-wrap:wrap}
.sg-offer,.sg-calccard,.sg-offer>*{min-width:0}
.sg-offer{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:400px){
.sg-orow{flex-wrap:wrap;gap:4px}
.sg-orow span:last-child{text-align:left;flex:1 1 100%}
}
@media (max-width:640px){
.sg-tlink,.sg-more{min-height:40px;display:inline-flex;align-items:center}
.sg-ctarow .sg-tlink{width:100%;justify-content:center}
}
.sg-spoke-top{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.sg-spoke-ico{width:26px;height:26px;border-radius:6px;flex:none;object-fit:contain;background:var(--white);border:1px solid var(--line);padding:2px}
.sg-spoke-top .k{margin:0}
/* ===== Guides index (blog-style) ===== */
.gl-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:end;padding:34px var(--pad) 40px}
.gl-h1{font:800 clamp(38px,4.6vw,60px)/0.98 var(--display);letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);margin:18px 0 0}
.gl-intro{font:400 16.5px/1.7 var(--body);color:var(--muted);margin:0 0 6px;text-wrap:pretty}
.gl-filterbar{position:sticky;top:74px;z-index:30;background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gl-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px var(--pad)}
.gl-f{appearance:none;background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;font:600 13.5px var(--body);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .15s ease}
.gl-f b{font:700 11.5px var(--body);color:var(--faint)}
.gl-f:hover{border-color:var(--ink);color:var(--ink)}
.gl-f.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gl-f.on b{color:rgba(255,255,255,.6)}
.gl-count{margin-left:auto;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.gl-body{padding:44px var(--pad) 76px}
.gl-featrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:22px}
.gl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gl-feat,.gl-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.gl-feat{padding:30px 32px 26px}
.gl-card{padding:24px 26px 22px}
.gl-feat:hover,.gl-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(20,24,31,.35)}
.gl-feat-top,.gl-card-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.gl-ico{width:24px;height:24px;border-radius:6px;flex:none;object-fit:contain;background:var(--white);border:1px solid var(--line);padding:2px}
.gl-cat{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.gl-pin{margin-left:auto;font:700 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--tan-ink);background:var(--tan);border-radius:999px;padding:5px 10px}
.gl-feat h3{font:800 26px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
.gl-card h3{font:800 19px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0 0 10px;text-wrap:balance}
.gl-feat p{font:400 15.5px/1.65 var(--body);color:var(--muted);margin:0 0 20px}
.gl-card p{font:400 15px/1.6 var(--body);color:var(--muted);margin:0 0 18px}
.gl-by{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.gl-by img{width:28px;height:28px;border-radius:999px;object-fit:cover;object-position:50% 14%;background:var(--warm);flex:none}
.gl-by span{font:600 13px var(--body);color:var(--ink)}
.gl-by i{margin-left:auto;font:600 11.5px var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.gl-empty{font:400 15.5px/1.7 var(--body);color:var(--muted);padding:36px 0}
.gl-empty a{color:var(--blue);font-weight:600}
.gl-more{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:40px;align-items:start}
.gl-morelinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
.gl-morelinks a{text-decoration:none;padding:14px 0;border-top:1px solid var(--line)}
.gl-morelinks b{display:block;font:700 15px var(--body);color:var(--ink);margin-bottom:3px}
.gl-morelinks span{display:block;font:400 13.5px/1.55 var(--body);color:var(--muted)}
.gl-morelinks a:hover b{color:var(--blue)}
@media (max-width:1000px){
.gl-head{grid-template-columns:1fr;gap:22px;align-items:start}
.gl-featrow{grid-template-columns:1fr}
.gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gl-more{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
.gl-grid{grid-template-columns:1fr}
.gl-morelinks{grid-template-columns:1fr}
.gl-feat{padding:24px 22px 20px}
.gl-feat h3{font-size:22px}
.gl-filterbar{top:64px}
.gl-filters{padding:12px var(--pad);gap:7px}
.gl-f{padding:7px 12px;font-size:13px}
.gl-count{display:none}
}
/* [hidden] must outrank explicit display on library cards/grids */
.gl-card[hidden],.gl-feat[hidden],.gl-grid[hidden],.gl-featrow[hidden]{display:none !important}
/* Comparison table for /compare/* competitor pages (_cb.js). The site had no real
anywhere, which meant the facts a buyer or an LLM most wants to lift were locked inside CSS
grids. Kept inside .sg-tablewrap so it scrolls on narrow screens rather than breaking the page. */
.sg-cmp{width:100%;border-collapse:collapse;font:400 15px/1.55 var(--body);min-width:560px}
.sg-cmp th,.sg-cmp td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.sg-cmp thead th{font:700 12px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);background:var(--warm);white-space:nowrap}
.sg-cmp thead th:nth-child(2){color:var(--blue)}
.sg-cmp tbody th{font-weight:700;color:var(--ink);width:26%}
.sg-cmp tbody td:first-of-type{background:rgba(21,96,240,.04)}
.sg-cmp tr:last-child th,.sg-cmp tr:last-child td{border-bottom:0}
@media (max-width:700px){.sg-cmp{font-size:14px}.sg-cmp th,.sg-cmp td{padding:12px 14px}}
/* ── Imported blog posts ───────────────────────────────────────────────────────────────────────
The 76 migrated posts are raw HTML from the old CMS with no styling of their own: 2,912
paragraphs, 1,491 h3s, 552 images and 293 lists arriving unstyled into .sg-body.
The image rule is the one that actually broke the page. Every carries its intrinsic size
as an HTML attribute — width="1792" on a 760px column — so without max-width they render at
full pixel width, blow through the container and shove the text into a narrow gutter with a
huge empty margin beside it. height:auto keeps the aspect ratio once width is capped. */
/* An , not .sg-body — .sg-prose-sec .sg-body:has(>h2:first-child) is a deliberate
two-column layout (heading left, content right) used on the guides and industry pages. Every
imported post opens with an h2, so wearing .sg-body triggered it and threw the entire article
into a 677px right column with the heading marooned on the left. */
.sg-post{max-width:none}
.sg-post>*:first-child{margin-top:0}
.sg-post p{font:400 17px/1.72 var(--body);color:var(--ink);margin:0 0 22px;text-wrap:pretty}
.sg-post h2{font:800 30px/1.22 var(--display);letter-spacing:-.022em;color:var(--ink);margin:52px 0 16px}
.sg-post h3{font:800 21px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink);margin:38px 0 12px}
.sg-post h4{font:700 17px/1.35 var(--body);color:var(--ink);margin:28px 0 10px}
.sg-post ul,.sg-post ol{margin:0 0 24px;padding-left:22px}
.sg-post li{font:400 17px/1.72 var(--body);color:var(--ink);margin-bottom:9px;padding-left:4px}
.sg-post li::marker{color:var(--faint)}
.sg-post a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.sg-post a:hover{text-decoration-thickness:2px}
.sg-post strong,.sg-post b{font-weight:700;color:var(--ink)}
.sg-post img{display:block;max-width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line);margin:30px 0}
.sg-post figure{margin:30px 0}
.sg-post figure img{margin:0}
.sg-post figcaption{font:400 13.5px/1.5 var(--body);color:var(--faint);margin-top:10px;text-align:center}
.sg-post blockquote{margin:30px 0;padding:4px 0 4px 22px;border-left:3px solid var(--tan);font:400 18px/1.65 var(--body);color:var(--muted)}
.sg-post table{width:100%;border-collapse:collapse;margin:28px 0;font:400 15px/1.55 var(--body)}
.sg-post th,.sg-post td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.sg-post th{background:var(--warm);font-weight:700}
@media (max-width:700px){
.sg-post p,.sg-post li{font-size:16px}
.sg-post h2{font-size:25px;margin-top:40px}
.sg-post h3{font-size:19px}
}
/* ── Blog post layout ──────────────────────────────────────────────────────────────────────────
Two columns: a sticky contents list, then the article at its natural measure.
The contents list sits in the far-left column and the article takes everything else, so the
page uses its full measure rather than floating a narrow column in the middle. grid rather than
float, so the aside can be position:sticky while the article scrolls past it. */
.sg-postwrap{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0 72px;align-items:start}
/* The rail is what sticks, not the contents list inside it. The list scrolls within the rail and
the CTA is pinned underneath it, so a post with fourteen headings cannot push the only
conversion point on the page out of sight — which is what happens if you simply stack them. */
.sg-side{position:sticky;top:104px;max-height:calc(100vh - 128px);display:flex;flex-direction:column;gap:22px}
.sg-toc{min-height:0;overflow-y:auto;padding-right:8px}
.sg-toc-h{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.sg-toc nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.sg-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font:400 13.5px/1.45 var(--body);color:var(--muted);text-decoration:none;text-wrap:pretty}
.sg-toc a:hover{color:var(--ink);border-left-color:var(--tan)}
/* Anchor jumps land under the fixed header without this. */
.sg-post h2{scroll-margin-top:96px}
/* Sidebar CTA. Sits under the contents list on desktop and moves to the end of the rail on narrow
screens, where it lands above the article rather than being lost after 1,500 words. */
.sg-sidecta{flex:none;background:var(--blue);color:#fff;border-radius:var(--r-card);padding:20px 20px 22px}
.sg-sidecta b{display:block;font:800 16.5px/1.25 var(--display);letter-spacing:-.018em;margin-bottom:8px}
.sg-sidecta p{font:400 13px/1.55 var(--body);color:rgba(255,255,255,.84);margin:0 0 16px}
.sg-sidecta .sg-btn{width:100%;justify-content:center;background:#fff;color:var(--ink);font-size:13.5px;padding:13px 16px;box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}
.sg-sidecta .sg-btn:hover{background:#fff}
/* Author box. The byline at the top says who wrote it; this says why that should mean anything. */
.sg-authorbox{display:grid;grid-template-columns:60px minmax(0,1fr);gap:20px;margin-top:60px;padding-top:32px;border-top:1px solid var(--line)}
.sg-authorbox img{width:60px;height:60px;border-radius:999px;object-fit:cover;object-position:50% 14%;background:var(--warm)}
.sg-authorbox b{display:block;font:800 17.5px var(--display);letter-spacing:-.015em;color:var(--ink)}
.sg-authorbox span{display:block;font:400 13px var(--body);color:var(--faint);margin-top:3px}
.sg-authorbox p{font:400 15px/1.7 var(--body);color:var(--muted);margin:13px 0 0;text-wrap:pretty}
.sg-authorbox a{display:inline-block;margin-top:8px;padding:11px 0;font:600 14px var(--body);color:var(--blue);text-decoration:none}
.sg-authorbox a:hover{text-decoration:underline}
@media (max-width:1100px){
/* Below this the two columns cannot both hold their measure, so the rail goes inline above the
article: contents list as a plain card, CTA underneath it. */
.sg-postwrap{grid-template-columns:minmax(0,760px);justify-content:center}
.sg-side{position:static;max-height:none;margin-bottom:36px;gap:18px}
.sg-toc{overflow:visible;padding:18px 20px;background:var(--warm);border:1px solid var(--line);border-radius:var(--r-card)}
.sg-toc nav{border-left:0}
.sg-toc a{padding:11px 0;border-left:0} /* 42px tall — this is a stack of links on a phone */
.sg-sidecta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 24px}
.sg-sidecta b{flex:1 1 260px;margin:0}
.sg-sidecta p{flex:1 1 100%;order:3;margin:0}
.sg-sidecta .sg-btn{width:auto;flex:none}
}
@media (max-width:640px){
.sg-authorbox{grid-template-columns:1fr;gap:14px;margin-top:48px}
.sg-sidecta .sg-btn{width:100%}
}
/* ══ Mobile hardening, second pass ═════════════════════════════════════════════════════════════
Everything below came out of loading all 310 pages in a 375px viewport and measuring, rather
than eyeballing a handful. Horizontal overflow was already clean on every page — the problems
that survived were the ones that do not overflow: layouts that shrank instead of stacking, tap
targets under the 44px guideline, and an embed two screens tall. */
/* Case study band — /ndis and /success-stories run the same section. The layout was an inline
style, so no media query could reach it without !important: at 375px the .9fr text column
resolved to 95px and was holding 58px display type. Moved to a class so it collapses. */
.sg-casestudy{padding:0 var(--pad) 88px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.sg-casestudy .sg-case-h{font:900 clamp(30px,6.4vw,58px)/1.05 var(--display);font-stretch:118%;color:var(--green);margin-top:18px;text-wrap:balance}
.sg-casestudy .sg-case-h--sm{font:800 clamp(23px,4.2vw,30px)/1.25 var(--display);font-stretch:normal;letter-spacing:-.02em;color:var(--ink);max-width:420px}
.sg-casestudy img{width:100%;height:380px;object-fit:cover;border-radius:var(--r-card)}
@media (max-width:900px){
.sg-casestudy{grid-template-columns:1fr;gap:32px;padding-bottom:64px}
.sg-casestudy picture{order:-1} /* photo first, so the band opens on something to look at */
.sg-casestudy img{height:230px}
}
/* Tap targets. The 44px guideline is about the pad of a thumb, not about taste — every control
below measured between 16px and 36px tall on a phone. The calculator slider was the worst of
them at 16px, and it is the one control on the site people are meant to play with. */
@media (pointer:coarse),(max-width:900px){
.sg-rchip{padding:11px 16px} /* was 34px tall */
.gl-f{padding:11px 15px} /* was 32px tall */
.sg-crumb a{padding:4px 2px;display:inline-block;min-height:40px;line-height:32px}
.sg-nav-logo{display:inline-flex;align-items:center;min-height:44px}
.sg-foot-bar a{display:inline-block;padding:6px 2px;min-height:40px;line-height:28px}
.sg-srcs a{padding:11px 15px} /* external source chips on the guides — measured 37px */
/* Range inputs render a 16px-tall track with a hit area to match. Padding the box out to 44
gives the thumb somewhere to be grabbed without changing how the track looks. Deliberately
unscoped: there are three separate calculators on this site with three sets of class names,
and a rule that only covers one of them is the reason this was missed the first time. */
input[type=range]{height:44px;padding:14px 0;background-clip:content-box}
input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
input[type=range]::-moz-range-thumb{width:26px;height:26px}
.sg-tcard .tl{padding-bottom:10px} /* "Book a meeting with…" measured 32px */
.sg-faq details .a a{display:inline} /* keep prose links inline, not tap-sized blocks */
}
@media (max-width:640px){
/* Below this the filter row is the only way to navigate a 76-post list, so let it breathe.
This rule exists because an earlier one at the same breakpoint shrank it to 32px tall. */
.gl-f{padding:12px 14px;font-size:13px}
}
/* Nothing on a phone should be smaller than 11px. The uppercase micro-labels are a deliberate part
of the system and stay, but the three places that had drifted to 10.5px go back up. */
@media (max-width:640px){
.gl-pin,.sg-casestudy .sg-kicker,.sg-team .tr{font-size:11px}
}
/* The Google review embed was being forced to 1400px below 1060px — nearly two full phone screens
of iframe, with the rest of the page stranded underneath it. The widget sets height:900px on
itself inline and that fits its own content, so releasing the min-height lets the inline value
stand. It is not shrunk further: the iframe carries scrolling="no", so anything shorter would
simply cut reviews off. */
@media (max-width:640px){
.sg-reviewcard{padding:18px 16px 14px}
.sg-reviewcard iframe{min-height:0}
}
/* Load more, on the blog hub. */
.sg-morewrap{display:flex;justify-content:center;margin-top:44px}
.sg-morewrap .sg-btn{padding:15px 34px}
@media (max-width:640px){.sg-morewrap .sg-btn{width:100%;justify-content:center}}
/* ── Blog post: short answer, staffing close, FAQ and citations ───────────────────────────────
The originals carry four blocks the migrated posts do not. Each is styled to read as a distinct
beat rather than more article: the reader should be able to tell at a glance that the short
answer is the summary, the staffing block is us, and the sources are evidence. */
/* Plain-English answer above the article. The complaint that fixed this was that the posts read as
technical from the first line — so this is deliberately the lightest thing on the page. */
.sg-shortans{background:var(--warm);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-card);padding:22px 26px;margin:0 0 40px}
.sg-shortans b{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.sg-shortans p{font:400 17.5px/1.62 var(--body);color:var(--ink);margin:0;text-wrap:pretty}
/* "How we would staff this" — the article explains the subject, this says what we would do. */
.sg-staffing{margin:64px 0 0;padding-top:40px;border-top:1px solid var(--line)}
.sg-staffing h2{margin:12px 0 14px}
.sg-staffing>p{font:400 16.5px/1.7 var(--body);color:var(--muted);margin:0 0 26px;max-width:62ch}
.sg-rolecard{background:var(--warm);border:1px solid var(--line);border-radius:var(--r-panel);padding:28px 30px}
.sg-rolecard .rc-role{font:800 20px/1.25 var(--display);letter-spacing:-.018em;color:var(--ink);margin-bottom:20px}
.sg-rolecard .rc-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.sg-rolecard .rc-cols b{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.sg-rolecard ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sg-rolecard li{position:relative;padding-left:24px;font:400 15px/1.6 var(--body);color:var(--ink);margin:0;text-wrap:pretty}
.sg-rolecard li::before{position:absolute;left:0;top:0;font-weight:700}
.sg-rolecard .yes li::before{content:"✓";color:var(--green)}
.sg-rolecard .no li::before{content:"✕";color:#B4522F}
.sg-rolecard .rc-foot{margin:24px 0 20px;padding-top:18px;border-top:1px solid var(--line);font:400 13.5px/1.6 var(--body);color:var(--faint)}
/* FAQ on a post. Reuses .sg-faq wholesale so it is the same control as the other 132 pages —
and so build-faq-schema.mjs finds it without being taught a second markup shape. */
.sg-postfaq{margin:60px 0 0;padding-top:40px;border-top:1px solid var(--line)}
.sg-postfaq h2{margin:0 0 20px}
/* Citations. Small, quiet, and last before the byline — evidence, not decoration. */
.sg-sources{margin:52px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.sg-sources b{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.sg-sources ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-sources li{font:400 14px/1.6 var(--body);color:var(--muted);padding-left:16px;position:relative;text-wrap:pretty}
.sg-sources li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:99px;background:var(--line-strong)}
.sg-sources a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.sg-sources a:hover{color:var(--blue)}
@media (max-width:640px){
/* These run to a median of 89 words because they are written to be lifted whole by an answer
engine, which is the point of them. Tightened rather than truncated — an 82-word block was
435px tall on a phone, which is a lot of preamble before the article starts. */
.sg-shortans{padding:18px 20px;margin-bottom:32px}
.sg-shortans p{font-size:16px;line-height:1.55}
.sg-rolecard{padding:22px 20px}
.sg-rolecard .rc-cols{grid-template-columns:1fr;gap:22px}
.sg-rolecard .sg-btn{width:100%;justify-content:center}
}
/* Tables inside a post. Reuses .sg-tablewrap so a wide table scrolls in its own box rather than
pushing the page sideways — a three-column table of statute names cannot wrap below the width of
its longest word, so width:100% alone let two posts overflow a 375px viewport. */
.sg-post .sg-tablewrap{margin:28px 0;border-radius:var(--r-card)}
.sg-post .sg-tablewrap table{margin:0;border:0}
.sg-post .sg-tablewrap th:first-child,.sg-post .sg-tablewrap td:first-child{border-left:0}
.sg-post .sg-tablewrap th:last-child,.sg-post .sg-tablewrap td:last-child{border-right:0}
@media (max-width:640px){
.sg-post .sg-tablewrap table{font-size:14px;min-width:460px}
.sg-post .sg-tablewrap th,.sg-post .sg-tablewrap td{padding:9px 11px}
}
/* Buttons inside a post body.
.sg-post a{color:var(--blue);text-decoration:underline} is (0,1,1) and .sg-btn is (0,1,0), so
the prose link rule was winning on any button placed inside an article — the staffing CTA
rendered #1560F0 text on a #1560F0 background, which is not faint, it is invisible. Raising the
selector to (0,2,1) puts the button back in charge of its own colour. */
.sg-post a.sg-btn{color:#fff;text-decoration:none}
.sg-post a.sg-btn:hover,.sg-post a.sg-btn:focus-visible{color:#fff;text-decoration:none}
.sg-post a.sg-btn--ghost{color:var(--ink)}
.sg-post a.sg-btn--ghost:hover{color:var(--ink)}
/* ── Client quotes ────────────────────────────────────────────────────────────────────────────
Three real reviews replacing one invented pull-quote. A grid rather than the old single
centred quote because three named businesses saying three different things is the actual
evidence — one big quote from a nameless "Operations Manager" was never going to carry it.
Selectors are doubled up (.sg-testi--grid .sg-tgrid q) rather than relying on source order to
beat the .sg-testi q rule above, which sets a 40px display face. Equal specificity decided by
file position is the kind of thing that breaks the next time someone reorders this file. */
.sg-testi--grid{max-width:var(--wrap);text-align:left;padding:84px 0}
.sg-testi--grid .sg-kicker{margin-bottom:26px}
.sg-tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sg-testi--grid .sg-tgrid figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 28px 24px;display:flex;flex-direction:column}
.sg-testi--grid .sg-tgrid q{display:block;quotes:none;font:400 16.5px/1.66 var(--body);letter-spacing:0;color:var(--ink);flex:1;text-wrap:pretty}
.sg-testi--grid .sg-tgrid q::before{content:"";display:block;width:28px;height:2px;background:var(--tan);margin-bottom:18px}
.sg-testi--grid .sg-tgrid figcaption{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.sg-testi--grid .sg-tgrid figcaption b{display:block;font:700 14.5px var(--body);color:var(--ink)}
.sg-testi--grid .sg-tgrid figcaption span{display:block;font:400 13px var(--body);color:var(--faint);margin-top:3px}
@media (max-width:960px){
.sg-testi--grid{padding:60px 0}
.sg-tgrid{grid-template-columns:1fr;gap:18px}
.sg-testi--grid .sg-tgrid figure{padding:24px 22px 20px}
}
/* "Updated " beside the byline. Shown only when a post genuinely has a modified date later
than its published date, so it never appears on a post that has not been touched. */
.sg-byline em .upd{display:block;margin-top:3px;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}