/* ==========================================================================
   ACCOUNTANTS FOR HOSPITALITY, S14 (5 Nov 2026)
   Modelled on ottolenghi.co.uk, which Andy picked from four mock-ups on 5 Nov 2026.
   White ground, a light grotesk (Inter Tight), headings in the logo red at regular
   weight, photographs inset 10px from the window with the title laid over them, a
   square red tab for the phone number, captioned photographs in uneven grids,
   thin arrow links. Each page is composed from its own content; this file holds the
   shared frame first and then each page's own pieces.
   Never: serif, cream, blue, dark green, capitals, arches, condensed type.
   ========================================================================== */

:root {
  --red: #9e1b32;      /* the red in the logo */
  --red-d: #7d1427;
  --ink: #1b1b1b;
  --tx: #2a2a2a;
  --mut: #5f5f5f;
  --line: #e6e6e6;
  --pale: #f5f4f3;
  --f: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fh: "Bricolage Grotesque", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1440px;
  --gut: 40px;
  --edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--f); font-weight: 300; font-size: 18px; line-height: 1.45; color: var(--tx);
  background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--fh); font-weight: 500; font-variation-settings: "wdth" 100; color: var(--red); line-height: 1.08; letter-spacing: -.02em; }
h1 { font-size: 64px; line-height: 1; letter-spacing: -.02em; }
h2 { font-size: 30px; }
h3 { font-size: 22px; color: var(--ink); line-height: 1.2; }
h4 { font-size: 16px; color: var(--ink); letter-spacing: 0; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
b, strong { font-weight: 500; color: var(--ink); }
figure { margin: 0; }
ul, ol { list-style: none; }
::selection { background: #f0d6db; }
.prose p, .prose li, .card p, .tbl td, footer.site { overflow-wrap: anywhere; }

.wrap, .inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding-top: 104px; position: relative; }
.sec.tight { padding-top: 72px; }
/* an inset panel, the same 10px from the window as the photographs */
.g-blush, .g-ox { margin: 104px 10px 0; padding: 88px 0; }
.g-blush { background: var(--pale); }
.g-ox { background: var(--red); color: #fff; }
.g-ox h2, .g-ox h3, .g-ox h4, .g-ox b, .g-ox strong { color: #fff; }
.g-ox .mut, .g-ox .src { color: rgba(255,255,255,.78); }
.g-blush > .wrap, .g-ox > .wrap { padding: 0 calc(var(--gut) - 10px); }
.lede { font-size: 22px; line-height: 1.32; letter-spacing: -.01em; max-width: 33em; }
.big { font-size: 30px; line-height: 1.18; letter-spacing: -.015em; color: var(--ink); }
.mut { color: var(--mut); }
.src { font-size: 13px; color: var(--mut); line-height: 1.5; }

/* ---------- links and buttons ---------- */
.arrow, .txt-link, .card-link { display: inline-flex; align-items: center; font-weight: 400; font-size: 16px; color: var(--ink); cursor: pointer; }
.arrow::after, .txt-link::after, .card-link::after { content: ""; display: inline-block; width: 26px; height: 1px; background: currentColor; margin-left: 12px; transition: width .2s; }
.arrow:hover::after, .txt-link:hover::after, a:hover .card-link::after, .card-link:hover::after { width: 40px; }
.arrow.r { color: var(--red); }
.btn { display: inline-flex; align-items: center; background: var(--red); color: #fff; font: 400 15px/1.2 var(--f); padding: 14px 30px; border-radius: 40px; border: 0; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--red-d); }
.btn-white, .g-ox .btn { background: #fff; color: var(--red); }
.btn-white:hover, .g-ox .btn:hover { background: var(--pale); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pill-w { font: 400 14px/1.2 var(--f); padding: 10px 20px; border-radius: 40px; border: 1px solid rgba(255,255,255,.7); color: #fff; background: none; cursor: pointer; }
.pill-w:hover { background: #fff; color: var(--red); }

/* ---------- masthead ---------- */
header.site { position: sticky; top: 0; z-index: 60; background: #fff; display: flex; align-items: center; gap: 40px; padding: 16px var(--gut); border-bottom: 1px solid var(--line); }
.wordmark { flex: none; display: block; }
.wordmark img { height: 72px; width: auto; }
nav.primary { display: flex; align-items: center; gap: 26px; flex: 1; }
nav.primary > a, .nav-group > button { font: 400 14px/1.2 var(--f); color: var(--ink); background: none; border: 0; cursor: pointer; padding: 10px 0; border-bottom: 1px solid transparent; }
nav.primary > a:hover, nav.primary > a.on, .nav-group > button:hover, .nav-group > button.on { border-bottom-color: var(--red); color: var(--red); }
.nav-group { position: relative; }
.nav-group .sub { position: absolute; top: 100%; left: -20px; min-width: 280px; background: #fff; padding: 12px 20px; border: 1px solid var(--line); opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; }
.nav-group:hover .sub, .nav-group:focus-within .sub { opacity: 1; visibility: visible; }
.nav-group .sub a { display: block; padding: 9px 0; font-size: 15px; color: var(--ink); }
.nav-group .sub a:hover, .nav-group .sub a.on { color: var(--red); }
header.site .book { flex: none; background: var(--red); color: #fff; font-size: 14px; font-weight: 400; padding: 12px 26px; border-radius: 40px; }
header.site .book:hover { background: var(--red-d); }
.nav-toggle { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); }
.nav-toggle span:first-child { top: 15px; } .nav-toggle span:last-child { top: 24px; }

/* ---------- the photograph slab ---------- */
.slab { position: relative; margin: 10px; height: 560px; overflow: hidden; background: #222; color: #fff; }
.slab > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slab::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.36) 55%, rgba(0,0,0,0) 82%); }
.slab .tx { position: absolute; left: 50px; top: 54px; max-width: 700px; z-index: 2; }
.slab h1, .slab h2 { color: #fff; font-size: 64px; line-height: .98; letter-spacing: -.02em; }
.slab h2 { font-size: 52px; line-height: 1; }
.slab p, .slab .lede { color: #fff; font-size: 19px; line-height: 1.38; margin: 22px 0 26px; max-width: 34em; letter-spacing: 0; }
.slab .arrow { color: #fff; }
.slab .tab { position: absolute; right: 0; bottom: 0; z-index: 2; background: var(--red); color: #fff; padding: 17px 28px; font-size: 15px; font-weight: 400; }
.slab .tab:hover { background: var(--red-d); }
.slab--full { height: clamp(560px, calc(100vh - 100px), 760px); }
.slab--full h1 { font-size: 78px; }
.slab--tall { height: 600px; }
.slab--short { height: 460px; }
.slab--low { height: 380px; }
.slab--bottom .tx { top: auto; bottom: 54px; }
.slab--bottom::before { background: linear-gradient(0deg, rgba(0,0,0,.74), rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 80%); }
.slab--centre .tx { top: 50%; transform: translateY(-50%); }
.slab--right .tx { left: auto; right: 50px; }
.slab--right::before { background: linear-gradient(270deg, rgba(0,0,0,.72), rgba(0,0,0,.36) 55%, rgba(0,0,0,0) 82%); }
.slab.inline { height: 600px; margin-top: 104px; }

/* a plain opening, no photograph */
.top-plain { padding: 88px 0 0; }
.top-plain h1 { max-width: 15em; }
.top-plain .lede { margin-top: 26px; }
.top-plain .arrow { margin-top: 28px; }

/* ---------- section heads ---------- */
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 34px; }
.sh h2 { max-width: 30em; }
.sh-p { font-size: 24px; line-height: 1.26; letter-spacing: -.01em; color: var(--ink); max-width: 30em; margin: -10px 0 44px; }
.sec-h { margin-bottom: 34px; }

/* ---------- generic pieces ---------- */
/* columns under a rule, no boxes */
.grid { display: grid; gap: 48px 40px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 16px; color: var(--mut); line-height: 1.45; margin-bottom: 16px; }
.card .card-link { margin-top: auto; }
.g-ox .card { border-top-color: rgba(255,255,255,.6); }
.g-ox .card p { color: rgba(255,255,255,.82); }
.g-ox .card-link, .g-ox .arrow { color: #fff; }

/* ruled rows: name, what it covers, the link */
.rows { border-top: 1px solid var(--ink); }
.rows .row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 8px 40px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--tx); }
.rows .row h3 { font-size: 22px; }
.rows .row p { font-size: 16px; color: var(--mut); margin: 0; }
a.row:hover h3 { color: var(--red); }

/* captioned photographs */
.cap { margin-top: 14px; font-size: 15px; line-height: 1.4; }
.cap b { display: block; font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 4px; }
.cap span { color: var(--mut); }
.cap i { display: block; font-style: normal; color: var(--red); margin-top: 6px; }
.dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin: 0 10px 3px 0; }
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
a:hover .ph img { transform: scale(1.025); }

/* a figure ledger: big red numbers under hairlines */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.figs > div { padding: 16px 0; border-top: 1px solid var(--line); }
.figs b { display: block; font-size: 34px; font-weight: 400; color: var(--red); letter-spacing: -.02em; line-height: 1.1; }
.figs span { font-size: 14px; color: var(--mut); }
.ledger li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ledger li span { font-size: 16px; }
.ledger li b { font-size: 28px; font-weight: 400; color: var(--red); white-space: nowrap; line-height: 1; letter-spacing: -.02em; }
.g-ox .ledger li { border-bottom-color: rgba(255,255,255,.25); }
.g-ox .ledger li b { color: #fff; }

ul.checks li { padding: 16px 0 16px 22px; border-top: 1px solid var(--line); position: relative; font-size: 17px; }
ul.checks li:last-child { border-bottom: 1px solid var(--line); }
ul.checks li::before { content: ""; position: absolute; left: 0; top: 26px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.g-ox ul.checks li { border-color: rgba(255,255,255,.25); }
.g-ox ul.checks li::before { background: #fff; }

/* the questions, laid open in two columns */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.faq > div { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.faq.odd { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.faq h3 { font-size: 20px; margin-bottom: 10px; }
.faq p { font-size: 16px; color: var(--mut); line-height: 1.5; }
.faq p + p { margin-top: .7em; }
.faq a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.faq-c, .faq-split { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.faq-c > h2, .faq-split > h2 { margin-bottom: 34px; }

/* the Buzz group links: one quiet ruled row */
.xs { padding-top: 88px; }
.xs + .xs { padding-top: 48px; }
.xs .xs-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; }
.xs h2 { font-size: 22px; }
.xs .xs-note { font-size: 13px; color: var(--mut); margin-top: 10px; line-height: 1.5; }
.xs ul { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.xs li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.xs li a { font-weight: 400; color: var(--ink); font-size: 17px; }
.xs li a:hover { color: var(--red); }
.xs li p { font-size: 14px; color: var(--mut); margin: 4px 0 0; }

/* ---------- the closing ---------- */
.close { padding-top: 120px; }
.close .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 72px; align-items: end; padding-top: 44px; position: relative; }
.close .wrap::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--ink); }
.close h2 { font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.close p { font-size: 18px; color: var(--tx); margin-bottom: 26px; }
.close-acts { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }

/* ---------- footer ---------- */
footer.site { background: var(--pale); margin: 120px 10px 10px; padding: 64px calc(var(--gut) - 10px) 28px; font-size: 14px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ft-brand .wordmark img { height: 72px; }
.ft-phone { font-size: 26px; color: var(--red); margin: 22px 0 6px; }
footer.site h4 { color: var(--red); font-size: 14px; font-weight: 400; margin-bottom: 12px; }
footer.site h4.ft-h2 { margin-top: 28px; }
footer.site li { padding: 3px 0; }
footer.site a:hover { color: var(--red); }
.footer-accred { padding: 26px 0; border-top: 1px solid var(--line); }
.accred-logos { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; }
.accred-logo-box { height: 38px; display: flex; align-items: center; }
.accred-logo { height: 100%; width: auto; max-width: 118px; object-fit: contain; }
.ft-legal { font-size: 12px; line-height: 1.55; color: var(--mut); max-width: 62em; padding-top: 20px; border-top: 1px solid var(--line); }
.ft-legal a { text-decoration: underline; }
.fine { margin-top: 20px; font-size: 12px; color: var(--mut); display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; }
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wa-float svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- long-form: guides, articles, privacy ---------- */
.prose { font-weight: 350; font-size: 18px; line-height: 1.6; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.4em 0 .7em; font-size: 30px; }
.prose h3 { margin: 1.8em 0 .5em; font-size: 22px; }
.prose ul, .prose ol { margin: 1em 0 1.3em 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .45em; padding-left: .2em; }
.prose li::marker { color: var(--red); }
.prose a, .doc-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong, .prose b { font-weight: 500; }
.note { background: var(--pale); padding: 24px 28px; margin: 1.8em 0; font-size: 17px; }
.note .note-label { display: block; font-weight: 400; font-size: 18px; color: var(--red); margin-bottom: 6px; }
.rulebox { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--ink); padding: 18px 0; margin: 1.6em 0; }
.rulebox .rb-ref { color: var(--red); font-size: 15px; }

.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; }
.doc-sec { padding-top: 88px; }
.doc-side { position: sticky; top: 110px; }
.doc-side:empty { display: none; }
.doc:has(> .doc-side:empty) { grid-template-columns: minmax(0, 1fr); }
.doc-body { max-width: 42em; }
.doc-body h2 { scroll-margin-top: 110px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-rail { border-top: 1px solid var(--ink); padding-top: 14px; }
.doc-rail .drt { font-size: 15px; color: var(--red); margin-bottom: 8px; }
.doc-rail ol { counter-reset: rl; }
.doc-rail li { counter-increment: rl; border-bottom: 1px solid var(--line); }
.doc-rail a { display: block; padding: 9px 0 9px 30px; position: relative; font-size: 14px; color: var(--tx); line-height: 1.35; }
.doc-rail a::before { content: counter(rl, decimal-leading-zero); position: absolute; left: 0; top: 9px; font-size: 13px; color: var(--mut); }
.doc-rail a:hover, .doc-rail a.on { color: var(--red); }
.doc-mark { font-size: 15px; color: var(--red); }

/* a guide's worked figure, wider than the reading column */
.fig { margin: 2.4em -72px 2.6em; background: var(--pale); padding: 40px 72px; font-variant-numeric: tabular-nums; font-weight: 300; }
.fig h3 { color: var(--red); margin: 0 0 18px; font-size: 22px; }
.fig figcaption { font-size: 13px; color: var(--mut); margin-top: 18px; line-height: 1.5; }
.prose .fig ul, .prose .fig ol { margin: 0; padding: 0; list-style: none; }
.prose .fig li { margin: 0; padding-left: 0; }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid #e2e0de; font-size: 16px; }
.fx-row b { font-weight: 400; color: var(--ink); white-space: nowrap; }
.fx-row small { display: block; font-size: 13px; color: var(--mut); }
.fx-row.fx-total { border-top: 1px solid var(--ink); }
.fx-row.fx-total b { color: var(--red); font-size: 26px; letter-spacing: -.02em; }
.fx-row.fx-out { color: var(--mut); }
.fx-bars li { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 6.5em; gap: 14px; align-items: center; padding: 8px 0; font-size: 15px; }
.fx-bars i { display: block; height: 18px; width: var(--w); background: var(--red); }
.fx-bars li.prev i { background: #c9c3bf; }
.fx-bars b { text-align: right; font-weight: 400; color: var(--ink); }
.fx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.fx-compare > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.fx-compare h4 { font-size: 17px; font-weight: 400; margin-bottom: 8px; }
.fx-compare .big { display: block; font-size: 34px; color: var(--red); margin-top: 10px; letter-spacing: -.02em; }
.fx-steps li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid #e2e0de; font-size: 16px; }
.fx-steps li > b:first-child { color: var(--red); font-weight: 400; }

.tbl { overflow-x: auto; margin: 1.6em 0; border-top: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 13px 14px 13px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 13px; font-weight: 400; color: var(--mut); }
.tbl td:first-child { color: var(--ink); font-weight: 400; }

/* ---------- forms ---------- */
label { display: block; font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
input, select, textarea { width: 100%; padding: 14px 0; font: 300 17px var(--f); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #bdbdbd; border-radius: 0; }
textarea { border: 1px solid #bdbdbd; padding: 12px 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); }
.form-msg { margin-top: 14px; font-size: 15px; display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 20px; }
.field .hint { font-size: 13px; color: var(--mut); margin-top: 5px; }

/* ---------- calculators ---------- */
.calc-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0; align-items: stretch; }
.calc-inputs { padding: 8px 64px 8px 0; }
.calc-results { background: var(--red); color: #fff; padding: 44px 44px 40px; font-variant-numeric: tabular-nums; }
.calc-results h3 { color: #fff; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.45); font-size: 22px; }
.cr { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.18); }
.cr > span { color: rgba(255,255,255,.85); }
.cr > b { color: #fff; font-weight: 400; white-space: nowrap; }
.cr-strong { border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); margin-top: 6px; padding: 14px 0; font-size: 16px; }
.cr-strong > span { color: #fff; }
.cr-strong > b { font-size: 38px; letter-spacing: -.02em; }
.cr-rule { border: 0; border-top: 1px solid rgba(255,255,255,.45); margin: 14px 0 6px; }
.calc-note { margin-top: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: #fff; background: rgba(255,255,255,.1); }
.calc-note b, .calc-note strong { color: #fff; }
.calc-note + .calc-note { margin-top: 8px; }
.calc-warn { background: rgba(255,255,255,.18); }
.calc-verdict { font-size: 26px; color: #fff; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.45); line-height: 1.15; }
.calc-disclaimer { font-size: 13px; color: var(--mut); margin-top: 20px; }
.calc-disclaimer a { color: var(--red); text-decoration: underline; }
.calc-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }


/* ---------- the frame at smaller widths ---------- */
@media (max-width: 1200px) {
  nav.primary { gap: 18px; }
  header.site { gap: 28px; }
}
@media (max-width: 1080px) {
  :root { --gut: 28px; }
  header.site { justify-content: space-between; gap: 16px; }
  .nav-toggle { display: block; order: 3; flex: none; }
  nav.primary { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 20px; border-bottom: 1px solid var(--line); max-height: calc(100vh - 80px); overflow-y: auto; }
  nav.primary.open { display: flex; }
  nav.primary > a, .nav-group > button { display: block; width: 100%; text-align: left; font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-group .sub { position: static; opacity: 1; visibility: visible; border: 0; padding: 4px 0 8px 14px; min-width: 0; }
  .nav-group .sub a { font-size: 15px; padding: 8px 0; color: var(--mut); }
  header.site .book { margin-left: auto; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .doc-side { position: static; }
  .fig { margin-left: 0; margin-right: 0; padding: 32px 28px; }
  .calc-wrap { grid-template-columns: minmax(0, 1fr); }
  .calc-inputs { padding: 0 0 40px; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --gut: 18px; }
  body { font-size: 17px; }
  h1 { font-size: 42px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  header.site { padding: 12px var(--gut); }
  .wordmark img { height: 44px; }
  header.site { gap: 12px; }
  header.site .book { padding: 9px 14px; font-size: 13px; }
  .sec { padding-top: 72px; }
  .g-blush, .g-ox { margin: 72px 6px 0; padding: 56px 0; }
  .g-blush > .wrap, .g-ox > .wrap { padding: 0 calc(var(--gut) - 6px); }
  .lede { font-size: 19px; }
  .big { font-size: 23px; }
  .slab { margin: 6px; height: 540px; }
  .slab::before, .slab--right::before, .slab--bottom::before { background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.46)); }
  .slab .tx, .slab--right .tx { left: 22px; right: 22px; top: 30px; }
  .slab--bottom .tx { top: auto; bottom: 74px; }
  .slab--centre .tx { top: 50%; }
  .slab h1, .slab--full h1 { font-size: 42px; }
  .slab h2 { font-size: 34px; }
  .slab p, .slab .lede { font-size: 17px; margin: 16px 0 20px; }
  .slab--full { height: 600px; }
  .slab--short, .slab--low { height: 440px; }
  .slab.inline { height: 560px; margin-top: 72px; }
  .slab .tab { padding: 14px 20px; font-size: 14px; }
  .top-plain { padding-top: 52px; }
  .sh { margin-bottom: 24px; }
  .sh-p { font-size: 20px; margin: -4px 0 32px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rows .row { grid-template-columns: minmax(0, 1fr); }
  .figs b { font-size: 28px; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .xs { padding-top: 64px; }
  .xs .xs-in { grid-template-columns: minmax(0, 1fr); }
  .xs ul { grid-template-columns: minmax(0, 1fr); }
  .close { padding-top: 80px; }
  .close .wrap { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .close h2 { font-size: 38px; }
  footer.site { margin: 80px 6px 6px; padding: 44px calc(var(--gut) - 6px) 24px; }
  .ft-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 26px; }
  .fig { padding: 26px 18px; margin-left: calc(-1 * var(--gut) + 6px); margin-right: calc(-1 * var(--gut) + 6px); }
  .fx-bars li { grid-template-columns: minmax(0, 1fr) 5.5em; }
  .fx-bars li i { grid-column: 1 / -1; grid-row: 2; }
  .fx-compare { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fx-steps li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rulebox { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .calc-results { padding: 30px 22px; margin: 0 calc(-1 * var(--gut) + 6px); }
  .wa-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.h-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.h-who .ph { aspect-ratio: 4 / 5; height: auto; margin-bottom: 18px; }
.h-who h3 { font-size: 22px; color: var(--ink); display: flex; align-items: center; gap: 14px; }
.h-who h3::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .2s; }
.h-who a:hover h3::after { width: 48px; }
.h-who p { font-size: 16px; color: var(--mut); line-height: 1.45; }
.h-who a:hover h3 { color: var(--red); }
.h-svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; }
.h-svc-l { position: sticky; top: 110px; }
.h-svc-l h2 { font-size: 44px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 22px; }
.h-svc-l p { font-size: 19px; line-height: 1.45; margin-bottom: 22px; max-width: 26em; }
.h-svc-l .ph { height: 420px; margin-top: 44px; }
.h-svc-l2 { border-top: 1px solid var(--ink); }
.h-svc-l2 > li { border-bottom: 1px solid var(--line); }
.h-svc-l2 a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; }
.h-svc-l2 b { font-family: var(--fh); font-weight: 500; font-size: 34px; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); transition: color .15s; }
.h-svc-l2 a:hover b { color: var(--red); }
.h-svc-l2 span { color: var(--red); font-size: 26px; white-space: nowrap; }
.h-svc-l2 small { font-size: 14px; color: var(--mut); }
.h-pulse img { object-position: 50% 40%; }

@media (max-width: 1080px) {
  .h-who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 22px; }
  .h-who .ph { height: auto; }
  .h-svc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .h-svc-l { position: static; }
  .h-svc-l .ph { height: 360px; }
}
@media (max-width: 760px) {
  .h-who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .h-who .ph { height: auto; margin-bottom: 12px; }
  .h-who h3 { font-size: 17px; }
  .h-who h3::after { display: none; }
  .h-svc-l h2 { font-size: 32px; }
  .h-svc-l .ph { height: 240px; margin-top: 32px; }
  .h-svc-l2 a { flex-direction: column; gap: 6px; padding: 20px 0; }
  .h-svc-l2 b { font-size: 24px; }
  .h-svc-l2 span { font-size: 20px; }
}

/* ==========================================================================
   SHARED BY THE AUDIENCE AND SERVICE PAGES
   ========================================================================== */
/* services set like a printed menu */
.menu-l { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--ink); }
.menu-l li { border-bottom: 1px solid var(--line); }
.menu-l a { display: block; padding: 20px 0 22px; }
.menu-l a > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.menu-l b { font-weight: 400; font-size: 20px; }
.menu-l span { color: var(--red); font-size: 15px; white-space: nowrap; }
.menu-l p { font-size: 15px; color: var(--mut); margin-top: 6px; line-height: 1.42; max-width: 36em; }
.menu-l a:hover b { color: var(--red); }
.menu-l[style*="--c:3"] a > div { flex-direction: column; gap: 4px; }

/* ==========================================================================
   RESTAURANTS AND CAFÉS
   ========================================================================== */
.r-dish-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 72px; align-items: start; margin-bottom: 56px; }
.r-dish-h h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; }
.r-bar { display: flex; gap: 6px; margin-bottom: 36px; }
.r-bar > div { min-width: 0; }
.r-bar i { display: block; height: 150px; background: var(--red); margin-bottom: 18px; }
.r-bar > div:nth-child(1) i { background: #cfc8c4; }
.r-bar > div:nth-child(2) i { background: var(--ink); }
.r-bar b { display: block; font-size: 56px; font-weight: 300; color: var(--red); letter-spacing: -.03em; line-height: 1; }
.r-bar span { display: block; font-size: 15px; color: var(--mut); margin-top: 8px; max-width: 16em; padding-right: 12px; }
.r-vat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.r-vat > .ph { height: 720px; }
.r-vat h2 { margin-bottom: 26px; }
.r-rates { border-top: 1px solid var(--ink); margin-bottom: 26px; }
.r-rates li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.r-rates b { font-size: 40px; font-weight: 300; color: var(--red); letter-spacing: -.03em; line-height: 1; }
.r-rates span { font-size: 16px; }
.r-vat p { font-size: 17px; margin-bottom: 22px; }

/* ==========================================================================
   PUBS AND BARS
   ========================================================================== */
.p-pint-h { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.p-pint-h h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 18px; }
.p-pint-h p { color: var(--mut); }
.pint-stage { display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); gap: 64px; align-items: center; }
.pint { height: 420px; display: flex; flex-direction: column; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.pint .p-head { flex: 0 0 9%; background: #ece8e4; }
.pint .p-rest { flex: 4.14 1 0; background: var(--red); }
.pint .p-duty { flex: .44 1 0; background: var(--ink); }
.pint .p-vat { flex: .92 1 0; background: #cfc8c4; }
.pint-fig { padding: 22px 0; border-top: 1px solid var(--ink); }
.pint-fig b { display: block; font-size: 56px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -.03em; }
.pint-fig span { display: block; font-size: 15px; margin-top: 10px; color: var(--mut); }
.pint-fig i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; }
.k-vat { background: #cfc8c4; } .k-duty { background: var(--ink); } .k-rest { background: var(--red); }
.pint-l { text-align: right; }
.pint-r .src { margin-top: 18px; }
.p-lic-slab { height: 520px; }
.p-lic-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; counter-reset: lic; margin-top: 44px; }
.p-lic-l li { counter-increment: lic; border-top: 1px solid var(--ink); padding-top: 18px; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.p-lic-l li::before { content: counter(lic, decimal-leading-zero); display: block; font-size: 15px; color: var(--red); margin-bottom: 22px; }
.p-lic-l h3 { margin-bottom: 10px; }
.p-lic-l p { font-size: 16px; color: var(--mut); }
.p-lic-n { font-size: 15px; color: var(--mut); margin-top: 36px; max-width: 46em; }
.p-lic-n a, .r-vat p a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.p-svc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 80px; align-items: start; }
.p-svc > div:first-child { position: sticky; top: 120px; }
.p-svc h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 22px; }
.p-svc p { font-size: 17px; color: var(--mut); margin-bottom: 24px; }

/* ==========================================================================
   HOTELS AND B&BS
   ========================================================================== */
.t-cal-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 72px; margin-bottom: 44px; }
.t-cal-h h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; }
.t-cal-h p { font-size: 20px; line-height: 1.35; color: var(--ink); }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--mut); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal > span { display: flex; flex-direction: column; justify-content: space-between; min-height: 76px; padding: 10px 12px; background: var(--pale); font-size: 12px; color: var(--mut); }
.cal > span em { font-style: normal; font-size: 20px; color: var(--ink); }
.cal > span.long { background: var(--red); color: rgba(255,255,255,.8); }
.cal > span.long em { color: #fff; }
.t-cal-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 14px; }
.t-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.t-two .ph { margin-bottom: 26px; }
.t-a .ph, .t-b .ph { height: 480px; }
.t-two h3 { font-size: 26px; color: var(--red); margin-bottom: 14px; }
.t-two p { font-size: 17px; max-width: 34em; }
.t-two .arrow { margin-top: 22px; }

/* ==========================================================================
   MULTI-SITE GROUPS
   ========================================================================== */
.org { text-align: center; margin: 12px 0 64px; }
.org .o-top { display: inline-block; border: 1px solid var(--red); padding: 20px 44px; }
.org .o-top b { display: block; font-weight: 400; font-size: 26px; color: var(--red); }
.org .o-top span { font-size: 14px; color: var(--mut); }
.org .o-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; padding-top: 70px; }
.org .o-sites::before { content: ""; position: absolute; top: 0; left: 50%; height: 36px; border-left: 1px solid var(--red); }
.org .o-sites::after { content: ""; position: absolute; top: 36px; left: 16.66%; right: 16.66%; border-top: 1px solid var(--red); }
.org .o-site { position: relative; background: var(--red); color: #fff; padding: 26px 24px; }
.org .o-site::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 34px; border-left: 1px solid var(--red); }
.org .o-site b { display: block; font-weight: 400; font-size: 24px; color: #fff; }
.org .o-site span { font-size: 15px; color: rgba(255,255,255,.85); }
.org-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.org-rules h3 { margin-bottom: 14px; }
.g-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.g-team > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.g-team h3 { margin-bottom: 22px; }
.g-team b { display: block; font-size: 56px; font-weight: 300; color: var(--red); letter-spacing: -.03em; line-height: 1; }
.g-team small { display: block; font-size: 14px; color: var(--mut); margin: 8px 0 18px; }
.g-team p { font-size: 16px; color: var(--mut); }

@media (max-width: 1080px) {
  .r-dish-h, .t-cal-h, .p-svc { grid-template-columns: minmax(0, 1fr); }
  .p-svc > div:first-child { position: static; }
  .r-vat, .t-two { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .r-vat > .ph { height: 480px; }
  .t-b .ph { margin-top: 0; }
  .p-lic-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .p-lic-l li { display: block; grid-row: auto; }
  .pint-stage { grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); gap: 32px; }
  .menu-l[style*="--c:3"] { --c: 2 !important; }
}
@media (max-width: 760px) {
  .menu-l { grid-template-columns: minmax(0, 1fr) !important; }
  .r-dish-h h2, .p-pint-h h2, .t-cal-h h2, .p-svc h2 { font-size: 32px; }
  .r-bar { flex-direction: column; gap: 22px; }
  .r-bar > div { flex: none !important; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .r-bar i { height: auto; grid-row: 1 / span 2; margin: 0; }
  .r-bar b { font-size: 40px; }
  .r-vat > .ph { height: 320px; }
  .r-rates b { font-size: 32px; }
  .r-rates li { grid-template-columns: 70px minmax(0, 1fr); }
  .pint-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pint { width: 180px; height: 300px; margin: 0 auto 28px; order: -1; }
  .pint-l { text-align: left; }
  .pint-fig b { font-size: 42px; }
  .p-lic-l { grid-template-columns: minmax(0, 1fr); }
  .p-lic-slab { height: 360px; }
  .cal > span { min-height: 54px; padding: 6px; }
  .cal > span small { font-size: 0; }
  .cal > span em { font-size: 14px; }
  .t-cal-sum { grid-template-columns: minmax(0, 1fr); }
  .t-a .ph, .t-b .ph { height: 300px; }
  .org .o-sites { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 40px; }
  .org .o-sites::after, .org .o-site::before { display: none; }
  .org .o-sites::before { height: 40px; }
  .org-rules, .g-team { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g-team b { font-size: 44px; }
}

/* ==========================================================================
   SERVICE PAGES
   ========================================================================== */
/* a large heading on the left, its explanation on the right */
.cal-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 72px; align-items: start; margin-bottom: 48px; }
.cal-top h2, .rates-sec .cal-top h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; }
.cal-top p { font-size: 20px; line-height: 1.38; color: var(--ink); }
.g-ox .cal-top p { color: #fff; }

/* accounts: the receipt beside its explanation */
.op-receipt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.or-copy h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 24px; }
.or-copy p { font-size: 18px; }
.or-copy a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.receipt { background: #fff; padding: 34px 34px 26px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 400; box-shadow: 0 24px 50px rgba(0,0,0,.08); transform: rotate(-1deg); }
.receipt .rc-head { text-align: center; font-size: 13px; color: var(--ink); padding-bottom: 14px; border-bottom: 1px dashed var(--ink); }
.receipt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 11px 0; border-bottom: 1px dashed #c9c9c9; font-size: 13px; }
.receipt li span { color: var(--tx); }
.receipt li span small { display: block; color: var(--mut); font-size: 11.5px; }
.receipt li b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.receipt li b.zero { color: var(--red); }
.receipt li b.out { color: var(--mut); }
.receipt .rc-foot { padding-top: 14px; font-size: 11.5px; color: var(--mut); text-align: center; }

/* numbered steps across the page */
.steprow { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 40px; counter-reset: sr; }
.steprow > div { counter-increment: sr; border-top: 1px solid var(--ink); padding-top: 18px; }
.steprow > div::before { content: counter(sr); display: block; font-size: 72px; font-weight: 300; line-height: 1; color: var(--red); letter-spacing: -.03em; margin-bottom: 22px; }
.steprow h3 { margin-bottom: 10px; }
.steprow p { font-size: 16px; color: var(--mut); }
.g-ox .steprow > div { border-top-color: rgba(255,255,255,.6); }
.g-ox .steprow > div::before { color: #fff; }
.g-ox .steprow p { color: rgba(255,255,255,.85); }

/* three subjects side by side */
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 48px; }
.topics > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.topics h2 { font-size: 24px; margin-bottom: 16px; }
.topics p { font-size: 16px; color: var(--tx); }

/* payroll: three routes for a tip */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lane { padding: 40px 34px 36px; background: var(--pale); }
.lane.l2 { background: #ece9e6; }
.lane.l3 { background: var(--red); color: #fff; }
.lane h3 { font-size: 22px; margin-bottom: 26px; color: var(--red); min-height: 2.5em; }
.lane.l3 h3 { color: #fff; }
.lane dt { font-size: 13px; color: var(--mut); padding-top: 14px; }
.lane.l3 dt { color: rgba(255,255,255,.75); }
.lane dd { font-size: 17px; color: var(--ink); padding: 2px 0 14px; border-bottom: 1px solid rgba(0,0,0,.1); }
.lane.l3 dd { color: #fff; border-bottom-color: rgba(255,255,255,.25); }
.lane dd:last-child { border-bottom: 0; }

/* copy beside a photograph that runs to the window edge */
.edge { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.edge .edge-photo { margin-right: calc(-1 * var(--edge) + 10px); align-self: stretch; }
.edge .edge-photo img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; }
.edge.left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.edge.left .edge-photo { order: -1; margin-right: 0; margin-left: calc(-1 * var(--edge) + 10px); }
.edge-copy h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 24px; }
.edge-copy p { font-size: 18px; }
.edge-copy a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* dated timeline */
.timeline li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.timeline .when { font-size: 20px; color: var(--red); line-height: 1.2; }
.timeline p { font-size: 16px; margin: 0; }

/* a heading in a left column, the rest on the right */
.aside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 80px; align-items: start; }
.aside h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 18px; }
.aside .rc-note { color: var(--mut); font-size: 16px; }
.ratecard .rc-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ratecard .rc-row.rc-h { padding: 0 0 12px; font-size: 13px; color: var(--mut); border-bottom-color: var(--ink); }
.ratecard .rc-row > span:first-child { font-size: 18px; color: var(--ink); }
.ratecard .rc-row b { font-size: 46px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -.03em; }
.ratecard .rc-row b.next { color: var(--ink); font-size: 34px; }

/* two subjects side by side */
.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 80px; }
.twin h2 { margin-bottom: 18px; }
.twin h2 + p, .twin p + h2 { margin-top: 0; }
.twin p + h2 { margin-top: 40px; }
.twin p { font-size: 17px; }

/* rates: the scale across the window */
.rates-sec .cal-top { padding: 0 var(--gut); max-width: var(--max); margin: 0 auto 48px; }
.rsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 10px; }
.rsteps > div { padding: 44px 32px 44px; min-height: 300px; display: flex; flex-direction: column; }
.rsteps > div:nth-child(1) { background: var(--pale); }
.rsteps > div:nth-child(2) { background: #ece9e6; }
.rsteps > div:nth-child(3) { background: var(--red); color: #fff; }
.rsteps > div:nth-child(4) { background: var(--red-d); color: #fff; }
.rsteps .rv { font-size: 15px; }
.rsteps b { display: block; font-size: 56px; font-weight: 300; line-height: 1; margin: 18px 0 auto; color: var(--red); letter-spacing: -.03em; padding-bottom: 24px; }
.rsteps > div:nth-child(n+3) b { color: #fff; }
.rsteps p { font-size: 15px; margin: 0; max-width: 18em; }
.rsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin-top: 48px; }
.rsum > div { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; color: var(--mut); }
.rsum b { display: block; font-size: 34px; font-weight: 400; color: var(--red); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; }
.rs-src { margin-top: 16px; }
.edge-photo.low img { min-height: 520px; }

/* Business Pulse: a year of takings against the budget */
.week-card h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 10px; }
.week-card .wk-sub { color: var(--mut); margin-bottom: 40px; }
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 18px; }
.wd { font-size: 14px; color: var(--mut); display: flex; flex-direction: column; gap: 4px; }
.wd b { font-size: 20px; font-weight: 400; color: var(--ink); order: 2; margin-top: 10px; }
.wd .bar { order: 1; height: 220px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--ink); }
.wd .bar i { flex: 1; background: #e3dfdc; display: block; }
.wd .bar i.act { background: var(--ink); }
.wd .bar i.act.under { background: var(--red); }
.wd span { order: 3; }
.wd .lab { color: var(--ink); }
.wd .lab.hi { color: var(--red); }
.wk-key { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; font-size: 14px; color: var(--mut); }
.wk-key i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; }
.yeargrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; }
.yeargrid .bar { height: 260px; }
.yeargrid .bar i.none { background: transparent; }
.yeargrid .wd span { font-size: 13px; }
.k-plan { background: #e3dfdc; } .k-at { background: var(--ink); } .k-under { background: var(--red); }
.week-card .wk-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 17px; max-width: 48em; }

/* a portrait beside a paragraph */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.person .p-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 24px; }
.person p { font-size: 22px; line-height: 1.32; letter-spacing: -.01em; color: var(--ink); }

/* prices set large */
.tickets { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 48px; }
.ticket { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; }
.ticket h3 { margin-bottom: 26px; }
.ticket .amt { font-size: 72px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -.035em; }
.ticket .amt i { font-style: normal; font-size: 20px; letter-spacing: 0; margin-right: 8px; color: var(--mut); }
.ticket .amt small { display: block; font-size: 14px; color: var(--mut); letter-spacing: 0; margin-top: 10px; }
.ticket p { margin-top: 18px; font-size: 16px; color: var(--mut); }
.after-cards { margin-top: 40px; font-size: 16px; color: var(--mut); max-width: 50em; }
.after-cards .arrow { margin-left: 12px; }

/* selling: a photograph that holds its place beside the conditions */
.hold { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.hold .h-photo { position: sticky; top: 110px; }
.hold .h-photo img { width: 100%; height: calc(100vh - 160px); max-height: 780px; object-fit: cover; }
.hold h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 20px; }
.hold-sub { font-size: 19px; color: var(--ink); margin-bottom: 36px; }
.gates { counter-reset: gt; border-top: 1px solid var(--ink); }
.gates li { counter-increment: gt; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.gates li::before { content: counter(gt); font-size: 64px; font-weight: 300; color: var(--red); line-height: .9; letter-spacing: -.03em; }
.gates li b { display: block; font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.gates li span { display: block; font-size: 16px; color: var(--tx); }
.gates li .ref { margin-top: 10px; font-size: 13px; color: var(--red); }
.hold-foot { margin-top: 28px; font-size: 16px; color: var(--mut); }

/* one big statement beside its paragraphs */
.stmt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 80px; align-items: start; }
.stmt h2 { font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.stmt p { font-size: 19px; line-height: 1.45; }

@media (max-width: 1080px) {
  .cal-top, .op-receipt, .aside, .person, .hold, .stmt { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .edge, .edge.left { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .edge .edge-photo, .edge.left .edge-photo { margin: 0; order: -1; }
  .edge .edge-photo img { min-height: 0; height: 460px; }
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .rsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hold .h-photo { position: static; }
  .hold .h-photo img { height: 420px; }
  .weekgrid { gap: 0 8px; }
  .yeargrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 8px; }
  .yeargrid .bar { height: 150px; }
  .yeargrid .wd span { font-size: 11px; }
  .person .p-photo img { max-width: 420px; }
}
@media (max-width: 760px) {
  .cal-top h2, .rates-sec .cal-top h2, .or-copy h2, .edge-copy h2, .aside h2, .week-card h2, .person h2, .hold h2 { font-size: 32px; }
  .stmt h2 { font-size: 36px; }
  .cal-top p { font-size: 18px; }
  .receipt { transform: none; padding: 24px 18px; }
  .steprow { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
  .steprow > div::before { font-size: 52px; margin-bottom: 12px; }
  .topics, .twin, .rsum, .tickets { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .edge .edge-photo img { height: 300px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ratecard .rc-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ratecard .rc-row > span:first-child { font-size: 15px; }
  .ratecard .rc-row b { font-size: 28px; } .ratecard .rc-row b.next { font-size: 22px; }
  .rsteps { grid-template-columns: minmax(0, 1fr); margin: 0 6px; }
  .rsteps > div { min-height: 0; padding: 30px 22px; }
  .rsteps b { font-size: 44px; padding-bottom: 14px; }
  .weekgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 4px; }
  .wd { font-size: 0; }
  .wd b { font-size: 13px; }
  .wd .bar { height: 150px; gap: 2px; }
  .wd .lab { font-size: 11px; }
  .person p { font-size: 19px; }
  .ticket .amt { font-size: 56px; }
  .gates li { grid-template-columns: 52px minmax(0, 1fr); }
  .gates li::before { font-size: 44px; }
}

/* ==========================================================================
   OUTSOURCED FINANCE TEAM, FUNDING, NORTHERN IRELAND
   ========================================================================== */
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.lv { border-top: 1px solid var(--ink); padding-top: 18px; }
.lv h3 { margin-bottom: 22px; }
.lv-price { font-size: 64px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -.035em; }
.lv-price i { font-style: normal; font-size: 18px; color: var(--mut); letter-spacing: 0; margin-right: 8px; }
.lv-price small { display: block; font-size: 14px; color: var(--mut); letter-spacing: 0; margin-top: 10px; }
.lv-inc { font-size: 15px; color: var(--red); margin-top: 18px; }
.lv ul { margin-top: 22px; }
.lv li { padding: 14px 0; border-top: 1px solid var(--line); }
.lv li b { display: block; font-weight: 400; font-size: 17px; margin-bottom: 4px; }
.lv li span { font-size: 15px; color: var(--mut); line-height: 1.4; display: block; }
.hire-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 72px; margin-bottom: 48px; }
.hire-h h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; }
.hire-h p { font-size: 17px; }
.hb { padding: 26px 0; border-top: 1px solid var(--ink); }
.hb h3 { margin-bottom: 14px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 9em; gap: 20px; align-items: center; padding: 8px 0; font-size: 15px; color: var(--mut); }
.hb-row i { display: block; height: 26px; width: var(--w); background: var(--ink); }
.hb-row.out i { background: var(--red); }
.hb-row b { font-size: 26px; font-weight: 300; color: var(--ink); text-align: right; letter-spacing: -.02em; white-space: nowrap; }
.hb-row.out b { color: var(--red); }

.fund-go { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 80px; align-items: end; }
.fund-go h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 20px; }
.fund-go p { font-size: 19px; }
.fund-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fund-line { grid-column: 1 / -1; font-size: 13px; color: var(--mut); max-width: 70em; padding-top: 18px; border-top: 1px solid var(--line); }
.needs-h { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 44px; }
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
.need h3 { color: var(--red); font-size: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.need li { padding: 16px 0; border-bottom: 1px solid #e2dfdc; }
.need li b { display: block; font-weight: 400; font-size: 18px; margin-bottom: 4px; }
.need li span { font-size: 15px; color: var(--mut); line-height: 1.45; display: block; }
.gov2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 80px; }
.gov2 h2 { font-size: 36px; margin-bottom: 18px; }
.gov2 p { font-size: 17px; margin-bottom: 22px; }
.gov2 .arrow { color: #fff; }
.sector-links h2 { margin-bottom: 30px; }
.sector-links ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.sector-links li { padding: 18px 0; }
.sector-links li a { font-size: 20px; color: var(--ink); }
.sector-links li a:hover { color: var(--red); }
.sector-links li p { font-size: 15px; color: var(--mut); margin-top: 6px; }
.sector-links .xs-note { font-size: 13px; color: var(--mut); margin-top: 18px; }

.pound { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.pound-h h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 24px; }
.pound-h p { font-size: 17px; }
.pound-h .src { color: rgba(255,255,255,.75); margin-top: 18px; }
.pound-l li { display: grid; grid-template-columns: 15em minmax(0, 1fr) 4.5em; gap: 16px; align-items: center; padding: 7px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pound-l i { display: block; height: 16px; width: var(--w); background: rgba(255,255,255,.5); }
.pound-l li.on i { background: #fff; }
.pound-l li.on span, .pound-l li.on b { color: #fff; font-weight: 500; }
.pound-l b { text-align: right; font-weight: 400; color: rgba(255,255,255,.9); }
.ni-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.ni-rules > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.ni-rules h3 { color: var(--red); margin-bottom: 10px; }
.ni-rules p { font-size: 16px; }
.ni-office { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 80px; align-items: stretch; }
.ni-office > div { border-top: 1px solid var(--ink); padding-top: 36px; }
.ni-call { justify-content: flex-end; }
.ni-office h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 20px; }
.ni-office p { font-size: 19px; }
.ni-call { display: flex; flex-direction: column; gap: 8px; }
.ni-call .ni-tel { font-size: 48px; font-weight: 300; color: var(--red); letter-spacing: -.02em; line-height: 1; }

@media (max-width: 1080px) {
  .ladder, .ni-rules, .sector-links ul { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hire-h, .fund-go, .pound, .ni-office { grid-template-columns: minmax(0, 1fr); }
  .needs, .gov2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hire-h h2, .fund-go h2, .needs-h, .pound-h h2, .ni-office h2 { font-size: 32px; }
  .lv-price { font-size: 52px; }
  .hb-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-row i { grid-column: 1 / -1; grid-row: 2; }
  .hb-row b { font-size: 22px; }
  .pound-l li { grid-template-columns: minmax(0, 1fr) 4em; }
  .pound-l i { grid-column: 1 / -1; grid-row: 2; }
  .ni-call .ni-tel { font-size: 36px; }
  .ni-office > div + div { border-top: 0; padding-top: 28px; }
}

/* ==========================================================================
   GREATER MANCHESTER
   ========================================================================== */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.counts > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.counts b { display: block; font-size: 72px; font-weight: 300; color: var(--red); line-height: 1; letter-spacing: -.035em; }
.counts span { display: block; font-size: 15px; color: var(--mut); margin-top: 12px; max-width: 14em; }
.counts-src { margin-top: 18px; }
.gm-stmt { margin-top: 96px; padding-top: 0 !important; padding-bottom: 0 !important; }
.gm-tbl td:first-child, .gm-tbl th:first-child { white-space: nowrap; }
.gm-stmt h2 { font-size: 44px; }
.aside .gm-note { font-size: 16px; color: var(--mut); }
.bars li { display: grid; grid-template-columns: 9em minmax(0, 1fr) 4em; gap: 16px; align-items: center; padding: 6px 0; font-size: 15px; border-bottom: 1px solid #e2dfdc; }
.bars i { display: block; height: 16px; background: var(--red); width: var(--w); }
.bars b { text-align: right; font-weight: 400; color: var(--ink); }
.gm-tbl { margin-top: 64px; }
.mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.mosaic img { width: 100%; object-fit: cover; height: 460px; }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.pairs a { border-top: 1px solid var(--ink); padding: 18px 0; }
.pairs b { display: block; font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.pairs span { font-size: 16px; color: var(--mut); }
.pairs a:hover b { color: var(--red); }
@media (max-width: 1080px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}
@media (max-width: 760px) {
  .counts b { font-size: 48px; }
  .gm-stmt h2 { font-size: 32px; }
  .bars li { grid-template-columns: minmax(0, 1fr) 4em; }
  .bars i { grid-column: 1 / -1; grid-row: 2; }
  .mosaic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mosaic img { height: 240px !important; margin: 0 !important; }
  .mosaic img:first-child { grid-column: 1 / -1; }
  .pairs { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ==========================================================================
   ABOUT, CONTACT, PRIVACY, 404, TOOLS HUB
   ========================================================================== */
.ab-who { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 80px; }
.ab-who h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; }
.ab-who .big { margin-bottom: 48px; }
.ab-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.ab-how > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.ab-how h3 { margin-bottom: 10px; }
.ab-how p { font-size: 16px; color: var(--mut); }
.ab-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; align-items: start; }
.ab-team .ph { aspect-ratio: 4 / 5; }
.ab-team .cap span { display: block; font-size: 15px; }
.ab-team .cap .ab-role { color: var(--red); margin-bottom: 8px; }
.twin a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
.form-grid .full { grid-column: 1 / -1; }
.form-card .btn { padding: 16px 40px; font-size: 16px; }
.form-fine { font-size: 13px; color: var(--mut); margin-top: 16px; }
.form-fine a { text-decoration: underline; }
.contact-side { background: var(--pale); padding: 44px 44px 40px; }
.cs-direct { display: flex; flex-direction: column; gap: 6px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #e0dcd8; }
.cs-direct .cs-phone { font-size: 40px; font-weight: 300; color: var(--red); letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
.cs-direct a:hover { color: var(--red); }
.contact-side h2 { font-size: 26px; margin-bottom: 18px; }
.contact-side h3 { color: var(--red); margin: 34px 0 10px; font-size: 20px; }
.contact-side p { font-size: 16px; }
.contact-side ul.checks li { font-size: 15px; border-color: #e0dcd8; }
.cs-note { font-size: 14px; color: var(--mut); margin-top: 22px; }

.nf-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.nf-links li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.nf-links a { font-size: 20px; }

.tgroups { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 48px; align-items: start; }
.tg h2 { font-size: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.tg li { border-bottom: 1px solid var(--line); }
.tg a { display: block; padding: 20px 0; }
.tg b { display: block; font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.tg span { display: block; font-size: 15px; color: var(--mut); }
.tg a:hover b { color: var(--red); }
.tg a b::after { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; margin: 0 0 5px 10px; transition: width .2s; }
.tg a:hover b::after { width: 30px; }

@media (max-width: 1080px) {
  .ab-who, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgroups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ab-who h2 { font-size: 32px; }
  .ab-how, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-team { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ab-p { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
  .ab-p .cap { margin-top: 0; }
  .ab-team .ph { aspect-ratio: 1; }
  .contact-side { padding: 30px 22px; margin: 0 calc(-1 * var(--gut) + 6px); }
  .cs-direct .cs-phone { font-size: 32px; }
  .nf-links { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CALCULATORS
   ========================================================================== */
.calc-top { padding-top: 10px; }
.calc-top .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 72px; align-items: end; max-width: none; padding: 0 10px 0 var(--edge); }
.ct-copy { padding: 72px 0 8px; }
.ct-copy h1 { font-size: 60px; margin-bottom: 26px; max-width: 12em; }
.calc-top .ph { height: 440px; }
.calc-sec { padding-top: 88px; }
.calc-inputs .field label { font-size: 15px; }
.calc-inputs select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b1b1b'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.how-l { counter-reset: hw; }
.how-l li { counter-increment: hw; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid #e0dcd8; font-size: 17px; }
.how-l li::before { content: counter(hw); color: var(--red); font-size: 24px; line-height: 1.1; }
.calc-after { margin-top: 72px; }
@media (max-width: 1080px) {
  .calc-top .wrap { grid-template-columns: minmax(0, 1fr); padding: 0 10px; }
  .ct-copy { padding: 48px var(--gut) 0; }
  .calc-top .ph { height: 320px; }
}
@media (max-width: 760px) {
  .calc-top .wrap { padding: 0 6px; }
  .ct-copy h1 { font-size: 38px; }
  .calc-top .ph { height: 240px; }
  .calc-sec { padding-top: 56px; }
}

/* ==========================================================================
   GUIDES, ARTICLES AND THEIR HUBS
   ========================================================================== */
.piece-top { padding-top: 80px; }
.piece-top .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: end; }
.piece-top h1 { font-size: 60px; }
.pt-r .lede { font-size: 20px; margin-bottom: 18px; }
.dateline { font-size: 14px; color: var(--mut); margin-bottom: 18px; }
.sec-doc { padding-top: 0; }
.sec-doc .doc { margin-top: 64px; padding-top: 40px; position: relative; }
.sec-doc .doc::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--ink); }
.section .doc { padding-top: 64px; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.related a { padding: 20px 0; border-bottom: 1px solid var(--line); }
.related a b { display: block; font-weight: 400; font-size: 19px; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
.related a span { font-size: 15px; color: var(--mut); }
.related a:hover b { color: var(--red); }
.topics-hub { columns: 3; column-gap: 48px; }
.topics-hub .topic { break-inside: avoid; margin-bottom: 56px; }
.topics-hub h2 { font-size: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.topics-hub li { border-bottom: 1px solid var(--line); }
.topics-hub a { display: block; padding: 16px 0; }
.topics-hub b { display: block; font-weight: 400; font-size: 18px; color: var(--ink); margin-bottom: 4px; line-height: 1.25; }
.topics-hub span { font-size: 14px; color: var(--mut); display: block; line-height: 1.4; }
.topics-hub a:hover b { color: var(--red); }
.hub-see { display: flex; gap: 40px; }
@media (max-width: 1080px) {
  .piece-top .wrap { grid-template-columns: minmax(0, 1fr); }
  .topics-hub { columns: 2; }
  .related { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .piece-top { padding-top: 48px; }
  .piece-top h1 { font-size: 36px; }
  .sec-doc .doc { margin-top: 40px; padding-top: 28px; }
  .topics-hub { columns: 1; }
}

/* small phones: keep the logo, the booking button and the menu button on one line */
@media (max-width: 380px) {
  .wordmark img { height: 38px; }
  header.site .book { padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 340px) {
  header.site { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .wordmark img { height: 34px; }
}