@font-face { font-family: "Manrope"; src: url(../fonts/Manrope-normal-200_800.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gloock"; src: url(../fonts/Gloock-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* The room's own calm colours, 60/30/10 (the user, 2026-10-22: "the room vibe, modern calm colours with some green"):
   warm marble white is the ground (60%), pine green from the plants is the panels, links, rules and the pen line (30%),
   and warm oak-gold the calls to action and key numbers (10%). Text is a deep green-black, never pure black. The
   names --cobalt and --brass are kept from the earlier palette so every rule follows the new colours. */
:root {
  --bg: #F6E9E2;     /* the page takes a light tone of the room's peach wall (2026-10-26), so leaving the film never feels like another site */
  --bg-2: #FBF4EF;
  --bg-3: #EFDDD3;
  --cobalt: #2E6B4F;
  --cobalt-2: #3E8A66;
  --sage: #A9C7AE;
  --teal: #2E8A78;
  --gold: #D99A3E;
  --gold-2: #E8B060;
  --ink: #16241D;
  --ink-2: #3D5046;
  --ink-3: #59695F;
  --brass: var(--gold);
  --brass-2: var(--gold-2);
  --line: rgba(46, 107, 79, .18);
  --line-2: rgba(46, 107, 79, .34);
  --rule: rgba(217, 154, 62, .55);
  --open: #2E9E6B;
  --closed: #D9643E;
  --serif: "Manrope", "Segoe UI", system-ui, sans-serif;
  --display: "Gloock", Georgia, serif;   /* the big headings, site-wide (the home's bold, minimal voice, 2026-10-26) */
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --back: cubic-bezier(.175, .885, .32, 1.275);
  --sine: cubic-bezier(.445, .05, .55, .95);
  --gut: clamp(20px, 4vw, 48px);
  --r: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 500 17.5px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(242, 169, 59, .35); color: var(--ink); }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 99; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip:focus { left: 10px; }
.wrap { width: min(1440px, 100% - 2 * var(--gut)); margin-inline: auto; }
.section { padding-block: clamp(96px, 11vw, 160px); }
.section + .section { padding-top: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: 1.06; letter-spacing: -.005em; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.005em; }
h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.22; letter-spacing: -.02em; }
p { margin: 0; }
.lead { max-width: 54ch; margin-top: 22px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--ink-2); }
.nw { white-space: nowrap; }
.brass { color: var(--brass); }
.muted { color: var(--ink-3); }
.hair { height: 1px; border: 0; margin: 0; background: var(--rule); }

