/* ============================================================
   Haukioja Professional Corporation — site stylesheet
   One file. Change a colour here and it changes everywhere.

   Palette taken from the printed business card (Ready Print,
   Aug 2026): navy field, gold/yellow accent bar and logo mark.
   ============================================================ */

:root{
  /* brand, exact values from the logo sheet */
  --navy:#0E3A6E;          /* brand blue: buttons, trust bar, CTA */
  --navy-2:#17508F;        /* lighter blue for hover states */
  --ink:#0B2545;           /* near-black blue: body text, dark sections */
  --ink-2:#42536E;         /* secondary text */
  --ink-3:#77869E;         /* captions, small print */
  --gold:#FFFE56;          /* brand yellow: bars and rules only, never text */
  --gold-ink:#3F6099;      /* mid blue for small-caps labels. The brand yellow
                              is far too pale to read as text, so labels use
                              blue and yellow stays a graphic device. */

  /* surfaces */
  --paper:#F9FAFC;
  --paper-2:#EDF1F7;
  --line:#D6DEE9;
  --line-dark:#26374F;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.12;margin:0}
a{color:inherit}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin:0 0 18px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(249,250,252,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
header::after{content:"";display:block;height:3px;background:var(--gold)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:40px;height:40px;flex:none;display:block;object-fit:contain}
.brand .txt{display:flex;flex-direction:column;line-height:1.1}
/* Wordmark with the yellow rule under it, matching the printed lockup */
.brand b{font-family:var(--sans);font-size:19px;letter-spacing:.09em;font-weight:700;color:var(--navy);display:block;padding-bottom:4px;border-bottom:3px solid var(--gold)}
.brand .txt span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--navy);margin-top:4px;display:block;font-weight:600}
/* nowrap matters: without it a two-word label breaks across lines, the nav grows
   past its fixed 74px and the phone button ends up sitting on top of the last
   item. Section navs on the longer pages carry six or seven items. */
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav ul li{white-space:nowrap}
.nav ul a{text-decoration:none;font-size:15px;color:var(--ink-2);padding-bottom:3px;border-bottom:2px solid transparent;transition:.18s;white-space:nowrap}
.nav ul a:hover{color:var(--navy);border-color:var(--gold)}
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:500;padding:12px 24px;border-radius:2px;transition:.18s;border:1px solid var(--navy)}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2)}
.btn-ghost{color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--line);padding:9px 13px;font-size:14px;border-radius:2px;cursor:pointer;font-family:var(--sans)}

/* ---------- hero ---------- */
.hero{padding:92px 0 78px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.hero h1{font-size:clamp(40px,5.1vw,62px)}
.hero h1 em{font-style:italic;color:var(--navy)}
.lede{font-size:19px;color:var(--ink-2);margin:26px 0 0;max-width:35em}
/* Scannable question list under a lede. Lets a reader who will not read the page
   still see what it is for in about four seconds. */
.lede-list{list-style:none;margin:24px 0 0;padding:0;max-width:34em}
.lede-list li{position:relative;padding:0 0 0 24px;margin:0 0 12px;font-size:18px;color:var(--ink-2);line-height:1.45}
.lede-list li:before{content:"";position:absolute;left:1px;top:10px;width:8px;height:8px;background:var(--navy);border-radius:50%}
.lede-after{font-size:17px;color:var(--ink-3);margin:22px 0 0;max-width:36em}
@media(max-width:720px){.lede-list li{font-size:16.5px}.lede-after{font-size:16px}}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

.feecard{border:1px solid var(--line);background:#fff;padding:0 0 24px;border-radius:3px;box-shadow:0 1px 3px rgba(16,31,56,.06);overflow:hidden}
.feecard::before{content:"";display:block;height:5px;background:var(--gold)}
.feecard h3{font-size:14px;font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:26px 30px 0}
.feecard ul{list-style:none;margin:20px 0 0;padding:0 30px}
.feecard li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--paper-2)}
.feecard li:last-child{border-bottom:0}
.feecard .svc{font-size:16px}
.feecard .amt{font-family:var(--serif);font-size:19px;white-space:nowrap;color:var(--navy)}
.feecard .amt small{font-family:var(--sans);font-size:11px;color:var(--ink-3);display:block;text-align:right;letter-spacing:.06em;text-transform:uppercase}
.feecard p{font-size:13px;color:var(--ink-3);margin:20px 0 0;line-height:1.55;padding:0 30px}

