/*
Theme Name: Michaels & Co
Author: Peacehaven Tech Services
Description: Block theme for Michaels & Co Estate Planning. Colours and fonts in theme.json; section layouts below, applied to core blocks by class name.
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: michaels
*/

/* Ported from the approved mock-up (home_v4). Every rule targets a class set on a core block,
   so the words stay editable. Grid containers zero their children's margins because WordPress
   adds a 16px gap between stacked blocks. */

:root { --r: 18px; --measure: 50ch; /* was 65ch: DS6, 75 characters a line at most (1 Nov 2026) */ color-scheme: light; }
body { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; height: auto; display: block; }
/* Focus: a two-tone ring, white inside and navy outside, so it shows on white, grey and navy alike
   (tan alone was 2.2:1 on white, below the 3:1 of WCAG 1.4.11). The transparent outline keeps a ring in
   Windows high-contrast mode, where box-shadows are dropped. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid transparent; outline-offset: 2px; border-radius: 6px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--wp--preset--color--navy);
}
.navy a:focus-visible, .navy button:focus-visible, .hero a:focus-visible, .mbar a:focus-visible, .q.lead-q a:focus-visible, .feature-txt a:focus-visible {
  box-shadow: 0 0 0 2px var(--wp--preset--color--navy), 0 0 0 5px #fff;
}

/* No gaps between header, page and footer, or between page sections */
body .wp-site-blocks > * { margin-block: 0; }
body .entry-content > * { margin-block: 0; }
body .wp-block-image { margin: 0; }

.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--tan-text); }
.navy .kicker, .hero .kicker, .visit .kicker { color: var(--wp--preset--color--tan); }