/* Icons: hairline, drawn at the body weight */
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.solid { fill: currentColor; stroke: none; }
/* pen-and-ink icons: the main stroke in the text's colour, a lighter detail stroke, one gold dot */
symbol .thin { stroke-width: 1.05; }
symbol .ac { fill: var(--gold); stroke: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 600 16px/1 var(--sans); letter-spacing: .005em; white-space: nowrap; cursor: pointer; transition: background-color .35s var(--expo), border-color .35s var(--expo), color .35s var(--expo), transform .5s var(--back); }
.btn .ico { width: 18px; height: 18px; }
.btn:active { transform: scale(.98); }
.btn-ivory { background: var(--ink); color: var(--bg); }
.btn-ivory:hover { background: #fff; transform: translateY(-2px); }
.btn-brass { border-color: var(--rule); background: transparent; color: var(--ink); }
.btn-brass:hover { border-color: var(--brass); background: rgba(242, 169, 59, .1); transform: translateY(-2px); }
/* the 10%: saffron gold is kept for the calls to action */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn-line { border-color: var(--line-2); background: transparent; color: var(--ink); }
.btn-line:hover { border-color: var(--cobalt-2); background: rgba(46, 107, 79, .08); transform: translateY(-2px); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
.gold { color: var(--gold); }
.btn:hover .i-ring { animation: ring .7s var(--sine); }
@keyframes ring { 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: border-color .3s, gap .4s var(--expo); }
.link:hover { border-color: var(--brass); gap: 12px; }
.link .ico { width: 16px; height: 16px; color: var(--brass); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px var(--gut) 0; pointer-events: none; }
.nav-in { pointer-events: auto; display: flex; align-items: center; gap: 32px; max-width: 1440px; height: 64px; margin: 0 auto; padding: 0; border: 1px solid transparent; border-radius: 999px; transition: max-width .7s var(--expo), padding .7s var(--expo), background-color .5s, border-color .5s; }
.nav.float .nav-in { max-width: 1240px; padding: 0 8px 0 28px; background: var(--bg-2); border-color: var(--line); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .7); }
.brand { font: 700 21px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; gap: 30px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.nav-links a { position: relative; padding: 6px 0; color: var(--ink-2); transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1.5px dotted var(--brass); opacity: 0; transform: translateY(3px); transition: opacity .4s var(--expo), transform .4s var(--expo); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { opacity: 1; transform: none; }
.nav .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.menu-btn { display: none; width: 46px; height: 46px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--ink); transition: transform .5s var(--expo), opacity .3s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding: 120px var(--gut) calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--bg); visibility: hidden; opacity: 0; transition: opacity .5s var(--expo), visibility 0s .5s; }
.menu-open .sheet { visibility: visible; opacity: 1; transition: opacity .5s var(--expo); }
.sheet ul { margin: 0; padding: 0; list-style: none; }
.sheet li + li { border-top: 1px solid var(--line); }
.sheet li a { display: block; padding: 14px 0; font: 700 40px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.sheet li a[aria-current="page"] { color: var(--brass); }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav .nav-call { margin-left: auto; }
  .menu-btn { display: block; }
}
@media (max-width: 480px) { .nav .nav-call span { display: none; } .nav .nav-call { width: 46px; padding: 0; } .nav.float .nav-in { padding-left: 20px; padding-right: 6px; } }

/* Live status, chips and stars */
.dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--closed); box-shadow: 0 0 0 4px rgba(255, 138, 92, .18); }
.dot.open { background: var(--open); box-shadow: 0 0 0 4px rgba(47, 215, 164, .16); animation: pulse 2.6s var(--sine) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(47, 215, 164, .04); } }
.stars { display: inline-flex; gap: 2px; color: var(--brass); }
.stars svg { width: 13px; height: 13px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.facts li { display: flex; align-items: center; gap: 10px; }
.facts b { color: var(--ink); font-weight: 600; }

/* Home hero: the books open on arrival. One locked-off shot: a Nano Banana 2 still of the closed ledger, a Wan film of
   it opening, and a still of the open spread. site.js places all three (and the ink) in one box, sized so the whole
   desk lamp shows and the open book clears the copy. The frame's own wall colour fills any uncovered strip. */
.hero { --wall: #071638; position: relative; min-height: max(660px, 100svh); overflow: clip; background: var(--bg); }
.stage { position: absolute; inset: 0 0 auto; height: max(660px, 100svh); overflow: hidden; background: var(--wall); }
.js .stage { opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); animation: lit 0s 3s forwards; }
.js .stage.lit { opacity: 1; }
@keyframes lit { to { opacity: 1; } }
.plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 100%; }
.js .plate { object-fit: fill; }
.plate-open, .stage video { opacity: 0; }
.stage.is-open .plate-open, .stage.is-playing video { opacity: 1; }
.stage.is-open video { opacity: 0; }
/* the frame's edges melt into the wall; the hero melts into the page below */
.stage::before, .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.stage::before { background: linear-gradient(90deg, var(--wall) var(--fl, 0%), rgba(7, 22, 56, .55) calc(var(--fl, 0%) + 6%), rgba(7, 22, 56, 0) calc(var(--fl, 0%) + 20%)); }
.stage::after { background: linear-gradient(0deg, var(--bg) 0, rgba(11, 31, 77, 0) 16%), linear-gradient(180deg, var(--wall) var(--ft, 0%), rgba(7, 22, 56, 0) calc(var(--ft, 0%) + 16%)); }
.hero-in { position: relative; z-index: 3; padding-block: clamp(132px, 17vh, 190px) 96px; }
.copy { max-width: clamp(420px, 37vw, 540px); }
.hero h1 { font-size: clamp(42px, 4.1vw, 68px); }
.hero .lead { max-width: 42ch; }
.hero .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* The ink: crisp HTML written on the ledger's ruled pages, mapped onto each page with a projective transform */
.ink { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.page { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; color: #1C2950; opacity: .9; font: 700 40px/1 var(--serif); font-variant-numeric: lining-nums; }
.page .ln { position: absolute; margin: 0; white-space: nowrap; clip-path: inset(-30% 100% -30% -5%); transition: clip-path 1s cubic-bezier(.45, .05, .35, 1), opacity .3s; }
.page .ln.on { clip-path: inset(-30% -5% -30% -5%); }
.page .ln.out { opacity: 0; transition: opacity .28s; }
.page .ln.big { font-size: 2.7em; letter-spacing: -.02em; }
.page .ln.big small { font-size: .3em; letter-spacing: 0; }
/* What the ink says, in plain type, set on the desk below the book */
.film-cap { position: absolute; z-index: 3; max-width: 36ch; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); opacity: 0; transition: opacity .8s .9s; }
.film-cap::before { content: ""; display: block; width: 30px; height: 1px; margin-bottom: 10px; background: var(--brass); }
.is-open ~ .film-cap { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page .ln, .js .stage { transition: none; } }
/* Text that animates in stays hidden until the fonts are in (failsafe: shown after 3s regardless) */
.js .hero h1, .js .hero .lead, .js .hero .facts, .js .page-head h1, .js .page-head .lead { visibility: hidden; animation: show 0s 3s forwards; }
.ready .hero h1, .ready .hero .lead, .ready .hero .facts, .ready .page-head h1, .ready .page-head .lead { visibility: visible; }
@keyframes show { to { visibility: visible; } }
/* Narrow or squarer screens: the desk becomes a band across the top, framed on the book, with the copy below */
@media (max-width: 1179px), (max-aspect-ratio: 5/4) {
  .hero { min-height: 0; background: var(--bg); }
  .hero { display: flex; flex-direction: column; }
  .stage { position: relative; order: 0; height: clamp(260px, 48vw, 460px); }
  .film-cap { order: 1; }
  .hero-in { order: 2; }
  .plate { object-position: 52% 88%; }
  .stage::before { display: none; }
  .stage::after { background: linear-gradient(0deg, var(--bg) 0, rgba(11, 31, 77, 0) 26%), linear-gradient(180deg, rgba(7, 22, 56, .92) 0, rgba(7, 22, 56, .6) 14%, rgba(7, 22, 56, 0) 30%); }
  .hero-in { padding-block: 0 80px; }
  .copy { max-width: 680px; }
  .film-cap { position: relative; z-index: 3; width: min(1440px, 100% - 2 * var(--gut)); max-width: none; margin: -46px auto 30px; }
}

/* Page heads (About, Services, Contact) */
.page-head { padding: clamp(150px, 16vw, 210px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 16ch; }

/* Statement with word fill */
.statement { font: 500 clamp(28px, 3.3vw, 48px)/1.28 var(--serif); letter-spacing: -.018em; color: var(--ink); max-width: 26ch; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 980px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 28px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); transition: border-color .4s var(--expo), transform .6s var(--expo), background-color .4s; }
.card:hover { border-color: var(--rule); background: var(--bg-3); transform: translateY(-3px); }
.card .ico { width: 30px; height: 30px; color: var(--brass); }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card .link { margin-top: auto; align-self: flex-start; }
.card a.cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Next HMRC dates */
.dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.dates .dl { display: flex; gap: 22px; align-items: flex-start; padding: 32px 28px 32px 0; }
.dates .dl + .dl { padding-left: 28px; border-left: 1px solid var(--line); }
.dl .n { min-width: 2.2ch; font: 500 clamp(56px, 5.6vw, 84px)/.85 var(--serif); letter-spacing: -.035em; color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.dl .u { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.dl p { max-width: 26ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dl p strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.dates .dl:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.dates .dl:nth-child(n+4) { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .dates { grid-template-columns: minmax(0, 1fr); } .dates .dl, .dates .dl + .dl { padding: 24px 0; border-left: 0; } .dates .dl + .dl { border-top: 1px solid var(--line); } }

/* Testimonials: cards that keep moving, each with one specific line */
/* Static and scrollable by default; it only drifts once the motion script runs */
.marquee { position: relative; margin-top: clamp(40px, 5vw, 60px); overflow-x: auto; }
.motion .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 6px var(--gut); list-style: none; }
.motion .track { padding-inline: 0; animation: drift var(--dur, 70s) linear infinite; }
.marquee:hover .track, .marquee.paused .track { animation-play-state: paused; }
.rv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.pause { display: none; min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.motion .pause { display: inline-flex; }
.pause[aria-pressed="true"] { background: rgba(242, 169, 59, .14); border-color: var(--brass); }
@keyframes drift { to { transform: translateX(-50%); } }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; width: min(400px, 82vw); padding: 26px 26px 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.quote blockquote { margin: 0; font: 500 21px/1.45 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.who { display: flex; align-items: center; gap: 13px; }
.av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; font: 600 17px/1 var(--sans); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.av-1 { background: #3B5578; } .av-2 { background: #6B5A3A; } .av-3 { background: #3F6460; } .av-4 { background: #6A4559; } .av-5 { background: #4D4F7A; } .av-6 { background: #5E6A3E; } .av-7 { background: #7A4A3B; }
.who b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.2; }
.who small { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .track [aria-hidden="true"] { display: none; }
}

/* Credential band */
.cred { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 30px 32px; border-radius: var(--r); border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(242, 169, 59, .06), rgba(242, 169, 59, 0)); }
.cred .seal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); color: var(--brass); }
.cred .seal .ico { width: 30px; height: 30px; }
.cred p { color: var(--ink-2); }
.cred p strong { display: block; margin-bottom: 4px; font: 700 22px/1.3 var(--serif); color: var(--ink); }
.cred small { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .cred { grid-template-columns: minmax(0, 1fr); } }

/* Split layouts */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Call to action */
.cta { padding: clamp(48px, 6vw, 80px); border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.cta .tel { display: block; margin-top: 18px; font: 500 clamp(40px, 5vw, 72px)/1 var(--serif); letter-spacing: -.03em; color: var(--brass); }
.cta .tel:hover { color: var(--brass-2); }
.cta .side { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 900px) { .cta { grid-template-columns: minmax(0, 1fr); } }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours td + td { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours td:first-child { color: var(--ink); }
.hours tr.today td { color: var(--brass); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }

/* Map with a fallback that always shows */
.map { position: relative; overflow: hidden; min-height: 460px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); }
.map .fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 12px; padding: 32px; }
.map .fallback p { color: var(--ink-2); max-width: 30ch; }
.map iframe { position: relative; display: block; width: 100%; height: 100%; min-height: 460px; border: 0; filter: saturate(.8) sepia(.12); }
@media (max-width: 760px) { .map, .map iframe { min-height: 340px; } }

/* Footer */
.foot { margin-top: clamp(40px, 6vw, 80px); padding: clamp(64px, 8vw, 110px) 0 calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 32px; }
.foot h2 { font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 12px; }
.foot p, .foot li { font-size: 15px; color: var(--ink-2); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.foot a:hover { color: var(--ink); }
.foot .name { font: 400 clamp(30px, 3vw, 40px)/1.05 var(--display); letter-spacing: 0; color: var(--ink); }
.sources { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 110ch; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Phone call bar */
.mbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: none; transition: transform .6s var(--expo); }
.mbar.tuck { transform: translateY(150%); }
.mbar .btn { width: 100%; min-height: 56px; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .mbar { display: block; } .foot { padding-bottom: 110px; } .menu-open .mbar { display: none; } }

/* Reveal: only hidden once the script has started (class "motion"), so a failed script never hides content */
.motion .rise { opacity: 0; transform: translateY(28px); }
.motion .rise.in { opacity: 1; transform: none; transition: opacity 1.2s var(--expo), transform 1.2s var(--expo); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .nav-in, .link { transition: none; }
  .dot.open, .btn:hover .i-ring { animation: none; }
  .mbar { transition: none; }
  .motion .rise { opacity: 1; transform: none; }
}

/* ---------- Purpose chooser (first screen): pick what you are here about, get a live answer ---------- */
.ask { margin-top: 34px; max-width: 640px; }
.ask-q { display: block; margin-bottom: 12px; font-size: 14.5px; color: var(--ink-3); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) {
  .pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pills .pill { justify-content: flex-start; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.2; text-align: left; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .7); color: var(--ink); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: border-color .3s, background-color .3s, color .3s, transform .45s var(--back); }
.pill .ico { width: 17px; height: 17px; color: var(--brass); }
.pill:hover { border-color: var(--brass); transform: translateY(-1px); }
.pill[aria-expanded="true"], .pill.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill[aria-expanded="true"] .ico, .pill.on .ico { color: var(--bg); }
.answer { margin-top: 14px; padding: 22px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .96); border: 1px solid var(--line); }
.answer[hidden] { display: none; }
.answer h3 { font-size: 22px; }
.answer p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.answer .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.answer .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.answer .w-rows { margin-top: 14px; }
.answer.enter { animation: answerIn .7s var(--expo); }
@keyframes answerIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Tool widgets on dark ---------- */
.panel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.w-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.w-select { position: relative; }
.w-select select { height: 44px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; }
.w-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.w-rows { display: grid; gap: 8px; margin-top: 16px; }
.w-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; border-radius: 10px; background: var(--bg-3); font-size: 14.5px; color: var(--ink-2); }
.w-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.w-cap { margin: 14px 0 8px; font-size: 14px; color: var(--ink-3); }
.w-bar { position: relative; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.w-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--brass); transition: width 1.4s var(--expo); }
.w-big { display: flex; align-items: baseline; gap: 14px; }
.w-big b { font: 500 clamp(64px, 6vw, 92px)/.85 var(--serif); letter-spacing: -.035em; color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.w-big span { max-width: 18ch; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.tl { position: relative; height: 54px; margin-top: 22px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 2px; border-radius: 2px; background: var(--line-2); }
.tl .done { position: absolute; left: 0; top: 24px; height: 2px; width: 0; border-radius: 2px; background: var(--brass); transition: width 1.4s var(--expo); }
.tl .tick { position: absolute; top: 19px; width: 2px; height: 12px; border-radius: 2px; background: var(--ink-2); }
.tl .tick span { position: absolute; top: 17px; transform: translateX(-50%); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.tl .tick.up span { top: -20px; }
.tl .tick.end span { transform: translateX(-100%); }
.tl .now { position: absolute; top: 18px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brass); }
.wk { --lab: 44px; position: relative; display: grid; gap: 8px; margin-top: 18px; }
.wk-row { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; font-size: 13px; color: var(--ink-3); }
.wk-row.today { color: var(--ink); font-weight: 600; }
.wk-t { position: relative; height: 12px; border-radius: 999px; background: var(--bg-3); }
.wk-t i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #6A7C9C; }
.wk-row.today .wk-t i { background: var(--brass); }
.wk-now { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); }
.wk-axis { display: grid; grid-template-columns: var(--lab) 1fr; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.wk-axis div { position: relative; height: 14px; }
.wk-axis span { position: absolute; transform: translateX(-50%); }

/* Making Tax Digital checker */
.check label { display: block; max-width: 42ch; font-size: 15px; font-weight: 600; color: var(--ink); }
.val { display: block; margin: 14px 0 4px; font: 500 clamp(44px, 4.4vw, 60px)/1 var(--serif); letter-spacing: -.025em; color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.range { --p: 26.7%; width: 100%; height: 30px; margin: 8px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range:focus-visible { outline: none; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brass) var(--p), var(--bg-3) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 0; box-shadow: 0 0 0 6px rgba(242, 169, 59, .18); transition: transform .45s var(--back); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--brass); outline-offset: 4px; }
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--bg-3); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brass); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 0; }
.range:focus-visible::-moz-range-thumb { outline: 2px solid var(--brass); outline-offset: 4px; }
.scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.waves { --pn: .267; position: relative; display: grid; gap: 14px; margin-top: 26px; padding-top: 30px; }
.wave-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; color: var(--ink-3); }
.wave-top > * { padding-right: 4px; background: var(--bg-2); }
.wave-top > span { padding: 0 0 0 4px; }
.wave-top b { font-weight: 600; color: var(--ink-2); transition: color .4s; }
.track-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg-3); }
.bar { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 999px; background: #1A3F99; transition: background-color .5s var(--expo); }
.wave.in .bar { background: #6B5A3A; }
.wave.start .bar { background: var(--brass); }
.wave.start .wave-top b { color: var(--ink); }
.you { position: absolute; top: 0; bottom: -6px; left: calc(14px + (100% - 28px) * var(--pn)); width: 0; border-left: 2px solid var(--ink); transition: left .25s var(--expo); }
.you span { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.verdict { margin-top: 26px; padding: 20px 22px; border-radius: 12px; background: var(--bg-3); }
.verdict h3 { font-size: 24px; }
.verdict p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* Switching steps */
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.step { border-bottom: 1px solid var(--line-2); }
.step-h { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 20px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 700 23px/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink-3); transition: color .4s var(--expo); }
.step-h:hover, .step.is-active .step-h { color: var(--ink); }
.sn { min-width: 18px; color: var(--brass); }
.step-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--expo); }
.step.is-active .step-b { grid-template-rows: 1fr; }
.step-b > div { overflow: hidden; }
.step-b p { max-width: 46ch; margin: 0 0 16px 36px; color: var(--ink-2); font-size: 16px; }
.step-b .btn { margin: 0 0 18px 36px; }
.prog { display: block; height: 2px; margin: 0 0 20px 36px; border-radius: 2px; background: var(--line); overflow: hidden; }
.prog i { display: block; width: 0; height: 100%; background: var(--brass); }
.step.is-active .prog i { animation: prog 6s linear forwards paused; }
.steps.run .step.is-active .prog i { animation-play-state: running; }
.steps.run:hover .step.is-active .prog i, .steps.run:focus-within .step.is-active .prog i { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }

