/* =====================================================================
   003.css — VettedTradespeople. template_5 ("Foreman") folded into the
   render layer: vanilla CSS, Flexbox and Grid, mobile-first, no build step,
   no framework. Linked by chromeRender.php under the name
   site/globalVars.php gives in $siteStylesheet.

   THE PALETTE IS THE LOGO'S. The four brand values are read from
   core/images/logo-dark.svg — the gradient stops #fbaf2d -> #f48245, the
   wordmark #404041, the grey #929497 — not from a written spec. Everything
   else is derived or template-supplied and says which.

   EVERY IMAGE IS SIZED BY THE LAYOUT. An <img> in a slot gets its box from
   these rules (width, height or aspect-ratio); its intrinsic size never
   drives layout. A slot that collapses with the placeholder in it is a
   layout bug, not a placeholder problem.
   ===================================================================== */

:root {
  /* from the logo */
  --brand-amber:    #fbaf2d;
  --brand-orange:   #f48245;
  --brand-charcoal: #404041;
  --brand-grey:     #929497;
  /* template-supplied tones (template_5 css/site.css) */
  --ink:        #1f1f20;
  --ink-2:      #2c2c2d;
  --cream:      #fff8ed;
  --cream-deep: #fbefdd;
  --green:      #5ab03d;
  --green-2:    #7cc45e;
  --error:      #c62828;
  /* derived */
  --orange-deep: #d96a2c;
  --brand-gradient: linear-gradient(135deg, var(--brand-amber) 0%, var(--brand-orange) 100%);
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: "proxima-nova", "Proxima Nova", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --container: 1200px;
  --gutter: 1rem;
  --mark-min: 100px;   /* the narrowest legible Checkatrade mark, measured 16 Sep 2026; see $siteAttribution */
}