.section { padding-block: 88px; }
.navy { background: var(--wp--preset--color--navy); color: #fff; }
.navy h2, .navy h3 { color: #fff; }
.grey { background: var(--wp--preset--color--grey); }

/* Buttons: a 2px border on every button so filled and outline buttons are the same height */
body .wp-block-button__link { border: 2px solid transparent; padding: 12px 24px; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
body .wp-block-button__link:hover { transform: translateY(-1px); }
body .is-style-navy .wp-block-button__link { background: var(--wp--preset--color--navy); color: #fff; }
body .is-style-navy .wp-block-button__link:hover { background: var(--wp--preset--color--navy-2); color: #fff; }
body .is-style-outline .wp-block-button__link { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; padding: 12px 24px; }
body .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--navy); }
.wp-block-buttons { gap: 12px; }

.more { font-weight: 700; font-size: 16px; color: var(--wp--preset--color--navy); }
.more a::after { content: "\00a0\2192"; } /* non-breaking space keeps the arrow with the last word */

/* Section heading: heading left, intro right on wide screens */
/* Section heads: kicker and heading stacked on the left, intro on the right, with the intro's last line level with
   the heading's last line (Mike, 30 Oct). The kicker sits in its own row that takes any spare height and keeps it
   above the heading, so a tall intro can't open a gap between kicker and heading. */
body .sec-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); grid-template-rows: 1fr auto; gap: 16px 56px; }
body .sec-head > * { margin: 0; }
body .sec-head .kicker { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: -4px; }
body .sec-head > h2 { grid-column: 1; grid-row: 2; }
body .sec-head > p:not(.kicker) { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
body .sec-head > .sec-lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
/* A two-paragraph intro is too tall to sit beside the heading (it leaves a blank block under the heading), so at every width the heading runs full width and the intro stacks below it */
body .sec-head:has(> .sec-lead) { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 14px; }
body .sec-head > .sec-lead { grid-column: 1; grid-row: auto; align-self: auto; }
body .sec-head:has(> .sec-lead) .kicker, body .sec-head:has(> .sec-lead) > h2 { align-self: auto; }
/* ...and on wide screens its two paragraphs sit side by side, so nothing is left blank beside them */
@media (min-width: 1101px) {
  body .sec-head > .sec-lead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 56px; align-items: start; }
  body .sec-head > .sec-lead > p + p { margin-top: 0; margin-block-start: 0; }
}
body .sec-head > .sec-lead > * { margin: 0; }
body .sec-head > .sec-lead > * + * { margin-top: 16px; }
.sec-head .sec-lead p { color: var(--wp--preset--color--muted); font-size: 19px; max-width: var(--measure); }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.sec-head p:not(.kicker) { color: var(--wp--preset--color--muted); font-size: 19px; max-width: var(--measure); }
.navy .sec-head p:not(.kicker) { color: var(--wp--preset--color--navy-ink); }
body .section > .sec-head + * { margin-top: 44px; }
/* Up to 1100px the intros run to 6 or 7 lines beside the heading, leaving empty space above it, so stack them */
@media (max-width: 1100px) {
  body .sec-head { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 14px; }
  body .sec-head .kicker, body .sec-head > h2, body .sec-head > p:not(.kicker), body .sec-head > .sec-lead { grid-column: 1; grid-row: auto; align-self: auto; }
}
/* Information hero (J75 spec, J85 redo: no note lines, sources linked inside the sentence) */
.hero-photo{container-type:inline-size}
.mco-vis{margin:0;padding:clamp(16px,5cqw,32px);background:var(--wp--preset--color--navy-2);color:#fff;border:1px solid rgba(191,172,131,.4);border-radius:14px;font:400 clamp(16px,3.4cqw,18px)/1.45 Figtree,sans-serif}
.mco-vis .t{margin:0 0 .3em;font:500 clamp(21px,5.4cqw,30px)/1.2 Fraunces,serif}
.mco-vis .s{margin:0 0 1em;color:var(--wp--preset--color--navy-ink)}.mco-vis .s.e{margin:1em 0 0}
.mco-vis a{color:var(--wp--preset--color--tan-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.mco-vis a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mco-vis .bar{display:flex;height:2.2em;margin:0 0 .8em;border:2px solid #fff;border-radius:6px;overflow:hidden}
.mco-vis .bar i{background:var(--wp--preset--color--tan)}
.mco-vis .bar .x{background:repeating-linear-gradient(135deg,#1c2340 0 8px,#3a4478 8px 16px)}
.mco-vis dl,.mco-vis ul{margin:0;padding:0;list-style:none}
.mco-vis dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2em 1em;padding:.45em 0;border-top:1px solid rgba(207,209,220,.3)}
.mco-vis dt{flex:1 1 9em;color:var(--wp--preset--color--navy-ink)}.mco-vis dd{margin:0 0 0 auto;font-weight:700}
.mco-vis .r{font:500 1.1em Fraunces,serif;color:var(--wp--preset--color--tan-hi)}
.mco-vis .r dt{text-wrap:balance}
.mco-vis li b{display:block;color:var(--wp--preset--color--tan-hi);font-weight:700}
.mco-vis .ch{display:block;width:100%;height:auto;margin:0 0 .6em}
.mco-vis .sw{display:inline-block;width:1.6em;height:3px;margin-right:.5em;vertical-align:middle;background:var(--wp--preset--color--tan)}
.mco-vis .sw.p{height:2px;background:#fff}
.mco-vis .rel .n{padding:.7em .9em;border:1px solid rgba(191,172,131,.55);border-radius:10px;background:rgba(255,255,255,.06)}
.mco-vis .rel .a{display:flex;align-items:center;gap:.6em;padding:.15em 0 .15em 1.4em;color:var(--wp--preset--color--navy-ink);font-size:.9em}
.mco-vis .rel .a svg{flex:none;width:1.2em;height:1.7em}

/* ---------- Header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--wp--preset--color--line); }
body .site-header .nav { gap: 24px; padding-block: 18px; align-items: center; }
.site-header .logo img { height: 44px; width: auto; }
.site-header .wp-block-navigation { font-weight: 500; font-size: 16px; color: var(--wp--preset--color--ink); }
.site-header .wp-block-navigation__container { gap: 28px; }
.site-header .wp-block-navigation-item__content { white-space: nowrap; }
.site-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--tan-text); }
body .site-header .nav-cta { margin-left: auto; }
/* Service dropdowns (desktop): open on click, white panel under the link */
.site-header .wp-block-navigation-submenu__toggle { font-weight: 500; font-size: 16px; color: var(--wp--preset--color--ink); padding: 10px 0; }
.site-header .wp-block-navigation__submenu-icon { margin-left: 4px; }
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(28,35,64,.14); padding: 10px; min-width: 290px; top: calc(100% + 4px); }
/* A closed dropdown is height 0 (core), so the 10px padding and 1px border above left a 22px box with its links clipped inside it. Zero them until the toggle is expanded (LK2; it opens on click, not hover). */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:not(:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container { padding-block: 0; border-width: 0; }
/* Dropdowns open from their own heading's left edge (core pins them to the right edge on a right-justified menu). */
body .site-header .wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { left: 0; right: auto; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15.5px; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--grey); color: var(--wp--preset--color--navy); }
body .site-header .nav-cta .wp-block-button__link { padding: 9px 18px; font-size: 15px; }
.site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; fill: var(--wp--preset--color--navy); }
/* Core shows the burger only below 600px. The six links need 1180px, so collapse earlier. */
@media (max-width: 1180px) {
  .site-header .wp-block-navigation { order: 3; }
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* The open menu: navy panel, links left-aligned in the display font */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); color: #fff; padding: 24px max(20px, env(safe-area-inset-left, 0px)); }
.site-header .is-menu-open .wp-block-navigation__responsive-container-close svg { fill: #fff; width: 30px; height: 30px; }
.site-header .is-menu-open { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.site-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: 48px; }
body .site-header .is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; gap: 6px; }
body .site-header .is-menu-open .wp-block-navigation-item { align-items: flex-start; text-align: left; }
.site-header .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,.14); }
.site-header .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 0; font-family: var(--wp--preset--font-family--display); font-size: 26px; color: #fff; }
.site-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--tan); }
/* In the phone menu each service group is closed until its heading is tapped (Jon, 31 Oct: with both groups open the
   menu was longer than the phone screen and the last items were cut off). The heading is the core submenu button,
   whose aria-expanded the navigation script already toggles; a chevron shows open or closed. */
.site-header .is-menu-open .wp-block-navigation-submenu__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; text-align: left; font-family: var(--wp--preset--font-family--display); font-size: 26px; color: #fff; }
.site-header .is-menu-open .wp-block-navigation-submenu__toggle::after { content: ""; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid var(--wp--preset--color--tan); border-bottom: 2px solid var(--wp--preset--color--tan); transform: rotate(45deg) translateY(-4px); transition: transform .2s; }
.site-header .is-menu-open .has-child.mc-open > .wp-block-navigation-submenu__toggle::after { transform: rotate(-135deg) translateY(-4px); }
.site-header .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
/* Only once menu.js has run (it sets .mc-menu-ready), so without the script the groups simply stay open. */
.mc-menu-ready body .site-header .is-menu-open .has-child:not(.mc-open) > .wp-block-navigation__submenu-container { display: none; }
.site-header .is-menu-open .wp-block-navigation-submenu__toggle::after { display: none; }
.mc-menu-ready .site-header .is-menu-open .wp-block-navigation-submenu__toggle::after { display: block; }
body .site-header .is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 10px 0; gap: 0; }
/* The phone menu lines items up on the right, so a long label ("Disability / Vulnerable Beneficiary Trusts")
   made its list wider than the screen and pushed it off the left edge. Keep each list within the screen. */
