/* CW Asset Finance — built in Flowzo's design language.
   Structure, lightness, spacing and component shapes follow Flowzo (cream base,
   centred headlines, green used sparingly, soft radii). Palette is CWAF's own,
   measured from the mark rather than taken from a brief.

   TYPEFACE: Archivo, chosen 17 Oct from a five-way comparison (/_type.html).
   Montserrat was the live site's and is the most-used geometric sans on the web
   — a default rather than a choice. Archivo was drawn for signage and highway
   lettering: sturdier, slightly narrower, and crisper in the figures, which is
   what this page needs when the largest thing on it is a monthly payment.

   The one shape that is genuinely CWAF's is in the logo: a dark green block
   whose RIGHT EDGE is cut on a diagonal, like a pennant. Not a small rounded
   corner-chamfer — a full-height slant. An earlier note here claimed it was
   "reversible, the cut lives in --cut"; there was no --cut, so the motif had
   simply been dropped and the page was Flowzo's soft radii throughout.

   It is back, used quietly and repeatedly rather than loudly once: the sector
   tile artwork and the reasons marker. The hero band is where this page spends
   its boldness, so the signature stays a signature. */

:root {
  --cream:    #faf7f1;
  --sand:     #f2eee5;
  --line:     #e4ded2;
  --ink:      #15201a;
  --body:     #3a4743;
  --muted:    #596661;
  --green:    #143024;
  --green-2:  #0e2117;
  --green-lt: #1e4a36;
  --mint:     #dfeae2;
  /* Gold, sampled from logo.png in the browser (canvas, 7,498 gold pixels):
     the dominant value is #f4bb32 and the weighted mean is #efb832. The
     #e0a72e this page was using came from the live site's CSS, and next to the
     mark it is visibly duller and browner — that is the "muddy gold" problem.

     One flat gold doing buttons, ticks, wheel hubs, hard hats AND small text is
     the other half of it: gold is a light colour, so as text it either shouts or
     fails contrast. Hence a scale with explicit jobs, not a single swatch. */
  --gold:      #ffc42e;  /* the accent. Large areas and fills only. */
  --gold-edge: #e8a81d;  /* edge/underline, so gold shapes have a boundary */
  --gold-deep: #c8871a;  /* hover and pressed */
  --gold-ink:  #6f4a09;  /* gold-family TEXT on cream — carries the contrast */
  --gold-pale: #fef0ce;  /* tints and wash panels */
  --gold-star: #a87a0d;  /* decorative stars. Brighter than gold-ink, and
                            3.3:1 on sand — WCAG's threshold for a graphical
                            object (1.4.11). They are aria-hidden and the
                            rating is in the text beside them. */
  --error:    #a3201b;
  --r-lg:     28px;
  --r:        20px;
  --r-sm:     12px;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0; background: var(--cream); color: var(--body);
  font-family: 'Archivo', system-ui, sans-serif;
  /* Archivo's x-height runs larger than Montserrat's, so 16.5px read a size
     up. 16px holds the same apparent size and keeps the measure honest. */
  font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased;
}
@media (max-width: 860px) { body { padding-bottom: 66px; } }

.wrap { width: min(1080px, 100% - 44px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 44px); margin-inline: auto; }
@media (max-width: 560px) { .wrap, .narrow { width: calc(100% - 32px); } }

/* The sitewide section rhythm. At the old clamp(54px, 7vw, 96px) two
   consecutive sections put 192px of empty colour between them on a
   1440px screen — the dead bands visible under the header and above the
   adviser card. The templated pages were fixed via .band; the homepage
   sections carry no class and so were still inheriting this. */
section { padding: clamp(32px, 3.4vw, 48px) 0; }

/* Tracking retuned for Archivo. Montserrat is wide and needed -.025em to stop
   headlines looking loose; Archivo is already narrow with a large x-height, so
   the same value closed the counters up and the letters started to touch. */
h1,h2,h3 { color: var(--ink); font-weight: 800; letter-spacing: -.016em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5.4vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: 18px; letter-spacing: -.006em; }
p { margin: 0 0 1.05em; }
a { color: var(--green); }

.centre { text-align: center; }
.centre p { max-width: 58ch; margin-inline: auto; }
.lede { font-size: clamp(16.5px, 1.7vw, 18.5px); color: var(--muted); line-height: 1.6; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--gold-ink); margin: 0 0 10px; }

/* ---------- buttons ----------
   NO SLANT. Tried at 17px and at 8px, looked at both close up at real scale on
   the real background, and at every size it reads as a wonky rectangle — a
   rendering mistake rather than a motif. The measurement that justified it was
   correct and irrelevant: the logo's 20.7-degree edge works because the mark is
   a long banner. A 50px-tall button is not a banner, and no amount of the angle
   makes it one. The motif lives where the surface is big enough to carry it —
   the sector artwork and the closing CTA band.

   Also no gradient here. On a shape this small a two-tone gold reads as a 2010
   CSS bevel; the weight comes from a solid colour with a darker base edge, the
   way a physical key or a machine panel is lit.

   Back to a plain element with a background and a radius, which means the
   default focus outline works again and the ::before/::after scaffolding that
   existed only to survive clip-path is gone. */
/* The button takes the logo's silhouette: rounded on the left, the right edge
   cut back at the same angle as the mark. clip-path and border-radius
   intersect, so the left corners survive the cut.

   Measured off the logo: the slant runs about 0.26 of the shape's height, so
   it is expressed in em against the button's own line-height and stays in
   proportion at every size rather than being a fixed pixel wedge.

   The extra right padding compensates for the material the cut removes, or
   the label sits off-centre inside the visible shape. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; font: 800 15.5px/1 'Archivo', sans-serif;
  padding: var(--pad-y) 38px var(--pad-y) 28px; border-radius: 8px;
  text-decoration: none;
  background: var(--green); color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22);
  transition: background .16s, transform .08s;
  /* Measured off public/img/logo.png, not guessed: the mark's right edge runs
     in 83px over its 217px height — a ratio of 0.3825, or 20.9 degrees off
     vertical. The slant is derived from the button's OWN height (line-height
     plus both paddings) so it stays at the logo's angle if the type size or
     padding ever changes, instead of drifting. */
  --pad-y: 17px;
  --slant: calc((1em + var(--pad-y) * 2) * 0.3825);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
/* A full-width button is a block, not a badge; the cut reads as a mistake at
   that width, so it keeps the radius and loses the angle. */
.btn-wide { clip-path: none; padding-right: 28px; }
.btn:hover { background: var(--green-lt); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.22); }
/* clip-path clips the focus outline too, and outline-offset puts it OUTSIDE
   the element — so the angled cut erased the focus ring entirely. Dropping
   the clip while focused restores it; the corner squares off for the moment
   a keyboard user is on the button, which is a fair trade for being able to
   see where you are. */
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px;
                     clip-path: none; }

.btn-gold { background: var(--gold); color: var(--green-2); box-shadow: inset 0 -3px 0 var(--gold-edge); }
.btn-gold:hover { background: #f8c647; }
.btn-gold:active { box-shadow: inset 0 -1px 0 var(--gold-edge); }
.btn-gold:focus-visible { outline-color: var(--green-2); }

.btn-wide { width: 100%; }
.btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- header ----------
   On a single-page lead site the header is the only chrome that is always on
   screen, so it carries the two things that convert — the number and the CTA —
   plus the credentials that justify the call. Sticky on desktop; on mobile the
   bottom Call/WhatsApp bar already does that job, so a second fixed bar would
   just eat the screen. */


header.bar {
  padding: 13px 0; background: var(--cream);
  /* No border at rest — see app.js. The divider is added as .is-stuck once the
     page scrolls, which is the only time it is separating anything. */
  border-bottom: 1px solid transparent;
  transition: border-color .18s, box-shadow .18s;
}
header.bar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 18px -16px rgba(20, 48, 36, .55);
}
@media (min-width: 861px) {
  header.bar { position: sticky; top: 0; z-index: 40; }
}
.bar-in { display: flex; align-items: center; gap: 20px; }
/* The real mark is 600x218. Constrain by HEIGHT and let width follow, or the
   raw intrinsic width blows the header apart. */
.logo { display: flex; align-items: center; text-decoration: none; }
/* 44, not 38. The header is 76px tall and the mark was using exactly half of
   it, which left it reading as a label rather than the brand. 44 gives it
   presence without crowding the nav: measured, the row still has room. */
.logo img { height: 44px; width: auto; display: block; }
@media (max-width: 560px) { .logo img { height: 35px; } }
.bar nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.bar nav a { font-size: 14.5px; font-weight: 600; color: var(--body); text-decoration: none; }
.bar nav a:hover { color: var(--green); }
/* The number was in the dark slab that has gone. In the header it is always
   on screen on desktop and it is the second-best outcome after the form. */
.bar .tel { font-weight: 800; color: var(--ink); font-size: 15px; text-decoration: none;
            padding-left: 20px; margin-left: 2px; border-left: 1px solid var(--line); }
.bar .tel:hover { color: var(--green); }
@media (max-width: 1000px) { .bar .tel { display: none; } }
/* DIRECT children only. As a descendant selector this also hid every link
   inside the mobile menu, which lives in the same <nav> — 43 of them,
   leaving a panel of headings with nothing under them. */
@media (max-width: 860px) { .bar nav > a:not(.btn):not(.tel) { display: none; } }

/* ---------- hero ----------
   The scene is the header. One composition: the illustration is the surface and
   the copy sits in its sky, rather than a text block stacked above a band.

   Phones get the copy in normal flow above a closer, taller crop — 620 units of
   sky on an 844px screen is all sky and no room for anything else. */
/* Below the overlay breakpoint the copy sits ABOVE the scene, so this has to
   match the top of the scene's SKY or the copy block reads as a darker band
   above a lighter picture — the tone relationship upside down. */