/* ---- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; color: var(--brand-charcoal); background: #fff; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .75rem; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-orange); transition: color .2s var(--ease); }
a:hover { color: var(--orange-deep); }
:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1200px) { :root { --container: 1140px; } }
@media (min-width: 1400px) { :root { --container: 1320px; } }

/* The skip link: off-screen until focused */
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---- Buttons --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1.2rem; border: 0; border-radius: 10px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn--go { color: #fff; background: linear-gradient(180deg, var(--green-2), var(--green)); border-radius: 999px; }
.btn--go:hover, .btn--go:focus-visible { color: #fff; background: var(--green); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(90, 176, 61, .35); }
.btn--lg { padding: .85rem 1.5rem; font-size: 1.1rem; }

/* ---- Header: the template_5 box, floating over the hero on desktop ---- */
.site-header { position: relative; z-index: 20; background: var(--ink); padding: 1rem 0 .9rem; }
.site-header > .container { position: relative; }
.site-header__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: #fff; border-radius: var(--radius-sm); padding: .6rem .75rem; }
.wordmark { display: inline-block; line-height: 0; }
.wordmark__img { height: 46px; width: auto; }        /* 225x76 SVG: 46px tall = 136px wide */
.wordmark__img--white { height: 40px; }
@media (max-width: 575.98px) { .wordmark__img { height: 40px; } }
.site-nav { order: 3; flex-basis: 100%; min-width: 0; }
.site-nav__list { list-style: none; margin: 0; padding: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-weight: 700; }
.site-nav__list--depth-1 { flex-basis: 100%; padding-left: 1rem; font-weight: 600; font-size: .95rem; }
.site-nav__list a { color: var(--brand-charcoal); text-decoration: none; white-space: nowrap; display: inline-block; padding: .4rem 0; }
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--brand-orange); }
.site-header__cta { order: 2; margin-left: auto; font-size: .9rem; padding: .5rem .9rem; }
.powered { display: flex; align-items: center; gap: .6rem; margin: 0; }
.powered__label { font-size: .85rem; white-space: nowrap; color: var(--brand-grey); }
.powered__mark { width: 145px; min-width: var(--mark-min); height: auto; aspect-ratio: 723 / 100; }
.powered--header { order: 2; margin-left: auto; }
.site-header__cta + .powered--header { margin-left: 0; }
.site-nav__burger { display: none; order: 4; position: relative; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 8px; background: var(--cream); padding: 0; cursor: pointer; flex-shrink: 0; }
.site-nav__burger span { position: absolute; left: .5rem; right: .5rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease); }
.site-nav__burger span:nth-child(1) { top: .65rem; }
.site-nav__burger span:nth-child(2) { top: calc(50% - 1px); }
.site-nav__burger span:nth-child(3) { top: calc(100% - .65rem - 2px); }
.site-header.is-open .site-nav__burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.site-header.is-open .site-nav__burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-nav__burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
/* Below 992px, once the script runs: the nav is a drawer under the row */
@media (max-width: 991.98px) {
  .js .site-header { position: sticky; top: 0; }   /* render-23: only once the script has run — without it the trades list is in flow (3,697px at 375), and a sticky header that tall covers the footer */
  .site-header.is-stuck .site-header__row { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }   /* render-05: the scrolled state */
  .js .site-nav__burger:not([hidden]) { display: flex; }
  .js .powered--header { display: none; }
  .js .site-header.is-open .powered--header { display: flex; order: 5; flex-basis: 100%; justify-content: center; margin: .5rem 0 0; }
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .5rem); background: #fff; border-radius: var(--radius-sm); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); padding: .5rem 0; max-height: calc(100vh - 7rem); overflow: auto; }
  .js .site-header.is-open .site-nav { display: block; }
  .js .site-nav__list { display: block; padding: 0; }
  .js .site-nav__list--depth-0 > li { border-bottom: 1px solid var(--cream-deep); }
  .js .site-nav__list--depth-0 > li:last-child { border-bottom: 0; }
  .js .site-nav__list a { display: block; padding: .95rem 1.25rem; font-size: 1.05rem; }
  .js .site-nav__list--depth-1 a { padding: .6rem 1.25rem .6rem 2.5rem; }
}
@media (min-width: 992px) {
  .site-header { position: absolute; left: 0; right: 0; top: 0; background: none; padding-top: 1.5rem; transition: padding .25s var(--ease); }
  .site-header__row { flex-wrap: nowrap; padding: .9rem 1.25rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
  .site-nav { order: 2; flex-basis: auto; margin-left: auto; display: flex; align-items: center; gap: 2.25rem; }
  .site-nav__list { padding: 0; gap: 2.25rem; flex-wrap: nowrap; }
  .site-nav__list--depth-1 { display: none; }                /* no second level in the data yet; shown in flow when it arrives */
  .site-header__cta { order: 3; margin-left: 1.5rem; font-size: 1rem; padding: .6rem 1.1rem; }
  .powered--header { order: 3; margin-left: 1.5rem; }
  .site-nav__burger { display: none !important; }
  /* Sticky header on the home and legal pages (render-05, decision 6): fixed
   * over the hero, a stronger shadow and a tighter top once scrolled. */
  .t5--home .site-header, .t5--legal .site-header { position: fixed; }
  .t5--home .site-header.is-stuck, .t5--legal .site-header.is-stuck { padding-top: .6rem; }
  .site-header.is-stuck .site-header__row { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
  /* Pages without a hero: the header sits in flow on a dark band */
  .wbo-section-contact .site-header { position: relative; background: var(--ink); padding: 1rem 0 .9rem; }
}

/* ---- Hero (home) ------------------------------------------------------ */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--ink); padding-top: 1rem; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); z-index: 0; }   /* slot: hero background, fixed by this box; --hero-focus is shared with the people layer (render-31) */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 12, 6, .84) 0%, rgba(20, 12, 6, .58) 55%, rgba(20, 12, 6, .25) 100%); }
.hero__inner { position: relative; z-index: 2; }
.hero__body { max-width: 40rem; padding: 2rem 0 3rem; }
.hero__title { color: #fff; margin-bottom: 1rem; }
.hero__copy { color: rgba(255, 255, 255, .88); max-width: 36rem; margin-bottom: 1.5rem; }
.hero__copy h2, .hero__copy h3 { color: #fff; font-size: 1.25rem; margin-bottom: .5rem; }
.hero__copy p { color: inherit; }
.hero__copy a { color: var(--brand-amber); }
.hero__cta { margin: 0 0 1.5rem; }
.powered--hero { margin-top: 1.5rem; }
.powered--hero .powered__label { color: rgba(255, 255, 255, .8); }
.powered--hero .powered__mark { width: 180px; }
@media (min-width: 992px) {
  .hero { padding-top: 8.5rem; }
  .hero__body { padding: 3rem 0 5rem; }
}
@media (max-width: 575.98px) {
  .hero__body { padding: 1.25rem 0 2rem; }
}

/* The home search card */
.hero-search { background: #fff; color: var(--brand-charcoal); border-radius: 16px; padding: 1rem 1rem .9rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); max-width: 36rem; margin-bottom: 1.5rem; }
.hero-search__label { display: block; font-weight: 700; color: var(--brand-charcoal); font-size: .95rem; margin: 0 0 .5rem; }
.hero-search__row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.hero-search__field { position: relative; }
.hero-search__select { width: 100%; height: 3.5rem; padding: 0 3rem 0 1rem; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--brand-charcoal); background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23404041' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 1rem center / 16px 12px; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none; }
.hero-search__select:invalid { color: var(--brand-grey); }
.hero-search__select:focus { border-color: var(--brand-orange); outline: 0; box-shadow: 0 0 0 .25rem rgba(244, 130, 69, .15); }
.hero-search__go { height: 3.5rem; }
.hero-search__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-search__links a { display: inline-block; background: var(--cream); border: 1px solid var(--cream-deep); border-radius: 999px; padding: .45rem .9rem; font-weight: 700; color: var(--brand-charcoal); text-decoration: none; }
.hero-search__links a:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
@media (min-width: 576px) { .hero-search__row { grid-template-columns: 1fr auto; } }

/* ---- Sections and the CMS bands -------------------------------------- */
.section { padding: 3.5rem 0; }
@media (min-width: 992px) { .section { padding: 5.5rem 0; } }
.section--light { background: #fff; }
.section--cream { background: var(--cream); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: var(--brand-amber); }
.band__rows--prose { max-width: 46rem; }
.band__rows--grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .band__rows--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .band__rows--grid { grid-template-columns: repeat(3, 1fr); } }
.band__rows--grid .cms-row { background: var(--cream); border-radius: var(--radius); padding: 1.5rem; }
.section--dark .band__rows--grid .cms-row { background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); }
.section--cream .band__rows--grid .cms-row { background: #fff; border: 1px solid var(--cream-deep); }
.cms-row > .cms-content + .cms-content { margin-top: 1.25rem; }
.cms-content > :last-child { margin-bottom: 0; }
.cms-content ul, .cms-content ol { padding-left: 1.25rem; }
/* CMS images: the slot is the content block's width; the ratio is fixed here, never by the file */
.cms-content img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.empty-state { color: var(--brand-grey); font-weight: 700; margin: 0; }

/* The default template (Contact and any page without a site template) */
.wbo-page-contact-contact main > h1, main > h1 { margin: 0; }
body:not(.t5) main > h1 { padding: 2.5rem var(--gutter) 0; max-width: var(--container); margin: 0 auto; box-sizing: border-box; }
body:not(.t5) main > .band { padding: 1.5rem var(--gutter) 3rem; max-width: var(--container); margin: 0 auto; box-sizing: border-box; }
body:not(.t5) main > .band .cms-row { max-width: 46rem; }
body:not(.t5) main > .band .cms-row + .cms-row { margin-top: 1.5rem; }
body:not(.t5) main > .empty-state { padding: 1.5rem var(--gutter) 3rem; max-width: var(--container); margin: 0 auto; box-sizing: border-box; }

/* ---- Legal documents -------------------------------------------------- */
.legal-hero { background: var(--ink); color: #fff; padding: 2.5rem 0 2.25rem; }
@media (min-width: 992px) { .legal-hero { padding: 7.5rem 0 3rem; } }   /* room for the fixed header (render-05) */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: 1.25rem; }
.crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.crumbs a:hover { color: var(--brand-orange); }
.crumbs [aria-current] { color: #fff; }
.legal-hero__title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.legal-body { padding: 3rem 0 4rem; background: #fff; }
/* render-05: the "on this page" list in a side column that sticks on desktop */
.legal-body__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.legal-main { max-width: 46rem; min-width: 0; }
@media (min-width: 992px) {
  .legal-body__inner { grid-template-columns: minmax(14rem, 3fr) minmax(0, 8fr); }
  .toc { position: sticky; top: 6.5rem; }
}
.toc { background: var(--cream); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0; }
.toc__head { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-orange); font-weight: 700; margin: 0 0 .6rem; }
.toc__list { margin: 0; padding: 0 0 0 1.25rem; font-size: .95rem; }
.toc__list li { margin-bottom: .35rem; }
.toc__list a { color: var(--brand-charcoal); text-decoration: none; font-weight: 600; }
.toc__list a:hover { color: var(--brand-orange); }
.legal-sections { counter-reset: legal; }
.legal-sections > .cms-row { counter-increment: legal; position: relative; padding: 1.5rem 0 1.5rem 3.25rem; border-top: 1px solid var(--cream-deep); scroll-margin-top: 6.5rem; }   /* under the fixed header */
.legal-sections > .cms-row::before { content: counter(legal, decimal-leading-zero); position: absolute; left: 0; top: 1.75rem; color: var(--brand-orange); font-weight: 700; font-size: .95rem; letter-spacing: .06em; }
.legal-sections > .cms-row h2 { font-size: 1.5rem; }
.legal-sections > .cms-row p, .legal-sections > .cms-row li { max-width: 68ch; }
.legal-others { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 576px) { .legal-others { grid-template-columns: 1fr 1fr; } }
.legal-other { display: flex; flex-direction: column; gap: .25rem; background: var(--cream); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; text-decoration: none; color: var(--ink); transition: transform .25s var(--ease), background .25s; }
.legal-other:hover { background: var(--cream-deep); transform: translateY(-3px); color: var(--ink); }
.legal-other__kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-orange); font-weight: 700; }
.legal-other__title { font-weight: 700; font-size: 1.1rem; }

/* ---- Footer with the orange glow ------------------------------------- */
.site-footer { position: relative; overflow: hidden; color: #fff; padding: 3.5rem 0 1.5rem; background: linear-gradient(170deg, var(--ink) 0%, var(--ink) 42%, #3a2416 70%, #c96a35 100%); background-size: 200% 200%; animation: gradientDrift 14s ease-in-out infinite alternate; }
@keyframes gradientDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .site-footer, .card-dark--cta { animation: none; } }
.site-footer p, .site-footer a { color: #fff; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } .site-footer__brand { grid-column: auto; } }
.site-footer__blurb { color: rgba(255, 255, 255, .8); margin: 1rem 0 0; max-width: 30rem; }
.site-footer__head { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: .55rem; }
.site-footer__list a { text-decoration: none; color: rgba(255, 255, 255, .85); }
.site-footer__list a:hover, .site-footer__list a[aria-current="page"] { color: var(--brand-orange); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.25rem; }
.site-footer__copy { margin: 0; font-weight: 700; font-size: .95rem; }
.site-footer .powered__label { color: rgba(255, 255, 255, .8); }

/* =====================================================================
   THE FORM SHELL AND THE LANDING PAGE (render-04, 16 Sep 2026)
   template_5/landing.html — variant B, the split — folded onto the markup
   render_webolytics_form() emits (contract §4, §5). Every selector below is
   either a class core emits (webo-*, the Bootstrap 4 hooks, row/col-md-*)
   or a class site/pages/trades.php wraps them in (lp-*). The renderer's
   vocabulary is not changed; where it lacked a hook, core gained one
   (render-04 decision log S2-1..S2-4). Mobile-first: the four-step form on
   a 375px screen is the primary case.
   ===================================================================== */

/* ---- The landing page: cream page, the minimal header, split hero ----- */
.t5--lp { background: var(--cream); }
/* The minimal header (render-05, decision 1): the logo and the colour mark, in flow */
.lp-header { padding: 1.25rem 0; }
.lp-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lp-logo .wordmark__img { height: 48px; }
@media (max-width: 575.98px) { .lp-logo .wordmark__img { height: 40px; } }
.powered--lp-head .powered__label { color: var(--brand-grey); }
.powered--lp-head .powered__mark { width: 130px; }
/* At 375px the logo, the label and a 130px mark total one pixel more than the row; the mark
 * narrows to 110px (above the measured 100px floor) so the row keeps one line */
@media (max-width: 399.98px) { .powered--lp-head .powered__mark { width: 110px; } }
.lp-hero { padding: 1rem 0 2.5rem; }
.lp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
.lp-form { order: -1; }                                        /* the form is the first thing on a phone (template_5 NOTE, variant B) */
@media (min-width: 992px) {
  .lp-hero { padding: 1.5rem 0 3.5rem; }
  .lp-hero__grid { grid-template-columns: 5fr 7fr; gap: 1.5rem; }
  .lp-form { order: 0; }
}

/* The side panel: dark, the H1, any rows before the form, the whiteout mark at the foot */
.lp-panel { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .lp-panel { padding: 2rem; } }
.lp-panel__title { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0; }
.lp-panel__rows { color: rgba(255, 255, 255, .85); }
.lp-panel__rows h2, .lp-panel__rows h3 { color: #fff; font-size: 1.25rem; }
.lp-panel__rows a { color: var(--brand-amber); }
.lp-panel .empty-state { color: rgba(255, 255, 255, .7); }
.powered--panel { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .15); }
.powered--panel .powered__label { color: rgba(255, 255, 255, .8); }
.powered--panel .powered__mark { width: 180px; }

/* The form card */
.form-card { background: #fff; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(49, 49, 50, .1); padding: 1.25rem; }
@media (min-width: 576px) { .form-card { padding: 1.75rem; } }
@media (min-width: 768px) { .form-card { padding: 2.25rem 2.5rem; } }
.form-card .cms-row, .form-card .cms-content { display: contents; }   /* the CMS wrappers add nothing here; the card is the container */

/* ---- The step shell: pills, then the step's name and "N of M" ---------- */
.webo-form-step { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.webo-form-steps { order: -1; list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.webo-form-steps__item { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--cream-deep); border-radius: 999px; padding: .3rem .8rem .3rem .35rem; font-size: .85rem; font-weight: 700; color: var(--brand-grey); }
.webo-form-steps__num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cream-deep); color: var(--brand-grey); display: grid; place-items: center; font-size: .8rem; }
.webo-form-steps__item--current { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.webo-form-steps__item--current .webo-form-steps__num { background: #fff; color: var(--brand-orange); }
.webo-form-steps__item--done { border-color: var(--brand-orange); color: var(--brand-orange); }
.webo-form-steps__item--done .webo-form-steps__num { background: var(--brand-orange); color: #fff; }
.webo-form-steps__item--done .webo-form-steps__num::before { content: "\2713"; font-size: .75rem; }
.webo-form-steps__item--done .webo-form-steps__num { font-size: 0; }
/* The mobile step list: only the current pill carries its label; the others are their number (the label stays in the DOM for a reader) */
@media (max-width: 575.98px) {
  .webo-form-steps__item:not(.webo-form-steps__item--current) { padding-right: .35rem; }
  .webo-form-steps__item:not(.webo-form-steps__item--current) .webo-form-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.webo-form-step__name { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.webo-form-step__progress { order: -1; margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-grey); }
.webo-form-step__progress--complete { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; order: 0; background: var(--green); color: #fff; border-radius: 999px; padding: .35rem .9rem .35rem .7rem; letter-spacing: .04em; margin-top: .25rem; }
.webo-form-step__progress--complete::before { content: "\2713"; }
.webo-form-step--complete .webo-form-step__name { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
/* render-35 (Sam's 14 Oct amends, content-18 T-2): on a step still to fill in, the step's name ("Job") and "Step 1 of 4"
 * are hidden on screen and kept for screen readers; the pills carry the step. The confirmation step keeps both. */
.form-card .webo-form-step:not(.webo-form-step--complete) > .webo-form-step__name,
.form-card .webo-form-step:not(.webo-form-step--complete) > .webo-form-step__progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The alert list after a failed step ------------------------------ */
.webo-form-errors { background: rgba(198, 40, 40, .08); border-left: 4px solid var(--error); border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: 0 0 1.1rem; }
.webo-form-errors:focus { outline: 3px solid var(--error); outline-offset: 2px; }
.webo-form-errors__intro { margin: 0 0 .35rem; font-weight: 700; color: var(--error); }
.webo-form-errors__list { margin: 0; padding-left: 1.2rem; }
.webo-form-errors__list li { margin-bottom: .2rem; }
.webo-form-errors__list a { color: var(--error); font-weight: 700; }

/* ---- Rows and columns: the renderer's grid hooks --------------------- */
.webo_form .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; margin: 0 0 .9rem; }
.webo_form .row > [class*="col-"] { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 576px) {
  .webo_form .row > .col-md-6 { grid-column: span 6; }
  .webo_form .row > .col-md-4 { grid-column: span 4; }
  .webo_form .row > .col-md-3 { grid-column: span 3; }
}
.webo_form .d-none { display: none !important; }

/* ---- Labels, controls, hints, errors --------------------------------- */
.webo-label { display: block; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.webo_form .form-control, .webo_form .custom-select { display: block; width: 100%; min-height: 3.25rem; padding: .7rem 1rem; font: inherit; font-weight: 700; color: var(--brand-charcoal); background: #fff; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); transition: border-color .2s, box-shadow .2s; }
.webo_form .form-control::placeholder { color: var(--brand-grey); font-weight: 400; }
.webo_form .form-control:focus, .webo_form .custom-select:focus { border-color: var(--brand-orange); outline: 0; box-shadow: 0 0 0 .25rem rgba(244, 130, 69, .18); }
/* A ring that can be seen (render-25 Q5): the glow above is 18% orange, and the orange border is 2.6:1 on white. From the keyboard, the button's ring. */
.webo_form .form-control:focus-visible, .webo_form .custom-select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.webo_form [aria-invalid="true"].form-control, .webo_form [aria-invalid="true"].custom-select { border-color: var(--error); }
.webo_form textarea.form-control { min-height: 8rem; resize: vertical; line-height: 1.5; }
.webo_form .custom-select { appearance: none; -webkit-appearance: none; padding-right: 3rem; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23404041' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 1rem center / 16px 12px; }
.webo_form .custom-select:disabled { color: var(--brand-grey); background-color: var(--cream); cursor: not-allowed; }
.webo_form .input-group, .webo_form .input-text { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
/* min-width: 0 — a <select> with long options will not shrink below its content width otherwise, and overflows the card on a phone */
.webo_form .input-group > .form-control, .webo_form .input-group > .custom-select, .webo_form .input-text > .form-control { flex: 1 1 12rem; width: auto; min-width: 0; max-width: 100%; }
.webo_form .form-group { margin: 0; }
/* The textarea's prepend is a caption, not an addon: the group stacks */
.webo_form .form-group > .input-group { flex-direction: column; gap: .4rem; }
.webo_form .input-group-prepend { display: block; }
.webo_form .input-group-prepend .input-group-text { display: block; font-size: .95rem; color: var(--brand-grey); }
/* The advisory-check addons on email and phone: after the control, one visible at a time */
.webo_form .input-group-text.webo-email-icon, .webo_form .input-group-text.webo-email-loader, .webo_form .input-group-text.webo-email-error, .webo_form .input-group-text.webo-email-success,
.webo_form .input-group-text.webo-phone-icon, .webo_form .input-group-text.webo-phone-loader, .webo_form .input-group-text.webo-phone-error, .webo_form .input-group-text.webo-phone-success { order: 2; flex: 0 0 3.25rem; display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); color: var(--brand-grey); background: #fff; }
.webo_form .input-group-text:empty { display: none; }
.webo_form .webo-email-success, .webo_form .webo-phone-success { color: var(--green); }
.webo_form .webo-email-error, .webo_form .webo-phone-error { color: var(--error); }
.webo_form .webo-email-loader svg, .webo_form .webo-phone-loader svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .webo_form .webo-email-loader svg, .webo_form .webo-phone-loader svg { animation: none; } }
/* The phone composite: a compact dial-code select beside the number */
/* (three classes, to outrank the generic .input-group > .form-control rule above) */
.webo_form .input-group > .webo-phone-country { flex: 0 0 8.5rem; width: 8.5rem; min-width: 0; }   /* wide enough for the "Country" prompt when no IP country is known */
.webo_form .input-group > .webo-phone-number { flex: 1 1 5rem; }   /* shrinks so the dial code, the number and the addon share one line at 375px */
.webo_form .webo-phone-country.col-4, .webo_form .webo-phone-number.col-8 { max-width: none; }
/* Hints (the min/max signposts) and per-field errors */
.webo-field-hint { margin: .45rem 0 0; font-size: .9rem; font-weight: 700; color: var(--brand-grey); }
.webo-field-hint.is-met { color: var(--green); }
.webo-field-hint.is-met::before { content: "\2713\00a0"; }
.webo-field-error { margin: .5rem 0 0; padding: .5rem .8rem; background: rgba(198, 40, 40, .08); border-left: 4px solid var(--error); border-radius: 0 8px 8px 0; color: var(--error); font-weight: 700; font-size: .95rem; }

/* ---- Radio cards: a small module list (decision 1) ------------------- */
.webo-choice-list { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr; gap: .5rem; }
.webo-choice-list > .webo-label { grid-column: 1 / -1; margin-bottom: .1rem; }
.webo-choice-list > legend { float: left; width: 100%; }        /* a legend sits outside a grid; float puts it back in flow */
.webo-choice-list::after { content: ""; display: block; clear: both; grid-column: 1 / -1; height: 0; }
.webo-choice-list:focus { outline: 0; }
.webo-choice { position: relative; margin: 0; }
.webo-choice__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.webo-choice__label { display: flex; align-items: center; min-height: 2.9rem; padding: .6rem .9rem .6rem 2.9rem; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); background: #fff; font-weight: 700; color: var(--ink); position: relative; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.webo-choice__label::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -.65rem; border-radius: 50%; border: 2px solid #ccc; background: #fff; transition: background .2s, border-color .2s; }
.webo-choice__label:hover { border-color: var(--brand-orange); transform: translateY(-1px); }
.webo-choice__input:checked + .webo-choice__label { border-color: var(--brand-orange); background: var(--cream); }
.webo-choice__input:checked + .webo-choice__label::before { background: var(--brand-orange); border-color: var(--brand-orange); box-shadow: inset 0 0 0 3px #fff; }
.webo-choice__input:focus-visible + .webo-choice__label { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
.webo-choice-list--invalid .webo-choice__label { border-color: rgba(198, 40, 40, .55); }
.webo-choice-list--invalid + .webo-field-error { grid-column: 1 / -1; }
@media (min-width: 576px) { .webo-choice-list { grid-template-columns: 1fr 1fr; } }

/* ---- Native switches and file inputs (contract §4 hooks) --------------- */
.webo_form .custom-control { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 1.75rem; padding: 0; margin: .3rem 0; }
.webo_form .custom-control-input { appearance: none; -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin: 0; border: 2px solid var(--brand-grey); border-radius: .3rem; background: #fff; flex-shrink: 0; cursor: pointer; }
.webo_form .custom-control-input[type="radio"] { border-radius: 50%; }
.webo_form .custom-control-input:checked { background: var(--brand-orange); border-color: var(--brand-orange); box-shadow: inset 0 0 0 3px #fff; }
.webo_form .custom-switch .custom-control-input { width: 2.4rem; height: 1.3rem; border-radius: 1.3rem; position: relative; transition: background .2s, border-color .2s; }
.webo_form .custom-switch .custom-control-input::before { content: ""; position: absolute; top: 1px; left: 1px; width: .9rem; height: .9rem; border-radius: 50%; background: var(--brand-grey); transition: transform .2s var(--ease), background .2s; }
.webo_form .custom-switch .custom-control-input:checked { box-shadow: none; }
.webo_form .custom-switch .custom-control-input:checked::before { transform: translateX(1.1rem); background: #fff; }
.webo_form .custom-control-label { font-weight: 700; cursor: pointer; }
.webo_form .custom-file { display: block; flex: 1 1 12rem; }
.webo_form .custom-file-input { display: block; width: 100%; font: inherit; padding: .55rem .75rem; border: 2px dashed var(--cream-deep); border-radius: var(--radius-sm); background: var(--cream); }
.webo_form .custom-file-input:focus { border-color: var(--brand-orange); outline: 0; }
.webo_form .custom-file-label { display: block; font-size: .9rem; color: var(--brand-grey); margin: .35rem 0 0; }
.webo_form .text-muted { font-size: .85rem; color: var(--brand-grey); margin-top: .35rem; }

/* ---- The submit button ------------------------------------------------- */
.webo_form .row:last-child { margin-bottom: 0; }
.webo-submit { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 3.4rem; padding: .8rem 1.4rem; margin-top: .4rem; border: 0; border-radius: 10px; background: linear-gradient(180deg, var(--green-2), var(--green)); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s; }
.webo-submit:hover, .webo-submit:focus-visible { background: var(--green); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(90, 176, 61, .35); }
.webo-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.webo-submit-button-text::after { content: ""; display: inline-block; width: .5rem; height: .5rem; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); margin-left: .7rem; vertical-align: middle; }
.webo-submit-loader.d-none { display: none; }
@media (min-width: 576px) { .webo_form .row > .col-12 { display: flex; justify-content: flex-end; } .webo-submit { width: auto; min-width: 12rem; } }

/* =====================================================================
   THE FROZEN DELTA (render-05, 17 Sep 2026)
   template_5 as frozen at tag template_5-frozen-20260917: the trades menu
   from data, the drawer's flat list, the eyebrow, the conversion pass, the
   sticky go button. From here on the design lives in this file, not in
   htdocs_static/ (see htdocs_static/template_5/README.md).
   ===================================================================== */

/* ---- The eyebrow with the orange dot (template_5 site.css:56-62) ------ */
/* render-34 (Rishi's R4, decision 5): .9rem → 1.05rem, the dot and its gap in proportion (.55 → .65rem). */
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.05rem; color: var(--brand-charcoal); margin: 0 0 .75rem; }
.eyebrow::before { content: ""; width: .65rem; height: .65rem; flex-shrink: 0; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 4px rgba(244, 130, 69, .28); animation: pulse 2.4s var(--ease) infinite; }
.eyebrow--light { color: #fff; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(244, 130, 69, .3); } 50% { box-shadow: 0 0 0 12px rgba(244, 130, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }
.legal-hero__eyebrow { margin-bottom: .5rem; }

/* ---- The trades menu (from $tradePagesSection) ------------------------ */
.chev { width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .2s; }
.has-trades.is-open .chev { transform: translateY(1px) rotate(225deg); }
.site-nav__toggle { color: var(--brand-charcoal); text-decoration: none; white-space: nowrap; padding: .4rem 0; display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.site-nav__toggle:hover, .has-trades.is-open .site-nav__toggle { color: var(--brand-orange); }
.trade-list__items { list-style: none; margin: 0; padding: 0; }
.trade-list__items a { display: block; padding: .28rem 0; color: var(--brand-charcoal); text-decoration: none; font-weight: 600; font-size: .95rem; }
.trade-list__items a:hover, .trade-list__items a[aria-current="page"] { color: var(--brand-orange); }
.trade-list__more { display: none; }
/* Desktop: a panel under the header row, opened by the button (script), by
 * focus within it (no script) or by hover on a pointer device */
@media (min-width: 992px) {
  .site-nav__trades { position: static; }
  .trade-list { position: absolute; left: 0; right: 0; top: calc(100% + .6rem); background: #fff; border-radius: var(--radius-sm); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); padding: 1.5rem; z-index: 30; max-height: 75vh; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; }
  /* Open: by the script's is-open; while focus is inside the panel; and,
   * without the script, while focus is anywhere in the region (so the
   * keyboard can reach the list when the button is inert) */
  .has-trades.is-open .trade-list, .has-trades .trade-list:focus-within, html:not(.js) .has-trades:focus-within .trade-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .trade-list__items { columns: 4; column-gap: 1.5rem; }
  .trade-list__items li { break-inside: avoid; }
  .trade-list__items a:hover { padding-left: .25rem; transition: padding .2s var(--ease), color .2s; }
  .trade-list__more { display: none !important; }
}
@media (hover: hover) and (min-width: 992px) { .has-trades:hover .trade-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
/* The hover bridge (render-27; John, 30 Sep 2026: moving down from the button, the panel "reverses its transition" and
 * reopens). The panel hangs from the header row, not the button: between the button's foot and the panel's top lie the
 * row's lower padding and the .6rem gap, 27px at 1440, where the pointer is over neither and :hover drops. This invisible
 * box fills that band, the panel's width, and exists only while the menu is hovered open. It hangs from .has-trades, not
 * the panel: the panel scrolls (overflow: auto), so anything above its top edge is clipped and never takes the pointer.
 * display: block puts it under the button's line (its static place); 2rem reaches past the panel's top, under the panel. */
@media (hover: hover) and (min-width: 992px) { .has-trades:hover::after { content: ""; display: block; position: absolute; left: 0; right: 0; height: 2rem; } }
/* The drawer: an accordion row; eight trades then "Show all N", the list
 * scrolling inside its height. Without the script the list is in flow and
 * complete (the toggle is inert, the button stays [hidden]). */
@media (max-width: 991.98px) {
  .site-nav__toggle { display: flex; width: 100%; justify-content: space-between; padding: .95rem 1.25rem; font-size: 1.05rem; }
  .js .site-nav__list--depth-0 { border-bottom: 1px solid var(--cream-deep); }
  .js .trade-list { display: none; }
  .js .has-trades.is-open .trade-list { display: block; }
  .trade-list__items { padding: 0 1.25rem; }
  .js .trade-list__items { max-height: 46vh; overflow: auto; }
  .trade-list__items li { border-bottom: 1px solid var(--cream-deep); }
  .trade-list__items li:last-child { border-bottom: 0; }
  .trade-list__items a { padding: .7rem 0; font-size: 1rem; }
  .js .trade-list:not(.is-all) .trade-list__items li:nth-child(n+9) { display: none; }
  .trade-list__more:not([hidden]) { display: block; width: calc(100% - 2.5rem); margin: .6rem 1.25rem 1rem; border: 2px solid var(--brand-orange); background: #fff; color: var(--brand-orange); font: inherit; font-weight: 700; border-radius: 999px; padding: .6rem 1rem; cursor: pointer; }
}

/* ---- The conversion pass ----------------------------------------------- */
/* The home hero on a phone: the search is the second thing on screen (the
 * hero band's rows are hidden below 576px, as the design hides its lede) */
@media (max-width: 575.98px) {
  .t5--home .hero__title { font-size: 1.75rem; }
  .t5--home .hero__copy { display: none; }
}
/* The form card, tighter, so the button sits inside a laptop fold */
@media (min-width: 768px) { .form-card { padding: 1.75rem 2rem; } }
.form-card .webo-form-step { margin-bottom: .9rem; }
.form-card .webo-form-steps { margin-bottom: .7rem; }
.form-card .webo_form .row { margin-bottom: .75rem; }
.webo-submit { margin-top: .3rem; }
/* The per-step intro (the slot, $webolyticsFormStepIntro) */
.webo-form-step__intro { margin: .1rem 0 0; color: var(--brand-grey); font-size: .95rem; }
/* Quick picks on the quote page's first step */
.quick-picks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.quick-picks__label { font-size: .85rem; font-weight: 700; color: #707275; margin-right: .2rem; }   /* 4.8:1 on the card (render-25); --brand-grey is 3.0:1 */
.quick-pick { display: inline-block; border: 1px solid var(--cream-deep); background: var(--cream); color: var(--brand-charcoal); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .85rem; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.quick-pick:hover, .quick-pick:focus-visible { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
/* The sticky go button on phones, shown by the script while its target is off screen */
.lp-sticky { display: none; }
@media (max-width: 767.98px) {
  .lp-sticky:not([hidden]) { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40; display: flex; align-items: center; justify-content: center; gap: .6rem; background: linear-gradient(180deg, var(--green-2), var(--green)); color: #fff; font-weight: 700; text-decoration: none; border-radius: 999px; padding: .9rem 1.2rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
  .lp-sticky:not([hidden])::before { content: ""; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255, 255, 255, .25); position: relative; flex-shrink: 0; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 4 4 4-4 4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 12px; }
}

/* ---- Recently posted: the jobs band on a trade page (render-09) -------- */
/* template_5 site.css:204-207 (split-head), :75-78 (btn-arrow), :282-297
 * (jobs). The card is an article with its link stretched over it; the tag is
 * dropped; both links go UP to the form card, so the arrows point up. Four
 * columns at 992, two at 768, one below — fixed tracks, so one, two or three
 * cards keep a card's width and do not stretch to fill the row. */
.split-head { display: grid; gap: 1rem; margin-bottom: 2.25rem; }
.split-head .eyebrow, .split-head h2 { margin-bottom: 0; }
.split-head .eyebrow { margin-bottom: .75rem; }
.split-head__cta { justify-self: start; }
@media (min-width: 992px) { .split-head { grid-template-columns: 1fr auto; align-items: end; } .split-head__cta { justify-self: end; } }
.btn-arrow { color: #fff; background: var(--brand-orange); padding: .45rem 1.2rem .45rem .45rem; border-radius: 10px; }
.btn-arrow:hover, .btn-arrow:focus-visible { color: #fff; background: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn-arrow__icon { width: 2rem; height: 2rem; border-radius: 7px; background: rgba(255, 255, 255, .18); position: relative; flex-shrink: 0; }
.btn-arrow__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: translate(-60%, -40%) rotate(45deg); }
.btn-arrow--up .btn-arrow__icon::after { transform: translate(-50%, -30%) rotate(-45deg); }
.arrow { display: inline-block; vertical-align: -.05em; transition: transform .2s var(--ease); }
.jobs { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.jobs > li { display: flex; }
.job-card { position: relative; flex: 1; display: flex; flex-direction: column; gap: .55rem; background: #fff; border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: 1.5rem; min-height: 13rem; color: var(--ink); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.job-card::before { content: ""; position: absolute; right: -22%; top: -28%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--cream); transition: transform .5s var(--ease); }
.job-card:hover, .job-card:focus-within { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(49, 49, 50, .1); border-color: rgba(244, 130, 69, .45); }
.job-card:hover::before { transform: scale(1.12); }
.job-card > * { position: relative; }
.job-card__disc { width: 3.6rem; height: 3.6rem; border-radius: 14px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; margin-bottom: .4rem; box-shadow: 0 8px 18px rgba(244, 130, 69, .3); }
.job-card__title { font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin: 0; }
.job-card__meta { font-size: .85rem; color: #707275; margin: 0; }   /* 4.82:1 on the white card; --brand-grey is 3.04:1 */
.job-card__more { position: static; margin-top: auto; padding-top: .75rem; color: var(--brand-orange); font-weight: 700; font-size: .9rem; text-decoration: none; }
.job-card__more::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }   /* the whole card is the link's target, as the design's was */
.job-card__more:focus-visible { outline: none; }
.job-card__more:focus-visible::after { outline: 3px solid var(--brand-orange); outline-offset: -3px; }
.job-card:hover .arrow { transform: translateY(-3px); }
@media (min-width: 768px) { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .jobs { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .job-card, .job-card::before, .arrow { transition: none; } .job-card:hover, .job-card:focus-within { transform: none; } }
/* The form card takes focus when a fragment link lands on it; it is not a
 * control, so it shows no ring for that. */
.lp-form:focus { outline: none; }
.lp-form { scroll-margin-top: 1rem; }

/* ---- Trade page regions (render-11) ------------------------------------ */
/* template_5 landing.html:185-290, placed by the trade layout taxonomy
 * (site/pages/trades.php). Muted text is #707275, not --brand-grey: 4.82:1
 * on white and 4.57:1 on cream, where --brand-grey is 3.04:1. */
.eyebrow--light { color: #fff; }
.section--dark .eyebrow { color: #fff; }
.region-head { margin-bottom: 2.25rem; }
.region-head .cms-row, .region-head .cms-content { display: contents; }
.region-head h2 { margin: 0; }
.region-head p:not(.eyebrow) { margin: 1rem 0 0; color: #707275; max-width: 36rem; }
.section--dark .region-head p:not(.eyebrow) { color: rgba(255, 255, 255, .75); }
@media (min-width: 992px) {
  .region-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: end; }
  .region-head .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .region-head p:not(.eyebrow) { margin: 0; justify-self: end; }
}
/* About: prose; with an image block, the image left of the prose */
.region-about__row + .region-about__row { margin-top: 2.5rem; }
.region-about .cms-row { max-width: 46rem; }
.region-about .cms-content p, .region-about .cms-content li { max-width: 60ch; }
.region-about .cms-content ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.region-about .cms-content ul li { padding-left: 2rem; position: relative; }
.region-about .cms-content ul li::before { content: ""; position: absolute; left: .3rem; top: .55rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--brand-orange); }
/* render-26 (T2; John, content-13 Q2): the image is 16:9 (the base ratio), and the row's other blocks are ONE column
 * beside it, centred on its height. It was 4:3 with each block in its own grid row, so the prose sat at the top of a
 * taller image. */
.region-about__row--split { display: grid; gap: 1.5rem; }
.region-about__media .cms-content img { border-radius: var(--radius); }
.region-about__prose > .cms-content + .cms-content { margin-top: 1.25rem; }
@media (min-width: 992px) {
  .region-about__row--split { grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: center; }
}
/* Typical jobs: cards. Their numbers are gone (render-26; John, content-13 Q6), as the Tips' and the home's Expect's. */
.info-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
/* Fit the count, 3 to 6 cards (render-17). Two columns: an odd last card takes the full row (3 → 2 + 1, 5 → 2 + 2 + 1).
 * Three across: 3 and 6 fill as they were, 4 is four across, and 5 is three on top and two wider below, on six tracks
 * (each card spans 2, the last two span 3). :has() reads the count; a browser without it keeps the three-across grid. */
@media (min-width: 768px) and (max-width: 991.98px) { .info-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  .info-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .info-grid:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .info-grid:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .info-grid:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; }
}
.info-card { background: #fff; border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: 1.5rem; }
.section--light .info-card { background: var(--cream); border-color: var(--cream); }
.info-card h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.info-card h3:last-child { margin-bottom: 0; }
.info-card p { color: #707275; margin: 0; font-size: .98rem; }
/* Tips: items on dark */
.expect { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .expect { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .expect { grid-template-columns: repeat(4, 1fr); } }
/* Fit the count, 1 to 4 tips (render-17). Two columns: an odd last tip takes the full row (1 → full width, 3 → 2 + 1).
 * Four across: as many columns as tips — 1 is one full-width card, 2 halves, 3 thirds, and 4 stays quarters. :has()
 * reads the count; a browser without it keeps the four-across grid. */
@media (min-width: 768px) and (max-width: 991.98px) { .expect > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  .expect:has(> li:only-child) { grid-template-columns: 1fr; }
  .expect:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .expect:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* One tip is a full-width card (above), so its text keeps a readable line: 65ch, however wide the card (John, 23 Sep 2026;
 * render-17). Not the h3: a tip's heading is 36 characters or fewer (bin/deckcheck), far under it. */
.expect:has(> li:only-child) p { max-width: 65ch; }
.expect > li { background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 1.5rem; }
.expect h3 { font-size: 1.1rem; margin: 0 0 .3rem; color: #fff; }
.expect p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .95rem; }
.region-tips .expect p { text-wrap: pretty; }   /* render-38 (render-17's open call): no stranded last word on the trade pages' Tips; ignored where unsupported */
/* FAQs, and the closing card beside them */
.region-faqs__grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .region-faqs--with-closing .region-faqs__grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.region-faqs .region-head { display: block; margin-bottom: 1rem; }
.region-faqs .region-head p:not(.eyebrow) { margin: 1rem 0 0; }
.faq { background: #fff; border: 1px solid var(--cream-deep); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.faq[open] { box-shadow: 0 10px 24px rgba(49, 49, 50, .06); }
.faq summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--orange-deep); font-size: 1.4rem; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq__answer { color: #707275; margin-top: .75rem; }
.faq__answer .cms-content + .cms-content { margin-top: .75rem; }
.card-dark { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 2rem; }
.card-dark h2, .card-dark h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 1.25rem; }
.card-dark p, .card-dark li { color: rgba(255, 255, 255, .8); }
.card-dark .cms-content:not(.vtp-button) a { color: var(--brand-amber); }
/* The dark CTA variant carries the same drifting gradient as the footer, template_5 site.css:222-226 */
.card-dark--cta { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--ink) 0%, var(--ink) 38%, #4a2c1a 68%, var(--brand-orange) 100%); background-size: 220% 220%; animation: gradientDrift 12s ease-in-out infinite alternate; }
.card-dark--cta > * { position: relative; }
.lp-panel__rows .cms-row + .cms-row { margin-top: 1.25rem; }
/* The template gaps, by class (one lowercase single-hyphen word per attribute) */
.lp-panel > .cms-content.vtp-eyebrow { margin: 0; }
.vtp-eyebrow > p { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.05rem; margin: 0; color: var(--brand-charcoal); }   /* render-34, R4: as .eyebrow */
.vtp-eyebrow > p::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 4px rgba(244, 130, 69, .28); flex-shrink: 0; }
.lp-panel .vtp-eyebrow > p, .card-dark .vtp-eyebrow > p, .section--dark .vtp-eyebrow > p { color: #fff; }
.cms-content.vtp-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1rem; }
.cms-content.vtp-steps ol > li { position: relative; padding-left: 3rem; min-height: 2.2rem; counter-increment: s; }
.cms-content.vtp-steps ol > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand-gradient); color: var(--ink); font-weight: 700; display: grid; place-items: center; }
.lp-panel .vtp-steps b, .lp-panel .vtp-steps strong { color: #fff; }
.cms-content.vtp-checks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cms-content.vtp-checks ul > li { padding-left: 2rem; position: relative; }
.cms-content.vtp-checks ul > li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green); color: var(--ink); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.cms-content.vtp-button > a { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 10px; background: var(--brand-orange); color: var(--ink); font-weight: 700; font-size: 1.05rem; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.cms-content.vtp-button > a:hover, .cms-content.vtp-button > a:focus-visible { background: #fff; color: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
/* The card title: a free-text block before the form block in the form row */
.form-card > .cms-row > .cms-content > h2, .form-card h2.form-card__title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 1.25rem; }
@media (prefers-reduced-motion: reduce) { .cms-content.vtp-button > a { transition: none; } .cms-content.vtp-button > a:hover { transform: none; } }

/* ---- The home page (render-23) ------------------------------------------ */
/* template_5 index.html:116-267 and css/site.css:168-172 (the strip), :227-263 (How, the trade cards), :484 (the help
 * line), folded onto the home's CMS regions (site/pages/home.php). Muted text is #707275 (4.82:1 on white), not
 * --brand-grey (3.04:1), as the trade pages'. */
/* The hero: the eyebrow block lifted above the H1 (white on the photo, every width); the help line under the search */
.hero__body > .vtp-eyebrow { margin: 0 0 .75rem; }
.hero .vtp-eyebrow > p { color: #fff; }
.hero-search__help { margin: .7rem 0 0; font-size: .85rem; font-weight: 700; color: #707275; }
/* The strip: one row, an <ol> classed vtp-strip, across the hero's foot; the numbers are CSS */
.hero__strip { position: relative; z-index: 2; background: rgba(31, 31, 32, .85); border-top: 1px solid rgba(255, 255, 255, .1); }
.hero__strip .cms-row, .hero__strip .cms-content { display: contents; }
.cms-content.vtp-strip ol { list-style: none; margin: 0; padding: 1rem 0; display: grid; gap: .75rem; counter-reset: strip; }
.cms-content.vtp-strip ol > li { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: .95rem; color: #fff; counter-increment: strip; text-wrap: balance; }   /* render-34 (R3, decision 3): no word left alone at 375 */
.cms-content.vtp-strip ol > li::before { content: counter(strip); width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--brand-orange); color: var(--brand-orange); display: grid; place-items: center; flex-shrink: 0; }
@media (min-width: 768px) { .cms-content.vtp-strip ol { grid-template-columns: repeat(3, 1fr); } .cms-content.vtp-strip ol > li + li { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 1.25rem; } }
/* How: the dark card left; the photo, then the checks and the button, right (under it on a phone) */
.how { display: grid; gap: 1.5rem; }
.how + .how { margin-top: 2.5rem; }
@media (min-width: 992px) { .how { grid-template-columns: 5fr 7fr; } }
/* A phone: 1.5rem, not the card's 2rem — the static's card was 8px wider inside (its 12px gutter), and content-08 measured
 * the H2 and the steps in it: at 2rem "Where your request goes" and the first step each took one line more */
@media (max-width: 575.98px) { .how__card { padding: 1.5rem; } }
.how__card > .cms-content + .cms-content { margin-top: 1.25rem; }
.how__card > .vtp-eyebrow + .cms-content { margin-top: .75rem; }
.how__side { display: grid; gap: 1.5rem; align-content: start; }
.how__photo .cms-content img { border-radius: var(--radius); }
.how__checks { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .how__checks { grid-template-columns: 1fr auto; align-items: center; } }
.region-how .vtp-checks li { font-weight: 700; }
.region-how .cms-content.vtp-button > a:hover, .region-how .cms-content.vtp-button > a:focus-visible { background: var(--ink); color: #fff; }
/* Trades: the served pages' names on dark cards, two across on a phone, four from 768px */
.trade-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .trade-cards { grid-template-columns: repeat(4, 1fr); } }
.trade-card { display: flex; }
.region-trades .trade-card a { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; min-height: 7rem; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 1.25rem; color: #fff; text-decoration: none; transition: transform .3s var(--ease), background .3s, border-color .3s; }
.region-trades .trade-card a:hover, .region-trades .trade-card a:focus-visible { color: #fff; background: #363637; border-color: rgba(244, 130, 69, .5); transform: translateY(-4px); }
.trade-card__name { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.trade-card__arrow { align-self: flex-end; color: var(--brand-orange); }
@media (prefers-reduced-motion: reduce) { .region-trades .trade-card a { transition: none; } .region-trades .trade-card a:hover { transform: none; } }
/* Two dark regions meet when the jobs band has nothing to show: a hairline between them */
.t5--home .section--dark + .section--dark { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---- The cookie modal (tracking-02a; John's change to decision 14, 28 Sep 2026) -----
   core/includes/consent.php renders it after the page's regions. Until a choice it
   BLOCKS: a centred dialog over a dimmed backdrop, the page scroll locked by the body
   class the server adds (.wbo-consent-open), the page's other regions inert from the
   server — so all of it holds without script. Only a choice closes it; the backdrop
   has no action. The three buttons are ONE style — equal weight, never a solid
   "accept" beside an outline "reject". Colours: ink and charcoal on white, 16.5:1 and
   10.4:1; the buttons white on ink, 16.5:1; the focus ring ink, offset from the
   button, 16.5:1 against the dialog. No orange text: #f48245 on white is 2.6:1. */
.wbo-consent { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wbo-consent[hidden] { display: none; }
.wbo-consent__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 6, .72); }
.wbo-consent__dialog { position: relative; width: 100%; max-width: 36rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; background: #fff; color: var(--brand-charcoal); border-radius: var(--radius-sm); border-top: 4px solid var(--brand-orange); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); padding: 1.5rem 1.25rem 1.25rem; }
@media (min-width: 576px) { .wbo-consent__dialog { padding: 2rem 2rem 1.75rem; } }
/* The dialog takes focus as a container on open; the controls inside carry the visible rings. */
.wbo-consent__dialog:focus { outline: 0; }
.wbo-consent__title { color: var(--ink); font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 .5rem; }
.wbo-consent__text { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.5; }
.wbo-consent__text a { color: var(--ink); text-decoration: underline; }
.wbo-consent__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.wbo-consent__btn { min-height: 44px; padding: .6rem .5rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
.wbo-consent__btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.wbo-consent__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wbo-consent__choose { margin: 0 0 1.1rem; }
.wbo-consent__choose .wbo-consent__btn { min-width: 10rem; }
.wbo-consent__fieldset { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 0; border: 0; }
.wbo-consent__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wbo-consent__option { display: flex; gap: .6rem; align-items: flex-start; }
.wbo-consent__option input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--ink); }
.wbo-consent__option input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wbo-consent__name { font-weight: 700; color: var(--ink); }
.wbo-consent__desc { display: block; font-size: .92rem; }
/* The page behind: no scroll while the modal blocks. */
html:has(body.wbo-consent-open), body.wbo-consent-open { overflow: hidden; }
/* Without the script: "Cookie settings" (#wbo-consent) reopens the hidden modal, and
   "Choose" (a 303 to #wbo-consent-choose) opens its toggles. The script marks the modal
   .is-js and drives [hidden] itself. */
.wbo-consent:not(.is-js):target, .wbo-consent:not(.is-js):has(#wbo-consent-choose:target) { display: flex; }
.wbo-consent:not(.is-js) .wbo-consent__choose:target { display: block; }
/* Focus returned to the top of the page after a first choice (the script). */
body[data-wbo-consent-return]:focus { outline: 0; }

/* ── render-25: the quote page's chips, the form notice, the home's map ─── */
/* Eight chips (render-25 Q2): on a phone one row that scrolls sideways inside the card, so the form's button stays on the first screen.
   min-width: 0 on the grid's items, or the row's full length becomes the card's narrowest width and the page's. */
@media (max-width: 575.98px) {
  .lp-hero__grid > * { min-width: 0; }
  /* the padding is the focus ring's room (3px, offset 3px): a scroller clips what is outside its box; the margins put the row back where it was */
  .quick-picks { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% + .9rem); -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: .45rem; margin: -.45rem -.45rem .55rem; }
  .quick-picks__label, .quick-pick { flex: 0 0 auto; white-space: nowrap; }
}
/* The form notice (Q6): under the button, in the card. */
.form-note { margin: 1rem 0 0; font-size: .9rem; color: #707275; }
.form-note a { color: var(--brand-charcoal); font-weight: 700; }
/* The home's map: a picture and, BESIDE it, the jobs. The pins on it are render-26's, below. */
.home-map { display: grid; gap: 1.5rem; }
.home-map__head h2 { margin: 0; }
.home-map__lede { margin: 1rem 0 0; color: #707275; max-width: 36rem; text-wrap: balance; }   /* render-26: at 1440 its last line was the one word "job." */
.home-map__panel { background: var(--brand-gradient); border-radius: var(--radius); width: 100%; max-width: 520px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; justify-content: center; }
.home-map__art { display: block; width: auto; height: auto; max-width: 100%; max-height: 30rem; }
.home-map__caption { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #707275; margin: 0 0 .75rem; }
.home-map__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr; }
.home-map__job a { display: block; background: #fff; border: 1px solid var(--cream-deep); border-radius: var(--radius-sm); padding: .7rem .9rem; color: var(--brand-charcoal); text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.home-map__job b { display: block; font-weight: 700; color: var(--ink); }
.home-map__job span { font-size: .9rem; color: #707275; }
.home-map__job a:hover { border-color: rgba(244, 130, 69, .6); }
@media (min-width: 576px) { .home-map__jobs { grid-template-columns: repeat(2, 1fr); } }
/* A phone reads heading, map, cards; a wide screen has the map on the left, the heading and the cards beside it. */
@media (min-width: 992px) {
  .home-map { grid-template-columns: 5fr 6fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 3.5rem; row-gap: 1.75rem; }
  .home-map__panel { grid-column: 1; grid-row: 1 / -1; margin: 0; padding: 2.5rem 2rem; }
  .home-map__art { max-height: 36rem; }
  .home-map__head { grid-column: 2; grid-row: 2; }
  .home-map__cards { grid-column: 2; grid-row: 3; }
}

/* =====================================================================
   RISHI'S AMENDS (render-26, 29 Sep 2026; John's rulings of that day)
   The mega-menu, the hero's cut-out, ticks and badge, the trade cards on
   images, "Why choose us", the map's pins, the tiles and cards on images,
   the closing band, the footer's call to action, the notes and steps under
   the form. Layout is Flexbox and Grid; every colour and radius is one this
   file already had (the overlay is the cookie modal's backdrop, 72% of the
   hero's warm dark).
   ===================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The mega-menu: five titled lists and the promo --------------------- */
.mega__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem; }
.mega__head { font-size: .78rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-deep); margin: 0 0 .5rem; text-wrap: balance; }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a { display: block; padding: .28rem 0; color: var(--brand-charcoal); text-decoration: none; font-weight: 600; font-size: .95rem; }
.mega__list a:hover, .mega__list a[aria-current="page"] { color: var(--orange-deep); }
.mega__promo { border-radius: var(--radius-sm); padding: 1.25rem; background: var(--ink); color: #fff; align-self: start; }
.mega__promo-title { font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #fff; margin: 0 0 .4rem; text-wrap: balance; }
.mega__promo-text { color: rgba(255, 255, 255, .8); font-size: .95rem; margin: 0 0 1rem; text-wrap: balance; }
.mega__promo-go { background: var(--brand-orange); color: var(--ink); padding: .55rem 1rem; font-size: .95rem; }
.mega__promo-go:hover, .mega__promo-go:focus-visible { background: #fff; color: var(--ink); }
.mega__promo-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 992px) {
  .trade-list.mega { max-height: calc(100vh - 7.5rem); }   /* the room under the header: the longest group has 18 trades; on a shorter screen the panel scrolls */
  .mega__grid { grid-template-columns: repeat(3, 1fr); }
  .mega__promo { grid-column: 1 / -1; }
  .mega__list a:hover { padding-left: .25rem; transition: padding .2s var(--ease), color .2s; }
}
@media (min-width: 1200px) {
  .mega__grid { grid-template-columns: repeat(5, 1fr) 1.15fr; }
  .mega__promo { grid-column: auto; }
}
/* The drawer: the groups one under another, scrolling inside the row; without the script, in flow and complete */
@media (max-width: 991.98px) {
  .mega__grid { padding: 0 1.25rem 1rem; }
  .js .mega__grid { max-height: 60vh; overflow: auto; }
  .mega__head { padding-top: .5rem; }
  .mega__list li { border-bottom: 1px solid var(--cream-deep); }
  .mega__list li:last-child { border-bottom: 0; }
  .mega__list a { padding: .7rem 0; font-size: 1rem; }
}

/* ---- The hero: the footage, the pause control, the ticks, the badge ----- */
.hero__stage { position: relative; }
/* The footage (video-02 Run C; Iris's prototype.css part 1): four videos in one box over the photo (the flat still, D98),
 * all under the hero's wash (.hero::before, z-index 1). The script (core/js/003-hero.js) sets each one's opacity and
 * stacking. Each is drawn as the photo is (cover, at --hero-focus), so the footage holds the photo's framing. The box is
 * the photo's, clipped 2px short at the bottom so the footage's first frame never outweighs the photo as the LCP. From
 * 992px only: under that it isn't drawn, and the script fetches nothing (D87). "Hero cut-out" is no longer drawn (D98). */
.hero__scene { display: none; position: absolute; inset: 0 0 2px; overflow: hidden; z-index: 0; pointer-events: none; }
.hero__video { position: absolute; inset: 0 0 auto; width: 100%; height: calc(100% + 2px); max-width: none; object-fit: cover;
               object-position: var(--hero-focus, 50% 50%); opacity: 0; pointer-events: none; }
@media (min-width: 992px) { .hero__scene { display: block; } }
/* The pause control (D82), shown by the script only while the motion can run. A ghost button at the stage's top left
 * (render-34, decision 4; Rishi's R2, John 13 Oct 2026): the icon only (its words are its spoken name, visually hidden),
 * no fill, a thin white ring at low opacity, the icon at 70% with a soft shadow for light footage; full on hover and
 * focus. A 32px ring to the eye in a 44 by 44 tap area. */
.hero__pause { position: absolute; left: var(--gutter); top: -1rem;   /* between the fixed header (its foot 99px down the hero) and the eyebrow, 20px clear of each */
               z-index: 3; width: 44px; height: 44px; display: grid; place-items: center;
               padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: .7; cursor: pointer;
               transition: opacity .2s var(--ease); }
.hero__pause::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 0 6px rgba(0, 0, 0, .25); }
.hero__pause[hidden] { display: none; }
.hero__pause:hover, .hero__pause:focus-visible { opacity: 1; }
.hero__pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero__pause svg { width: 12px; height: 12px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
@media (prefers-reduced-motion: reduce) { .hero__pause { transition: none; } }
.hero__pause .hero__pause-play { display: none; }
.hero--paused .hero__pause .hero__pause-play { display: block; }
.hero--paused .hero__pause .hero__pause-bars { display: none; }
@media (max-width: 991.98px) { .hero__pause { display: none; } }
/* Centred, the man is cut by the right edge below ~1320 (a third of him at 992, 7% at 1200 on the live hero's height).
 * One shared focus moves the photo and the footage together (render-31 findings §3): 60% from 992 (at 992 the man ~5%
 * cut and the woman's forearm under the search card), 55% from 1200. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero { --hero-focus: 60% 50%; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero { --hero-focus: 55% 50%; }
}
.hero-ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; max-width: 36rem; color: #fff; font-weight: 700; font-size: .95rem; }
.hero-ticks > li { position: relative; padding-left: 2rem; }
.hero-ticks > li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
@media (min-width: 768px) { .hero-ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } }
/* render-34 (decision 9, Option B): the three ticks on one row from 992. */
@media (min-width: 992px) { .hero-ticks { flex-wrap: nowrap; max-width: none; gap: .5rem 1.25rem; white-space: nowrap; } }
/* The Checkatrade group under the ticks (render-34, decision 9, Option B; render-33 P1's facts): behind a thin divider,
 * "Powered by" and the mark, then the facts on one line with orange mid-dots between them, then the guarantee's small
 * print. The dots are CSS, after every item but the last, so a dot can end a line but never start one, and a restyle
 * (Option A) needs CSS only. Quieter than the ticks: the form is the hero's focal point. */
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-facts { min-width: 0; max-width: 36rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero-facts .powered--hero { margin: 0; }
.hero-facts__list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: .2rem; color: rgba(255, 255, 255, .88); font-size: .9rem; font-weight: 600; }
.hero-facts__list > li { display: inline-flex; align-items: center; }
.hero-facts__list > li:not(:last-child)::after { content: "\00B7"; color: var(--brand-orange); font-weight: 900; font-size: 1.2em; line-height: 1; margin: 0 .55rem; }
.hero-facts__icon { width: 15px; height: 15px; margin-right: .35rem; color: var(--brand-orange); flex-shrink: 0; }
.hero-facts__small { margin: .45rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .72); }
.hero-facts__small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-facts__small a:hover, .hero-facts__small a:focus-visible { color: #fff; }
/* Phones: the facts one to a line, no dots (a dot never starts or dangles at a line's end), a touch smaller, so the
 * group reads cleanly beside the badge where it sits today. */
@media (max-width: 575.98px) {
  .hero__foot { align-items: flex-start; }
  .hero-facts .powered--hero .powered__mark { width: 130px; }
  .hero-facts__list { flex-direction: column; row-gap: .15rem; font-size: .85rem; }
  .hero-facts__list > li:not(:last-child)::after { content: none; }
  .hero__foot .badge-spin { width: 88px; height: 88px; }
}
/* The badge: template_5 site.css:235-244. ONE turn on load, then still (John, checkpoint 1 Q6); none at all when the
 * visitor asks for less motion. */
.badge-spin { position: relative; flex-shrink: 0; width: 104px; height: 104px; display: block; border-radius: 50%; text-decoration: none; transition: transform .25s var(--ease); }
.badge-spin:hover { transform: scale(1.05); }
.badge-spin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.badge-spin__ring { width: 100%; height: 100%; display: block; animation: badgeTurn 4s var(--ease) 1 both; }
.badge-spin__disc { fill: var(--brand-orange); }
.badge-spin__text { font-size: 11.5px; font-weight: 700; fill: var(--ink); letter-spacing: .12em; text-transform: uppercase; }
/* The portrait logo's top square is its round icon (the wordmark is below it). WebKit doesn't always clip overflow:hidden
 * + border-radius in the badge's transformed context, so the circle is a clip-path too, and the img is cut to the icon by
 * object-fit, not by the clip alone (Safari, macOS and iOS; John, 12 Oct 2026). */
.badge-spin__logo { position: absolute; left: 50%; top: 50%; width: 45%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; clip-path: circle(50%); isolation: isolate; }
.badge-spin__logo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@keyframes badgeTurn { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .badge-spin { transition: none; } .badge-spin:hover { transform: none; } .badge-spin__ring { animation: none; } }
/* A wide screen: under the ticks, at the start of the copy's column, the attribution beside it (John, checkpoint 2 N6:
 * it stood between the copy and the cut-out, over the cut-out's edge). */
@media (min-width: 992px) {
  .hero__foot { justify-content: flex-start; gap: 2rem; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }   /* wider than the copy's column, so the facts keep one line beside the badge */
  .hero-facts { max-width: none; }
  .hero-facts__list { flex-wrap: nowrap; white-space: nowrap; }
  .badge-spin { order: -1; width: 128px; height: 128px; }
}

/* ---- Cards and tiles with a picture ------------------------------------- */
/* render-44 Part B, John's pick (a), 30 Oct 2026 (Rishi, 27 Oct: the pictures were dulled to show the words): the
 * picture at full brightness, with no overlay, in its 16:9 at the top of the card and flush to its edges; the words
 * below it on the card's own plain dark panel, in the colours they had on the overlay, so no face is ever under
 * words. The card is taller by the panel. Every template draws the picture first, so the reading order is unchanged
 * (and the picture is decorative, alt=""). The width and height attributes and the ratio here reserve the picture's
 * box before it loads (Part C: no shift). Measured on the panel (render-44/cards-after-checks.tsv): the muted line 9.49:1,
 * the amber links 7.49:1, white higher; AA asks 4.5:1. */
.card-image, .trade-card__image { display: block; flex: none; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.info-card.has-image, .expect > li.has-image, .job-card--image, .trade-card--image > a { position: relative; overflow: hidden; isolation: isolate; min-width: 0; }   /* the card's corners clip the picture: the card has no ratio now, so its words set its height */
/* Flush to the card's edges: the picture takes back the card's padding (1.5rem on the info, tip and job cards, 1.25rem on a trade card). */
.info-card.has-image .card-image, .expect > li.has-image .card-image, .job-card--image .card-image { width: calc(100% + 3rem); margin: -1.5rem -1.5rem 1.25rem; }
.job-card--image .card-image { margin-bottom: .7rem; }   /* the card's own .55rem gap follows it */
.region-trades .trade-card--image .trade-card__image { width: calc(100% + 2.5rem); margin: -1.25rem -1.25rem 0; }
.info-card.has-image, .expect > li.has-image { border-color: transparent; background: var(--ink-2); }
.section--light .info-card.has-image { background: var(--ink-2); border-color: transparent; }
/* One tip is a full-width card (render-17): its picture keeps the band's height it had, not a 16:9 that would be 658px at 1440. */
@media (min-width: 992px) { .expect:has(> li:only-child) > li.has-image .card-image { aspect-ratio: auto; height: 16rem; } }
.info-card.has-image h3, .job-card--image .job-card__title { color: #fff; }
.info-card.has-image p, .job-card--image .job-card__meta { color: rgba(255, 255, 255, .8); }
.jobs > li:has(> .job-card--image) { min-width: 0; }
.job-card--image { flex: none; width: 100%; min-width: 0; background: var(--ink-2); border-color: transparent; color: #fff; min-height: auto; }
/* (the picture is only a wrapper: it draws no box, so the image is the card's own child for the margins above) */
.info-card.has-image > picture, .expect > li.has-image > picture, .job-card--image > picture { display: contents; }
.job-card--image > picture { position: static; }   /* .job-card > * is relative: the picture must not be a box */
/* render-46: with the picture's box gone (display: contents), a <source> became a flex item of the job card: an empty
 * row that took the card's gap above the picture, so the card's dark background showed as a strip over it. A source
 * is never drawn; it only offers the browser files. */
.info-card.has-image > picture > source, .expect > li.has-image > picture > source, .job-card--image > picture > source { display: none; }
.job-card--image::before { display: none; }
.job-card--image .job-card__disc { display: none; }
.job-card--image .job-card__more { color: var(--brand-amber); }
.job-card--image .job-card__more::after { z-index: 3; }
.job-card--image .job-card__more:focus-visible::after { outline-color: var(--brand-amber); }
.region-trades .trade-card--image > a { border-color: transparent; }
.trade-card__more { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--brand-amber); }
.trade-card__more .trade-card__arrow { align-self: auto; color: inherit; }

/* ---- Why choose us ------------------------------------------------------ */
.why { display: grid; gap: 2rem; }
.why + .why { margin-top: 3rem; }
.why__copy > .vtp-eyebrow { margin: 0 0 .75rem; }
.why__head h2 { margin: 0 0 1rem; }
.why__head p { color: #707275; font-size: 1.1rem; max-width: 40rem; margin: 0; }
.why__cards { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.why__card { background: var(--cream); border-radius: var(--radius); padding: 1.25rem; }
.why__card h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.why__card p { color: #707275; font-size: .95rem; margin: 0; text-wrap: balance; }
.why__panel { position: relative; background: var(--brand-gradient); border-radius: var(--radius); aspect-ratio: 4 / 5; overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; }
.why__panel picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why__panel .vtp-chip { position: absolute; left: 1rem; top: 1rem; margin: 0; max-width: calc(100% - 2rem); }
.vtp-chip > p { display: inline-block; margin: 0; background: #fff; color: var(--ink); border-radius: 999px; padding: .4rem .8rem; font-weight: 700; font-size: .85rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
@media (min-width: 768px) { .why__cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .why { grid-template-columns: 7fr 5fr; column-gap: 3rem; align-items: center; } .why--plain { grid-template-columns: 1fr; } }   /* --plain: no "Why image" row (render-29): the copy takes the width */

/* ---- The map's pins, thumbs and small print ----------------------------- */
.home-map__panel { flex-direction: column; align-items: center; gap: 1rem; }
.home-map__stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.home-map__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; line-height: 1.2; }
.home-map__pin { position: absolute; width: 0; height: 0; }
.home-map__pin > a { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; display: block; border-radius: 50%; text-decoration: none; }
.home-map__pin > a::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; transition: transform .2s var(--ease); }
.home-map__pin > a:hover::before, .home-map__pin > a:focus-visible::before { transform: scale(1.4); background: var(--orange-deep); }
.home-map__pin > a:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.home-map__pin-label { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: #fff; color: var(--brand-charcoal); border-radius: 6px; padding: .35rem .6rem; font-size: .75rem; white-space: nowrap; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); pointer-events: none; }
.home-map__pin-label b, .home-map__pin-label span { display: block; }
.home-map__pin-label b { color: var(--ink); }
.home-map__pin--left .home-map__pin-label { left: auto; right: -6px; transform: none; }
.home-map__pin--right .home-map__pin-label { left: -6px; transform: none; }
.home-map__pin--below .home-map__pin-label { bottom: auto; top: calc(100% + 6px); }
.home-map__pin > a:hover, .home-map__pin > a:focus-visible { z-index: 2; }
.home-map__pin > a:hover .home-map__pin-label, .home-map__pin > a:focus-visible .home-map__pin-label { display: block; }
.home-map__credit { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--ink); text-align: center; max-width: 30rem; }
.home-map__job--image a { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; align-items: center; padding: .5rem .9rem .5rem .5rem; }
.home-map__thumb { width: 4.5rem; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .home-map__pin > a::before { transition: none; } }
/* render-34 (Rishi's R8, decision 6): a soft ring from each pin, three times, when the map scrolls into view, then still.
 * The site script adds .is-pulsing once and staggers the pins by --pin-delay (at most 1.2s; three 1.1s pulses: under 5s
 * in all, so no pause control). No script, or reduced motion: no ring. The pin's label and name don't change. */
.home-map__pin > a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; pointer-events: none; }
.home-map__pins.is-pulsing .home-map__pin > a::after { animation: pinPulse 1.1s var(--ease) var(--pin-delay, 0s) 3 both; }
@keyframes pinPulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 130, 69, .7); } 100% { opacity: 0; box-shadow: 0 0 0 14px rgba(244, 130, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .home-map__pins.is-pulsing .home-map__pin > a::after { animation: none; } }

/* ---- The closing band (template_5 site.css:346-350) ---------------------- */
.cta-band { background: var(--ink); color: #fff; }
.cta-band__inner { display: grid; gap: 2rem; padding: 3.5rem 0; align-items: center; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin: 0 0 1rem; }
.cta-band p { color: rgba(255, 255, 255, .8); }
.cta-band .vtp-eyebrow > p { color: #fff; }
.cta-band__copy .cms-row > .cms-content + .cms-content { margin-top: 1rem; }
.cta-band__copy .cms-row > .vtp-eyebrow + .cms-content { margin-top: .75rem; }
.cta-band__copy .cms-content.vtp-button { margin-top: 1.5rem; }
.cta-band__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 992px) { .cta-band__inner { grid-template-columns: 1.1fr 1fr; column-gap: 3rem; padding: 5rem 0; } .cta-band__inner--plain { grid-template-columns: 1fr; } }
/* Straight above the footer's own dark: a hairline between them */
.cta-band + .site-footer, .cta-band + .lp-sticky + .site-footer { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---- The footer's call to action ---------------------------------------- */
.site-footer__cta { margin: 1.25rem 0 0; display: grid; gap: .75rem; justify-items: start; max-width: 30rem; }
.site-footer__cta-line { margin: 0; font-weight: 700; color: #fff; }
.site-footer__cta-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Under the form: the notes, then the steps --------------------------- */
.form-note { text-wrap: balance; }
.form-note + .form-note { margin-top: .35rem; }
.form-steps { margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--cream-deep); }
.form-card .form-steps .cms-content { display: block; }

/* ── render-30 (8–9 Oct 2026) ─────────────────────────────────────────────────────────────────────────────────── */
/* Headings that left one word alone on a line (content-16 §3c): the home's H1 ("tradespeople." at 375 and 1440) and
 * the Trades heading ("need?" at 375). Balanced, the lines are near-equal; a browser without text-wrap keeps today's. */
.t5--home .hero__title, .region-trades .region-head h2 { text-wrap: balance; }

/* The top five job buttons over a trade form's job select (003.js 8). Drawn as the radio cards are, so a short list
 * and a long one look alike; aria-pressed is the chosen one. The select itself stays hidden until "More". */
.top-five { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 0 0 .5rem; }
.top-five__job { display: flex; align-items: center; min-height: 2.9rem; padding: .6rem .9rem; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); background: #fff; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.top-five__job:hover { border-color: var(--brand-orange); transform: translateY(-1px); }
.top-five__job:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
.top-five__job[aria-pressed="true"] { border-color: var(--brand-orange); background: var(--cream); }
.top-five__more { justify-content: center; color: var(--orange-deep); }
.top-five__more[hidden], [data-top-five] .input-group[hidden] { display: none; }
@media (min-width: 576px) { .top-five { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .top-five__job { transition: none; } .top-five__job:hover { transform: none; } }
/* render-47: the page draws the five with the job field hidden (site/vtpHelpers.php vtp_top_five_html()), so the card
 * doesn't grow after the first paint. Without scripting the buttons can't choose: the select shows, the buttons don't. */
@media (scripting: none) {
  [data-top-five] .top-five { display: none; }
  [data-top-five] .input-group[hidden] { display: flex; }
  [data-top-five] select[hidden] { display: block; }
}

/* The trade picker (003.js 9, render-32): the home select as one searchable box. The box IS .hero-search__select (the
 * same height, border, orange focus ring and chevron); the select it stands in for is [hidden]. The list drops below the
 * box, over the ticks, inside the hero (which clips): 003.js sizes it to the room there, or opens it upwards (.is-up). */
.hero-search__field--pick.is-open { z-index: 5; }
.hero-search__input { cursor: text; }
.hero-search__input:invalid { color: var(--brand-charcoal); }   /* "nothing picked yet" is not an error while typing */
.hero-search__input::placeholder { color: #707275; opacity: 1; }
.hero-search__toggle { position: absolute; top: 0; right: 0; width: 3rem; height: 3.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-search__list, .hero-search__none { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 5; margin: 0; background: #fff; border: 2px solid var(--cream-deep); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.hero-search__list { list-style: none; padding: .35rem 0; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hero-search__none { padding: .8rem 1rem; font-size: .95rem; font-weight: 700; color: #707275; }
.is-up > .hero-search__list, .is-up > .hero-search__none { top: auto; bottom: calc(100% + .35rem); }
.hero-search__list[hidden], .hero-search__none[hidden], .hero-search__option[hidden] { display: none; }
.hero-search__option { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem; font-weight: 700; color: var(--brand-charcoal); cursor: pointer; }
.hero-search__option:hover, .hero-search__option.is-active { background: var(--cream-deep); }
.hero-search__option.is-active { box-shadow: inset 4px 0 0 var(--brand-orange); }
.hero-search__option.is-chosen::after { content: "\2713"; content: "\2713" / ""; margin-left: auto; padding-left: 1rem; color: var(--brand-orange); }   /* the tick isn't part of the option's name */
@media (forced-colors: active) { .hero-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; } }

/* ── render-33 (12 Oct 2026) ──────────────────────────────────────────────────────────────────────────────────── */
/* P4: the checks line after the steps under every trade page's form (the Site words row "Checks line"). Quiet, as the
 * form's notes are; drawn only when the row has text, so a deleted row leaves no box and no gap. */
.form-checks { margin: 1rem 0 0; font-size: .9rem; color: #707275; text-wrap: balance; }
.form-checks p { margin: 0; }
.form-checks a { color: var(--brand-charcoal); font-weight: 700; }
/* render-34 (decision 7): the Checkatrade Guarantee, a quiet line after the checks line, a small shield before it. */
.form-guarantee { display: flex; align-items: flex-start; gap: .45rem; margin: .6rem 0 0; font-size: .9rem; color: #707275; text-wrap: pretty; }
.form-guarantee strong, .form-guarantee b { color: var(--brand-charcoal); }
.form-guarantee a { color: var(--brand-charcoal); font-weight: 700; }
.form-guarantee__icon { width: 16px; height: 16px; margin-top: .15em; flex-shrink: 0; color: var(--orange-deep); }

/* ── launch-05 (23 Oct 2026): an affiliate's frame, /embed/<trade>/ and /embed/ (site/embed.php) ─────────────── */
/* The frame is the form card and the legal block, nothing else. With embed=1 the parent owns scrolling (the style
 * block hides the frame's own; vtp-frame.js reports the height). A publisher's theme is that <style> block after this
 * file (vtp_embed_style_block()); only its values come from the query, every rule here is fixed. */
body.vtp-embed { margin: 0; background: #fff; }
.vtp-embed__main { padding: 0; }
.vtp-embed__title { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.2; color: var(--brand-charcoal); }
.vtp-embed .form-card { box-shadow: 0 6px 24px rgba(49, 49, 50, .08); }
.vtp-embed--bare .form-card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
.vtp-embed__legal { margin: 1rem 0 0; font-size: .8rem; line-height: 1.5; color: #707275; }
.vtp-embed--bare .vtp-embed__legal, .vtp-embed--minimal .vtp-embed__legal { padding: 0 .25rem; }
.vtp-embed__legal p { margin: 0 0 .35rem; }
.vtp-embed__legal > :last-child { margin-bottom: 0; }   /* nothing collapses out of the body vtp-frame.js measures */
.vtp-embed__legal a { color: var(--brand-charcoal); font-weight: 700; }
.vtp-embed__powered { margin-top: .6rem; }
.vtp-embed__powered .powered__mark { width: 120px; }

/* ── video-03 (27 Oct 2026): a trade page's header picture as video (site/pages/trades.php, core/js/003-trade-hero.js) ── */
/* Iris's approved prototype (documents/video/video-03/prototype/prototype.css, parts 1 and 2; D109, D110), unchanged.
 * Drawn only when the "Panel image" row holds usable video blocks: the picture's block then carries .lp-media and the
 * layer. Nothing here changes the layout (decision 2): the layer and the control sit over the picture, out of the flow. */
/* The video layer */

/* The picture's block becomes the layer's containing block. `position: relative` moves nothing. */
.lp-media { position: relative; }

/* The layer is the picture's box exactly: the same width, the same 16:9 ratio, the same rounded corners (003.css
   line 189). It is sized from the top-left, not `inset: 0`, because the block is a line box taller than the image
   (the image is inline). Below 768 px it isn't drawn, and the script fetches nothing (decision 1). */
.lp-scene {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  pointer-events: none;
}
.lp-scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .lp-scene { display: block; }
}

/* The pause control (decision 6: the home hero's small see-through icon) */

/* The home hero's ghost button (003.css, .hero__pause): the icon only, its words its spoken name; a 32 px ring to the
   eye in a 44 by 44 tap area. Here it sits in the picture's top-right corner, over the footage itself rather than
   the home's dark gradient, so the ring holds a see-through dark disc and the control is at full opacity: the home's
   style (white at .7, no disc) falls under 3:1 on every frame here; .8 with a .45 disc still failed on 324 of the
   gardener's 574 frames; full opacity with a .5 disc holds 3.23:1 or better on every frame of all three pages at
   1440, 1024 and 768 (WCAG 1.4.11; tools/contrast.py, reports/contrast-op1.0-disc0.5.json). */
.lp-scene__pause {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.lp-scene__pause::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(31, 31, 32, .5);
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  transition: background-color .2s var(--ease);
}
.lp-scene__pause[hidden] { display: none; }
.lp-scene__pause:hover::before { background: rgba(31, 31, 32, .7); }
.lp-scene__pause:focus-visible { outline: 3px solid #fff; outline-offset: -1px; }
.lp-scene__pause svg { position: relative; width: 12px; height: 12px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
@media (prefers-reduced-motion: reduce) { .lp-scene__pause::before { transition: none; } }
.lp-scene__pause .lp-scene__pause-play { display: none; }
.lp-scene--paused .lp-scene__pause .lp-scene__pause-play { display: block; }
.lp-scene--paused .lp-scene__pause .lp-scene__pause-bars { display: none; }
@media (max-width: 767.98px) { .lp-scene__pause { display: none; } }