body .site-header .is-menu-open .wp-block-navigation__submenu-container { align-self: stretch; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
body .site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: normal; overflow-wrap: anywhere; }
body .site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
body .site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); font-size: 17px; padding: 9px 0 9px 2px; color: var(--wp--preset--color--navy-ink); }
@media (max-width: 600px) {
  body .site-header .nav-cta { display: none; }
  .site-header .logo img { height: 36px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--wp--preset--color--navy); color: #fff; padding-block: 64px 72px; }
body .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; margin: 0; }
body .hero-grid > .wp-block-column { align-self: center; margin: 0; }
.hero h1 { color: #fff; font-size: clamp(36px, 4.6vw, 60px); }
.hero h1 em { font-style: italic; color: var(--wp--preset--color--tan); }
body .hero-copy > h1 { margin-top: 12px; }
body .hero .lead { margin-top: 20px; color: var(--wp--preset--color--navy-ink); font-size: clamp(18px, 1.5vw, 20px); max-width: 34em; }
body .hero .btns { margin-top: 30px; }
body .hero .rating { margin-top: 26px; font-size: 16px; color: var(--wp--preset--color--navy-ink); }
.rating .stars { color: #f0b429; letter-spacing: 2px; }
.rating strong { color: #fff; }
.rating u { text-underline-offset: 3px; }
/* Stand-alone links get a 44 px tap target (WCAG 2.5.5). */
.contact-grid .phone a, .way-on a { display: inline-flex; align-items: center; min-height: 44px; }
/* These links mix text and inline tags, so inline-block keeps their spaces (flex would drop them). */
.rating a, .allrev a { display: inline-block; line-height: 44px; }
.way-on a { color: var(--wp--preset--color--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.hero .photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 3/2; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  body .hero-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .hero { padding-block: 44px 52px; }
}
@media (max-width: 520px) {
  .hero .btns .wp-block-button { flex: 1 1 100%; }
  .hero .btns .wp-block-button__link { width: 100%; }
}
/* Phone first screen (IM8, 1 Nov 2026, J33): the hero picture was a sliver under the fixed bar at 375, so the 5-second
   test could not see it. Tighter spacing and type, and the two hero buttons side by side, bring the whole picture onto
   the first screen. The content and its order are unchanged. */
@media (max-width: 520px) {
  .hero { padding-block: 24px 32px; }
  body .hero-grid { gap: 22px; }
  .hero h1 { font-size: clamp(28px, 8vw, 32px); }
  body .hero-copy > h1 { margin-top: 8px; }
  body .hero .lead { margin-top: 12px; font-size: 17px; }
  body .hero .btns { margin-top: 18px; gap: 10px; }
  .hero .btns .wp-block-button { flex: 1 1 calc(50% - 5px); }
  .hero .btns .wp-block-button { min-width: 0; }
  .hero .btns .wp-block-button__link { padding-inline: 10px; font-size: 15px; line-height: 1.25; white-space: normal; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; }
  body .hero .rating { margin-top: 14px; }
}
/* Shorter first screens (real iPhones with the Safari toolbars are 664 px tall, an SE 568 px; QA 1 Nov): a 2:1 picture and
   tighter text bring the picture onto the first screen. Phone widths only. */
@media (max-width: 520px) {
  .hero { padding-block: 16px 24px; }
  body .hero-grid { gap: 16px; }
  .hero h1 { font-size: clamp(26px, 7.2vw, 30px); line-height: 1.12; }
  body .hero .lead { margin-top: 10px; font-size: 16px; line-height: 1.45; }
  body .hero .btns { margin-top: 14px; }
  body .hero .rating { margin-top: 10px; font-size: 15px; }
  .hero .photo { aspect-ratio: 2/1; }
}
/* Short phone screens (Safari with its toolbars, 664 px or less): a little smaller again so the picture still shows. */
@media (max-width: 520px) and (max-height: 700px) {
  .hero h1 { font-size: 26px; }
  body .hero .lead { font-size: 15px; line-height: 1.4; margin-top: 8px; }
  body .hero .btns { margin-top: 10px; }
  body .hero .rating { margin-top: 8px; font-size: 14px; }
  .hero { padding-block: 12px 20px; }
  body .hero-grid { gap: 12px; }
}
/* Line length (DS6, 75 characters at most, 1 Nov): body paragraphs stop at 32em. Rows and labels that are laid out as
   flex or grid cells keep their own width. */
body main p { max-width: 32em; }
body main :is(.bar, .calc-row, .chart-title, .chips, .kicker, .phone, .rating, .n, .flow-step, .stat, .t) { max-width: none; }

/* ---------- Trust strip ---------- */
.trust { background: var(--wp--preset--color--navy-2); }
body .trust-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
body .trust-row > .t { margin: 0; padding: 26px 28px; border-left: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 1.4; color: var(--wp--preset--color--navy-ink); }
body .trust-row > .t:first-child { border-left: 0; padding-left: 0; }
.t strong { display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(32px, 3vw, 42px); line-height: 1; color: var(--wp--preset--color--tan); }
@media (max-width: 640px) {
  body .trust-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .trust-row > .t { padding: 22px 18px; }
  body .trust-row > .t:nth-child(odd) { border-left: 0; padding-left: 0; }
  body .trust-row > .t:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

/* ---------- Why plan: six risks ---------- */
body .risks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 36px; }
body .risks > * { margin: 0; }
.risk { border-top: 2px solid var(--wp--preset--color--tan); padding-top: 16px; }
.risk h3 { font-size: 22px; }
body .risk > p { margin-top: 8px; color: var(--wp--preset--color--muted); font-size: 16.5px; }
@media (max-width: 980px) { body .risks { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { body .risks { grid-template-columns: minmax(0,1fr); } }
body .section > .risk-cta { margin-top: 40px; gap: 14px 24px; padding: 24px 28px; border-radius: var(--r); background: var(--wp--preset--color--grey); align-items: center; }
body .risk-cta > * { margin: 0; }
.risk-cta > p { flex: 1 1 320px; font-family: var(--wp--preset--font-family--display); font-size: clamp(20px, 2vw, 24px); color: var(--wp--preset--color--navy); }

/* ---------- Services ---------- */
/* Two equal headline services (family protection and inheritance tax), side by side */
body .features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-bottom: 0; }
body .features > .feature-txt { position: relative; margin: 0; border-radius: var(--r); background: var(--wp--preset--color--navy); color: #fff; padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; }
body .feature-txt > * { margin: 0; }
.features h3 { color: #fff; font-size: clamp(26px, 2.4vw, 34px); }
.features h3 a { color: inherit; text-decoration: none; }
.feature-txt p:not(.more) { color: var(--wp--preset--color--navy-ink); }
body .feature-txt > .more { color: #fff; margin-top: auto; padding-top: 6px; }
.feature-txt .more a::before, .card .more a::before { content: ""; position: absolute; inset: 0; }
@media (max-width: 1000px) { body .features > .feature-txt { padding: 32px 28px; } }
@media (max-width: 760px) {
  body .features { grid-template-columns: minmax(0,1fr); }
  body .features > .feature-txt { padding: 28px 24px; }
}
/* The "not sure where to start" card stands out from the service cards */
body .cards .card-start { background: rgba(191,172,131,.18); border-color: var(--wp--preset--color--tan); }

body .section > .cards { margin-top: 22px; }
/* Eight cards: 4 across, then 2, then 1, so no row is left with a single card */
body .cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
body .cards > * { margin: 0; }
@media (max-width: 1100px) { body .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { body .cards { grid-template-columns: minmax(0,1fr); } }
body .card { position: relative; background: #fff; border: 1px solid transparent; border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, box-shadow .2s, transform .2s; }
body .card > * { margin: 0; }
.card:hover { border-color: var(--wp--preset--color--tan); box-shadow: 0 14px 34px rgba(28,35,64,.1); transform: translateY(-2px); }
.card h3 { font-size: 22px; }
.card p:not(.more) { color: var(--wp--preset--color--muted); font-size: 16.5px; }
body .card > .more { margin-top: auto; padding-top: 6px; }
.card::before { content: ""; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 12px; background: rgba(191,172,131,.22) center / 26px no-repeat; }
.ico-shield::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ico-will::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E"); }
.ico-care::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3Cpath d='M12 17s-3-1.8-3-3.6A1.6 1.6 0 0112 13a1.6 1.6 0 013 1.4c0 1.8-3 2.6-3 2.6z'/%3E%3C/svg%3E"); }
.ico-lpa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Cpath d='M16 11l2 2 4-4'/%3E%3C/svg%3E"); }
.ico-probate::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 9h16M8 3v4M16 3v4M8 14h8'/%3E%3C/svg%3E"); }
.ico-disability::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.5A3.8 3.8 0 0112 8a3.8 3.8 0 017 2.5C19 15.6 12 20 12 20z'/%3E%3Cpath d='M3 20h4M17 20h4'/%3E%3C/svg%3E"); }
.ico-variation::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V12a4 4 0 014-4h8'/%3E%3Cpath d='M15 5l3 3-3 3'/%3E%3Cpath d='M6 12c0-3-2-5-3-6'/%3E%3C/svg%3E"); }
.ico-tax::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M14 8.5a2 2 0 00-3.5 1.3V15M9.5 12h3.5M9.5 15H15'/%3E%3C/svg%3E"); }
.ico-business::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2M3 13h18'/%3E%3C/svg%3E"); }

body .section > .chips { margin-top: 24px; max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--wp--preset--color--muted); font-size: 16px; }
.chips a { border: 1.5px solid var(--wp--preset--color--line); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--wp--preset--color--navy); }
.chips a:hover { border-color: var(--wp--preset--color--tan); }

/* ---------- Steps ---------- */
body .steps { display: flex; flex-wrap: wrap; gap: 28px; }
body .steps > * { margin: 0; flex-grow: 1; flex-basis: calc((640px - 100%) * 999); }
.step { border-top: 2px solid var(--wp--preset--color--tan); padding-top: 22px; }
body .step > * { margin: 0; }
.step .n { font-family: var(--wp--preset--font-family--display); font-size: 44px; line-height: 1; color: var(--wp--preset--color--tan); margin-bottom: 12px; }
body .step > h3 { font-size: 24px; margin-top: 12px; }
body .step > p:not(.n) { margin-top: 8px; color: var(--wp--preset--color--navy-ink); font-size: 17px; }
body .section > .cta-row { margin-top: 40px; }

/* ---------- Why choose us ---------- */
body .why { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 64px; margin: 0; }
body .why > .wp-block-column { align-self: center; margin: 0; }
.why-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 25%; border-radius: var(--r); }
.why-photo figcaption { margin: 14px 0 0; text-align: left; font-size: 15.5px; color: var(--wp--preset--color--muted); }
.why-photo figcaption strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 21px; color: var(--wp--preset--color--navy); }
.why-copy h2 { font-size: clamp(30px, 3.6vw, 44px); }
body .why-copy > h2 { margin-top: 12px; }
body .why-copy > .lead { margin-top: 16px; color: var(--wp--preset--color--muted); font-size: 19px; max-width: var(--measure); }
body .why-copy > .reasons { margin-top: 32px; }
body .reasons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 32px; }
body .reasons > * { margin: 0; border-top: 2px solid var(--wp--preset--color--tan); padding-top: 14px; }
.reasons h3 { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 18px; letter-spacing: 0; }
body .reasons > * > p { margin-top: 6px; color: var(--wp--preset--color--muted); font-size: 16.5px; }
/* "Three steps" with a long step 3: steps 1 and 2 side by side, then step 3 and "Expert partners" each run full
   width, so no short cell sits beside a long one (dead space, site-check B10, 31 Oct). Add "lead-pair" to the group. */
body .reasons.lead-pair > :nth-child(n+3) { grid-column: 1 / -1; }
/* The "at work" photo is wider than the portrait, so keep Mike in frame when it is cropped */
.why-photo .at-work img { object-position: 62% 60%; }
@media (max-width: 900px) {
  /* A working shot needs room to read, so it stays a wide photo instead of the small portrait thumbnail */
  body .why-photo figure.at-work { display: block; max-width: 560px; }
  body .why-photo .at-work img { aspect-ratio: 4/3; object-position: 60% 70%; }
  body .why-photo .at-work figcaption { margin-top: 12px; }
}
body .why-copy > .regulation { margin-top: 24px; font-size: 15px; color: var(--wp--preset--color--muted); }
body .side > .checked { margin-top: 20px; font-size: 14px; color: var(--wp--preset--color--muted); }
.side .checked a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  body .why { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .why-photo figure { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 18px; align-items: center; }
  .why-photo img { aspect-ratio: 1/1; object-position: 50% 22%; }
  .why-photo figcaption { margin-top: 0; }
}
@media (max-width: 520px) { body .reasons { grid-template-columns: minmax(0,1fr); } }

/* ---------- Reviews ---------- */
body .quotes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
body .quotes > * { margin: 0; }
body .quotes > .lead-q { grid-row: span 2; }
body .q { background: #fff; border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 16px; }
body .q > * { margin: 0; }
/* Darker gold so the stars reach 4.5:1 on white (5.57:1), like text; the navy card keeps the brighter gold */
.q .st { color: #8f5e00; letter-spacing: 3px; }
.q.lead-q .st { color: #f0b429; }
.q .quote { font-size: 18px; }
body .q > .by { margin-top: auto; font-weight: 700; font-size: 15.5px; color: var(--wp--preset--color--navy); }
.q .by span { display: block; font-weight: 400; color: var(--wp--preset--color--muted); font-size: 14px; }
body .q.lead-q { background: var(--wp--preset--color--navy); justify-content: center; padding: 40px; }
body .q.lead-q > .by { margin-top: 6px; color: #fff; }
.q.lead-q .by span { color: var(--wp--preset--color--navy-ink); }
.q.lead-q .quote { font-family: var(--wp--preset--font-family--display); font-size: clamp(22px, 2.4vw, 31px); line-height: 1.3; color: #fff; }
body .section > .allrev { margin-top: 26px; font-weight: 700; color: var(--wp--preset--color--navy); }
.allrev u { text-underline-offset: 4px; }
@media (max-width: 980px) { body .q { padding: 24px; } }
@media (max-width: 700px) { body .quotes { grid-template-columns: minmax(0,1fr); } body .quotes > .lead-q { grid-row: auto; padding: 28px; } }

/* ---------- We come to you ---------- */
body .visit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; border-radius: var(--r); overflow: hidden; background: var(--wp--preset--color--navy); color: #fff; margin: 0; }
body .visit > .wp-block-column { margin: 0; }
.visit-img .wp-block-image, .visit-img img { height: 100%; }
.visit-img img { width: 100%; object-fit: cover; object-position: 70% 50%; }
body .visit-txt { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
body .visit-txt > * { margin: 0; }
.visit h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); }
.visit-txt p:not(.kicker) { color: var(--wp--preset--color--navy-ink); font-size: 18.5px; }
body .visit-txt > .wp-block-buttons { margin-top: 6px; }
@media (max-width: 760px) {
  body .visit { grid-template-columns: minmax(0,1fr); }
  .visit-img img { aspect-ratio: 3/2; height: auto; }
  body .visit-txt { padding: 30px 24px; }
}
body .section > .offers { margin-top: 20px; }
body .offers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
body .offers > * { margin: 0; }
body .offer { position: relative; border: 1px solid var(--wp--preset--color--line); border-radius: var(--r); padding: 26px 94px 26px 28px; transition: border-color .2s; }
.offer:hover { border-color: var(--wp--preset--color--tan); }
.offer h3 { font-size: 23px; }
body .offer > p { margin-top: 4px; color: var(--wp--preset--color--muted); font-size: 16.5px; }
.offer h3 a::before { content: ""; position: absolute; inset: 0; }
.offer::after { content: "\2192"; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--tan); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--wp--preset--color--navy); }
@media (max-width: 600px) { body .offers { grid-template-columns: minmax(0,1fr); } }

/* ---------- FAQ ---------- */
/* Heading block above the questions, laid out like every section head (title left, intro and button right).
   It used to be a sticky side column, which left a dead block beside the open list (Jon, 31 Oct; site-check B10). */
body .faqgrid { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin: 0; }
body .faqgrid > .wp-block-column { margin: 0; }
body .faqgrid > .side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 64px; align-items: end; }
body .faqgrid > .side > .kicker { grid-column: 1; grid-row: 1; }
body .faqgrid > .side > h2 { grid-column: 1; grid-row: 2; }
body .faqgrid > .side > p:not(.kicker) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
body .faqgrid > .side > .wp-block-buttons { grid-column: 2; grid-row: 3; }
.faqgrid h2 { font-size: clamp(30px, 3.6vw, 44px); }
body .side > h2 { margin-top: 12px; }
body .side > p:not(.kicker) { margin-top: 14px; color: var(--wp--preset--color--muted); }
body .side > .wp-block-buttons { margin-top: 24px; }
body .faq > details { margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
body .faq > details:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(20px, 1.9vw, 23px); line-height: 1.3; color: var(--wp--preset--color--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--wp--preset--font-family--body); font-size: 28px; color: var(--wp--preset--color--tan-text); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
body .faq details > p { margin: 0; padding: 0 0 22px; max-width: var(--measure); color: var(--wp--preset--color--muted); }
@media (max-width: 900px) {
  body .faqgrid { gap: 28px; }
  body .faqgrid > .side { display: block; }
}

/* ---------- Service pages ---------- */
/* Breadcrumb (Rank Math) at the foot of the page, in the footer's grey, just above the footer */
body main .crumbs { margin: 0; background: var(--wp--preset--color--grey); padding-block: 26px 0; font-size: 14.5px; color: var(--wp--preset--color--muted); }
.crumbs .rank-math-breadcrumb p { margin: 0; }
.crumbs .rank-math-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .rank-math-breadcrumb .separator { margin: 0 8px; color: var(--wp--preset--color--muted); }

/* How it works: facts on the left, allowance chart on the right */
body .allow-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 56px; margin: 0; }
body .allow-grid > .wp-block-column { margin: 0; align-self: start; }
body .facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 32px; }
body .facts > * { margin: 0; }
.fact { border-top: 2px solid var(--wp--preset--color--tan); padding-top: 14px; }
.fact h3 { font-size: 23px; }
body .fact > p { margin-top: 8px; color: var(--wp--preset--color--muted); font-size: 16.5px; }
body .chart { background: var(--wp--preset--color--navy); color: #fff; border-radius: var(--r); padding: 30px; }
body .chart > * { margin: 0; }
.chart-title { font-family: var(--wp--preset--font-family--display); font-size: 22px; margin-bottom: 18px !important; }
body .chart > .bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 10px; margin-top: 8px; font-size: 16px; }
.bar strong { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 19px; white-space: nowrap; }
.b-nrb { background: var(--wp--preset--color--navy-2); }
.b-rnrb { background: rgba(191,172,131,.22); }
body .chart > .b-total { background: var(--wp--preset--color--tan); color: var(--wp--preset--color--navy); margin-top: 14px; font-weight: 700; }
.b-total strong { font-size: 24px; }
body .chart > .chart-note { margin-top: 16px; font-size: 14.5px; color: var(--wp--preset--color--navy-ink); }
@media (max-width: 900px) { body .allow-grid { grid-template-columns: minmax(0,1fr); gap: 36px; } }
@media (max-width: 560px) { body .facts { grid-template-columns: minmax(0,1fr); } }
body .facts.one-col { grid-template-columns: minmax(0,1fr); }
/* Heading kept in the text column beside a diagram, so the two columns end level */
body .allow-text > .kicker { margin: 0; }
body .allow-text > h2 { margin-top: 12px; font-size: clamp(30px, 3.6vw, 44px); } /* same size as .sec-head h2 */
body .allow-grid:has(> .allow-text > .side-intro) > .wp-block-column { align-self: center; } /* any height difference is shared above and below, not left as one gap */
body .allow-text > .side-intro { margin-top: 16px; color: var(--wp--preset--color--muted); max-width: var(--measure); }
body .allow-text > .side-intro + .facts { margin-top: 32px; } /* only after a side heading: the IHT chart section is untouched */

/* Flow diagrams on service pages: stages joined by arrows, built from blocks so every word is real text */
body .flow { background: var(--wp--preset--color--navy); color: #fff; border-radius: var(--r); padding: 30px; }
body .flow > * { margin: 0; }
body .flow > .flow-step { position: relative; background: var(--wp--preset--color--navy-2); border-radius: 10px; padding: 14px 16px; margin-top: 30px; font-size: 16px; color: var(--wp--preset--color--navy-ink); }
body .flow > .chart-title + .flow-step { margin-top: 0; }
.flow-step strong { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
.flow-step + .flow-step::before { content: "\2193" / ""; position: absolute; top: -27px; left: 22px; color: var(--wp--preset--color--tan); font-size: 20px; line-height: 24px; }
body .flow > .flow-step.good { background: var(--wp--preset--color--tan); color: var(--wp--preset--color--navy); }
.flow-step.good strong { color: var(--wp--preset--color--navy); }
body .flow > .flow-step.bad { background: transparent; border: 2px solid #e8a090; }
body .compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; margin-bottom: 48px; }
body .compare > * { margin: 0; }
@media (max-width: 760px) { body .compare { grid-template-columns: minmax(0,1fr); } }

/* Worked example */
body .example { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 56px; margin: 0; }
body .example > .wp-block-column { margin: 0; align-self: center; }
.example h2 { font-size: clamp(28px, 3.2vw, 40px); }
body .example-text > h2 { margin-top: 12px; }
body .example-text > p:not(.kicker) { margin-top: 16px; font-size: 18.5px; max-width: var(--measure); }
body .example-text > .small-print { font-size: 15px; color: var(--wp--preset--color--muted); }
body .calc { background: #fff; border-radius: var(--r); padding: 26px 28px; box-shadow: 0 14px 34px rgba(28,35,64,.08); }
body .calc > * { margin: 0; }
body .calc > .calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--line); font-size: 17px; }
.calc-row strong { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 20px; color: var(--wp--preset--color--navy); white-space: nowrap; }
.calc-row.minus strong { color: var(--wp--preset--color--muted); }
body .calc > .calc-row.bill { border-bottom: 0; font-weight: 700; }
.calc-row.bill strong { color: #a03a2c; font-size: 24px; }
body .calc > .calc-row.after { margin-top: 6px; background: var(--wp--preset--color--navy); color: #fff; border-radius: 10px; padding: 14px 16px; border-bottom: 0; font-weight: 700; }
.calc-row.after strong { color: var(--wp--preset--color--tan); font-size: 26px; }
@media (max-width: 860px) { body .example { grid-template-columns: minmax(0,1fr); gap: 32px; } }

/* A related-service link at the end of a card's text sits on its own line, styled as a link */
/* The "go to the service" link at the end of each tool: links to our own pages only, so a source link inside
   the sentence (GOV.UK) stays in the sentence */
.risk p a[href^="/"], .fact p a[href^="/"] { display: flex; align-items: center; min-height: 44px; width: fit-content; margin-top: 2px; font-weight: 700; color: var(--wp--preset--color--navy); }
.risk p a[href^="/"]::after, .fact p a[href^="/"]::after { content: "\00a0\2192"; } /* non-breaking space: a plain space at the start of ::after collapses */
.risk p a[href^="/"]:hover, .fact p a[href^="/"]:hover { color: var(--wp--preset--color--tan-text); }
/* Source links inside a sentence (GOV.UK and the like) are underlined, so they read as links without relying on colour (WCAG 1.4.1) */
main p:not(.more):not(.chips):not(.rating):not(.allrev):not(.phone) a[href^="http"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Our own page links inside a paragraph (a "Will writing" link, the Terms link in an answer) are underlined too, colour left as it is (J110) */
main p:not(.more):not(.chips):not(.rating):not(.allrev):not(.phone) a[href^="/"] { text-decoration: underline; text-underline-offset: 3px; }
/* Show which page you're on in the menu (NN/g menu guideline 5) */
.site-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--wp--preset--color--tan); }

/* "What's changing": two dated changes in the steps layout */
.navy .step .n { font-size: 30px; }
/* Single featured review under "Who you'll be talking to" */
body .section > .one-q { margin-top: 40px; max-width: 900px; }
.one-q .by a { color: var(--wp--preset--color--tan); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contact ---------- */
body .contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; margin: 0; }
body .contact-grid > .wp-block-column { align-self: center; margin: 0; }
.contact h2 { font-size: clamp(30px, 3.6vw, 46px); }
body .contact-grid h2 { margin-top: 12px; }
body .contact-grid .wpforms-confirmation-container-full { background: var(--wp--preset--color--grey); border: 0; border-left: 4px solid var(--wp--preset--color--tan); border-radius: 12px; padding: 20px 22px; margin: 0; }
body .contact-grid .wpforms-confirmation-container-full p { margin: 0; color: var(--wp--preset--color--navy); font-size: 18px; font-weight: 600; }
body .contact-grid > .wp-block-column:not(.form-col) > p:not(.kicker):not(.phone) { margin-top: 16px; color: var(--wp--preset--color--navy-ink); font-size: 19px; }
body .contact-grid .phone { margin-top: 22px; font-family: var(--wp--preset--font-family--display); font-size: clamp(28px, 3vw, 38px); color: var(--wp--preset--color--tan); }
@media (max-width: 960px) { body .contact-grid { grid-template-columns: minmax(0,1fr); gap: 32px; } } /* 960 not 860: at 900 the short text column left dead space beside the form (B10) */
/* WPForms Lite form inside a white card. WPForms' modern styles read these variables. */
body .contact-grid > .form-col { background: #fff; color: var(--wp--preset--color--ink); border-radius: var(--r); padding: 32px; }
.form-col .wpforms-container {
  --wpforms-field-border-radius: 12px; --wpforms-field-border-size: 1.5px; --wpforms-field-border-color: #8b838c; /* 3.67:1 on white: field edges need 3:1 (WCAG 1.4.11); #d6d0d6 was 1.52:1 */
  --wpforms-field-text-color: var(--wp--preset--color--ink); --wpforms-field-size-font-size: 17px; --wpforms-field-size-input-height: 50px; --wpforms-field-size-input-spacing: 7px;
  --wpforms-label-color: var(--wp--preset--color--navy); --wpforms-label-size-font-size: 15.5px; --wpforms-label-size-line-height: 1.3; --wpforms-label-size-sublabel-font-size: 14px;
  --wpforms-button-background-color: var(--wp--preset--color--tan); --wpforms-button-text-color: var(--wp--preset--color--navy); --wpforms-button-border-radius: 999px;
  --wpforms-button-size-height: 52px; --wpforms-button-size-font-size: 16.5px;
}
body .form-col div.wpforms-container-full:not(:empty) { margin: 0; padding: 0; }
body .form-col .wpforms-container .wpforms-field-label { font-weight: 600; }
body .form-col .wpforms-container .wpforms-field { padding: 0 0 16px; }
body .form-col .wpforms-container .wpforms-field input:focus, body .form-col .wpforms-container .wpforms-field textarea:focus { border-color: var(--wp--preset--color--navy); box-shadow: 0 0 0 3px rgba(191,172,131,.45); }
body .form-col .wpforms-container textarea.wpforms-field-small { height: 96px; }
body .form-col .wpforms-container .wpforms-submit-container { padding-top: 4px; }
body .form-col .wpforms-container button.wpforms-submit { width: 100%; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
/* WPForms clears the focus style on its button, so give it the site's ring back */
body .form-col .wpforms-container button.wpforms-submit:focus-visible { outline: 3px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--wp--preset--color--navy); }
/* The feature cards' heading link sits above the card-wide link, so it can be clicked and its focus seen */
.feature-txt h3 a { position: relative; z-index: 1; }
body .form-col .wpforms-container button.wpforms-submit:hover { background: var(--wp--preset--color--tan-hi); }
body .form-col > .form-note { margin-top: 14px; text-align: center; color: var(--wp--preset--color--muted); font-size: 14px; }
.form-note a { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wp--preset--color--grey); font-size: 15.5px; color: var(--wp--preset--color--muted); }
body .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 52px 28px; margin: 0; }
body .foot-grid > .wp-block-column { margin: 0; }
.foot-grid .logo img { height: 40px; width: auto; }
body .foot-grid .logo { margin-bottom: 16px; }
.foot-grid h3 { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--navy); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body .foot-grid h3 + p { margin-top: 12px; }
body .foot-grid p + h3 { margin-top: 28px; }
.foot-grid a:hover { color: var(--wp--preset--color--navy); }
body .site-footer > .legal { margin: 0; border-top: 1px solid var(--wp--preset--color--line); padding-block: 18px 32px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
body .site-footer > .company { margin-top: 0; margin-bottom: 0; padding-bottom: 32px; font-size: 13.5px; }
@media (max-width: 760px) { body .foot-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } body .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { body .foot-grid { grid-template-columns: minmax(0,1fr); } }

/* Tap targets at least 44 x 44 px (WCAG 2.5.5) */
.site-header .logo a, .foot-grid .logo a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .legal span { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* Footer contact and legal links: told apart by an underline as well as colour (WCAG 1.4.1, J110) */
.site-footer a[href^="tel:"], .site-footer a[href^="mailto:"], .site-footer .legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body .site-footer > .legal { padding-block: 6px 26px; gap: 0 22px; }

/* ---------- Phone call bar ---------- */
body .mbar { display: none; }
@media (max-width: 600px) {
  body { font-size: 17.5px; }
  /* room under the footer for the fixed call bar */
  body .site-footer { padding-bottom: 72px; }
  .section { padding-block: 60px; }
  body .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--wp--preset--color--navy); }
  .mbar .wp-block-buttons { flex: 1; flex-wrap: nowrap; gap: 10px; }
  .mbar .wp-block-button { flex: 1; }
  .mbar .wp-block-button__link { width: 100%; padding: 11px; min-height: 46px; }
  .mbar .is-style-outline .wp-block-button__link { border-color: rgba(255,255,255,.45); }
}

/* Terms of Business page (J88): space above each section heading, section padding like the other pages */
body .terms > h1 { margin-top: 0; }
body .terms > h2 { margin-top: 2em; font-size: clamp(22px, 2.4vw, 28px); }