/* "Start here" card that sits where the fee card used to */
.startcard{padding:0 30px}
.startcard .tagline{font-family:var(--serif);font-size:16px;color:var(--ink-2);margin:16px 0 0;padding:0;line-height:1.45}
.startcard ol{margin:22px 0 26px;padding:0 0 0 20px;font-size:15px;color:var(--ink-2)}
.startcard ol li{margin-bottom:13px;padding-left:3px}
.startcard ol li::marker{color:var(--gold-ink);font-weight:600}
.startcard ol b{color:var(--ink);font-weight:600}
.startcard .alt{font-size:14px;text-align:center;margin:14px 0 0;padding:0;color:var(--ink-3)}
.startcard .alt a{color:var(--navy);font-weight:500}

/* ---------- trust ---------- */
.trust{background:var(--navy);color:#E8EEF7;padding:34px 0;border-top:3px solid var(--gold)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.trust b{display:block;font-family:var(--serif);font-size:17px;color:#fff;margin-bottom:5px;font-weight:600}
.trust p{margin:0;font-size:14px;color:#A9BCD8;line-height:1.5}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-head{max-width:44em;margin-bottom:52px}
.sec-head h2{font-size:clamp(30px,3.6vw,42px)}
.sec-head p{color:var(--ink-2);font-size:18px;margin:20px 0 0}

.cards{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 36px;transition:background .2s,box-shadow .2s;text-decoration:none;display:block;position:relative}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.2s}
.card:hover{background:#fff}
.card:hover::before{background:var(--navy)}
.card .n{font-family:var(--serif);font-size:13px;color:var(--gold-ink);letter-spacing:.1em}
.card h3{font-size:25px;margin:14px 0 0}
.card .std{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.card p{color:var(--ink-2);font-size:16px;margin:16px 0 0}
.card .price{margin-top:22px;font-family:var(--serif);font-size:18px;color:var(--navy)}
.card .more{margin-top:18px;font-size:14px;color:var(--navy);font-weight:500}
.card:hover .more{text-decoration:underline;text-underline-offset:3px}

/* ---------- support strip (payroll etc) ---------- */
.support{margin-top:44px;border:1px solid var(--line);border-left:4px solid var(--navy);background:#fff;padding:30px 34px;display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:center}
.support h3{font-size:21px}
.support .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:10px}
.support p{margin:0;color:var(--ink-2);font-size:16px}

/* ---------- explainer ---------- */
.explain{background:var(--paper-2)}
.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.explain h2{font-size:clamp(28px,3.4vw,38px)}
.explain p{color:var(--ink-2);margin:20px 0 0}
.levels{list-style:none;margin:0;padding:0}
.levels li{border-left:3px solid var(--navy);padding:0 0 26px 22px}
.levels li:last-child{padding-bottom:0}
.levels b{font-family:var(--serif);font-size:19px;display:block;margin-bottom:6px}
.levels span{font-size:15px;color:var(--ink-2)}

/* ---------- who ---------- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.who-grid.two-up{grid-template-columns:repeat(2,1fr);gap:44px 60px}
.who h3{font-size:21px;margin-bottom:12px}
.who p{color:var(--ink-2);font-size:16px;margin:0}
.who .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px;font-weight:600}
.who a.more{display:inline-block;margin-top:14px;font-size:14px;color:var(--navy);font-weight:500;text-decoration:none;border-bottom:2px solid rgba(14,58,110,.35);padding-bottom:2px}
.who a.more:hover{border-bottom-color:var(--navy)}

/* ---------- process ---------- */
.process{background:var(--ink);color:#DFE7F2}
.process .sec-head h2{color:#fff}
.process .sec-head p{color:#93A5C0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark)}
.step{padding:34px 30px 0 0;border-right:1px solid var(--line-dark)}
.step:last-child{border-right:0;padding-right:0}
.step .num{font-family:var(--serif);font-size:14px;color:var(--gold);letter-spacing:.1em}
.step b{display:block;font-family:var(--serif);font-size:20px;margin:12px 0 10px;color:#fff;font-weight:600}
.step p{margin:0;font-size:15px;color:#93A5C0}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
/* Tiles are spans rather than links. See the note in index.html: no per-town
   pages exist, and thin ones would do more harm than good. */
.areas a,.areas span{background:var(--paper);padding:20px 22px;text-decoration:none;font-size:16px;color:var(--ink-2);display:block}
.areas a{transition:.18s;border-bottom:3px solid transparent}
.areas a:hover{background:#fff;color:var(--navy);border-bottom-color:var(--navy)}
.areas a small,.areas span small{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--serif);font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-ink);font-family:var(--sans);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--ink-2);margin:16px 0 0;max-width:52em;font-size:16px}

/* ---------- cta ---------- */
.cta{background:var(--navy);color:#fff;border-top:3px solid var(--gold)}
.cta h2{font-size:clamp(28px,3.4vw,40px);color:#fff;max-width:14em}
.cta p{color:#A9BCD8;font-size:18px;margin:20px 0 0;max-width:34em}
.cta .btn{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.cta .btn:hover{background:transparent;color:var(--gold)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}

.contact-direct{margin:34px 0 26px;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.phone-big{display:inline-block;font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);color:var(--gold);text-decoration:none;letter-spacing:-.01em}
.phone-big:hover{text-decoration:underline;text-underline-offset:5px}
.contact-direct .hrs{display:block;font-size:14px;color:#A9BCD8;margin-top:10px;max-width:32em;line-height:1.5}
.contact-list{list-style:none;margin:0;padding:0;font-size:15px;color:#A9BCD8}
.contact-list li{margin-bottom:10px}
.contact-list a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,254,86,.6);padding-bottom:1px}
.contact-list a:hover{border-bottom-color:var(--gold)}
.contact-list .socials{display:flex;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.contact-direct .hrs a{color:#fff;border-bottom:1px solid rgba(255,254,86,.6)}

.contact-form{background:#fff;padding:32px 32px 28px;border-radius:3px;border-top:5px solid var(--gold)}
.contact-form label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);margin:0 0 7px}
.contact-form input[type=text],.contact-form input[type=tel],.contact-form input[type=email],.contact-form textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--paper);
  margin:0 0 20px;transition:border-color .15s,box-shadow .15s;
}
.contact-form textarea{resize:vertical;line-height:1.5}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,107,.12);
}
.contact-form ::placeholder{color:var(--ink-3);opacity:1}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-submit{width:100%;text-align:center;font-size:16px;padding:14px 24px;cursor:pointer;font-family:var(--sans)}
.f-note{font-size:13px;color:var(--ink-3);margin:14px 0 0;text-align:center;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.navphone{font-variant-numeric:tabular-nums}

/* ---------- article pages ---------- */
.page-head{padding:70px 0 0}
.page-head h1{font-size:clamp(34px,4.4vw,52px);max-width:18em}
.page-head .lede{font-size:19px}
.portrait{width:190px;height:190px;object-fit:cover;border-radius:2px;border-top:5px solid var(--gold);margin:34px 0 0;display:block}
.prose{padding:50px 0 96px;font-size:17px}
.prose h2{font-size:28px;margin:48px 0 16px}
.prose h3{font-size:21px;margin:34px 0 10px}
.prose p{color:var(--ink-2);margin:0 0 18px}
.prose ul{color:var(--ink-2);padding-left:20px;margin:0 0 18px}
.prose li{margin-bottom:9px}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
/* ---------- gathering checklist ---------- */
.checklist{border:1px solid var(--line);border-top:5px solid var(--gold);background:#fff;padding:30px 34px 34px;margin:28px 0}
.checklist h3{font-size:15px;font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-weight:600;margin:30px 0 12px}
.checklist h3:first-child{margin-top:0}
.checklist .ck-note{font-size:14px;color:var(--ink-3);margin:0 0 12px}
.checklist ul{list-style:none;margin:0;padding:0;column-gap:38px}
.checklist li{margin:0;padding:0;break-inside:avoid}
/* Block, not flex. A flex label turns each <strong> or <a> inside it into a
   separate column instead of letting the text flow. The checkbox is
   positioned out of the text flow instead. */
.checklist label{display:block;position:relative;padding:7px 0 7px 28px;font-size:15.5px;color:var(--ink-2);cursor:pointer;line-height:1.45}
.checklist label:hover{color:var(--ink)}
.checklist input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  position:absolute;left:0;top:10px;
  width:17px;height:17px;border:1.5px solid var(--ink-3);
  border-radius:2px;background:#fff;cursor:pointer;transition:.12s;
}
.checklist input[type=checkbox]:hover{border-color:var(--navy)}
.checklist input[type=checkbox]:checked{background:var(--navy);border-color:var(--navy)}
.checklist input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.checklist input[type=checkbox]:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.checklist label:has(input:checked){color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
@media(min-width:700px){.checklist ul{columns:2}}

/* Print the checklist cleanly, since people will */
@media print{
  header,footer,.cta,.page-head .btn,.crumb{display:none !important}
  /* Scroll animations never fire in print, so force the content visible */
  .reveal{opacity:1 !important;transform:none !important}
  body{background:#fff;font-size:12pt}
  .checklist{border:1px solid #999;page-break-inside:avoid}
  .checklist input[type=checkbox]{border-color:#333}
  a{text-decoration:none;color:#000}
  .prose h2{page-break-after:avoid}
}

.callout{border-left:4px solid var(--navy);background:var(--paper-2);padding:22px 26px;margin:30px 0}
.callout p{margin:0;color:var(--ink-2)}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:20px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#93A5C0;padding:64px 0 30px;font-size:15px;border-top:3px solid var(--gold)}
/* ---------------------------------------------------------------------------
   Sample report visual. Used at the top of the accounting solutions page so a
   reader who will not read 1,500 words can still see what the output looks
   like. Pure CSS and inline SVG, no chart library, no JS.
   --------------------------------------------------------------------------- */
.viz{border:1px solid var(--line);border-radius:10px;background:#fff;padding:26px 26px 22px;margin:38px 0 4px;box-shadow:0 1px 3px rgba(14,58,110,.06)}
.viz-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.viz-head h3{margin:0;font-size:17px;font-family:var(--sans);font-weight:600;color:var(--navy)}
.viz-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-family:var(--sans);font-weight:600;white-space:nowrap}
.viz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.viz-stat{background:var(--wash);border-radius:7px;padding:14px 14px 12px}
.viz-stat .k{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-family:var(--sans);font-weight:600;margin-bottom:7px;line-height:1.3}
.viz-stat .v{display:block;font-size:25px;font-family:var(--sans);font-weight:700;color:var(--navy);line-height:1}
.viz-stat .n{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px;font-family:var(--sans)}
.viz-panels{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.viz-panel h4{margin:0 0 14px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-family:var(--sans);font-weight:600}
.viz-bar{margin-bottom:11px}
.viz-bar .lab{display:flex;justify-content:space-between;font-size:12.5px;font-family:var(--sans);color:var(--ink-2);margin-bottom:4px}
.viz-bar .lab b{color:var(--navy);font-weight:600}
.viz-track{height:8px;background:var(--wash);border-radius:4px;overflow:hidden}
.viz-fill{height:100%;background:var(--navy);border-radius:4px}
.viz-fill.low{background:#C6893F}
.viz-note{font-size:12px;color:var(--ink-3);margin:12px 0 0;font-family:var(--sans);line-height:1.5}
/* Two-up comparison, used for the bottleneck example. The winner is marked with
   a border rather than a colour fill so it still reads when printed. */
.viz-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.viz-col{border:1px solid var(--line);border-radius:8px;padding:16px 16px 14px}
.viz-col.win{border-color:var(--navy);border-width:1.5px;background:var(--wash)}
.viz-col h5{margin:0 0 12px;font-size:13.5px;font-family:var(--sans);font-weight:600;color:var(--navy)}
.viz-row{display:flex;justify-content:space-between;font-size:12.5px;font-family:var(--sans);color:var(--ink-2);padding:5px 0}
.viz-row.tot{border-top:1px solid var(--line);margin-top:7px;padding-top:9px;font-weight:600;color:var(--navy);font-size:14px}
/* ---------------------------------------------------------------------------
   T accounts, for the history page. Built from borders rather than SVG so the
   grid reflows on a phone instead of shrinking the text to nothing.
   --------------------------------------------------------------------------- */
.taccts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px;margin:24px 0 8px}
.tacct{font-family:var(--sans)}
.tacct .nm{text-align:center;font-weight:600;font-size:13px;color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:6px}
.tacct .cols{display:grid;grid-template-columns:1fr 1fr;min-height:76px}
.tacct .cols>div{padding:7px 9px;font-size:12.5px;color:var(--ink-2);line-height:1.65}
.tacct .cols>div:first-child{border-right:2px solid var(--navy);text-align:right}
.tacct .ref{color:var(--ink-3);font-size:10.5px}
.tacct .bal{border-top:1px solid var(--line);padding-top:7px;text-align:center;font-size:12.5px;font-weight:600;color:var(--navy)}
.tacct .bal span{font-weight:400;color:var(--ink-3);font-size:11px}
@media(max-width:700px){.taccts{grid-template-columns:1fr 1fr;gap:20px 16px}}
@media(max-width:430px){.taccts{grid-template-columns:1fr}}

/* Two statements side by side, collapsing on narrow screens */
.stmts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:22px 0 6px}
.stmt{border:1px solid var(--line);background:#fff;padding:18px 20px 16px;border-radius:6px}
.stmt h5{margin:0 0 12px;font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stmt .r{display:flex;justify-content:space-between;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);padding:4px 0}
.stmt .r.tot{border-top:1px solid var(--line);margin-top:7px;padding-top:8px;font-weight:600;color:var(--navy)}
.stmt .r.hl{background:#FBF6EF;margin:6px -20px 0;padding:8px 20px;font-weight:600;color:#A9762F}
.stmt .sub{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin:10px 0 4px;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:640px){.stmts{grid-template-columns:1fr}}

/* Bulleted considerations inside a two-up panel. Deliberately not a checklist:
   ticking boxes implies a score, and this decision does not have one. */
.viz-col ul{list-style:none;margin:0;padding:0}
.viz-col li{position:relative;padding:0 0 0 17px;margin:0 0 9px;font-size:13.5px;line-height:1.45;color:var(--ink-2);font-family:var(--sans)}
.viz-col li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
@media(max-width:560px){.viz-vs{grid-template-columns:1fr}}
@media(max-width:720px){
  .viz{padding:20px 18px 18px}
  .viz-stats{grid-template-columns:1fr 1fr;gap:10px}
  .viz-panels{grid-template-columns:1fr;gap:26px}
  .viz-stat .v{font-size:22px}
}

/* Five columns: brand, Services, Who I work with, Resources, Contact. Every page
   on the site is reachable from every other page, which is the point. Collapses
   to two columns on tablet and one on phone via the breakpoints further down. */
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1.15fr;gap:34px}
footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px;font-weight:600;font-family:var(--sans)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{text-decoration:none;transition:.18s}
footer a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:12px}
/* White tile so the blue mark reads against the dark footer */
.foot-brand .mark{width:44px;height:44px;flex:none;display:block;object-fit:contain;background:#fff;padding:4px;border-radius:2px}
.foot-brand b{font-family:var(--sans);font-size:20px;color:#fff;display:block;font-weight:700;letter-spacing:.09em;padding-bottom:4px;border-bottom:3px solid var(--gold)}
.foot-brand span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:4px;font-weight:600}

.diagram{margin:0 0 40px;background:#fff;border:1px solid var(--line);padding:26px 24px}
.diagram svg{display:block;width:100%;height:auto;font-family:var(--sans)}
@media(max-width:720px){.diagram{padding:16px 12px;overflow-x:auto}.diagram svg{min-width:620px}}

/* Two-column explainer used for the financial vs management accounting section */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:#fff}
.twocol > div{padding:38px 36px}
.twocol > div:first-child{border-right:1px solid var(--line)}
.twocol .kind{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:12px}
.twocol h3{font-size:24px;margin-bottom:8px}
.twocol .who-for{font-size:14px;color:var(--ink-3);margin:0 0 18px}
.twocol p{color:var(--ink-2);font-size:16px;margin:0 0 14px}
.twocol ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px}
.twocol li{margin-bottom:8px}
.twocol .bar{height:4px;background:var(--gold);margin-bottom:22px;width:56px}
.licence{border:1px solid var(--line-dark);border-left:3px solid var(--gold);padding:16px 18px;margin-top:22px;font-size:13px;line-height:1.5;color:#A9BCD8}
.foot-bot{border-top:1px solid var(--line-dark);margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:960px){
  .hero-grid,.explain-grid,.support,.contact-grid{grid-template-columns:1fr;gap:44px}
  .twocol{grid-template-columns:1fr}
  .twocol > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .trust-grid,.who-grid,.areas{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-right:0;padding-right:0;padding-bottom:26px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Tighten the section nav before it runs out of room, then collapse it to the
   Menu button well above the phone breakpoint. Seven items at 15px with 30px
   gaps needs roughly 1150px once the wordmark and phone button are allowed for. */
@media(max-width:1180px){
  .nav ul{gap:20px}
  .nav ul a{font-size:14px}
}
@media(max-width:1040px){
  .nav ul{display:none}
  .menu-btn{display:block}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:20px}
  .nav.open ul{display:flex;flex-direction:column;gap:14px;width:100%;padding-top:18px;border-top:1px solid var(--line);margin-top:14px;font-size:15px}
}
@media(max-width:720px){
  body{font-size:16px}
  section{padding:66px 0}
  .hero{padding:60px 0 50px}
  .nav ul,.nav .btn{display:none}
  .menu-btn{display:block}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:20px}
  .nav.open ul{display:flex;flex-direction:column;gap:14px;width:100%;padding-top:18px;border-top:1px solid var(--line);margin-top:14px}
  .cards,.trust-grid,.who-grid,.who-grid.two-up,.areas,.steps,.foot-grid,.f-row{grid-template-columns:1fr}
  .card{padding:30px 24px}
  .contact-form{padding:26px 22px 24px}
  /* The header phone button used to be kept here, because on a phone tapping it
     is the whole point. The fixed call bar at the bottom of the screen now does
     that job better, and three items (wordmark, phone, Menu) do not fit across
     a 410px header without the phone button wrapping to two lines and landing
     on top of the wordmark. So it comes out, and the bar carries it. */
  .nav .navphone{display:none}
  .nav{gap:14px}
  .brand b{white-space:nowrap}
  /* 40px serif on a 410px screen eats the entire first screen before anyone
     reaches a sentence. */
  .hero h1{font-size:clamp(30px,7.6vw,40px)}
  .hero{padding:44px 0 40px}
}
@media(max-width:460px){
  /* With the phone button gone from the header there is room for the full
     wordmark again, so the second line stays. */
  .brand b{font-size:18px}
  .brand .mark{width:36px;height:36px}
  .nav{height:66px}
}

/* Mobile call bar, injected by site.js on narrow screens only. Delete this
   block and the matching block in site.js to remove it everywhere. */
.callbar{display:none}
@media(max-width:720px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);border-top:3px solid var(--gold);box-shadow:0 -2px 14px rgba(14,58,110,.22)}
  .callbar a{flex:1;display:block;text-align:center;padding:15px 10px;font-family:var(--sans);font-size:16px;font-weight:600;color:#fff;text-decoration:none}
  .callbar a.t{flex:0 0 96px;border-left:1px solid rgba(255,255,255,.22);color:var(--gold)}
  body.has-callbar{padding-bottom:62px}
}
@media print{.callbar{display:none !important}}

/* ---------------------------------------------------------------------------
   Phone refinements. Everything above already collapses the layout; this block
   deals with the things that only show up on a real handset: tables that push
   the page sideways, headings sized for a desktop column, and links that are
   hard to hit with a thumb.
   --------------------------------------------------------------------------- */

/* Long unbroken strings (a pasted URL, a CRA form number with slashes) can push
   the whole page wider than the screen, which makes every section scroll
   horizontally. Breaking them is always better than a sideways page. */
.prose,.prose p,.prose li,.prose td,.prose th{overflow-wrap:break-word}

@media(max-width:720px){
  /* Tables are the main offender. Rather than crushing four columns into 340px,
     let the table itself scroll while the rest of the page stays still. The
     min-width keeps columns legible instead of collapsing to one word per line. */
  .prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px;margin:20px 0}
  .prose table thead,.prose table tbody{display:table;width:100%;min-width:480px}
  .prose th,.prose td{padding-left:10px;padding-right:10px}

  /* Desktop heading sizes are set for a 700px column and read as shouting on a
     phone. These are still clearly headings, just proportionate. */
  .prose h2{font-size:24px;margin:38px 0 14px}
  .prose h3{font-size:19px;margin:28px 0 9px}

  /* Thumb targets. 10px between footer links is fine with a mouse and fiddly
     with a thumb, and mis-taps in a footer are the ones people give up on. */
  footer li{margin-bottom:16px}
  footer{padding:48px 0 26px}
  .foot-grid{gap:38px}
  .nav.open ul a{display:block;padding:6px 0}

  /* Callouts and checklists were padded for a wide column */
  .callout{padding:18px 18px;margin:24px 0}
  .checklist{padding:22px 20px}
}

@media(max-width:460px){
  section{padding:52px 0}
  .prose h2{font-size:22px}
  .page-head h1{font-size:clamp(28px,8vw,34px)}
  /* Diagrams already scroll sideways inside their own box. Narrowing the frame
     gives the drawing itself more of the screen. */
  .diagram{padding:14px 8px}
  .viz{padding:18px 14px 16px}
  .viz-stats{grid-template-columns:1fr 1fr;gap:8px}
}