/* Services: sections with an index */
.svc-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.svc { padding-block: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; }
.svc .split { align-items: center; }
.svc h2 { display: flex; align-items: flex-start; gap: 16px; font-size: clamp(30px, 3vw, 44px); }
.svc h2 .ico { width: 32px; height: 32px; margin-top: .18em; color: var(--brass); }
.ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--brass); }

/* People and reviews (About) */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 60px); }
@media (max-width: 860px) { .people { grid-template-columns: minmax(0, 1fr); } }
.person { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.person .mono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); font: 700 26px/1 var(--serif); color: var(--brass); }
.person h3 { font-size: 30px; }
.person .role { margin-top: -8px; color: var(--ink-3); font-size: 15px; }
.person blockquote { margin: 8px 0 0; padding-left: 18px; border-left: 1px solid var(--rule); font: 500 20px/1.5 var(--serif); color: var(--ink); }
.person cite { display: block; margin-top: 8px; font: 400 14px/1.4 var(--sans); font-style: normal; color: var(--ink-3); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--rule); }
.ways > div { padding: 30px 28px 0 0; }
.ways > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.ways p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.ways .link { margin-top: 20px; }
.ways h3 .nw { white-space: nowrap; }
.ways blockquote { margin: 14px 0 0; font: 500 18px/1.5 var(--serif); color: var(--ink); }
.ways cite { display: block; margin-top: 6px; font: 400 13.5px/1.4 var(--sans); font-style: normal; color: var(--ink-3); }
@media (max-width: 900px) { .ways { grid-template-columns: minmax(0, 1fr); } .ways > div, .ways > div + div { padding: 24px 0 0; border-left: 0; } }
.rv-list { margin: clamp(40px, 5vw, 60px) 0 0; padding: 0; list-style: none; border-top: 1px dashed var(--line-2); }
.rv { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 30px 0; border-bottom: 1px dashed var(--line-2); }
.rv .who { align-self: start; }
.rv blockquote { margin: 0; font: 500 clamp(19px, 1.7vw, 23px)/1.55 var(--serif); color: var(--ink); }
.rv mark { padding: 0 .04em; background: linear-gradient(rgba(242, 169, 59, .3), rgba(242, 169, 59, .3)) 0 90% / 0% 40% no-repeat; color: inherit; transition: background-size 1.3s var(--expo) .15s; }
.rv.lit mark { background-size: 100% 40%; }
@media (max-width: 760px) { .rv { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .rv mark { background-size: 100% 40%; transition: none; } .step-b, .w-bar i, .tl .done, .you, .bar { transition: none; } .answer.enter { animation: none; } }

/* ---------- Home: the tax year as a strip of posters, one per deadline ---------- */
.year-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.year-side { display: grid; gap: 26px; justify-items: start; }
.year-side .lead { margin: 0; }
.year-ctl { display: flex; gap: 10px; }
.arrow { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: border-color .3s, background-color .3s, opacity .3s; }
.arrow:hover { border-color: var(--brass); background: rgba(242, 169, 59, .1); }
.arrow[data-strip-prev] .ico { transform: scaleX(-1); }
.arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) { .year-head { grid-template-columns: minmax(0, 1fr); } }
.strip { margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip.can-drag { cursor: grab; }
.strip.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.strip:focus-visible { outline-offset: -3px; }
.posters { display: flex; gap: 16px; width: max-content; margin: 0; padding: 6px calc((100vw - min(1440px, 100vw - 2 * var(--gut))) / 2); list-style: none; }
.poster { position: relative; flex: none; display: flex; flex-direction: column; width: clamp(256px, 21vw, 316px); min-height: 410px; padding: 30px 26px 26px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); scroll-snap-align: start; scroll-margin-inline-start: calc((100vw - min(1440px, 100vw - 2 * var(--gut))) / 2); transition: transform .7s var(--expo), border-color .4s; }
.poster:hover { transform: translateY(-5px); border-color: var(--rule); }
.p-date b { display: block; font: 500 clamp(112px, 8.6vw, 150px)/.78 var(--serif); letter-spacing: -.05em; color: var(--brass); font-variant-numeric: lining-nums; }
.p-date span { display: block; margin-top: 18px; font-size: 15px; color: var(--ink-3); }
.poster h3 { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); font-size: 23px; }
.poster .p-note { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.poster .p-left { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.poster .p-left b { font: 700 28px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.poster.next { background: var(--ink); border-color: var(--ink); }
.poster.next .p-date b { color: #F2C46F; }
.poster.next h3, .poster.next .p-left b { color: var(--bg); }
.poster.next .p-date span, .poster.next .p-note, .poster.next .p-left { color: #D7E3DA; }
.poster.next h3 { border-color: rgba(251, 246, 236, .18); }
.rail { position: relative; height: 2px; margin-top: 30px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rail i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 30%); border-radius: 2px; background: var(--brass); transform: translateX(var(--x, 0px)); }

/* ---------- Home: the services as a ledger index, each line with a live figure ---------- */
.index { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--line); }
.index a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(190px, .62fr) 26px; gap: clamp(18px, 3vw, 48px); align-items: center; padding: 30px 0; }
.ix-t { font: 700 clamp(24px, 2.2vw, 33px)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ink); transition: transform .7s var(--expo); }
.ix-d { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ix-n { text-align: right; }
.ix-n b { display: block; font: 700 23px/1.15 var(--serif); color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.ix-n small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ix-go { width: 22px; height: 22px; color: var(--brass); transition: transform .6s var(--expo); }
.index a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--expo); }
.index a:hover::before, .index a:focus-visible::before { transform: scaleX(1); }
.index a:hover .ix-t, .index a:focus-visible .ix-t { transform: translateX(10px); }
.index a:hover .ix-go, .index a:focus-visible .ix-go { transform: translateX(6px); }
@media (max-width: 900px) {
  .index a { grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 18px; padding: 26px 0; }
  .ix-d { grid-column: 1 / -1; grid-row: 2; }
  .ix-n { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .ix-go { grid-column: 2; grid-row: 1; }
}

/* ---------- Home: reviews on ivory. The panel opens from a card to the full width as it arrives ---------- */
.reviews { padding-block: clamp(30px, 5vw, 70px); }
.rv-panel { --paper: #F1EBDF; position: relative; padding-block: clamp(84px, 9vw, 132px) clamp(60px, 6vw, 92px); background: var(--paper); color: #3A4357; clip-path: inset(0 var(--inset, 0px) round var(--round, 0px)); }
.rv-panel h2 { color: var(--bg); }
.rv-top { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.score-n { font: 500 clamp(150px, 17vw, 270px)/.78 var(--serif); letter-spacing: -.06em; color: var(--bg); font-variant-numeric: lining-nums; }
.score-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 26px; font-size: 15px; color: var(--ink-2); }
.score-l .stars { color: #9A7432; }
.score-l .stars svg { width: 15px; height: 15px; }
.fill-q { margin: 34px 0 0; }
.fill-q blockquote { margin: 0; }
.fill-q p { font: 500 clamp(28px, 3vw, 44px)/1.24 var(--serif); letter-spacing: -.016em; color: var(--bg); }
.fill-q figcaption { margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.rv-panel mark { padding: 0 .04em; color: inherit; background: linear-gradient(transparent 60%, rgba(242, 169, 59, .42) 60%, rgba(242, 169, 59, .42) 92%, transparent 92%); }
.rv-panel .quote { background: #FBF8F2; border-color: rgba(11, 31, 77, .1); }
.rv-panel .quote blockquote { color: var(--bg); }
.rv-panel .who b { color: var(--bg); }
.rv-panel .who small { color: #5A6478; }
.rv-panel .av { color: #fff; box-shadow: none; }
.rv-panel .pause { color: var(--bg); border-color: rgba(11, 31, 77, .25); }
.rv-panel .pause:hover { border-color: #9A7432; background: rgba(154, 116, 50, .08); }
.rv-panel .pause[aria-pressed="true"] { background: rgba(154, 116, 50, .14); border-color: #9A7432; }
.rv-panel .link { color: var(--bg); border-color: rgba(154, 116, 50, .5); }
.rv-panel .link .ico { color: #9A7432; }
.rv-panel :focus-visible { outline-color: #9A7432; }
@media (max-width: 900px) { .rv-top { grid-template-columns: minmax(0, 1fr); } .score-n { font-size: clamp(130px, 40vw, 190px); } }
@media (prefers-reduced-motion: reduce) { .poster, .ix-t, .ix-go, .index a::before { transition: none; } }

/* ---------- Inner pages: the same private office, framed for each page ---------- */
/* Inner page heads match the home: the ink column on the left, a photograph filling the right */
.page-head.has-plate { --col: clamp(400px, 38vw, 600px); display: grid; grid-template-columns: var(--col) minmax(0, 1fr); min-height: min(92vh, 900px); padding: 0; border-bottom: 0; background: var(--bg); }
.page-head.has-plate .wrap { grid-column: 1; grid-row: 1; align-self: center; width: auto; margin: 0; padding: 130px clamp(28px, 3.4vw, 56px) 72px; }
.page-head.has-plate h1 { font-size: clamp(42px, 4vw, 70px); }
.ph-plate { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; background: #E4E2D9; }
.ph-plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ph-plate::after { content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(40px, 5vw, 96px); background: linear-gradient(90deg, var(--bg), rgba(246, 244, 239, 0)); }
.js .ph-plate img { opacity: 0; transform: scale(1.03); transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1), transform 2.4s var(--expo); }
.ready .ph-plate img { opacity: 1; transform: none; }
/* true figures only: from the Google listing and the GOV.UK register */
.ph-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.ph-stats li { padding: 16px 18px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.ph-stats li:first-child { background: var(--cobalt); box-shadow: none; }
.ph-stats li:first-child b, .ph-stats li:first-child span { color: #fff; }
.ph-stats b { display: block; font: 700 clamp(30px, 2.6vw, 40px)/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; }
.ph-stats span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.ph-stats li:first-child span { color: var(--ink); }
@media (max-width: 959px) {
  .page-head.has-plate { display: block; min-height: 0; }
  .ph-plate { height: 52svh; min-height: 280px; }
  .ph-plate::after { inset: auto 0 0 0; width: auto; height: 40px; background: linear-gradient(0deg, var(--bg), rgba(246, 244, 239, 0)); }
  .page-head.has-plate .wrap { padding: 28px var(--gut) 56px; }
}
@media (prefers-reduced-motion: reduce) { .js .ph-plate img { transition: none; } }

/* The credential, folded into the call to action as a ruled line */
.cta-cred { grid-column: 1 / -1; display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 0; padding-top: 26px; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cta-cred .ico { width: 26px; height: 26px; margin-top: 1px; color: var(--brass); }
.cta-cred strong { color: var(--ink); font-weight: 600; }
.cta-cred small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.reviews + .section { padding-top: clamp(48px, 6vw, 80px); }

/* About: the two people as a large type pair, each with the review line that names them */
.people.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); }
.people.pair .person { padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 64px) 0 0; border: 0; background: none; border-radius: 0; }
.people.pair .person + .person { padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--line); }
.people.pair h3 { font-size: clamp(44px, 5.4vw, 84px); line-height: .98; letter-spacing: -.03em; }
.people.pair .role { margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.people.pair blockquote { margin: 28px 0 0; font: 500 clamp(21px, 1.9vw, 27px)/1.4 var(--serif); color: var(--ink); }
.people.pair cite { display: block; margin-top: 12px; font: 400 14px/1.4 var(--sans); font-style: normal; color: var(--ink-3); }
@media (max-width: 760px) { .people.pair { grid-template-columns: minmax(0, 1fr); } .people.pair .person + .person { margin-top: 34px; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Services: alternate sides, and let Making Tax Digital take the full width without a card */
.svc .split.flip > :first-child { order: 2; }
.svc .split.wide { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); }
.svc .split.wide .lead { max-width: 64ch; }
.check.bare { padding: 0; background: none; border: 0; }
.check.bare .waves { margin-top: 34px; }
@media (min-width: 901px) { .check.bare { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px clamp(32px, 5vw, 80px); align-items: start; } .check.bare > label, .check.bare > output, .check.bare > input, .check.bare > .scale { grid-column: 1; } .check.bare > .waves { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; } .check.bare > .verdict, .check.bare > .fine { grid-column: 1; } }
@media (max-width: 900px) { .svc .split.flip > :first-child { order: 0; } }

/* Home: the services index beside a plate of the same desk, the object on it changing with the line you're on */
.ix-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 4vw, 72px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.ix-wrap .index { margin-top: 0; }
.ix-wrap .index a { grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 24px; gap: 8px clamp(18px, 2.4vw, 36px); }
.ix-wrap .ix-d { grid-column: 1; grid-row: 2; max-width: 52ch; }
.ix-wrap .ix-n { grid-row: 1 / span 2; }
.ix-wrap .ix-go { grid-row: 1 / span 2; }
.ix-plate { position: sticky; top: 104px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: #E4E2D9; }
.ix-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform 1.4s var(--expo); }
.ix-plate img.on { opacity: 1; transform: none; }
.ix-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.ix-img { display: none; }
@media (max-width: 1099px) {
  .ix-wrap { grid-template-columns: minmax(0, 1fr); }
  .ix-plate { position: sticky; top: 76px; z-index: 2; order: -1; aspect-ratio: 16 / 9; margin-bottom: 8px; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8); }
  .ix-plate img { object-position: 50% 80%; }
  .ix-img { display: block; grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #E4E2D9; }
  .ix-img img { width: 100%; height: 100%; object-fit: cover; }
  .ix-wrap .index a { grid-template-columns: minmax(0, 1fr) 24px; }
  .ix-wrap .ix-t { grid-row: 2; } .ix-wrap .ix-d { grid-row: 3; grid-column: 1 / -1; } .ix-wrap .ix-n { grid-row: 4; grid-column: 1 / -1; text-align: left; } .ix-wrap .ix-go { grid-row: 2; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ix-plate img { transition: none; transform: none; } }
.svc-img { margin: 0 0 clamp(26px, 3vw, 40px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: #E4E2D9; box-shadow: inset 0 0 0 1px var(--line); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc .split.wide .svc-img { max-width: 620px; }
.svc-img.svc-img-tall { aspect-ratio: 4 / 5; max-width: 380px; }