.hero { padding: 0; text-align: center; background: #fbf8f2; }

.hero-copy { padding: clamp(34px, 5vw, 58px) 0 clamp(26px, 3vw, 34px); }
.hero h1 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.hero .lede { max-width: 52ch; margin: 18px auto 22px; }
/* Two lines, not three. Measured: at 78ch this set 400 canvas units wide,
   wrapped to three lines and ran past the bottom of the scene. */
.cred { max-width: 110ch; margin: 10px auto 0; padding: 0 22px;
        font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Phone: the copy block above the scene measured 438px of a 844px screen, so
   the yard and the cards under it were pushed most of the way down. Tightened
   the padding and the gaps rather than the type — the h1 is the one thing on
   the screen that should stay big. */
@media (max-width: 760px) {
  .hero-copy { padding: 22px 0 18px; }
  .hero .lede { margin: 12px auto 16px; font-size: 15.5px; }
  .cred { margin-top: 6px; }
  /* 2:1 is a lot of sky on a phone. Cropping to the bottom keeps the machines
     and loses the empty top — the scene is bottom-aligned by design. */
  .band-sm img { max-height: 168px; object-fit: cover; object-position: center bottom; }
}

/* ---- Hero video (homepage only) --------------------------------------
   Copy sits ON the footage and to the LEFT, with a scrim weighted the same
   way: heaviest behind the words, thinning to the right so the drone shot
   is still a shot rather than a dark rectangle.

   The hero's own background is the dark green. That is not decoration: the
   contrast gate walks up the ancestors looking for a real background
   colour, and a gradient on a pseudo-element is not one. Declaring it means
   white-on-dark-green is what gets measured, which is also what a reader
   actually sees once the scrim is over the footage. */
.hero--video { background: var(--green-2); text-align: left; }
.hero--video .hero-stage { position: relative; overflow: hidden; }
.hero-vid { position: absolute; inset: 0; z-index: 0; line-height: 0; }
.hero-vid-el { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Left-weighted scrim. Drone footage swings from dark hedgerow to bright sky
   inside one shot, so legibility cannot depend on which frame is showing. */
.hero-vid::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(14,33,23,.90) 0%, rgba(14,33,23,.84) 34%,
    rgba(14,33,23,.55) 62%, rgba(14,33,23,.22) 100%); }
.hero--video .hero-copy {
  position: relative; z-index: 2; inset: auto; display: block;
  width: min(1080px, 100% - 44px); margin-inline: auto;
  padding: clamp(54px, 7vw, 104px) 0 clamp(44px, 5vw, 76px);
}
/* .narrow centres a 760px column inside the 1080 block, which put the
   headline 160px further in than the logo, the trust strip and every card
   below it. The hero has to share the page's one left edge like everything
   else, so it is pinned rather than centred. */
.hero--video .hero-copy .narrow { margin-inline: 0; width: min(760px, 100%); }
.hero--video .hero-copy h1,
.hero--video .hero-copy .lede,
.hero--video .cred { margin-inline: 0; text-align: left; }
.hero--video .hero-copy h1 { color: #fff; max-width: 17ch; }
.hero--video .hero-copy .lede { color: #dde8e2; max-width: 46ch; }
.hero--video .cred { color: #c5d4cc; max-width: 60ch; padding: 0; }
.hero--video .hero-copy .btns,
.hero--video .hero-copy .hero-cta { justify-content: flex-start; }
.hero--video .hero-copy a:not(.btn) { color: #fff; text-decoration-color: var(--gold); }
.hero--video .band-lg, .hero--video .band-sm { display: none; }
@media (min-width: 1600px) { .hero--video .band-lg { display: none; } }
/* Motion is opt-in everywhere else on this site, and a 28-second clip is the
   least subtle motion on the page. With reduced motion the poster stands in. */
@media (prefers-reduced-motion: reduce) {
  .hero-vid-el { display: none; }
  .hero-vid { background: var(--green-2) url('/video/hero-poster.jpg') center 58%/cover no-repeat; }
}

.band-sm { display: block; }
.band-sm img, .band-sm > img { display: block; width: 100%; height: auto; }
.band-lg { display: none; }

/* The OVERLAY layout starts at 1600, not 1200 and not 761.
   The copy block is ~407px tall and barely shrinks — the type is clamped. The
   scene is 1920x492, so it renders 0.256 x viewport: 369px at 1440, 407px only
   at ~1590. Between 1200 and 1590 the copy was taller than the box it was
   absolutely positioned in, so the credential line overflowed the hero and the
   enquiry cards painted straight over it. 1600 is the first width where the
   sky is genuinely tall enough. Below it, hero-tablet.svg with the copy above,
   which is what that scene was drawn for. */
@media (min-width: 1600px) {
  .band-sm { display: none; }
  .band-lg { display: block; }
  .hero-stage { position: relative; }
  /* Drawn at 1920, so a wide monitor is at or near native size and anything
     narrower scales DOWN — the direction that never collides with the copy.
     Capped at 2100 so an ultrawide does not turn it into a billboard. */
  .band { display: block; width: 100%; max-width: 2100px; height: auto; margin-inline: auto; }
  .hero-copy {
    position: absolute; inset: 0; padding: 4.4% 6% 0;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  /* In overlay mode the copy is INSIDE the scene, so the hero only paints what
     shows past the scene itself. That was set to flat ground colour on the
     theory the spare space is at the bottom — but the SVG is
     preserveAspectRatio="xMidYMax", which bottom-aligns it and puts the spare
     height at the TOP. The result was a band of ground colour sitting in the
     sky, directly under the header. Mirroring the scene's own horizon (ground
     starts at 470 of the 492 viewBox = 95.5%) makes the seam invisible at the
     top and still correct at the bottom. */
  .hero {
    background: linear-gradient(to bottom,
      #fbf8f2 0, #fbf8f2 95.5%, #eae2d2 95.5%, #eae2d2 100%);
  }
  .band [data-depth] { will-change: transform; }
}

/* A plane needs more than a flat fill to read as a plane: a hairline of lighter
   sand along the top edge, like light catching a step up, and a very fine grain
   so a large flat area is not a dead digital surface. The grain is inline SVG
   turbulence — no request, no image file, scales with the viewport. */
.hero { position: relative; box-shadow: inset 0 -1px 0 rgba(20,48,36,.07); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.hero-stage { z-index: 2; }
.hero-copy { z-index: 3; }

/* ---------- three-card row, middle elevated ---------- */
/* The band continues the hero's sand so the two read as one plane, then the
   cards sit on top of it. Three planes total on the page: cream, sand, white. */
.triad { background: var(--sand); padding: clamp(34px, 3.6vw, 46px) 0; }

/* Pricing on one side, a real person on the other, the calculator between them —
   the arrangement the page was designed around. An earlier pass stacked both
   quiet cards in a left column to buy the calculator width; that fixed the
   calculator and broke the composition. The row is widened instead, so the
   middle card is wide enough to split calculator | form AND still be flanked. */
.triad-grid { display: grid; gap: 18px; align-items: start; }
/* The calculator comes FIRST in the markup now, so on a phone it sits straight
   under the heading instead of behind "Only pricing it up?" — it is the reason
   the page exists. Source order is the mobile order, which keeps tab order
   matching what is on screen; desktop puts it back in the middle by explicit
   column, not by `order`. */
@media (min-width: 961px) {
  .triad-grid > .card-main { grid-column: 2; grid-row: 1; }
  .triad-grid > .card:not(.card-main):nth-of-type(2) { grid-column: 1; grid-row: 1; }
  .triad-grid > .card:not(.card-main):nth-of-type(3) { grid-column: 3; grid-row: 1; }
}
@media (min-width: 961px) {
  .triad-grid { grid-template-columns: 1fr minmax(0, 1.8fr) 1fr; gap: 20px; }
}
@media (min-width: 1200px) {
  /* The enquiry row used to break the 1080 measure at 1340px. Measured against
     the rest of the page that produced THREE left edges — 180px for the hero,
     article and signpost, 50px for this row, and 102px for the closing CTA
     band, which is also .triad and inherited the width by accident. One
     gutter for everything reads as deliberate; three reads as a mistake. */
  /* Was 0.8 / 2.6 / 0.8, weighted that way because the middle column carried a
     calculator AND a six-option form. The form has gone, so the middle no
     longer needs the room and the flanking cards were left tall and narrow.
     Evened up, which also squares them off. */
  .triad-grid { grid-template-columns: 1fr minmax(0, 1.7fr) 1fr; gap: 24px; }
}

/* The cards rise into the bottom of the yard band. The band's lowest 38px of
   The tall scene leaves 60 of its 620 units empty below the ground line; at
   1440 that renders as ~67px, so 26px of overlap clips no shadow. */
/* No negative pull any more. It existed to lift the cards into a band that
   ENDED the hero; the hero now ends with the credential line, and the cards
   were covering it. */
@media (min-width: 961px) {
  .triad { padding-top: clamp(16px, 2vw, 26px); }
}

/* calculator | form, side by side, with a hairline between them */
.main-split { display: grid; gap: 22px; margin-top: 4px; }
@media (min-width: 1200px) {
  .main-split { grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
  .main-split .calc { padding-right: 28px; border-right: 1px solid rgba(255,255,255,.14); }
  .main-split .form-shell { margin-top: 0; }
  .card-main .assets { grid-template-columns: 1fr 1fr; }
}

/* Slider end-stops. The sliders had no scale, so "how much" had no anchor
   until you dragged one. */
/* #a8bcb2 measured 4.18:1 against the LIGHTEST stop of the card gradient. A
   gradient has to be checked at its lightest point, not at the fallback
   colour getComputedStyle reports. */
.scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: #b9cbc2; margin-top: 3px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
/* The two quiet cards are h2 for heading order (they are siblings of the
   enquiry card's h2), but they are not visually a level above an h3. */
.card h3, .card .card-h { margin-bottom: 8px; }
.card .card-h { font-size: 18px; letter-spacing: -.006em; line-height: 1.1;
                font-weight: 800; color: var(--ink); margin-top: 0; }
.card p { font-size: 14.5px; color: var(--muted); margin: 0 0 12px; }
.card .lift { background: var(--mint); border-radius: var(--r-sm); padding: 14px; font-size: 13.5px; color: var(--ink); }

/* The two flanking cards, squared up: a tinted card with a white box inside it
   rather than a white card with a tinted box, centred, and with the text set
   narrower so four short lines do not run to the full width. .card-main is
   excluded — the calculator keeps its dark green. */
.card:not(.card-main) { background: var(--mint); border-color: #cfdfd4; text-align: center; }
.card:not(.card-main) p { margin-left: auto; margin-right: auto; max-width: 30ch; }
.card:not(.card-main) .lift { background: #fff; border: 1px solid #d6e3da; }

/* Flowzo's flanking-card furniture, on CWAF's palette: a small pill, a
   reassurance row and a link with an arrow. The score bar is decorative and
   aria-hidden — it illustrates "untouched", it is not a reading of anyone's
   actual file, and it must never imply we have looked. */
/* The flanking-card illustration. Capped well under the card width: these are
   scenes, not icons, and at full width the figures in them outgrow the
   machines, which is backwards for this set. */
.card:not(.card-main) .card-art { display: block; width: 100%; max-width: 200px;
  height: auto; margin: 0 auto 10px; }

.card-link { margin: 0 0 14px; }
.card-link a { font-weight: 800; font-size: 14.5px; color: var(--green);
  text-decoration: underline; text-underline-offset: 3px; }
/* block + fit-content, not inline-block: as an inline-block the <p> let the
   adviser's name flow up alongside the pill instead of under it. */
.card:not(.card-main) .pill { display: block; width: fit-content; margin-inline: auto;
  background: var(--mint);
  border-radius: 999px; padding: 5px 12px; margin: 0 0 10px; font-size: 12.5px;
  font-weight: 800; color: var(--green); }
.card:not(.card-main) .score { display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13px; }
.card:not(.card-main) .score b { color: var(--green); font-weight: 800; }
.score-bar { display: block; height: 6px; border-radius: 999px;
  background: #e4ece7; margin: 0 0 12px; overflow: hidden; }
.score-bar i { display: block; height: 100%; width: 78%; border-radius: 999px;
  background: var(--green-lt); }
.card-main {
  /* background-COLOR stays set under the gradient: it is the fallback, and it is
     what getComputedStyle reports, which is what the contrast sweep measures. A
     gradient with no colour underneath reads as transparent to both. */
  background-color: var(--green);
  background-image: linear-gradient(158deg, #24573f 0%, var(--green) 46%, var(--green-2) 100%);
  border-color: var(--green); color: #fff;
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: 0 22px 48px rgba(20,48,36,.22);
}
.card-main h3, .card-main h2 { color: #fff; }
.card-main > p { color: #c9d8d0; }

/* ---------- form ---------- */
.form-shell { background: #fff; border-radius: var(--r); padding: 18px; margin-top: 16px; }
.steps { display: flex; gap: 7px; margin-bottom: 14px; }
.step-dot { flex: 1; font-size: 11.5px; font-weight: 700; color: #67736d; padding-bottom: 8px; border-bottom: 3px solid var(--line); display: flex; align-items: center; gap: 7px; }
.step-dot b { width: 19px; height: 19px; display: grid; place-items: center; background: #d8d2c6; color: #474f4a; border-radius: 50%; font-size: 11px; }
.step-dot.on { color: var(--green); border-bottom-color: var(--gold); }
.step-dot.on b { background: var(--gold); color: var(--green-2); }
.step-dot.done b { background: var(--green); color: #fff; }
.step { display: none; } .step.on { display: block; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
input, select {
  width: 100%; font: 16px 'Archivo', sans-serif; color: var(--ink);
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
input:focus, select:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(20,48,36,.11); }
.hint { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }
.err { color: var(--error); font-size: 13px; margin-top: 6px; display: none; }
.err.on { display: block; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }

.assets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The asset tiles stay two-up on a phone: six full-width tiles pushed the
   rest of the enquiry below two screens. .row-2 still stacks, because name
   and phone side by side at 390px are genuinely too narrow. */
@media (max-width: 420px) { .row-2 { grid-template-columns: 1fr; }
  .asset { padding: 10px 9px; font-size: 13.5px; } }
.asset { border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 12px; font: 700 14px/1.3 'Archivo', sans-serif; color: var(--ink); cursor: pointer; text-align: left; }
.asset:hover { border-color: #c2cbc4; }
.asset[aria-pressed="true"] { border-color: var(--green); background: var(--mint); }
.asset:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.back { background: none; border: 0; color: var(--muted); font: 600 13.5px 'Archivo', sans-serif; cursor: pointer; padding: 9px 0; }
/* Required wording, so it has to be readable rather than merely present.
   SPECIFICITY, measured in the browser, not assumed: `.card p` is (0,1,1) and
   beats a bare `.form-foot` at (0,1,0). While both footnotes were direct
   children of .card-main, `.card-main > p` rescued them and hid that. Moving
   the calculator into .calc took one of them out of that rescue, and the
   compliance line silently rendered at --muted #596661 on dark green — about
   1.9:1, i.e. invisible. Two classes (0,2,0) is what it takes to win. */
.card-main .form-foot { font-size: 12px; color: #cad9d1; margin: 12px 0 0; line-height: 1.55; }
/* The figure and its caveat were 2px apart, which read as one broken sentence. */
.calc .form-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.13); }

/* ---------- calculator ---------- */
.calc-out { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 2px; }
.calc-out .big { font-size: 38px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
/* With a column of its own the figure can be the size it deserves — it is the
   answer the page exists to give. */
@media (min-width: 1200px) {
  .calc-out { margin-top: 20px; }
  .calc-out .big { font-size: 56px; letter-spacing: -.022em; }
}
.calc-out .per { font-size: 14px; color: #c9d8d0; }
.slider { width: 100%; accent-color: var(--gold); }
/* Typed amount. A slider cannot span £10k to £10m with any precision — a
   pixel is worth thousands at that range — so the amount is typed and only
   the term and deposit stay draggable. The £ sits outside the input so the
   caret never lands before it. */
.calc-amt { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 6px 12px; }
.calc-amt:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224,167,46,.28); }
.calc-amt-sym { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.calc-amt-in { flex: 1; min-width: 0; width: 100%; background: none; border: 0; padding: 0;
  color: #fff; font: inherit; font-size: 26px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.calc-amt-in:focus { outline: none; }
.calc-amt-in::-webkit-outer-spin-button,
.calc-amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card-main label { color: #fff; }

/* The white-text rules belong to the GREEN card. The form panel nested inside
   it is WHITE, so they were painting white on white: every field label, and the
   "Thanks — that's with Conor." confirmation, rendered at a measured contrast
   ratio of 1.00. The success message after a submit was invisible. Found by
   sweeping computed colours in the browser, not by looking — at 1.00 there is
   nothing on screen to look at. */
.card-main .form-shell label,
.card-main .form-shell h3 { color: var(--ink); }
.card-main .form-shell p { color: var(--muted); }

/* ---------- sectors ----------
   Four jobs on this page used to share one treatment: white, 1px line, 20px
   radius. That is what made it read flat — nothing could be heavier than
   anything else. Each group now gets the treatment its content asks for.

   Sectors are PICTURES, so the art bleeds to the tile edge and the tile has a
   real drop shadow. They are the only things on the page that lift. */
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .four { grid-template-columns: 1fr; } }
.tile {
  background: #fff; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(20,48,36,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 22px 40px -20px rgba(20,48,36,.5); }
.tile img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.tile-t { padding: 17px 18px 20px; }
.tile h3 { margin-bottom: 6px; }
.tile p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------- process ----------
   A sequence, so it is drawn as ONE panel divided into three, not three
   separate cards with gaps. The gaps were saying "unrelated". */
.steps3 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
/* Four across needs more room than three: at tablet width it folds to 2x2 so
   a panel never gets narrower than the illustration inside it. */
@media (max-width: 1080px) { .steps3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps3 { grid-template-columns: 1fr; } }
@media (max-width: 1080px) and (min-width: 561px) {
  .pstep:nth-child(2n) { border-right: 0; }
  .pstep:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.pstep { padding: 26px 22px 28px; border-right: 1px solid var(--line); }
.pstep:last-child { border-right: 0; }
@media (max-width: 760px) {
  .pstep { border-right: 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: 0; }
}
/* The step number is load-bearing here — this content genuinely is a sequence. */
.pstep .n { font-size: 12.5px; font-weight: 800; color: var(--gold-ink); }
/* The vignettes carry no background of their own, so they sit on the panel
   rather than becoming a fourth kind of card. */
.step-art { display: block; width: 100%; max-width: 248px; height: auto; margin: 12px 0 4px; }
.pstep h3 { margin: 6px 0 7px; }
.pstep p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- comparison ---------- */
.compare { background: var(--sand); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 44px); }
.ctable { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ctable > div { padding: 15px 16px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.ctable .hd { font-weight: 800; color: var(--ink); background: #fff; }
/* The CWAF column is the answer the table exists to give, so it is the only
   one with weight — a solid green head rather than another pale tint. */
.ctable .hd.us { background: var(--green); color: #fff; }
.ctable .hd-row { background: var(--sand); }
.ctable .us { background: var(--mint); font-weight: 700; color: var(--ink); }
.ctable > div:nth-last-child(-n+3) { border-bottom: 0; }
/* Do NOT collapse this to one column on phones. Stacking it puts the cells in
   DOM order — "CW Asset Finance, Dealer finance, Choice of lender, 60+ on the
   panel, Usually one" — and a comparison you have to reassemble in your head is
   not a comparison. Three columns survive 390px at 12px with tighter padding. */
@media (max-width: 640px) {
  .ctable { grid-template-columns: 1.05fr 1fr 1fr; }
  .ctable > div { padding: 11px 9px; font-size: 12px; line-height: 1.35; }
  .compare { padding-inline: 14px; }
}

/* ---------- reasons ---------- */
.reasons { display: grid; gap: 22px; }
.reason { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
/* Was 1 / 2 / 3. These are three independent reasons, not a sequence, so a
   number was telling the reader something untrue. The mark itself is defined
   with the rest of the slant motif further down. */
.reason h3 { margin: 2px 0 5px; }
.reason p { font-size: 14.5px; color: var(--muted); margin: 0; max-width: 58ch; }

/* ---------- meet Conor ---------- */
.meet { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 46px); align-items: start; }
@media (max-width: 760px) { .meet { grid-template-columns: 1fr; } }
/* Portrait, not the source's 3:2 landscape — a tall crop balances the text
   column beside it and keeps the face large. object-position holds the face
   in frame when the crop bites. */
/* Squared off to the text column, not a fixed 3:4. The portrait was taller
   than the copy beside it, so the row ended with a band of empty sand under
   the review line. Stretching the image to the row height and letting
   object-fit crop means the two columns always end together. */
.meet { align-items: stretch; }
.meet img {
  width: 100%; height: 100%; min-height: 320px;
  object-fit: cover; object-position: center 20%;
  border-radius: var(--r); display: block;
}
.meet blockquote {
  margin: 0; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.4;
  font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.meet cite {
  display: block; font-style: normal; font-size: 14px; font-weight: 600;
  color: var(--muted); margin-top: 14px;
}
/* The stars are aria-hidden and the rating is in the text beside them
   ("5.0 from 16 Google reviews"), so they are decorative and can take the
   brighter star gold. The earlier note here claimed the stars carried the
   rating; the markup says otherwise. */
/* Review stars, in the amber a five-star rating is conventionally shown in.
   On DARK the fill carries itself: amber on the green strip measures well
   past 3:1, so no edge, which is how review stars normally look.

   On SAND nothing bright passes the 3:1 a graphical object needs: amber is
   1.5, #e8a81d 1.8, #c8871a 2.6. So on light grounds the shape is defined by
   a hairline edge in gold-ink (6.8:1) and the fill stays amber. Without that
   the only passing option is a brown dark enough to stop reading as gold,
   which is what it used to be. */
:root { --star: #fbbc04; }
/* On DARK the stars are the real review amber, bare, as they look anywhere
   else you see a five-star rating.

   On SAND they cannot be. Amber is 1.47:1 there and the gate rejects it,
   correctly: check.js measures the FILL, and a -webkit-text-stroke outline is
   invisible to it. Even by eye a 0.6px edge on a 15px glyph is a thin defence.
   So light grounds keep the deeper gold, which clears 3:1 by being dark
   enough to stop looking like the brand gold. The only way to have bright
   amber stars on a light section is to give them a dark chip to sit on. */
/* Conor asked (26 Oct) for every set of stars to be the trust strip's gold.
   On a light ground that gold is too faint to pass, so the stars carry their
   own small dark green chip, the pairing the trust strip already uses. */
.rating { color: var(--gold); background: var(--green); display: inline-block;
          padding: 2px 13px 3px 8px; letter-spacing: 1.5px; line-height: 1.35;
          /* the brand angle: the right edge cut back at the same 0.3825 slope
             as the logo and the gold buttons, instead of a rounded chip */
          --slant: calc((1.35em + 5px) * 0.3825);
          clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.meet .rating { font-size: 15px; }
.trust-row .rating { color: var(--star); font-size: 15px; letter-spacing: 1.5px;
  line-height: 1.25; }
/* Replaced the empty video slot. Three facts, each already published elsewhere
   on this page, so the space earns itself without claiming anything new. */
.meet-facts {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 30px;
  justify-content: start;
}
@media (max-width: 520px) { .meet-facts { grid-template-columns: 1fr; gap: 14px; } }
.meet-facts li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px;
                 border-left: 3px solid var(--gold); }
.meet-facts b { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.meet-facts span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- FAQ ----------
   A list, so it is one white panel with hairlines between the rows rather than
   five identical floating cards. */
.faq { border: 0; border-bottom: 1px solid var(--line); background: #fff; margin: 0; }
.faq:first-of-type { border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -1px 0 var(--line), -1px 0 0 var(--line), 1px 0 0 var(--line); }
.faq:last-of-type { border-radius: 0 0 var(--r) var(--r); box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); }
.faq:not(:first-of-type):not(:last-of-type) { box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); }
.faq[open] { background: #fff; }
.faq summary { cursor: pointer; list-style: none; padding: 17px 48px 17px 20px; position: relative; font-weight: 700; color: var(--ink); font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--green); display: grid; place-items: center; font-size: 16px; font-weight: 700; }
.faq[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.faq-a { padding: 0 20px 18px; font-size: 15px; color: var(--muted); }
.faq-a p { margin: 0; max-width: 64ch; }

/* ---------- CTA band ----------
   The one full-size use of the logo's diagonal. Everything else on the page
   borrows the shape at 16px; here it is the edge of the band itself, which is
   why it only happens once and why it happens last. */
.cta {
  background-color: var(--green);
  background-image: linear-gradient(104deg, var(--green-2) 0%, var(--green) 38%, #24573f 100%);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 52px);
  color: #fff; overflow: hidden;
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 900px) {
  .cta { grid-template-columns: 1fr auto; text-align: left; gap: 44px; }
  /* Slant on the trailing edge, at the LOGO'S angle. 54px over a 340px band
     was 9 degrees — less than half the mark's 20.9, so the one shape on the
     page big enough to read clearly was the one that did not match. The cut is
     0.3825 of the band's height, the same ratio the buttons derive from their
     own box, and the right padding carries the extra material the deeper cut
     removes. */
  .cta { --slant: 130px;
         clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
         border-radius: var(--r-lg) 0 0 var(--r-lg); padding-right: 168px; }
}
.cta h2 { color: #fff; margin-bottom: .45em; }
.cta p { color: #c9d8d0; max-width: 46ch; margin: 0 auto 22px; }
@media (min-width: 900px) { .cta p { margin-left: 0; } .cta .btns { justify-content: flex-start; } }
.cta-art { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
/* The secondary action in the band is a link, not a second button, and the
   underline has to read on green rather than on cream. */
/* Both .btn-plain and .cta-link are single classes, and .btn-plain is declared
   later in this file, so it won on source order and painted the link green on
   dark green. Two classes settles it. */
.cta .btn-plain { color: #fff; }
.cta .btn-plain:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ---------- footer ----------
   Sand, so the page closes on a plane rather than trailing off into the same
   cream it started with. Three columns of useful things, then the required
   legal text set apart below a rule instead of merged into them. */
footer { background: var(--sand); border-top: 1px solid var(--line);
         padding: 54px 0 46px; font-size: 12.5px; color: var(--muted); }
footer p { max-width: 90ch; line-height: 1.6; margin: 0 0 11px; }

/* .foot-top is declared in the four-column footer block below; every property
   it set here was restated there. */
@media (min-width: 820px) {
  .foot-top { grid-template-columns: 1.1fr .7fr 1.2fr; gap: 44px; }
}
.foot-mark { height: 40px; width: auto; display: block; margin-bottom: 16px; }
.foot-call { margin: 0 0 8px; }
.foot-call a { font-size: 21px; font-weight: 800; color: var(--ink); text-decoration: none;
               letter-spacing: -.02em; }
.foot-call a:hover { color: var(--green); }

.flinks { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.flinks a { font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; }
.flinks a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }

.badges { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 0; border: 0; }
.badges img { height: 58px; width: auto; display: block; flex: none; }
.badges p { font-size: 12.5px; max-width: 42ch; margin: 0; }
@media (max-width: 560px) { .badges { flex-direction: column; } }

/* Required disclosures. Set apart, not hidden: a rule above and a slightly
   tighter measure, so they read as the legal block they are. */
.foot-legal { border-top: 1px solid var(--line); padding-top: 26px; }
/* #6b7873 on sand measured 3.98:1. These are FCA-required disclosures — the
   one block on the page that must not be styled down into decoration. */
.foot-legal p { font-size: 12px; line-height: 1.65; max-width: 100ch; color: #556159; }
.foot-legal b { color: var(--body); }

/* ---------- sticky ---------- */
.sticky { position: fixed; inset: auto 0 0 0; z-index: 50; display: none; grid-template-columns: 1fr 1fr; box-shadow: 0 -6px 20px rgba(0,0,0,.16); }
.sticky a { display: flex; align-items: center; justify-content: center; padding: 17px 10px; font-weight: 800; font-size: 15px; text-decoration: none; }
.sticky .call { background-color: var(--gold);
                background-image: linear-gradient(168deg, #fbd05e, var(--gold) 50%, #e3a61d);
                color: var(--green-2); }
.sticky .wa { background-color: var(--green);
              background-image: linear-gradient(168deg, #24573f, var(--green) 55%, var(--green-2));
              color: #fff; }
/* Retired on phones: every page, the homepage included, now has the same
   bottom bar, built from the rail (see "The rail on a phone" below). */

.skip { position: absolute; left: -9999px; background: var(--gold); color: var(--green-2); padding: 12px 18px; font-weight: 700; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* ======================================================================
   17 Oct — de-templating pass
   The brief: stop it feeling generated. The tells being removed here are
   specific, not vibes: a row of ✓ pills under a centred headline, two equal
   pill buttons side by side, 'A · B · C' middle-dot meta strings, and one
   flat accent colour doing every job from buttons to body text.
   ====================================================================== */

/* Secondary action is a plain underlined link, not a second outlined pill.
   Two equal pills say "we could not decide which one matters". */
.btn-plain {
  display: inline-flex; align-items: center; padding: 16px 6px;
  font: 700 15.5px/1 'Archivo', sans-serif; color: var(--green);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 2px; text-decoration-color: var(--gold);
}
.btn-plain:hover { text-decoration-color: var(--gold-deep); color: var(--green-2); }
.btn-plain:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------- the CWAF slant ----------
   The logo is a green block with a diagonal right edge. Reused on the sector
   artwork, where it doubles as the divider between picture and text, and on
   the reasons marker. The spot SVGs keep their lowest 28px clear of ink, so
   an 18px slant cuts empty background and never clips a figure. */
.tile img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); border-bottom: 0; }
.reason .mark {
  width: 16px; height: 17px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}

/* ---------- sectors are now controls, not captions ----------
   Clicking one picks that asset in the enquiry form and takes you to it. The
   four tiles were the largest inert thing on the page: four pictures of the
   exact decision the form is about to ask you to make. */
.tile { display: block; width: 100%; text-align: left; border: 0; padding: 0;
        font: inherit; color: inherit; cursor: pointer; }
.tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.tile .go {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
  color: var(--gold-ink); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--gold);
}
.tile:hover .go { color: var(--green); }

/* A selected asset is confirmed where the eye already is, rather than only
   deep inside the form. */
.asset[aria-pressed="true"] { border-color: var(--green); background: var(--mint);
                              box-shadow: inset 0 0 0 1px var(--green); }

/* ======================================================================
   TEMPLATED PAGES — asset, dealer, FAQ, case study
   Rendered by tools/build.py through tools/layout.py. These blocks are the
   reason every inner page looks like every other inner page: there is one
   definition of each, and a template cannot opt out of it.
   ====================================================================== */

/* The plain inner-page hero that used to live here has gone. Every template
   now uses the overlaid .hub-hero, so .page-hero matched nothing on any of
   the 1,009 pages. Its emitter (hero()'s non-overlay branch) went with it. */

.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* The separator is aria-hidden, but it is still rendered text, so it still
   has to be legible — #b9c2bc measured 1.58:1 on the sand hero. */
.crumbs span { margin: 0 7px; color: #5f6a64; }

/* section.band, NOT .band: the homepage hero SVG is inlined with
   class="band" meaning "banner image", and the bare class selector was
   applying 34px of section padding to the artwork — which is the darker
   strip that showed between the header and the hero sky. */
section.band { padding: clamp(26px, 2.6vw, 34px) 0; }
section.band h2 { font-size: clamp(21px, 2.3vw, 27px); margin-bottom: .5em; }
section.band p { max-width: 68ch; }

/* The direct answer, set apart and first. Answer engines reward a page that
   states the answer before the sales copy, so it gets the visual weight too. */
.band-answer { padding: clamp(22px, 2.6vw, 32px) 0 clamp(16px, 1.8vw, 22px); }
.answer {
  font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.6; color: var(--ink);
  max-width: 64ch; margin: 0; padding-left: 20px; border-left: 4px solid var(--gold);
}

/* Spec tables run to 20+ rows on some assets, so they are a list of facts, not
   a grid: hairlines only, left-aligned, no zebra striping to add noise. */
.spec { width: 100%; border-collapse: collapse; margin-top: 4px; max-width: 72ch; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
                     border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec th { font-weight: 700; color: var(--ink); width: 38%; }
.spec td { color: var(--muted); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .spec th, .spec td { display: block; width: auto; border-bottom: 0; padding-bottom: 2px; }
  .spec td { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
}

/* A real funded figure — the single most citable thing on an asset page, so it
   is the one element here allowed to shout. */
.funded {
  background: var(--mint); border-radius: var(--r); padding: 22px 24px;
  border-left: 5px solid var(--green); max-width: 68ch;
}
.funded-amt { display: block; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800;
              color: var(--green); letter-spacing: -.02em; line-height: 1; }
.funded p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink); max-width: 60ch; }

/* The FAQ list reuses the homepage component verbatim. */
section.band .faq:first-of-type { margin-top: 8px; }

/* ---------- FAQ pages ----------
   One question per page, 268 of them. The question is the h1, the answer is
   the page, and the only other links are siblings in the same group. */
.faq-body { max-width: 66ch; }
.faq-body p { font-size: 16.5px; line-height: 1.68; margin: 0 0 1.05em; }
.faq-body p:first-child {
  /* the opening paragraph IS the answer, so it gets the answer treatment */
  font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.6; color: var(--ink);
  padding-left: 20px; border-left: 4px solid var(--gold);
}
.faq-steps { margin: 0 0 1.05em; padding-left: 0; list-style: none; counter-reset: s; }
.faq-steps li {
  counter-increment: s; position: relative; padding-left: 38px; margin-bottom: 12px;
  font-size: 15.5px; line-height: 1.6;
}
.faq-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: var(--green); font-size: 12.5px; font-weight: 800;
}

/* ---------- related links ----------
   The only outbound links on an inner page besides the chrome. Deliberately a
   short list, not a grid of cards: every link is an exit that is not an
   enquiry, so they are made available without being made attractive. */
.band-rel { background: var(--sand); }
.rel-note { font-size: 14.5px; color: var(--muted); margin: -4px 0 14px; }
.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
       grid-template-columns: 1fr; max-width: 72ch; }
@media (min-width: 760px) { .rel { grid-template-columns: 1fr 1fr; gap: 2px 28px; } }
.rel li { border-bottom: 1px solid var(--line); }
.rel a {
  display: block; padding: 11px 0; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.rel a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- sector hub ----------
   The one inner-page type that gets art: 28 hubs, one scene each. 605 asset
   pages would need 605, which is not a design, it is a quota. */
/* .hub-hero and .hub-hero-in are declared further down, in the overlaid-hero
   block. Every property they set here was restated there, so the earlier
   versions were doing nothing except inviting someone to edit the copy that
   does not win. The 860px grid rule goes too — the live one is at 1000px. */
.hub-hero h1 { font-size: clamp(30px, 4vw, 44px); max-width: 17ch; }
.hub-hero .lede { max-width: 54ch; margin: 14px 0 22px; }

/* ---------- the web ----------
   A hub lists every page beneath it, so a crawler reaching any hub reaches the
   whole branch in one hop. Dense on purpose — this is the interlinking, and it
   is the one place a long list of links is the right answer. */
.band-tiles { background: var(--cream); }
.gtiles { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gtiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gtiles { grid-template-columns: repeat(3, 1fr); } }
.gtile {
  display: block; padding: 13px 15px; background: #fff; border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink);
  transition: box-shadow .15s, transform .12s;
}
.gtile:hover { box-shadow: 0 0 0 1px var(--green); transform: translateY(-1px); }
.gtile b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; }
.gtile span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- the sitewide calculator ----------
   On every page, because the question every visitor has is "what would that
   cost a month" and the answer should never be more than one scroll away. */

/* ---------- trust strip ----------
   On every page, under the hero. People arrive on a deep page from Google or
   an answer engine having never seen the homepage, so the page has to say who
   this is on its own. */
/* padding:0 is deliberate. The global `section` rule adds up to 96px top and
   bottom; without overriding it a 60px trust row sat in a ~290px band. */
.trust { padding: 0; background: var(--green);
         background-image: linear-gradient(150deg,#24573f,var(--green) 55%,var(--green-2)); }
.trust-row { list-style: none; margin: 0; padding: 16px 0; display: grid; gap: 14px 26px;
             grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-row li { display: flex; flex-direction: column; gap: 1px; padding-left: 13px;
                border-left: 3px solid var(--gold); }
.trust-row b { font-size: 14.5px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.trust-row span { font-size: 12.5px; color: #cad9d1; line-height: 1.4; }
/* Higher specificity AND later than .trust-row span, so the stars keep their
   gold on the dark strip instead of inheriting the muted sub-line grey. */
/* --gold-star is the DARK gold, picked for 3.3:1 against sand. This strip is
   dark green, where that same swatch reads muddy and brown. On dark the full
   accent is both correct and far brighter, so the stars match the Apply online
   button instead of looking like a different colour. */
.trust-row .rating { color: var(--gold); font-size: 14px; letter-spacing: 1.5px;
                     line-height: 1.25; background: none; padding: 0; clip-path: none; }

/* ---------- named adviser ----------
   "One adviser, start to finish" is the core claim; it should not live only on
   the homepage. */

/* ---------- mega-menus ----------
   <details>, not hover. Works with a keyboard, works on touch, works with no
   JavaScript — which matters when the nav is the main route between branches
   of a 1,009-page static build. */
.bar nav { position: relative; }
.mega { position: relative; }
.mega > summary {
  list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 600;
  color: var(--body); padding: 6px 2px; display: inline-flex; align-items: center; gap: 6px;
}
.mega > summary::-webkit-details-marker { display: none; }
.mega > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
}
.mega[open] > summary { color: var(--green); }
.mega > summary:hover { color: var(--green); }
.mega > summary:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 3px; }

.mega-panel {
  position: absolute; z-index: 60; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 32px));
  background: #fff; border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line), 0 26px 50px -22px rgba(20,48,36,.42);
  padding: 22px 24px;
}
.mega-in { display: grid; gap: 18px 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .mega-in { grid-template-columns: repeat(5, 1fr); } }
/* The brand gold (--gold, the Apply online fill) measures 1.59:1 as text on
   this white panel, so it cannot BE the heading. It can sit above it: a short
   rule carries the accent into the menu while the words keep --gold-ink and
   their 7.9:1. */
.mcol h3 { font-size: 12px; font-weight: 800; color: var(--gold-ink); margin: 0 0 8px; }
.mcol h3::before { content: ''; display: block; width: 22px; height: 3px;
  border-radius: 999px; background: var(--gold); margin-bottom: 6px; }
.mcol ul { list-style: none; margin: 0; padding: 0; }
.mcol li { margin-bottom: 2px; }
.mcol a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 5px 0; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.mcol a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.mcol a i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mega-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega-foot a { font-size: 13.5px; font-weight: 700; color: var(--green);
               text-decoration: underline; text-underline-offset: 4px;
               text-decoration-color: var(--gold); }

/* On phones the panel is a plain expanding list, not a floating card. */
@media (max-width: 860px) {
  .mega { display: none; }
}

/* ---------- illustrated index cards ----------
   The homepage sector tile, reused wherever sectors or dealer pages are
   listed. Same construction: art bleeding to the edge with the brand slant,
   title, one line, and an action. A list of 28 links is not an index of a
   business that funds 28 kinds of machine. */
.band-cards { background: var(--cream); }
.ctiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .ctiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ctiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ctiles { grid-template-columns: repeat(4, 1fr); } }
.ctile {
  display: block; background: #fff; border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(20,48,36,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ctile:hover { transform: translateY(-3px);
               box-shadow: 0 0 0 1px var(--line), 0 22px 40px -20px rgba(20,48,36,.5); }
.ctile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.ctile img { display: block; width: 100%; height: auto;
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); }
.ctile-t { display: block; padding: 15px 17px 18px; }
.ctile-t b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
             line-height: 1.25; }
.ctile-t i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted);
             margin-top: 4px; }
.ctile-t::after {
  content: "Start with this"; display: inline-block; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--gold);
}
.ctile:hover .ctile-t::after { color: var(--green); }

/* ---------- signpost ----------
   The post in the middle, destinations radiating off it — Flowzo's pattern.
   Each card carries a chevron on the side facing the post, so the arrows read
   as coming off the sign rather than decorating a list. */
.signpost { background: var(--sand); padding: clamp(28px, 3.4vw, 40px) 0; }
.sp-head { text-align: left; font-size: clamp(21px,2.3vw,26px); margin-bottom: 22px; }
.signpost-in { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .signpost-in { grid-template-columns: 1fr minmax(260px, 320px) 1fr; gap: 28px; }
}
/* The art sits ON a soft mint panel rather than in a bordered box. The panel
   is what makes the post read as the junction the cards point at. */
/* A square tile, not a landscape strip. The art is 470x280, so it is letter-
   boxed inside the panel rather than stretching it — the panel is the junction
   the cards point at, and a wide strip reads as a banner instead. */
.sp-art { display: block; width: 100%; max-width: 300px; aspect-ratio: 1;
          object-fit: contain; margin-inline: auto; border-radius: var(--r);
          background: var(--mint); padding: 14px; order: -1; }
@media (min-width: 900px) { .sp-art { order: 0; } }
/* Equal-height cards per column. Left to themselves they size to their own
   text, so a one-line card next to a two-line one made the row look ragged
   rather than arranged. */
.sp-side { display: grid; gap: 12px; align-content: center; grid-auto-rows: 1fr; }

.sp-card {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 17px 20px; background: #fff;
  border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .15s, transform .12s;
}
.sp-card:hover { box-shadow: 0 0 0 1px var(--green); transform: translateY(-1px); }
.sp-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-card b { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--green); }
.sp-arrow { flex: none; color: var(--green); transition: transform .14s; }
.sp-card:hover .sp-arrow { transform: translateX(3px); }
.sp-pill { font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--green); background: var(--mint);
  border-radius: 999px; padding: 3px 9px; }
.sp-d { display: block; font-size: 13px; color: var(--body); margin-top: 5px;
  line-height: 1.45; }

/* No connector arrows between the cards and the post. They were drawn to make
   the group read as one sign, but the arrow already lives in each card's own
   title — doubling it made a busy row of chevrons and a second arrow pointing
   the opposite way to the first. Both columns read left to right, because a
   right-aligned column of English text is harder to scan and only existed to
   point at the middle. */

/* ---------- machine-readable resources ----------
   A visible route to llms.txt, llms-full.txt and the sitemap. Answer engines
   follow links like any other crawler, and a file nothing links to is a file
   that has to be guessed at. */
.ai-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
            margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.ai-links > span { font-size: 12px; font-weight: 800; color: var(--gold-ink);
                   margin-right: 4px; }
.ai-links a {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 8px 13px; background: var(--mint); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none;
}
.ai-links a:hover { background: var(--mint-2, #c9ddd1); }
.ai-links a i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ---------- section rhythm ----------
   Asset pages run six .band sections back to back. Identical treatment six
   times is exactly the flatness the homepage was fixed for, rebuilt on the
   inner pages. nth-of-type counts position among ALL sections in <main>, so
   alternating here gives a cream/sand beat without the template needing to
   know where it sits. */
.band:nth-of-type(even) { background: var(--sand); }
.band:nth-of-type(even) + .band:nth-of-type(odd) { background: var(--cream); }

/* Two adjacent link blocks were reading as one long list. */
.band-rel + .band-rel { padding-top: 0; }
.band-rel + .band-rel h2 { margin-top: 0; }

/* ---------- article flow ----------
   Prose inside one section: ordinary margins, not section padding between
   every heading. A heading needs air above it and little below — it belongs to
   the paragraph that follows. */
.article h2 { margin: 1.9em 0 .45em; font-size: clamp(20px,2.2vw,25px); }
.article h2:first-child { margin-top: 0; }
.article p { margin: 0 0 1.05em; max-width: 68ch; }
.article p:last-child { margin-bottom: 0; }

/* ---------- FAQ topic groups ----------
   20 topics, each expanding to its questions. 268 links in one flat list is
   the raw data, not an index. <details> keeps every link in the HTML, so a
   crawler still sees all 268 without opening anything. */
.band-faqgroups { background: var(--cream); }
.fgroups { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .fgroups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fgroups { grid-template-columns: repeat(3, 1fr); } }
.fgroup {
  background: #fff; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(20,48,36,.4);
  align-self: start;
}
.fgroup > summary { list-style: none; cursor: pointer; display: block; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup img { display: block; width: 100%; height: auto;
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 16px)); }
.fg-t { display: flex; align-items: baseline; justify-content: space-between;
        gap: 10px; padding: 14px 17px 16px; }
.fg-t b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.fg-t i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted);
          white-space: nowrap; }
.fg-t::after { content: "+"; margin-left: 2px; font-size: 17px; font-weight: 700;
               color: var(--green); }
.fgroup[open] .fg-t::after { content: "\2212"; }
.fgroup > summary:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.fg-list { list-style: none; margin: 0; padding: 0 17px 16px; }
.fg-list li { border-top: 1px solid var(--line); }
.fg-list a { display: block; padding: 10px 0; font-size: 13.5px; font-weight: 600;
             color: var(--ink); text-decoration: none; line-height: 1.35; }
.fg-list a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hub: how it works ---------- */
.band-steps { background: var(--sand); }
/* Was centred. Every block on these pages already starts on one left edge —
   prose, tables, card rows — but the section headings alternated between left
   and centre as you read down, which is the "assembled rather than composed"
   problem the left-edge rule exists to stop, just moved up to the headings. */
.centre-h { text-align: left; margin-bottom: 22px; }
.band-steps .steps3 { box-shadow: 0 0 0 1px var(--line); background: #fff; }
.band-steps .pstep .n b { font-size: 12.5px; font-weight: 800; color: var(--gold-ink); }

/* ---------- hub: deals we funded ----------
   The amount is the point of a case study, so it leads. Only rendered where a
   sector actually has written-up deals. */
.band-deals { background: var(--cream); }
.deals { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .deals { grid-template-columns: 1fr 1fr; } }
/* auto-fit, not a fixed 4: sectors have between one and three case
   studies, so a fixed track count leaves a hole at the end of the row. */
@media (min-width: 1040px) { .deals { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.deal {
  display: flex; flex-direction: column; padding: 20px 22px; background: var(--mint);
  border-left: 5px solid var(--green); border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
  transition: transform .12s, box-shadow .15s;
}
.deal:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(20,48,36,.5); }
.deal-amt { display: block; font-size: clamp(21px,2.3vw,27px); font-weight: 800;
            color: var(--green); letter-spacing: -.02em; line-height: 1; margin-bottom: 10px; }
.deal-t { display: block; font-size: 14px; line-height: 1.45; color: var(--ink); }
/* The affordance sits at the card's foot whatever the title length, so a row
   of cards lines up instead of stepping. */
.deal-go { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700;
           color: var(--green); border-bottom: 2px solid var(--gold);
           align-self: flex-start; }
.deal-cta { background: var(--green); border-left-color: var(--gold); }
.deal-cta .deal-amt, .deal-cta .deal-t { color: #fff; }
.deal-cta .deal-t { opacity: .88; }
.deal-cta .btn { margin-top: auto; align-self: flex-start; }
.deal-cta .btn + .deal-all { margin-top: 10px; }
.deal-all { font-size: 13px; font-weight: 600; color: var(--mint);
            text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.deal-all:hover { color: #fff; }

/* ---- Hub hero: copy, then a full-bleed sector band ------------------------
   Replaces the 444x230 thumbnail that used to sit in a column beside the copy.
   The band is the same four-plane scene as the homepage hero, so a visitor who
   lands on a sector page from a search gets the same first impression. */
.hub-hero { padding: 0 0 0; background: var(--sand); }
.hub-hero-in { padding: 54px 0 34px; display: grid; gap: 40px; align-items: center;
  grid-template-columns: minmax(0, 1fr); }
/* The hero's buttons sit under the copy, so they align with it. Without this
   they inherit the global centred .btns and float into the middle of an empty
   right half. */
.hub-hero .btns { justify-content: flex-start; }
/* A named face in the hero rather than an empty right column. People landing
   deep from a search have never seen the homepage; this is where they meet
   the person whose phone number is on the page. */
.hero-card { display: flex; gap: 16px; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.hero-card img { width: 92px; height: 92px; border-radius: 10px;
  object-fit: cover; object-position: 50% 22%; flex: none; }
.hero-card-txt { display: flex; flex-direction: column; gap: 4px; }
.hero-card-txt b { font-size: 1.05rem; }
.hero-card-txt span { font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.hero-card-tel { font-weight: 700; color: var(--green); text-decoration: none;
  border-bottom: 2px solid var(--gold); align-self: flex-start; }
@media (min-width: 1000px) {
  .hub-hero-in { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; }
}
@media (max-width: 760px) {
  .hub-hero .hub-copy { padding: 34px 0 24px; }
}

.sister-card { display: flex; gap: 28px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--gold); border-radius: 14px; padding: 26px 30px; }
.sister-card h2 { margin: 2px 0 8px; }
.sister-note { color: var(--ink-2); font-size: .92rem; margin-top: 6px; }

/* Two bands with the same background in a row should not pay the padding
   twice at the seam — that is the "really big gap" between sections. */
section.band + section.band { padding-top: clamp(20px, 2.2vw, 28px); }
.band-answer + section.band { padding-top: clamp(18px, 2vw, 24px); }

/* ---- Footer: four labelled columns ---------------------------------------
   Was three unlabelled ones with the credential badge stranded under the logo
   and the right quarter of the page empty. Column headings matter in a footer
   with 12 links: without them it reads as one undifferentiated list. */
.foot-top { display: grid; gap: 36px 28px; padding-bottom: 30px;
  grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px)  { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; } }
.fcol { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.fcol h2 { font-size: 13px; letter-spacing: .01em; margin: 0 0 3px; color: var(--ink); }
.fcol a { font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; }
.fcol a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.fcol-sister a { display: block; }
.fcol-sister i { display: block; font-style: normal; font-size: 12.5px;
  font-weight: 500; color: var(--muted); margin-top: 2px; }
.foot-brand .badges { margin-top: 22px; }
.foot-brand p { max-width: 34ch; }

/* ---- Equipment table ("What you can fund") -------------------------------
   The live hub layout. Scrolls inside its own box on narrow screens rather
   than forcing the page to scroll sideways. */
.eq-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; margin-top: 18px; }
.eq { width: 100%; border-collapse: collapse; min-width: 560px; }
.eq thead th { text-align: left; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  padding: 14px 20px; background: var(--sand); border-bottom: 1px solid var(--line); }
.eq tbody tr + tr { border-top: 1px solid var(--line); }
.eq tbody tr:hover { background: #fcfbf7; }
.eq th[scope="row"] { text-align: left; padding: 16px 20px; vertical-align: top;
  width: 22%; font-weight: 700; }
.eq th[scope="row"] a { color: var(--gold-ink); text-decoration: none; }
.eq th[scope="row"] a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eq td { padding: 16px 20px; vertical-align: top; color: var(--body);
  font-size: 14.5px; line-height: 1.5; }
.eq .eq-go { width: 15%; white-space: nowrap; }
.eq .eq-go a { font-weight: 700; color: var(--gold-ink); text-decoration: none; }
.eq .eq-go a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- One left edge ------------------------------------------------------
   .wrap sections started at 173px and .narrow prose at 333px, so reading down
   the page every other block stepped inward. Prose keeps its 760px measure
   for readability but hangs off the same gutter as the tables, step panels
   and card rows, which is what makes a long page look composed rather than
   assembled. */
@media (min-width: 1000px) {
  section.band .narrow, .band-answer .narrow {
    /* margin, NOT padding: .narrow is border-box, so padding-left came out of
       the 760px measure and squeezed the prose to 587px. */
    /* ONE measure. The container was 760px while .band p was capped at 68ch
       (~620px), so the heading and the paragraphs under it had different
       right edges — the block read as two columns that did not line up.
       Matching the container to the paragraph measure gives the prose a
       single left and right edge. */
    width: min(68ch, 100% - 44px);
    margin-left: max(22px, calc((100% - min(1080px, 100% - 44px)) / 2));
    margin-right: 0;
  }
  /* now redundant, and it was the thing causing the mismatch */
  section.band .narrow p, .band-answer .narrow p { max-width: none; }
}
/* The standfirst follows the heading. */
.centre-h + .rel-note { text-align: left; max-width: 68ch; margin-inline: 0; }

/* Consecutive sections paid the padding twice at the seam, so two 48px
   sections made a 96px band of nothing. The lower one keeps a smaller top
   pad; classed sections (.triad, .trust, .hub-hero) out-specify this and keep
   their own spacing, which is why only the unclassed homepage blocks move. */
section + section { padding-top: clamp(14px, 1.5vw, 20px); }

/* ---- Alternating green/gold accents --------------------------------------
   The repeated marks — reason slants, trust bars, fact rules, deal card edges
   — were all gold, which flattens a two-colour brand into a one-colour one.
   Alternating them lets the pair read as a palette rather than an accent plus
   a background, and it costs nothing structurally. Gold stays on the darker
   grounds where green would disappear. */
.reason:nth-child(even) .mark { background: var(--green); }
.meet-facts li:nth-child(even) { border-left-color: var(--green); }
/* The trust strip sits on dark green, so green-on-green would vanish there;
   it alternates gold with the lighter mint instead. */
.trust-row li:nth-child(even) { border-left-color: var(--mint-2, #c9ddd1); }
.deal:nth-child(even) { border-left-color: var(--gold); }
.eq tbody tr:nth-child(even) th[scope="row"] { box-shadow: inset 3px 0 0 var(--green); }
.eq tbody tr:nth-child(odd)  th[scope="row"] { box-shadow: inset 3px 0 0 var(--gold); }
.eq th[scope="row"] { padding-left: 24px; }

/* ---- Overlaid hero (FAQ answers) -----------------------------------------
   The scene is the hero, not a strip beneath it. The tall art keeps its cast
   on the bottom ~85px and leaves the rest sky, so the question, the CTA and
   the adviser card all sit over clear ground. */
.hero-overlay { position: relative; overflow: hidden; background: #fbf8f2; }
.hero-overlay .hero-scene {
  /* height:auto, NOT cover. cover scaled a 1280x430 scene by 1.21 on a 1440
     screen, which oversized the cast and cropped the left-hand machine. At
     natural aspect the art sits on the section's bottom edge and the sky
     above it is the section's own background, which is the same colour. */
  position: absolute; inset: auto 0 0 0; width: 100%; height: auto;
  z-index: 0; pointer-events: none;
}
.hero-overlay .hub-hero-in { position: relative; z-index: 1; }
/* Reserve enough height that the copy never lands on the machines. */
@media (min-width: 1000px) {
  /* 480, not 430: the art is 1280 wide and scales up on a 1440 screen, which
     crops sky off the top and lifts the cast. The extra height buys the gap
     back so the CTA never sits on a machine. */
  /* The reserve has to clear the TALLEST prop, not the average one. The art
     is 1280x430 and `cover` scales it up on a wide screen, so a tractor's cab
     lands ~220px above the section's bottom edge. Sized for the FAQ pages
     (which have no lede) the CTA sat on the bonnet. */
  /* The scene keeps its aspect, so its height tracks the VIEWPORT WIDTH:
     430/1280 = 33.6vw. The cast's tallest point sits ~11.3vw above the
     section's bottom edge, so a fixed 180px reserve that worked at 1440 let
     a barn roof reach the CTA at 2000. Both values scale with it. */
  /* centre, not start: pinned to the top the card left a block of empty sand
     beneath it while the copy ran on below. Level with the headline the two
     columns read as one row. */
  .hero-overlay .hub-hero-in { align-items: center; padding-top: 52px;
    min-height: max(470px, 34vw);
    padding-bottom: max(180px, calc(11.5vw + 28px)); }
}
.hero-scene-sm { display: none; }
@media (max-width: 999px) {
  .hero-scene-lg { display: none; }
  /* The short crop, scaled up and bottom-cropped so the machines are legible
     rather than 30px tall with 90px of empty sky above them. */
  .hero-scene-sm { display: block; height: 146px; object-fit: cover;
    object-position: 50% 100%; }
  .hero-overlay .hub-hero-in { padding-bottom: 162px; }
}

/* ---- Equipment table on mobile -------------------------------------------
   A three-column table in a 346px box can only scroll sideways, which hides
   two of the three columns behind a gesture nobody makes. Under 700px each
   row becomes a card: the asset name as the heading, what it covers beneath,
   and the link as the action. Same markup, same reading order. */
@media (max-width: 700px) {
  .eq-wrap { overflow-x: visible; border: 0; background: none; }
  .eq, .eq tbody, .eq tr, .eq th, .eq td { display: block; width: auto; min-width: 0; }
  .eq thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .eq tbody tr {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold);
    border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 10px;
  }
  .eq tbody tr:nth-child(even) { border-left-color: var(--green); }
  .eq tbody tr + tr { border-top: 1px solid var(--line); }
  /* the desktop accent is an inset shadow on the cell; the card owns it now */
  /* :nth-child(n) to match the alternating-accent rules' specificity (0,3,3).
     Without it those win and the inset bar strikes through the asset name;
     and the desktop width:22% (0,2,1) beat a plain .eq th, which is why the
     name wrapped to three words a line while the text below ran full width. */
  .eq tbody tr:nth-child(n) th[scope="row"] {
    box-shadow: none; padding: 0 0 6px; font-size: 16px;
    width: auto; display: block;
  }
  .eq td { padding: 0; font-size: 14px; }
  .eq .eq-go { width: auto; padding-top: 10px; }
}

/* ---- Pillar cards --------------------------------------------------------
   Five cards on a four-column grid left one stranded on a row of its own.
   Flex with wrap and a centred last row makes 3+2 read as a deliberate
   arrangement instead of a leftover. */
@media (min-width: 900px) {
  .ctiles { display: flex; flex-wrap: wrap; justify-content: center; }
  .ctiles > .ctile { flex: 0 1 calc(33.333% - 11px); }
}
@media (min-width: 1240px) {
  .ctiles > .ctile { flex: 0 1 calc(20% - 13px); }
}

/* The pillar cards are a row, so their footers should line up. Without this
   the "Start with this" link floats to wherever each description happens to
   end and the row reads as five unrelated boxes. */
@media (min-width: 900px) {
  .ctiles > .ctile { display: flex; flex-direction: column; }
  .ctiles > .ctile .ctile-t { display: flex; flex-direction: column; flex: 1 1 auto; }
  .ctiles > .ctile .ctile-t::after { margin-top: auto; padding-top: 12px; }
}

/* ---- Anchor landing ------------------------------------------------------
   scroll-behavior is smooth but nothing reserved room for the sticky header,
   so every "See what it would cost" jump buried the top 69px of the enquiry
   module — including its heading — behind the bar. scroll-margin-top is the
   one-line fix and it applies to keyboard focus and browser back/forward too.
   The header is only sticky from 861px up, so mobile needs a small value
   rather than the same 92px, which would overshoot and leave a gap. */
main [id], #enquiry, #main { scroll-margin-top: 14px; }
@media (min-width: 861px) {
  main [id], #enquiry, #main { scroll-margin-top: 92px; }
}

/* The route from an asset page's own questions to the 268-page FAQ section.
   They are separate content estates; this is the only link between them. */
.faq-more { margin-top: 16px; }
.faq-more a { font-weight: 700; color: var(--green); text-decoration: none;
  border-bottom: 2px solid var(--gold); }
.faq-more a:hover { color: var(--ink); }

/* ---- "What you can fund": fold the long tail on mobile -------------------- */
.eq-toggle { display: none; }
@media (max-width: 700px) {
  .eq-toggle { display: block; margin-top: 4px; }
  .eq-toggle summary {
    list-style: none; cursor: pointer; display: inline-block;
    padding: 11px 18px; border-radius: var(--r-sm); font-weight: 700;
    font-size: 14px; color: var(--green); background: var(--mint);
    border: 1px solid var(--line);
  }
  .eq-toggle summary::-webkit-details-marker { display: none; }
  .eq-toggle:not([open]) .less { display: none; }
  .eq-toggle[open] .more { display: none; }
  /* :has() lets the closed state hide the tail without any JavaScript. */
  .band-eq:not(:has(.eq-toggle[open])) .eq tbody tr:nth-child(n+9) { display: none; }
}

/* ---- Mobile menu ---------------------------------------------------------
   Below 860px the desktop nav and both mega-menus are hidden, so without this
   the header on 1,009 pages is a logo and one button. No JavaScript: a
   <details> is keyboard-operable, touch-operable and works if a script fails. */
.navmob { display: none; }
@media (max-width: 860px) {
  .navmob { display: block; margin-left: 4px; }
  .navmob summary {
    list-style: none; cursor: pointer; width: 42px; height: 40px;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: 0 9px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff;
  }
  .navmob summary::-webkit-details-marker { display: none; }
  .navmob summary i { display: block; height: 2px; background: var(--green); border-radius: 2px; }
  .navmob[open] summary { background: var(--mint); }
  .navmob-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); padding: 18px 22px 24px;
    max-height: calc(100vh - 72px); overflow-y: auto; z-index: 60;
    box-shadow: 0 18px 30px -22px rgba(20, 48, 36, .5);
  }
  /* Sentence case, not a tracked-out all-caps eyebrow. Capitals plus letter
     spacing above every group is template chrome that appears whatever the
     subject; these are section names, so they read as names. */
  .navmob-panel h3 { font-size: 13px; font-weight: 800; letter-spacing: -.01em;
    color: var(--ink); margin: 18px 0 8px; }
  .navmob-panel .mega-in { display: block; }
  .navmob-panel .mcol { margin-bottom: 12px; }
  .navmob-panel .mcol h3 { margin: 10px 0 5px; text-transform: none; letter-spacing: 0;
    font-size: 13px; color: var(--ink); font-weight: 800; }
  /* No rule in the phone menu: 18 headings x 9px of bar and gap is 162px of
     extra scrolling in a panel that is already long. */
  .navmob-panel .mcol h3::before { display: none; }
  .navmob-panel .mcol ul { list-style: none; margin: 0; padding: 0; }
  .navmob-panel .mcol li a { display: block; padding: 7px 0; font-size: 14.5px;
    color: var(--body); text-decoration: none; }
  .navmob-panel .mcol li i { display: none; }
  /* .bar nav a (0,2,1) out-specifies .navmob-call (0,1,0) and was painting
     this dark-on-dark green. Scoped to beat it rather than !important. */
  .bar nav .navmob-panel a.navmob-call {
    display: block; text-align: center; font-weight: 800; font-size: 16px;
    padding: 12px; border-radius: var(--r-sm); background: var(--green);
    color: #fff; text-decoration: none; }
  .navmob-flat { display: grid; gap: 2px; margin-top: 14px;
    border-top: 1px solid var(--line); padding-top: 12px; }
  .navmob-flat a { padding: 9px 0; font-weight: 700; font-size: 15px;
    color: var(--green); text-decoration: none; }
  /* The panel spans the header, so the header must be its offset parent.
     <nav> was positioned, which made the panel 243px wide and floating. */
  header.bar { position: relative; }
  header.bar .bar-in, header.bar nav { position: static; }
}

/* The rating in the hero card. A named adviser is reassuring; a named adviser
   with a verifiable score is a trust signal, and this card is the first thing
   a reader who landed deep from a search sees. */
.hero-card-rate { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: .86rem; color: var(--ink-2); }
.hero-card-rate .rating { color: var(--gold); letter-spacing: 1px; font-size: .9rem; }
.hero-card-rate b { color: var(--ink); font-weight: 800; }

/* ======================================================================
   ENQUIRY DRAWER + RIGHT RAIL
   A persistent way to enquire from any scroll position on any of the 1,009
   pages. The rail is two real links, so with no JavaScript the tab still
   jumps to the inline form and WhatsApp still opens.
   ====================================================================== */
.rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 55; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.rail-btn {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 800; font-size: 14px;
  border-radius: 12px 0 0 12px; box-shadow: 0 10px 26px -14px rgba(20,48,36,.7);
  transition: padding-right .14s, filter .14s;
}
.rail-enq {
  background: var(--gold); color: var(--green-2);
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 20px 9px 20px 10px; letter-spacing: .02em;
}
.rail-enq span { transform: rotate(180deg); }
.rail-wa { background: #25D366; color: #fff; padding: 11px 10px 11px 12px; }
.rail-btn:hover { padding-right: 14px; filter: brightness(1.04); }
.rail-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* the WhatsApp option beside the phone number in a CTA row */
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 700; font-size: 14.5px; color: var(--green);
  padding: 11px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; transition: border-color .14s, box-shadow .14s;
}
/* The real glyph, not a coloured dot beside a word. A dot says "status
   indicator"; people scan for the WhatsApp mark itself. */
.btn-wa svg { flex: none; color: #25D366; }
.btn-wa:hover svg { color: #1da851; }
.btn-wa:hover { border-color: #25D366; color: var(--ink);
  box-shadow: 0 8px 18px -12px rgba(37, 211, 102, .8); }
.cta-band .btn-wa { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); color: #fff; }
.cta-band .btn-wa svg { color: #4ae07f; }
.cta-band .btn-wa:hover { background: rgba(255,255,255,.18); color: #fff; }

/* The rail on a phone. Floating at the right edge it sat on top of the page
   and hid whatever scrolled under it (the review card, table cells, form
   labels). On a narrow screen it becomes a slim bar across the bottom, and
   the page gets the same height of padding so nothing is ever covered. */
@media (max-width: 860px) {
  .rail { top: auto; bottom: 0; left: 0; right: 0; transform: none;
          flex-direction: row; gap: 0; align-items: stretch;
          padding-bottom: env(safe-area-inset-bottom, 0);
          background: var(--green); box-shadow: 0 -6px 20px rgba(0,0,0,.16); }
  .rail-btn { border-radius: 0; box-shadow: none; min-height: 54px; font-size: 15px; }
  .rail-btn:hover { padding-right: 14px; }
  .rail-enq { flex: 1 1 auto; writing-mode: horizontal-tb; padding: 0 14px;
              background-image: linear-gradient(168deg, #fbd05e, var(--gold) 50%, #e3a61d); }
  .rail-enq span { transform: none; }
  .rail-wa { flex: 0 0 42%; gap: 8px; padding: 0 12px; background: var(--green); }
  .rail-wa::after { content: 'WhatsApp'; font-weight: 800; }
  .rail-wa svg { color: #4ae07f; }
  body:has(.rail) { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0)); }
}

/* ---- The drawer itself ---------------------------------------------------
   Two steps with a progress bar and a trust column, matching the live
   "Get your quote" flow. Wider than a plain panel because the trust column
   sits beside the form on desktop, as it does on live. */
.drawer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(12, 28, 21, .5); }
.drawer-card {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%);
  background: var(--cream); overflow-y: auto;
  box-shadow: -24px 0 50px -30px rgba(12,28,21,.85);
  animation: drawerIn .24s cubic-bezier(.22,.8,.3,1);
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawer-card { animation: none; } }

.dr-progress { position: sticky; top: 0; height: 4px; background: var(--line); z-index: 2; }
.dr-progress i { display: block; height: 100%; width: 50%; background: var(--gold);
  transition: width .25s ease; }
.drawer-x {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; z-index: 3;
}
.drawer-x:hover { background: var(--mint); }

.dr-cols { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .dr-cols { grid-template-columns: 1fr 232px; } }
.dr-form { padding: 26px 26px 30px; }
.drawer-card h2 { font-size: clamp(21px, 2.3vw, 26px); margin: 2px 0 6px; padding-right: 44px; }
.dr-sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; }
.dr-step[hidden] { display: none; }
.drawer-card .field { margin-bottom: 16px; }
.drawer-card label { display: block; font-weight: 700; font-size: 14.5px;
  color: var(--ink); margin-bottom: 7px; }
.drawer-card input, .drawer-card select {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
.drawer-card input:focus, .drawer-card select:focus {
  outline: 3px solid var(--mint-2, #c9ddd1); border-color: var(--green);
}

/* the amount stepper: MIN 10,000 / MAX 500,000 / STEP 5,000, as on live */
.dr-amt { display: flex; align-items: center; gap: 10px; }
.dr-amt-btn {
  width: 46px; height: 46px; flex: none; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--green);
  font-size: 22px; font-weight: 800; line-height: 1;
}
.dr-amt-btn:hover { background: var(--mint); border-color: var(--green); }
.dr-amt-val {
  flex: 1; text-align: center; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800;
  color: var(--green); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px;
}
.dr-hint { display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--muted); margin: 7px 0 0; }

.dr-choice { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .dr-choice { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 540px) { .dr-choice-2 { grid-template-columns: repeat(2, 1fr); } }
.dr-opt {
  padding: 12px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; text-align: center;
}
.dr-opt:hover { border-color: var(--green); }
.dr-opt[aria-pressed="true"] { background: var(--mint); border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green); font-weight: 800; }
.dr-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

.dr-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .dr-row { grid-template-columns: 1fr 1fr; } }
.dr-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.dr-actions .btn { margin-left: auto; }
.dr-consent { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; }

.dr-done { text-align: center; padding-top: 18px; }
.dr-tick { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--mint); color: var(--green); font-size: 30px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }

/* 58px of headroom: the close button is pinned to the card's top-right,
   which is this column, and it was sitting on the illustration. */
.dr-trust { background: var(--sand); padding: 58px 22px 26px;
  border-top: 1px solid var(--line); }
@media (min-width: 720px) { .dr-trust { border-top: 0; border-left: 1px solid var(--line); } }
.dr-trust-h { font-weight: 800; font-size: 15px; color: var(--ink); margin: 0 0 14px; }

/* Proof at the point of commitment. The panel already said what the service
   does; these three say who is behind it, and they appear on the screen where
   someone is typing their phone number rather than only in the footer.

   Every line here is published elsewhere on the site and worded the same way,
   including the FRN. It is deliberately NOT paired with "of Rural Finance
   Limited": 1031964 is CW Asset Finance's own number and Rural's is 630701,
   so putting them in one sentence would misattribute it. */
.dr-proof { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 7px; }
.dr-proof p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dr-proof b { color: var(--ink); }
.dr-proof-rate .rating { letter-spacing: 1px; font-size: 13px; }
.dr-proof-next a { color: var(--green); }
.dr-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dr-trust li { position: relative; padding-left: 24px; font-size: 13.5px;
  color: var(--body); line-height: 1.45; }
.dr-trust li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 800;
}
.dr-trust-call { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.dr-trust-call a { font-weight: 800; font-size: 16px; color: var(--green);
  text-decoration: none; border-bottom: 2px solid var(--gold); }

/* The drawer's illustration. Inlined rather than an <img> so its animation
   runs; see layout.inline_svg. */
.dr-trust-art { margin: -6px -10px 16px; }
.dr-trust-art svg { display: block; width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 719px) { .dr-trust-art { max-width: 320px; margin-inline: auto; } }

/* Continuity from the calculator into the drawer. Without a line confirming
   what carried across, a prefilled amount reads as a default rather than as
   the number the visitor just chose. */
.dr-carried { margin: 0 0 16px; padding: 11px 13px; border-radius: 9px;
  background: var(--mint); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.dr-carried[hidden] { display: none; }
.calc-go { margin: 10px 0 10px; }

/* Companies House typeahead. A real listbox rather than a native datalist:
   datalist matching is unpredictable and cannot show the address line that
   tells two similarly-named companies apart. */
.dr-lookup { position: relative; }
.dr-colist { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 4;
  margin: 0; padding: 4px; list-style: none; max-height: 232px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 30px -18px rgba(20,48,36,.6); }
.dr-colist[hidden] { display: none; }
.dr-colist li { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.dr-colist li b { display: block; font-weight: 700; color: var(--ink); }
.dr-colist li span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.dr-colist li:hover, .dr-colist li[aria-selected="true"] { background: var(--mint); }

/* Typical purchase price above the machines table. Carries its source and the
   date it was checked — a price with no date is a claim with no shelf life. */
.spec-price { margin: -2px 0 14px; padding: 12px 14px; border-radius: 9px;
  background: var(--mint); border-left: 4px solid var(--green);
  font-size: 15px; line-height: 1.5; color: var(--ink); max-width: none; }
.spec-price b { font-weight: 800; }
.spec-asat { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.spec-asat a { color: var(--green); font-weight: 700; }

/* ---- Dealer: work with us ------------------------------------------------
   Two routes side by side, because which one applies depends on the reader's
   permissions and they need to find themselves in one of them quickly. */
.band-work { background: var(--sand); }
.work-lede { font-size: 16px; margin-bottom: 20px; }
.work-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 680px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-card { background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--r-sm); padding: 20px 22px; }
.work-card:nth-child(even) { border-left-color: var(--green); }
.work-card h3 { font-size: 17px; margin-bottom: 8px; }
.work-card p { font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; }
.work-for { color: var(--ink-2); font-size: 13.5px !important; margin-bottom: 0 !important; }
.work-note { font-size: 14px; color: var(--ink-2); line-height: 1.6;
  padding: 13px 15px; background: var(--mint); border-radius: 9px; }
.work-note a { color: var(--green); font-weight: 700; }
.band-work .btns { justify-content: flex-start; margin-top: 18px; }

/* [hidden] is a UA rule at specificity (0,0,1); .btn sets display:inline-flex
   at (0,1,0) and silently wins, so hiding a button by its attribute did
   nothing. Same shape as the other source-order bugs in this file. */
[hidden] { display: none !important; }

/* The enquiry module without its calculator: one column, not two. */
.main-split-1 { grid-template-columns: 1fr !important; }

/* ---- Calculator rate bands ----------------------------------------------
   Three indicative flat rates, as on the live site. A flat rate is the
   convention in asset finance, so the disclaimer says plainly that it is not
   an APR — quoting one as though it were the other understates the cost. */
.rate-field { margin-top: 12px; }
.rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rate {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border-radius: 9px; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  color: #fff; text-align: center;
}
.rate b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.rate i { font-style: normal; font-size: 12px; color: #c9d8d0; }
.rate:hover { background: rgba(255,255,255,.13); }
.rate[aria-checked="true"] {
  background: var(--gold); border-color: var(--gold-edge); color: var(--green-2);
}
.rate[aria-checked="true"] i { color: var(--green-2); opacity: .8; }
.rate:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* .card-main .rate-note (0,2,0) to beat `.card p` (0,1,1), which was painting
   this muted grey on dark green at 2.37:1. The pattern that keeps biting this
   stylesheet: a later, more specific rule quietly winning. */
.card-main .rate-note { font-size: 11.5px; line-height: 1.5; color: #c9d8d0;
  margin: 7px 0 0; max-width: none; }
/* Three stacked full-width rate buttons made the phone layout far longer than
   it needed to be. They hold three columns down to 360px with tighter padding;
   the labels are one short word each. */
/* Scoped .card-main like .rate-note above, and for the same reason: plain
   `.card p` (0,1,1) would otherwise repaint this and drop the contrast on the
   dark gradient. Sits with the monthly figure because that is the number it
   qualifies — a flat rate quoted without that line reads as an APR. */
.card-main .calc-fineprint { font-size: 11.5px; line-height: 1.45; color: #c9d8d0;
  margin: 6px 0 0; max-width: none; }

@media (max-width: 420px) { .rate { padding: 7px 3px; } .rate b { font-size: 12px; }
  .rate i { font-size: 11px; } }

/* ---- Dealer enquiry form -------------------------------------------------
   Replaces the customer enquiry module on dealer pages. A dealer is not
   financing a machine, so none of the customer questions apply; these five
   are what Conor needs before he picks up the phone. */
.dealer-enq { background: var(--sand); }
.dealer-enq-in { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .dealer-enq-in { grid-template-columns: .85fr 1.15fr; gap: 28px; } }

.dealer-why h2 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 10px; }
.dealer-why > p { font-size: 15.5px; color: var(--body); line-height: 1.6; margin-bottom: 16px; }
.dealer-ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.dealer-ticks li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink); }
.dealer-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 800; }
.dealer-who { display: flex; gap: 14px; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.dealer-who img { width: 72px; height: 72px; border-radius: 9px; object-fit: cover;
  object-position: 50% 22%; flex: none; }
.dealer-who div { display: flex; flex-direction: column; gap: 2px; }
.dealer-who b { font-size: 15px; }
.dealer-who span { font-size: 13px; color: var(--ink-2); }
.dealer-who a { font-weight: 800; color: var(--green); text-decoration: none;
  border-bottom: 2px solid var(--gold); align-self: flex-start; }

.dealer-form { background: var(--green);
  background-image: linear-gradient(158deg, #24573f 0%, var(--green) 46%, var(--green-2) 100%);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); color: #fff; }
.dealer-form h3 { color: #fff; font-size: 20px; margin-bottom: 16px; }
.dealer-form .field { margin-bottom: 14px; }
.dealer-form label { display: block; font-weight: 700; font-size: 14px;
  color: #fff; margin-bottom: 6px; }
.dealer-form .opt { font-weight: 500; color: #c9d8d0; }
.dealer-form select, .dealer-form input {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 15px;
  border: 1px solid rgba(255,255,255,.26); border-radius: 9px;
  background: rgba(255,255,255,.96); color: var(--ink);
}
.dealer-form select:focus, .dealer-form input:focus {
  outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
.dealer-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .dealer-row { grid-template-columns: 1fr 1fr; } }
/* .card p does not reach here, but .dealer-form p would inherit muted grey on
   green from elsewhere; scoped explicitly for the same reason. */
.dealer-form .dealer-hint { font-size: 12.5px; color: #c9d8d0; line-height: 1.5;
  margin: 7px 0 0; max-width: none; }
.dealer-form .dealer-foot { font-size: 12.5px; color: #c9d8d0; line-height: 1.55;
  margin: 12px 0 0; max-width: none; text-align: center; }
.dealer-done { margin-top: 14px; padding: 13px 15px; border-radius: 9px;
  background: var(--mint); color: var(--ink); font-weight: 700; font-size: 14.5px; }
.dealer-done[hidden] { display: none; }

/* Two fields side by side need their inputs on one line, which means their
   labels have to occupy the same height. "How often do customers ask about
   finance?" wraps to two lines and "How do you handle it now?" does not, so
   without this the two selects sat at different heights. */
@media (min-width: 560px) {
  .dealer-row > .field > label,
  .dr-row > .field > label { min-height: 2.6em; display: flex; align-items: flex-end; }
}
/* The form column is far taller than the copy beside it; centring the short
   column stops it hanging off the top with a void underneath. */
@media (min-width: 900px) { .dealer-enq-in { align-items: center; } }

/* ---- Drone hero (sector pages with a loop) ---------------------------------
   Same section as .hero-overlay, but the picture is a photographic poster with
   a short looping clip laid over it by app.js. Text goes light-on-dark behind
   a left weighted scrim, as on the homepage, because drone frames swing from
   dark hedgerow to bright sky. The section declares its dark background so the
   contrast gate measures white-on-green, which is what a reader sees. */
.hero-drone { background: var(--green-2); }
.hero-drone-bg { position: absolute; inset: 0; z-index: 0; line-height: 0; overflow: hidden; }
.hero-drone-poster, .hero-drone-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--dx, 50%) var(--dy, 45%);
  transform: scale(var(--zoom, 1)); transform-origin: var(--dx, 50%) var(--dy, 45%);
  filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1)) brightness(var(--bri, 1)); }
.hero-drone-vid { opacity: 0; transition: opacity .6s ease; }
.hero-drone-vid.is-playing { opacity: 1; }
.hero-drone-bg::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(14,33,23,.90) 0%, rgba(14,33,23,.82) 36%,
    rgba(14,33,23,.50) 64%, rgba(14,33,23,.20) 100%); }
.hero-drone .crumbs, .hero-drone .crumbs a, .hero-drone .crumbs span { color: #c5d4cc; }
.hero-drone .crumbs a:hover { color: #fff; }
.hero-drone h1 { color: #fff; }
.hero-drone .lede { color: #dde8e2; }
.hero-drone .btn-wa { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); color: #fff; }
.hero-drone .btn-wa:hover { color: #fff; background: rgba(255,255,255,.18); }
@media (min-width: 1000px) {
  /* no machines to clear, so the reserve the illustration needed goes */
  .hero-drone .hub-hero-in { min-height: max(430px, 30vw); padding-bottom: 52px; }
}
@media (max-width: 999px) {
  .hero-drone .hub-hero-in { padding-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) { .hero-drone-vid { display: none; } }

/* Step 2 offer on the drawer's thank you screen (shown only when the server
   returns an /apply/ link, see app.js) */
.dr-apply { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line, #e4ded2); }
.dr-apply[hidden] { display: none; }
.dr-apply .dr-sub { margin-top: 10px; }

/* Companies House record under the drawer's company field, once one is picked */
.dr-cocard { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line, #e4ded2); border-left: 3px solid var(--green, #143024);
  border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.45; color: var(--muted, #596661); }
.dr-cocard[hidden] { display: none; }
.dr-cocard p { margin: 0 0 3px; }
.dr-cocard p:last-child { margin-bottom: 0; }
.dr-cocard .dr-coname { color: var(--ink, #17211e); font-weight: 700; font-size: 14px; }

/* Published price research, synchronised from WordPress on 29 October 2026.
   Scoped on .cost-table, not `.wp-cost .cost-table`: the finance table lives in
   a sibling `.wp-finance` section, and an ancestor-scoped rule left it with no
   header band, no borders and centred headings.
   Updated 31 October 2026: every row now leads with a <th scope="row">, which
   is what makes a table machine-readable rather than merely tabular. That
   breaks two selectors below if they are left as they were. */
.cost-scroll { overflow-x:auto; }
.cost-table { width:100%; border-collapse:collapse; font-size:15px; }
/* SCOPED TO thead. This was a bare `.cost-table th`, so promoting the first
   cell of every row to a header would have painted each machine name as a
   dark green block. */
.cost-table thead th { text-align:left; border-top:2px solid var(--gold); padding:12px; background:var(--green); color:#fff; }
.cost-table tbody th { text-align:left; font-weight:700; color:var(--ink); padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.cost-table td { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.cost-table td:nth-child(2) { font-weight:700; color:var(--green); white-space:nowrap; }
.cost-table td:nth-child(3) { font-size:13px; overflow-wrap:anywhere; }
.cost-table caption { caption-side:top; text-align:left; font-size:13px; color:var(--muted); padding:0 0 8px; }
.cost-source,.cost-note { font-size:13px; color:var(--ink-2); margin-top:16px; }
/* The quotable line: range, VAT basis, check date. Above the caveat, because
   the caveat cannot be lifted into an answer on its own. */
.cost-answer { font-size:17.5px; line-height:1.6; color:var(--ink); margin:0 0 12px; max-width:62ch; }
/* Finance terms. Two columns, so it never needs a sideways scroll. */
.finance-table { min-width:0; }
.finance-table tbody th { width:32%; color:var(--green); }
.finance-table td { line-height:1.6; }
.finance-table td:nth-child(2) { font-weight:400; color:var(--body); white-space:normal; }
@media(max-width:700px) {
 .cost-table { font-size:14px; }
 .cost-table td,.cost-table th { padding:9px 7px; }
 .cost-table caption { padding:0 0 6px; }
 .cost-brands thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .cost-brands tbody tr { display:grid; grid-template-columns:1fr auto; grid-template-areas:'b p' 'e e' 's s'; gap:5px 10px; border-bottom:1px solid var(--line); padding:12px 0; }
 .cost-brands tbody tr:first-child { border-top:2px solid var(--gold); }
 .cost-brands tbody th,.cost-brands td { border:0; padding:0; }
 /* `tr > :nth-child(n)`, not `td:nth-child(n)`: the brand cell is a <th> now,
    and a td-only selector would silently drop its grid-area and collapse the
    phone layout with no error anywhere. */
 .cost-brands tbody tr > :nth-child(1) { grid-area:b; font-weight:700; }
 .cost-brands tbody tr > :nth-child(2) { grid-area:p; }
 .cost-brands tbody tr > :nth-child(3) { grid-area:s; }
 .cost-brands tbody tr > :nth-child(4) { grid-area:e; }
 /* The machine table stops being a table too, which is what the brand table
    and the buying comparison on this site already do. Three columns inside a
    phone-width scroller keep the source column permanently off-screen. */
 .cost-table:not(.cost-brands):not(.finance-table),
 .cost-table:not(.cost-brands):not(.finance-table) tbody { display:block; width:100%; }
 /* A caption inside a display:block table shrinks to the first column and sets
    one word per line, so it needs display:block too. It must NOT get that on a
    real table: it then stops being a caption and lays out after the header. */
 .cost-table:not(.cost-brands):not(.finance-table) caption { display:block; width:auto; }
 .cost-table:not(.cost-brands):not(.finance-table) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .cost-table:not(.cost-brands):not(.finance-table) tbody tr { display:block; border-top:2px solid var(--gold); padding:13px 0; }
 .cost-table:not(.cost-brands):not(.finance-table) tbody th,
 .cost-table:not(.cost-brands):not(.finance-table) tbody td { display:block; width:auto; padding:0 0 9px; border:0; white-space:normal; overflow-wrap:anywhere; }
 .cost-table:not(.cost-brands):not(.finance-table) tbody th { font-size:15.5px; }
 .cost-table:not(.cost-brands):not(.finance-table) tbody td::before { content:attr(data-label); display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:2px; }
 .cost-table:not(.cost-brands):not(.finance-table) tbody td:last-child { padding-bottom:0; }
 /* The finance rows stack as well, but there the row header IS the label, so
    the data-label pseudo-element must not print an empty box above every
    answer. */
 .finance-table tbody th { display:block; width:auto; border-bottom:0; padding-bottom:2px; }
 .finance-table tbody td { display:block; width:auto; padding-top:0; }
 .finance-table td::before { display:none; }
 .cost-answer { font-size:16.5px; }
}
.wp-case-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; padding:0; list-style:none; margin:0 0 28px; }
.wp-case-stats li { border-top:2px solid var(--gold); padding:12px 0; }
.wp-case-stats b,.wp-case-stats span { display:block; }
.wp-case-stats b { font-size:24px; color:var(--green); }
.wp-case-stats span { font-size:14px; }
/* Tables retained in the original cost guide narratives. */
.article table { width:100%; border-collapse:collapse; font-size:14px; margin:18px 0; }
.article th { text-align:left; background:var(--green); color:#fff; padding:10px; border-top:2px solid var(--gold); }
.article td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
@media(max-width:700px) {
 .article table,.article tbody,.article tr,.article td { display:block; width:100%; max-width:100%; }
 .article thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .article tr { padding:10px 0; border-bottom:1px solid var(--line); }
 .article tr:first-child { border-top:2px solid var(--gold); }
 .article td { padding:5px 0; border:0; min-width:0; overflow-wrap:anywhere; }
 .article td::before { content:attr(data-label); display:block; font-size:12px; font-weight:700; color:var(--ink-2); }
}

/* One contextual recommendation section across the Render templates. */
.next-guides { padding:32px 0 38px; background:var(--sand); }
.next-guides h2 { margin:0 0 20px; font-size:clamp(22px,2.4vw,29px); max-width:28ch; }
.next-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.next-card { display:flex; flex-direction:column; position:relative; padding:25px 23px 22px; background:#fffcf6; color:var(--green); text-decoration:none; border-top:3px solid var(--gold); }
.next-card::after { content:''; position:absolute; right:0; bottom:0; width:18px; height:47px; background:var(--gold); clip-path:polygon(100% 0,100% 100%,0 100%); }
.next-card h3 { margin:0 0 11px; font-size:20px; line-height:1.3; }
.next-card p { margin:0 0 24px; color:var(--ink-2); font-size:15px; line-height:1.55; }
.next-action { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:auto; font-size:14px; font-weight:800; }
.next-card:hover { background:#fff; box-shadow:0 0 0 1px var(--green); }
.next-card:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.next-more { margin-top:20px; font-size:14px; }
.next-more summary { cursor:pointer; font-weight:700; }
.next-more ul { display:flex; flex-wrap:wrap; gap:10px 24px; padding-left:18px; margin-top:14px; }
.next-more a { color:var(--green); }
@media(max-width:700px) {
 .next-grid { grid-template-columns:1fr; gap:12px; }
 .next-guides { padding:26px 0; }
 .next-card { padding:20px; }
 .next-card h3 { font-size:19px; }
 .next-card p { margin-bottom:18px; }
}

/* Question sections share one clear, accessible accordion treatment. */
.faq-layout { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:start; }
.faq-intro { border-top:3px solid var(--gold); padding-top:18px; }
.faq-intro h2 { margin:0 0 12px; font-size:clamp(25px,3vw,36px); line-height:1.18; }
.faq-intro p { font-size:16px; color:var(--ink-2); max-width:30ch; margin:0 0 18px; }
.faq-library { color:var(--green); font-size:14px; font-weight:800; text-decoration:none; }
.faq-library span { margin-left:10px; }
.faq-stack { min-width:0; }
.faq-stack .faq { background:#fffcf6; border:1px solid var(--line); margin:0 0 10px; border-radius:0; box-shadow:none; }
.faq-stack .faq:first-of-type,.faq-stack .faq:last-of-type,.faq-stack .faq:not(:first-of-type):not(:last-of-type) { border-radius:0; box-shadow:none; }
.faq-stack .faq summary { padding:21px 66px 21px 22px; font-size:17px; line-height:1.4; min-height:66px; }
.faq-stack .faq summary::after { right:20px; width:28px; height:28px; border-radius:0; background:var(--green); color:var(--gold); font-size:21px; }
.faq-stack .faq[open] { border-left:3px solid var(--gold); background:#fff; }
.faq-stack .faq[open] summary { color:var(--green); }
.faq-stack .faq[open] summary::after { background:var(--gold); color:var(--green); }
.faq-stack .faq-a { padding:0 22px 22px; font-size:16px; line-height:1.7; color:var(--ink-2); }
.faq-stack .faq-a p + p { margin-top:12px; }
.faq-stack .faq-a p { max-width:65ch; }
.guide-questions { margin:30px 0; }
.guide-questions .faq-intro { margin-bottom:20px; }
@media(max-width:700px) {
 .faq-layout { grid-template-columns:1fr; gap:22px; }
 .faq-stack .faq summary { font-size:16px; padding:18px 58px 18px 17px; }
 .faq-stack .faq summary::after { right:16px; width:26px; height:26px; }
 .faq-stack .faq-a { padding:0 17px 20px; font-size:15px; }
}

/* Mobile guide cards preserve every column's correct heading and value. */
.article tbody th { background:transparent; color:var(--green); border-top:0; border-bottom:1px solid var(--line); }
@media(max-width:700px) {
 .article table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; padding:18px; margin-bottom:14px; border:1px solid var(--line); border-top:3px solid var(--gold); background:#fffcf6; }
 .article table tbody td,.article table tbody th { display:block; width:auto; padding:0; min-width:0; border:0; color:var(--ink); font-size:15px; overflow-wrap:anywhere; }
 .article table tbody th { grid-column:1/-1; font-size:20px; font-weight:800; color:var(--green); }
 .article table tbody th::before { display:none; }
 .article table tbody td::before { margin-bottom:5px; font-size:12px; line-height:1.35; color:var(--ink-2); }
 .article table td[data-label="Typical use"],.article table td[data-label="Notes"],.article table td[data-label="What it covers"] { grid-column:1/-1; }
 .article table td[data-label="New (ex VAT)"],.article table td[data-label="Used (ex VAT)"] { font-weight:700; color:var(--green); }
}
@media(max-width:700px) {
 .article table td[data-label="Horsepower"] { grid-column:1/-1; display:flex; gap:9px; align-items:baseline; font-size:14px; color:var(--ink-2); }
 .article table td[data-label="Horsepower"]::before { margin:0; }
 .article table td[data-label="New (ex VAT)"],.article table td[data-label="Used (ex VAT)"] { font-size:14px; font-variant-numeric:tabular-nums; }
}

/* Verified case-study customer location, readable over every hero scene. */
.hero-overlay .case-location { color: var(--green); background: var(--sand); width: fit-content; padding: 4px 8px; }

/* Related case studies: four desktop cards, two columns on phones. */
.case-more .ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.case-more .ctiles>.ctile{min-width:0}
.case-more .ctile-t::after{content:"Read case study →"}
@media(max-width:900px){.case-more .ctiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:500px){.case-more .ctile-t{padding:12px}.case-more .ctile-t b{font-size:14px}.case-more .ctile-t i{font-size:12px}.case-more .ctile-t::after{font-size:12px}}

.case-image-cta{padding:20px 0;background:var(--cream);text-align:center}
.case-image-cta .btn{min-width:240px}
.case-image-cta p{margin:10px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:500px){.case-image-cta .btn{width:100%;min-width:0}}

.case-direct-answer{padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.case-direct-answer h2{margin:0 0 14px;font-size:26px;line-height:1.3;text-wrap:balance}
.case-direct-answer p{line-height:1.75}
.case-direct-answer>a{font-size:14px;font-weight:700;text-underline-offset:3px}
@media(max-width:600px){.case-direct-answer h2{font-size:22px}}

.cwaf-case-links{background:#f5f4ee;color:#143024;padding:32px 24px;margin:0}
.cwaf-case-links-inner{max-width:1120px;margin:0 auto;min-width:0}
.cwaf-case-links h2{font:700 26px/1.3 Montserrat,system-ui,sans-serif;color:#143024;margin:0 0 12px}
.cwaf-case-links p{font:400 16px/1.6 system-ui,sans-serif;margin:0 0 20px;color:#344c40}
.cwaf-case-links ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;list-style:none;padding:0;margin:0}
.cwaf-case-links li{margin:0;padding:0;min-width:0;border-top:1px solid #cbd2c7}
.cwaf-case-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;color:#143024;font:600 15px/1.5 system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.cwaf-case-links a::after{content:'→';flex-shrink:0}
.cwaf-case-links a:focus-visible{outline:3px solid #8b630b;outline-offset:3px}
@media(max-width:800px){.cwaf-case-links ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cwaf-case-links{padding:28px 20px}.cwaf-case-links ul{grid-template-columns:1fr}.cwaf-case-links h2{font-size:23px}}

.cwaf-asset-compare{background:#f7f6f0;padding:48px 24px;color:#143024}
.cwaf-asset-compare-inner{max-width:1120px;margin:0 auto;min-width:0}
.cwaf-asset-compare h2{font:700 28px/1.3 Montserrat,system-ui,sans-serif;margin:0 0 16px;color:#143024;text-wrap:balance}
.cwaf-asset-compare .asset-compare-intro{font:400 16px/1.7 system-ui,sans-serif;margin:0 0 24px;max-width:840px;color:#344c40}
.cwaf-asset-compare table{width:100%;min-width:0!important;table-layout:fixed;border-collapse:collapse;margin:0;background:transparent}
.cwaf-asset-compare th,.cwaf-asset-compare td{padding:16px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid #cbd2c7;font:400 15px/1.6 system-ui,sans-serif;color:#143024;overflow-wrap:anywhere}
.cwaf-asset-compare thead th{background:#143024;color:#fff;font-weight:700;font-size:14px}
.cwaf-asset-compare tbody th{font-weight:700;width:20%}
.cwaf-asset-compare .asset-compare-source{font:400 13px/1.6 system-ui,sans-serif;color:#41584b;margin:20px 0 0}
.cwaf-asset-compare .asset-compare-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.cwaf-asset-compare{padding:32px 20px}.cwaf-asset-compare h2{font-size:24px}.cwaf-asset-compare table,.cwaf-asset-compare tbody{display:block;table-layout:auto}.cwaf-asset-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cwaf-asset-compare tbody tr{display:block;padding:20px 0;border-top:2px solid #b38113}.cwaf-asset-compare tbody th,.cwaf-asset-compare tbody td{display:block;width:auto;padding:0 0 14px;border:0}.cwaf-asset-compare tbody th{font-size:18px}.cwaf-asset-compare tbody td::before{content:attr(data-label);display:block;font-weight:700;font-size:12px;margin:0 0 4px}.cwaf-asset-compare tbody td:last-child{padding-bottom:0}}

@media(max-width:700px){.cwaf-asset-compare thead tr,.cwaf-asset-compare thead th{position:absolute;width:1px!important;min-width:0!important;max-width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* The `[data-price-research="2026-10-31"]` phone block that used to sit here
   has gone. It stacked the machine table on 16 pages only; the rules in the
   .wp-cost section now do that for all of them. Leaving it would also have
   reached the finance table that shares those sections and printed an empty
   label box above every answer, because it selects on `table` rather than on
   a class. */

/* Asking-price column in the buying comparisons, added 31 October 2026. Every
   figure is already published in a cost block; nothing is researched here. */
.cwaf-asset-compare .ac-answer{font:400 17.5px/1.6 Montserrat,system-ui,sans-serif;color:var(--ink);margin:0 0 14px;max-width:62ch}
.cwaf-asset-compare .ac-range{display:block;font-weight:700;font-size:16px;color:var(--green);white-space:nowrap}
.cwaf-asset-compare .ac-from{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.cwaf-asset-compare .ac-from a{color:var(--green)}
.cwaf-asset-compare .ac-nop{color:var(--muted);font-style:italic}

.wp-cost[data-price-research="2026-10-31"] .cost-table td{font-size:15px;line-height:1.6}

/* One link to the matching Monthly marketplace (tools/monthly_links.py). */
.monthly-link { padding:26px 0; background:#fffcf6; border-top:1px solid rgba(20,48,36,.12); }
.ml-in { display:flex; gap:18px 26px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ml-in p { margin:0; flex:1 1 360px; color:var(--ink-2); font-size:16px; line-height:1.55; }
.ml-in p b { color:var(--green); }
.ml-btn { flex:0 0 auto; }
@media(max-width:700px) { .monthly-link { padding:22px 0; } .ml-btn { width:100%; justify-content:center; text-align:center; } }
/* Small line under the hero buttons pointing to the matching Monthly site. */
.hero-ml { margin: 14px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.hero-ml a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero-drone .hero-ml { color: #c5d4cc; }
.hero-drone .hero-ml a { color: #fff; text-decoration-color: var(--gold); }
.hero-drone .hero-ml a:hover { color: var(--gold); }
/* Lodge drawer: the two lender rules, stated before anything else. */
.dr-lodge { margin: 0 0 6px; }
.dr-lodge-rule { margin: 0 0 12px; padding: 11px 13px; border-radius: 9px; background: #fff7df;
  border: 1px solid #f0d58c; font-size: 14px; line-height: 1.5; color: var(--ink); }
.dr-lodge-no { color: #6b4b00; font-weight: 600; }