/* ==========================================================================
   FIVE DESIGN DIRECTIONS, 7 Oct 2026: the part every direction shares.
   Loaded after styles.css, only on a direction build (CWM_DIRECTION=a..e), and
   followed by the direction's own sheet. Structure only: every colour, radius,
   face and weight below is a variable the direction sets.
   ========================================================================== */
.dir{
  --d-press:var(--green);          /* the one colour that means "press this" */
  --d-press-ink:#fff;
  --d-press-lift:var(--green-lift);
  --d-tile-r:8px;                  /* tile corner */
  --d-tile-bg:#fff;
  --d-tile-line:var(--rule-2);
  --d-tile-ink:var(--ink);
  --d-tile-sel:var(--green);       /* the picked ring */
  --d-fn-bg:#fff;
  --d-fn-ink:var(--ink);
  --d-fn-muted:var(--ink-muted);
  --d-q-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  --action:var(--d-press);         /* the orange "Get a price" is ours, not his: gone */
  --action-lift:var(--d-press-lift);
  --action-ink:var(--d-press-ink);
}

/* ONE moving thing per direction. The live site's band rise and the stars'
   pop-in are switched off here; each direction adds back its own moment. */
.dir .rv,.dir .rv.is-in{opacity:1!important;transform:none!important;transition:none!important}
.dir .gst--anim .gst__on,.dir .gst--anim svg{animation:none!important}

/* ------------------------------------------------------------------ the fold */
.more{margin-top:.6rem}
.more>summary{cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-weight:600;list-style:none;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .2s var(--ease)}
.more[open]>summary::after{transform:translateY(.1em) rotate(225deg)}
.more__in{padding-top:.4rem}
.more__in>p+p{margin-top:.7rem}

/* ------------------------------------------------------------------ the funnel */
.fn{color:var(--d-fn-ink);position:relative}
.fn fieldset{border:0;margin:0;padding:0;min-width:0}
.fn__step+.fn__step{margin-top:1.6rem}
.dirjs .fn .fn__step+.fn__step{margin-top:0}
.fn__step[hidden],.fn__grp[hidden]{display:none!important}
/* 7 Oct 2026 (speed check, CLS 0.29-0.45): html.dirjs is set in <head>, so the first paint already draws
   what FUNNEL_JS will set (the opening question, its branch, the bar, Back); with no script, the whole form */
.dirjs .fn:not(.fn--js) .fn__step{display:none}
.dirjs .fn[data-fn-start="1"]:not(.fn--js) .fn__step[data-step="1"],
.dirjs .fn[data-fn-start="2"]:not(.fn--js) .fn__step[data-step="2"]{display:block}
.dirjs .fn[data-fn-start="2"]:not(.fn--js) .fn__grp[data-branch="load"]{display:none}
:root:not(.dirjs) .fn__cj,.dirjs .fn__cn{display:none}
.fn__q{display:block;padding:0;margin:0 0 .85rem;font-family:Anybody,AnybodyFallback,sans-serif;
  font-size:var(--d-q-size);line-height:1.08;outline:none}
.fn__bar{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;font-size:.86rem;color:var(--d-fn-muted)}
.fn__prog{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 22%,transparent);overflow:hidden}
.fn__prog>span{display:block;height:100%;width:100%;transform:scaleX(.2);transform-origin:0 50%;background:var(--d-tile-sel);transition:transform .3s var(--ease)}
:root:not(.dirjs) .fn .fn__prog{display:none}
.fn__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (min-width:64rem){.fn__tiles--photo,.fn__tiles--load,.fn__tiles--prop{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fn__tiles--word{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fn__tile{position:relative;display:flex;flex-direction:column;cursor:pointer;min-height:44px;
  background:var(--d-tile-bg);color:var(--d-tile-ink);border:1px solid var(--d-tile-line);border-radius:var(--d-tile-r);
  overflow:hidden;transition:border-color .15s,box-shadow .15s}
.fn__tile:hover{border-color:var(--d-tile-sel)}
.fn__tile:has(.fn__r:checked){border-color:var(--d-tile-sel);box-shadow:0 0 0 2px var(--d-tile-sel)}
.fn__tile:has(.fn__r:focus-visible),.fn__link:has(.fn__r:focus-visible){outline:3px solid var(--d-tile-sel);outline-offset:2px}
/* the radio is real and visible: a round mark in the tile's corner, ticked when picked */
.fn__r{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid currentColor;background:#fff;display:inline-grid;place-content:center;cursor:pointer}
.fn__r::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--d-tile-sel);transform:scale(0);transition:transform .15s}
.fn__r:checked{border-color:var(--d-tile-sel)}
.fn__r:checked::before{transform:scale(1)}
.fn__r:focus{outline:none}
.fn__tile--photo .fn__r,.fn__tile--load .fn__r,.fn__tile--prop .fn__r{position:absolute;top:.5rem;left:.5rem;z-index:2;
  color:#111710;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fn__img{display:block;aspect-ratio:1/1;overflow:hidden;background:#ddd}
.fn__img img{width:100%;height:100%;object-fit:cover}
.fn__t{display:block;padding:.55rem .65rem 0;font-weight:700;line-height:1.2}
.fn__s,.fn__p{display:block;padding:.1rem .65rem .6rem;font-size:.9rem;color:var(--d-fn-muted)}
.fn__p{font-weight:700;color:inherit;font-variant-numeric:tabular-nums}
.fn__tile--load .fn__fig{display:block;aspect-ratio:5/3;background:var(--d-load-bg,#f3f5ef)}
.fn__tile--load .fn__fig img{width:100%;height:100%;object-fit:contain}
.fn__tile--prop .fn__fig{display:grid;place-items:center;aspect-ratio:4/3;background:var(--d-load-bg,#f3f5ef)}
.fn__ico{width:44%;height:auto;max-width:96px}
.fn__tile--word{flex-direction:row;align-items:center;gap:.65rem;padding:.75rem .8rem;min-height:56px}
.fn__tile--word .fn__t{padding:0}
.fn__tile--word .fn__r{color:var(--d-tile-ink)}
.fn__more{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;margin-top:.55rem}
.fn__link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;font-weight:600;
  text-decoration:underline;text-underline-offset:.2em}
.fn__link .fn__r{width:18px;height:18px}
.fn__link .fn__r::before{width:8px;height:8px}
.fn__other{display:block;width:100%;font-size:.95rem}
.dirjs .fn .fn__other{display:none}
.dirjs .fn .fn__other.is-on{display:block}
.fn__other input,.fn__fields input[type=text],.fn__fields input[type=tel]{display:block;width:100%;min-height:48px;margin-top:.3rem;
  padding:.6rem .75rem;font:inherit;border:1px solid var(--d-tile-line);border-radius:min(var(--d-tile-r),10px);background:#fff;color:#14180f}
.fn__h{font-weight:700;margin:0 0 .5rem}
.dirjs .fn .fn__h{display:none}
.fn__grp+.fn__grp{margin-top:1.4rem}
.dirjs .fn .fn__grp+.fn__grp{margin-top:0}
.fn__bigger{margin-top:.6rem}
.fn__bigger>summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:700;
  text-decoration:underline;text-underline-offset:.2em}
.fn__bigger .fn__tiles{margin-top:.4rem}
.fn__tile--sm .fn__t{font-size:.95rem}
.fn__note,.fn__fine{margin:.6rem 0 0;font-size:.9rem;color:var(--d-fn-muted)}
.fn__nav{display:flex;gap:1rem;margin:.8rem 0 0}
:root:not(.dirjs) .fn .fn__nav,:root:not(.dirjs) .fn .fn__next{display:none}
.fn__back,.fn__next{appearance:none;background:none;border:0;padding:0;min-height:44px;font:inherit;font-weight:700;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.fn__fields{display:grid;gap:.75rem}
.fn__fields .field{margin:0}
.fn__fields label{font-weight:600}
.fn__photo input{display:block;margin-top:.35rem;font:inherit;max-width:100%}
.fn__send{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;align-items:stretch}
.fn__go{min-height:52px}
/* (a picked tile's spring is direction B's one moment, in b.css) */

/* ------------------------------------------------------------------ trust strip (named exception 2) */
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem}
.trust li{display:flex;align-items:center;gap:.6rem;line-height:1.2;font-weight:600}
.trust__i{flex:none;width:28px;height:28px}
@media (min-width:64rem){.trust{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ------------------------------------------------------------------ kit pieces */
.k-priced .extras{margin-top:.8rem}
.k-priced .btnrow{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.btnrow{display:flex;flex-wrap:wrap;gap:.6rem}
.sit--fold details>summary{list-style:none;cursor:pointer}
.sit--fold details>summary::-webkit-details-marker{display:none}
.sit--fold details>summary h3::after{content:" +";font-weight:400}
.sit--fold details[open]>summary h3::after{content:" \2212"}
.sit--fold details>p{margin-top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ a DARK footer (A, B)
   The live footer is light since the reskin. On a dark footer every coloured thing inside it
   is held here: links (never the WhatsApp control, whose ink is Meta's), the football line,
   John's quote and its attribution. */
:is(.dir--a,.dir--b) .ftr a:not(.wa){color:#cfd6c9}
:is(.dir--a,.dir--b) .ftr a:not(.wa):hover{color:#fff}
:is(.dir--a,.dir--b) .ftr__clubs{border-top-color:#2a3226}
:is(.dir--a,.dir--b) .ftr__club,:is(.dir--a,.dir--b) .ftr__club b{color:#fff}
:is(.dir--a,.dir--b) .ftr__quote p{color:#e7ebe2}
:is(.dir--a,.dir--b) .ftr__quote figcaption{color:#b9c2b2}
.fn-own{margin:.9rem 0 0;font-size:.92rem}
.fn__hint{display:block;margin-top:.3rem;font-size:.86rem;color:var(--d-fn-muted)}

/* ==========================================================================
   F · JOHN'S OWN SYSTEM, MADE PREMIUM (7 Oct 2026, night). One family, CWMF Sans (a
   renamed Latin subset of Mona Sans, OFL): condensed black for his capitals, normal
   width for the words. The two family names the live sheet sets in 63 places are
   re-declared here after it, so every page takes the new face without a line of its
   markup changing.
   Colour by role: deep green #006800 is "press this" on white; on a dark ground the
   press colour is lime #8fd14f with ink on it (his mock-up's own button); lime is never
   a word on white; WhatsApp keeps its own green and its black. Shapes: buttons 10px,
   cards 16px, the hero card and the funnel 20px, badges and pills round.
   ========================================================================== */
@font-face{font-family:Anybody;src:url(/fonts/dir-f-cwmfsans.woff2) format('woff2');font-weight:400 900;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:Commissioner;src:url(/fonts/dir-f-cwmfsans.woff2) format('woff2');font-weight:400 900;font-stretch:75% 100%;font-style:normal;font-display:swap}
/* width-matched fallbacks (fontTools, 7 Oct night: the real headline and lede strings against Arial) */
@font-face{font-family:AnybodyFallback;src:local('Arial Bold'),local('Arial-BoldMT');font-weight:100 900;
  size-adjust:65.5%;ascent-override:166%;descent-override:49%;line-gap-override:0%}
@font-face{font-family:CommissionerFallback;src:local('Arial'),local('ArialMT');font-weight:100 500;
  size-adjust:104.2%;ascent-override:104.6%;descent-override:30.7%;line-gap-override:0%}
@font-face{font-family:CommissionerFallback;src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 900;
  size-adjust:102%;ascent-override:106.9%;descent-override:31.4%;line-gap-override:0%}

.dir--f{
  --f-night:#07120b; --f-night-2:#0d1f12; --f-strip:#0f2d18; --f-strip-2:#174024;
  --f-deep:#006800; --f-deep-lift:#005400; --f-bright:#5ea21b; --f-lime:#8fd14f; --f-lime-lift:#a3dd68;
  --f-ink:#111a13; --f-ink-2:#414b43; --f-mist:#f1f5ee; --f-mist-2:#e6eee1; --f-line:#d9e1d4;
  --f-r:16px; --f-rb:10px; --f-rc:20px;
  --f-shadow:0 1px 0 rgba(17,26,19,.06),0 22px 44px -30px rgba(11,26,16,.45);
  --f-ease:cubic-bezier(.22,1,.36,1);
  --f-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --d-press:#006800; --d-press-lift:#005400; --d-press-ink:#fff;
  --d-tile-r:14px; --d-tile-line:#cfd8ca; --d-tile-sel:#006800; --d-load-bg:#f1f5ee;
  --d-q-size:clamp(1.55rem,1.15rem + 1.6vw,2.15rem);
  --ink:#111a13; --ink-muted:#414b43; --ground-2:#f1f5ee; --green-hi:#5ea21b;
  --gap:clamp(3rem,6.4vw,5.6rem); --gap-s:clamp(1.6rem,3vw,2.4rem);
}
.dir--f,.dir--f body{font-family:Commissioner,CommissionerFallback,system-ui,sans-serif;font-stretch:100%;color:var(--f-ink);letter-spacing:0}
.dir--f h1,.dir--f h2{font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;text-transform:uppercase;
  letter-spacing:-.004em;line-height:.94;text-wrap:balance}
.dir--f h2{font-size:clamp(2rem,1.35rem + 2.5vw,3.2rem)}
.dir--f h3{font-family:Commissioner,CommissionerFallback,sans-serif;font-stretch:100%;font-weight:750;font-size:1.14rem;line-height:1.2;
  letter-spacing:-.006em;text-transform:none}
.dir--f p{text-wrap:pretty}
.dir--f .num{font-variant-numeric:tabular-nums}
.dir--f a{text-underline-offset:.2em}
.dir--f .btn{border-radius:var(--f-rb);font-weight:750;letter-spacing:0;min-height:48px}
.dir--f .btn--primary{background:var(--f-deep);color:#fff}
.dir--f .wa{border-radius:var(--f-rb);font-weight:750}

/* the section heads the live blocks bring (shead): his uppercase heading, the action link
   as a deep green arrow link, no rule */
.dir--f .shead{border-bottom:0;padding-bottom:0;margin-bottom:var(--gap-s);align-items:flex-end}
.dir--f .shead p{color:var(--f-ink-2);max-width:60ch;margin-top:.6rem}
.dir--f .shead a{color:var(--f-deep);font-weight:750;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.dir--f .more>summary{color:var(--f-deep);font-weight:700}

/* ---------------------------------------------------------------- buttons */
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:.8rem 1.3rem;
  border-radius:var(--f-rb);font-weight:780;font-size:1.04rem;line-height:1.1;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--f-ease),background-color .2s,box-shadow .2s,color .2s}
.f-btn:active{transform:translateY(1px) scale(.99)}
.f-btn:focus-visible{outline:3px solid var(--f-lime);outline-offset:3px}
.f-btn--go{background:var(--f-deep);color:#fff}
.f-btn--go:hover{background:var(--f-deep-lift)}
.f-btn--line{color:var(--f-deep);box-shadow:inset 0 0 0 2px currentColor;background:transparent}
.f-btn--line:hover{background:rgba(0,104,0,.06)}
.f-btn--lime{background:var(--f-lime);color:#0b1a10}
.f-btn--lime:hover{background:var(--f-lime-lift)}
.f-arr{flex:none;transition:transform .25s var(--f-ease)}
a:hover>.f-arr,a:hover .f-svc__t .f-arr{transform:translateX(4px)}
.f-ph{flex:none}
/* on a dark ground the press colour is lime, ink on it */
.f-hero .f-btn--go,.f-cover .f-btn--go{background:var(--f-lime);color:#0b1a10}
.f-hero .f-btn--go:hover,.f-cover .f-btn--go:hover{background:var(--f-lime-lift)}
.f-hero .f-btn--line{color:#fff}
.f-hero .f-btn--line:hover{background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------- chrome */
.dir--f .topbar{background:var(--f-night)}
.dir--f .mast{background:#fff;box-shadow:0 1px 0 var(--f-line)}
.dir--f .mast__in .nav--bar{display:none}
.dir--f .mast__cta{background:transparent;color:var(--f-ink);box-shadow:inset 0 0 0 2px var(--f-ink);border-radius:var(--f-rb)}
.dir--f .mast__cta:hover{background:var(--f-mist)}
.dir--f .callbar{background:var(--f-night)}
.dir--f .callbar a{font-family:Commissioner,CommissionerFallback,sans-serif;font-weight:780}
.dir--f .callbar a.is-call{background:var(--f-lime);color:#0b1a10}
.dir--f .callbar a:last-child{background:var(--f-night);color:#fff;box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
@media (min-width:85.3rem){
  .dir--f .mast__in{display:flex;align-items:center;gap:1.4rem;justify-content:flex-start}
  .dir--f .mast__logo{order:0;flex:none;justify-self:auto}
  .dir--f .mast__in .nav--bar{display:block;order:1;flex:1;border:0;background:none}
  .dir--f .mast__in .nav--bar .wrap{width:auto;margin:0}
  .dir--f .mast__in .nav__l1{flex-wrap:nowrap;justify-content:center;gap:.1rem}
  .dir--f .mast__in .nav__l1>li>a,.dir--f .mast__in .nav summary{font-weight:650;font-size:.97rem;color:var(--f-ink);border-bottom:0;padding:.55rem .7rem;border-radius:8px}
  .dir--f .mast__in .nav__l1>li>a:hover,.dir--f .mast__in .nav summary:hover{background:var(--f-mist);color:var(--f-deep)}
  .dir--f .mast__l{order:2;display:flex;align-items:center;gap:.6rem}
  .dir--f .mast__r{order:3}
  .dir--f .mast__r .menu{display:none}
  .dir--f .f-tel{display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;background:var(--f-deep);color:#fff;
    border-radius:var(--f-rb);padding:.62rem 1rem;min-height:48px;text-decoration:none}
  .dir--f .f-tel small{display:none}
  .dir--f .f-tel span{font-weight:800;font-size:1.02rem;color:#fff}
  .dir--f .f-tel:hover{background:var(--f-deep-lift)}
  .dir--f .mast__l .wa--header{min-height:48px;padding:.6rem 1rem}
}
.dir--f .ftr{background:var(--f-night);color:#b9c4b5;border-top:0}
.dir--f .ftr h2{color:#fff;font-size:1rem;letter-spacing:.01em;border-bottom-color:#1e3324}
.dir--f .ftr img[src*="logo-mast-light"]{content:url(/img/logo-hero-520.png)}
.dir--f .ftr a{color:#e3eade}
.dir--f .ftr__legal{border-top-color:#1e3324}

/* ---------------------------------------------------------------- hero */
.f-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#040c07 0%,#07130b 48%,#0d1f12 100%)}
.f-hero__in{position:relative;z-index:2}
.f-hero__copy{padding:1.6rem 0 1.4rem;max-width:44rem}
.f-h1{margin:0;font-size:clamp(2.9rem,1.1rem + 8.6vw,5.9rem);line-height:.88;letter-spacing:-.006em;color:#fff}
.f-h1__w,.f-h1__g{display:block}
.f-h1__g{color:var(--f-lime)}
.f-h1__r{display:block;margin-top:.55em;font-family:Commissioner,CommissionerFallback,sans-serif;font-stretch:100%;font-weight:750;
  text-transform:none;letter-spacing:-.005em;font-size:clamp(1.12rem,.95rem + .7vw,1.45rem);line-height:1.2;color:#fff}
.f-hero__sub{margin:1rem 0 0;font-weight:780;font-size:clamp(1.12rem,.98rem + .6vw,1.42rem);line-height:1.2;color:#fff}
.f-hero__lede{margin:.55rem 0 0;max-width:34rem;font-size:1.02rem;line-height:1.5;color:rgba(232,240,228,.86)}
.f-hero__lede b,.f-hero__lede .pay{color:#fff;font-weight:780}
.f-hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.f-hero__cta .wa--hero{min-height:54px;padding:.8rem 1.15rem;font-size:1.04rem}
@media (max-width:39.99rem){.f-hide-s{display:none}
  .f-hero--drawn .f-hero__cta,.f-hero--photo .f-hero__cta{display:grid;grid-template-columns:auto auto;justify-content:start;row-gap:.35rem}
  .f-hero--drawn .f-hero__cta .f-btn--line,.f-hero--photo .f-hero__cta .f-btn--line{grid-column:1 / -1;justify-self:start;min-height:44px;padding:.2rem 0;
    box-shadow:none;font-size:.98rem;text-decoration:underline;text-underline-offset:.25em;color:#fff;padding-inline:0!important}
  .f-hero--drawn .f-hero__copy{padding-top:1.3rem}.f-hero--drawn .f-hero__sub{margin-top:.8rem}
  .f-hero--drawn .f-hero__cta{margin-top:1rem;flex-wrap:nowrap}.f-hero--drawn .f-hero__cta .f-btn,.f-hero--drawn .f-hero__cta .wa{padding-inline:.9rem;font-size:1rem}
  .f-hero--drawn .f-hero__proof{margin-top:.9rem}}
.f-hero__proof{margin-top:1.1rem}
.f-hero__proof .gbadge{box-shadow:0 10px 30px -14px rgba(0,0,0,.7)}
/* the drawn hero: the dusk street under the words. On a phone it sits under the buttons,
   zoomed to the house, the crew and the truck, its sky fading into the hero's own. */
.f-hero--drawn{display:flex;flex-direction:column}
.f-hero__art{order:2;position:relative;z-index:1;margin-top:-5.5rem;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.f-hero__art .il--hero{display:block;width:236%;max-width:none;height:auto;margin-left:-104%}
.f-hero--drawn .f-hero__in{order:1}
@media (min-width:48rem){.f-hero__art{margin-top:-8rem}.f-hero__art .il--hero{width:170%;margin-left:-58%}}
@media (min-width:64rem){
  .f-hero--drawn{display:block;min-height:min(46rem,calc(100vh - 7rem))}
  .f-hero__art{position:absolute;inset:auto 0 0 auto;margin:0;width:min(100rem,86vw);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
  .f-hero__art .il--hero{width:100%;margin:0}
  .f-hero--drawn .f-hero__copy{padding:5.2rem 0 6.4rem;max-width:38rem}
  .f-hero--drawn .f-h1{font-size:clamp(4.4rem,1.6rem + 4.4vw,6rem)}
}
/* the photo hero (the second first screen): his mock-up's layout */
.f-hero--photo .f-hero__ph{position:absolute;inset:0;z-index:0}
.f-hero--photo .f-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.f-hero--photo .f-hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,7,.72) 0,rgba(5,12,7,.86) 55%,rgba(5,12,7,.95) 100%)}
.f-hero--photo .f-hero__copy{padding:2rem 0 2.2rem}
@media (min-width:64rem){
  .f-hero--photo{min-height:min(44rem,calc(100vh - 7rem));display:flex;align-items:center}
  .f-hero--photo .f-hero__ph{left:auto;width:62vw}
  .f-hero--photo .f-hero__ph::after{background:linear-gradient(90deg,#07120b 0,rgba(7,18,11,.82) 22%,rgba(7,18,11,.25) 60%,rgba(7,18,11,.05) 100%)}
  .f-hero--photo .f-hero__copy{padding:4rem 0 4.6rem;max-width:38rem}
}
/* the form-first hero (/house-clearance, /get-a-price) */
.f-crumbs ol{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.92rem;font-weight:650;color:rgba(232,240,228,.8)}
.f-crumbs li+li::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:.55rem;border-right:2px solid var(--f-lime);
  border-top:2px solid var(--f-lime);transform:translateY(-.1em) rotate(45deg)}
.f-crumbs a{color:#fff;text-decoration:none}
.f-crumbs a:hover{text-decoration:underline}
.f-hero--form .f-hero__copy{padding:1.3rem 0 1.6rem;max-width:none}
.f-hero--form .f-h1{font-size:clamp(3.1rem,1rem + 9.6vw,6rem)}
.f-get__card--hero{margin-top:1.2rem;background:#fff;color:var(--f-ink);border-radius:var(--f-rc);padding:1.1rem 1rem 1.2rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.f-hero__side{padding-bottom:2.2rem}
.f-hero__frame{border-radius:var(--f-r);overflow:hidden;aspect-ratio:3/2}
.f-hero__frame .il{width:100%;height:100%}
.f-hero__side .f-hero__lede{margin-top:1.1rem}
.f-hero__meta{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.f-hero__meta li{font-size:.86rem;font-weight:700;color:#dfe8da;border:1px solid rgba(143,209,79,.45);border-radius:999px;padding:.32rem .7rem}
.f-hero__side .f-hero__cta .btn--primary{background:var(--f-lime);color:#0b1a10}
.f-hero__side .f-hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
@media (min-width:64rem){
  .f-hero--form .f-hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:start}
  .f-hero--form .f-hero__copy{padding:2.4rem 0 3.4rem}
  .f-hero--form .f-hero__side{padding:5.6rem 0 3.4rem}
  .f-get__card--hero{padding:1.6rem 1.6rem 1.5rem}
}

/* ---------------------------------------------------------------- the strip of reasons */
.f-trust{background:var(--f-strip);color:#fff;padding-block:1.15rem;border-top:1px solid #1b4426}
.f-trust__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.f-trust__list li{padding:.65rem .7rem .65rem 0;font-weight:700;font-size:.93rem;line-height:1.22;gap:.65rem}
.f-trust__list li:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.f-trust__list li:last-child{grid-column:1 / -1}
.f-trust__list .trust__i{width:32px;height:32px;color:var(--f-lime);stroke-width:1.6}
@media (min-width:64rem){
  .f-trust{padding-block:1.5rem}
  .f-trust__list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .f-trust__list li{padding:.2rem 1.2rem;font-size:1rem;box-shadow:none!important}
  .f-trust__list li:last-child{grid-column:auto}
  .f-trust__list li+li{box-shadow:inset 1px 0 0 rgba(255,255,255,.14)!important}
  .f-trust__list .trust__i{width:38px;height:38px}
}

/* ---------------------------------------------------------------- heads */
.f-head{margin-bottom:var(--gap-s);max-width:52rem}
.f-head h2{margin:0}
.f-head__sub{margin:.8rem 0 0;font-size:1.08rem;line-height:1.5;color:var(--f-ink-2);max-width:58ch}
.f-head__sub b,.f-head__sub .success{color:var(--f-deep);font-weight:780}

/* ---------------------------------------------------------------- the service cards */
.f-svcs{padding-block:var(--gap);background:#fff}
.f-svcs__grid{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:40rem){.f-svcs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.f-svcs__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.4rem}}
.f-svc__a{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--f-r);overflow:hidden;color:inherit;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow);transition:transform .35s var(--f-ease),box-shadow .35s var(--f-ease)}
.f-svc__a:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #c9d6c1,0 30px 50px -30px rgba(11,26,16,.55)}
.f-svc__a:focus-visible{outline:3px solid var(--f-deep);outline-offset:3px}
.f-svc__art{display:block;position:relative;aspect-ratio:3/2;background:#e8efe2;overflow:hidden}
.f-svc__art::after,.f-sit__art .ilf::after{content:"";position:absolute;inset:0;background:var(--f-grain);opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.f-svc__art .il{width:100%;height:100%;transition:transform .7s var(--f-ease)}
.f-svc__a:hover .f-svc__art .il{transform:scale(1.025)}
.f-svc__badge{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:58px;margin:-29px 0 0 1.05rem;border-radius:50%;
  background:var(--f-lime);color:#0b3a12;box-shadow:0 0 0 5px #fff}
.f-svc__badge .f-ico{width:28px;height:28px}
.f-svc__t{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem 1.15rem 0;
  font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;text-transform:uppercase;font-size:1.42rem;line-height:1}
.f-svc__t .f-arr{color:var(--f-deep)}
.f-svc__d{display:block;padding:.45rem 1.15rem 1.3rem;color:var(--f-ink-2);font-size:.97rem;line-height:1.48}

/* ---------------------------------------------------------------- reviews, as named cards */
.dir--f .f-revs{background:var(--f-mist);text-align:left;padding-block:var(--gap)}
.dir--f .f-revs .grw__ttl{font-size:clamp(2rem,1.35rem + 2.5vw,3.2rem);text-align:left;margin:0}
.dir--f .f-revs .grw__sum{display:flex;justify-content:flex-start;justify-items:start;align-items:center;flex-wrap:wrap;gap:.5rem 1.1rem;
  margin:1.1rem 0 1.5rem;padding:0;border:0;width:auto}
.dir--f .f-revs .grw__glogo{width:6.4rem}
.dir--f .f-revs .grw__stars--big{font-size:1.7rem;margin:0}
.dir--f .f-revs .grw__based{margin:0;font-weight:700;color:var(--f-ink)}
.dir--f .f-revs .grw__car{width:100%;padding-top:0}
.dir--f .f-revs .grw__track{padding-top:0;gap:.9rem;scroll-padding-inline:0}
.dir--f .f-revs .grev{flex:0 0 88%;scroll-snap-align:start;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;align-items:center;
  align-content:start;background:#fff;border-radius:var(--f-r);box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow);padding:1.3rem 1.25rem 1.45rem;text-align:left}
.dir--f .f-revs .grev__pic{position:relative;top:auto;left:auto;transform:none;grid-row:1 / span 2;width:3.3rem;height:3.3rem}
.dir--f .f-revs .grev__ava{width:3.3rem;height:3.3rem;border:0}
.dir--f .f-revs .grev__g{width:1.35rem;height:1.35rem;padding:.17rem;right:-.3rem;bottom:-.2rem}
.dir--f .f-revs .grev__name{grid-column:2;margin:0;color:var(--f-ink);font-family:Commissioner,CommissionerFallback,sans-serif;font-weight:780;font-size:1.06rem}
.dir--f .f-revs .grev__date{grid-column:2;margin:.1rem 0 0;font-size:.88rem}
.dir--f .f-revs .grev .grw__stars{grid-column:1 / -1;margin-top:.9rem;font-size:1.15rem}
.dir--f .f-revs .grev p{grid-column:1 / -1;max-width:none;margin:.55rem 0 0;font-size:1.02rem;line-height:1.56;color:var(--f-ink);text-align:left}
.dir--f .f-revs .grw__line,.dir--f .f-revs .grw__note,.dir--f .f-revs .grw__act{text-align:left;max-width:60ch;margin-inline:0}
@media (min-width:64rem){
  .dir--f .f-revs .grw__track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem;overflow:visible;align-items:stretch}
  .dir--f .f-revs .grev{grid-column:span 2;flex:none}
  .dir--f .f-revs .grev:nth-child(4),.dir--f .f-revs .grev:nth-child(5){grid-column:span 3}
  .dir--f .f-revs .grw__nav{display:none}
}

/* ---------------------------------------------------------------- the funnel */
.f-get{padding-block:var(--gap);background:#fff}
.f-get__card{max-width:68rem;margin-inline:auto;border-radius:var(--f-rc);background:#fff;box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow);
  padding:1.3rem 1rem 1.4rem}
.f-get__head h2{margin:0}
.f-get__head p{margin:.6rem 0 1.1rem;color:var(--f-ink-2)}
@media (min-width:64rem){.f-get__card{padding:2.2rem 2.4rem 2rem}
  .f-get__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}.f-get__head p{margin:0 0 1.2rem;max-width:30rem}}
.dir--f .fn__q{font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;text-transform:uppercase;letter-spacing:0}
.dir--f .fn__tile{border-radius:var(--d-tile-r);box-shadow:0 1px 0 rgba(17,26,19,.05)}
.dir--f .fn__tile--photo .fn__t{font-weight:800;font-size:1rem}
.dir--f .fn__img--art{background:#e8efe2;position:relative}
.dir--f .fn__img--art .il{width:100%;height:100%}
.dir--f .fn__img--art::after{content:"";position:absolute;inset:0;background:var(--f-grain);opacity:.28;mix-blend-mode:multiply;pointer-events:none}
.dir--f .fn__tile--photo:hover .fn__img--art .il{transform:scale(1.04)}
.dir--f .fn__img--art .il{transition:transform .5s var(--f-ease)}
.dir--f .fn__go{background:var(--f-deep);color:#fff;border-radius:var(--f-rb)}
.dir--f .fn__tile--prop .fn__fig,.dir--f .fn__tile--load .fn__fig{background:var(--f-mist)}
.dir--f .fn__ico{color:var(--f-deep)}
.dir--f .fn .more--strip,.dir--f .f-get .more--strip{margin-top:1.2rem;border-top:1px solid var(--f-line);padding-top:.4rem}
.dir--f .fn-own{margin:.6rem 0 0;font-size:.95rem}

/* ---------------------------------------------------------------- before and after, his pills */
.f-pair{padding-block:var(--gap);background:#fff}
.f-pair__in{display:grid;gap:1.6rem}
.f-pair h2{margin:0}
.f-pair__p{margin:.9rem 0 0;font-size:1.06rem;line-height:1.55;color:var(--f-ink-2);max-width:56ch}
.f-ticks__h{margin:1.4rem 0 0;font-size:1.02rem;font-weight:780;color:var(--f-ink)}
.f-ticks{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.7rem}
.f-ticks li{position:relative;padding-left:2.2rem;font-size:1.02rem;line-height:1.4;font-weight:550}
.f-ticks li::before{content:"";position:absolute;left:0;top:-.05rem;width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--f-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/62% no-repeat}
.f-pair__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.f-pair__ph{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-content:start}
.f-pair__ph figure{position:relative;margin:0;border-radius:var(--f-r);overflow:hidden;aspect-ratio:3/4;background:var(--f-mist)}
.f-pair__ph img{width:100%;height:100%;object-fit:cover}
.f-pill{position:absolute;z-index:2;left:50%;bottom:.8rem;transform:translateX(-50%);padding:.42rem 1.1rem;border-radius:9px;
  font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;
  color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.f-pill--b{background:#111a13}
.f-pill--a{background:var(--f-deep)}
.f-pair__cap{grid-column:1 / -1;font-size:.88rem;color:var(--f-ink-2)}
@media (min-width:64rem){.f-pair__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.6rem;align-items:center}}

/* ---------------------------------------------------------------- the situations, each drawn */
.f-which{padding-block:var(--gap);background:var(--f-mist)}
.f-which__grid{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
@media (min-width:40rem){.f-which__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.f-which__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.4rem}}
.f-sit{background:#fff;border-radius:var(--f-r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow);display:flex;flex-direction:column}
.f-sit__art .ilf{aspect-ratio:3/2}
.f-sit__art .il{width:100%;height:100%}
.f-sit__t{padding:1.1rem 1.2rem 1.4rem}
.f-sit .sit__k{display:block;font-size:.85rem;font-weight:780;color:var(--f-deep);margin-bottom:.3rem}
.f-sit h3{margin:0;font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;text-transform:uppercase;font-size:1.5rem;line-height:1}
.f-sit p{margin:.6rem 0 0;color:var(--f-ink-2);font-size:.98rem;line-height:1.5}
.f-which__cta{margin:var(--gap-s) 0 0}

/* ---------------------------------------------------------------- coverage */
.f-cover{background:var(--f-strip);color:#fff;padding-block:var(--gap);position:relative;overflow:hidden}
.f-cover .wrap{display:grid;gap:1.6rem}
.f-cover h2{margin:0;color:#fff}
.f-cover h2 span{color:var(--f-lime);display:block}
.f-cover__t p{color:rgba(230,238,224,.86);max-width:44ch;margin:1rem 0 0;line-height:1.55}
.f-cover__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem!important}
.f-cover__art{border-radius:var(--f-r);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.f-cover__art .il{width:100%;height:auto}
@media (min-width:64rem){.f-cover .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:3rem}}
.dir--f .f-where{background:#fff}

/* ---------------------------------------------------------------- the live blocks, in this skin */
.dir--f .band--inset{background:var(--f-mist)}
.dir--f .k-loads{background:var(--f-mist)}
.dir--f .loads{gap:1rem;border:0}
.dir--f .load{border:0!important;border-radius:var(--f-r);box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow);overflow:hidden}
.dir--f .records{gap:1.2rem;border:0}
.dir--f .record{border:0!important;border-radius:var(--f-r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow)}
.dir--f .record__after{position:relative}
.dir--f .record__after::before{content:"After";position:absolute;z-index:2;left:.7rem;top:.7rem;padding:.32rem .8rem;border-radius:8px;
  background:var(--f-deep);color:#fff;font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;font-size:1rem;text-transform:uppercase}
.dir--f .record__tag{background:#111a13;color:#fff;border-radius:7px;font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;text-transform:uppercase}
.dir--f .steps__van,.dir--f .k-wa .van__wrap{display:none}
.dir--f .steps li::before{color:var(--f-deep);font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900}
.dir--f .band--dark{background:var(--f-night)}
.dir--f .k-wa h2{color:#fff}
.dir--f .sits{gap:1rem;border:0}
.dir--f .sit{border:0!important;border-radius:var(--f-r);box-shadow:inset 0 0 0 1px var(--f-line)}
.dir--f .quote{background:var(--f-mist);border:0}
.dir--f .quote .card{border-radius:var(--f-rc);border:0;box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow)}
.dir--f .faq{border:0;background:transparent;display:grid;gap:.6rem}
.dir--f .faq details{background:#fff;border:0!important;border-radius:12px;box-shadow:inset 0 0 0 1px var(--f-line)}
.dir--f .towns{gap:.8rem;border:0}
.dir--f .town{border:0!important;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--f-line)}
.dir--f .chips li{border-radius:999px}
.dir--f .evid{border-radius:var(--f-r);overflow:hidden}
.dir--f input,.dir--f select,.dir--f textarea{border-radius:10px}

/* ---------------------------------------------------------------- what comes out (spots) */
.f-out{padding-block:var(--gap);background:#fff}
.f-out__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (min-width:48rem){.f-out__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}}
.f-out__i{display:flex;flex-direction:column;gap:.55rem}
.f-out__art{display:block;aspect-ratio:6/5;border-radius:var(--f-r)}
.f-out__art .il{width:100%;height:100%}
.f-out__t{font-weight:750;font-size:1rem;line-height:1.25}
.dir--f .fn__fig--art{display:block!important;aspect-ratio:4/3;position:relative;overflow:hidden}
.dir--f .fn__fig--art .il{width:100%;height:100%;display:block}
.dir--f .fn__fig--art::after{content:"";position:absolute;inset:0;background:var(--f-grain);opacity:.26;mix-blend-mode:multiply;pointer-events:none}
/* the road on a phone: zoomed to the middle stretch (Harlow to Chelmsford), the names set larger */
@media (max-width:47.99rem){
  .f-cover__art{overflow:hidden}
  .f-cover__art .il--route{width:200%;max-width:none;margin-left:-54%}
  .f-cover__art .il--route text{font-size:23px}
}
/* the photo option on a phone: his photograph under the buttons, its top fading into the hero */
@media (max-width:63.99rem){
  .f-hero--photo{display:flex;flex-direction:column}
  .f-hero--photo .f-hero__in{order:1}
  .f-hero--photo .f-hero__ph{position:relative;order:2;inset:auto;height:clamp(15rem,62vw,26rem);margin-top:-3rem}
  .f-hero--photo .f-hero__ph::after{background:linear-gradient(180deg,#07130b 0,rgba(7,19,11,.35) 34%,rgba(7,19,11,0) 60%)}
}

/* ==========================================================================
   F · THE DRAWINGS IN MOTION (7 Oct 2026, night). illo.py draws them; this moves them.
   Rules: transform and opacity only; each drawing plays ONCE as it scrolls into view and
   then rests (a lamp may breathe or a tree sway for a few seconds, then stops); frame 0
   of every move is itself a finished picture; reduced motion = the still drawing.
   html.ilx is set in <head> only when motion is allowed and IntersectionObserver exists;
   without it nothing here applies and every drawing is simply drawn.
   ========================================================================== */
.il{display:block;width:100%;height:auto}
.il [class^="a-"],.il [class*=" a-"]{transform-box:fill-box}
:root{--il-ease:cubic-bezier(.22,1,.36,1);--il-soft:cubic-bezier(.45,0,.2,1)}

@media (prefers-reduced-motion:no-preference){
  .ilx .il .a-drive{animation:ilDrive 1.5s var(--il-ease) var(--d,0s) both}
  .ilx .il .a-lift{animation:ilLift .7s var(--il-ease) calc(var(--d,0s) + 1.15s) both}
  .ilx .il .a-housedoor{transform-origin:0 100%;animation:ilHouseDoor .9s var(--il-ease) .15s both}
  .ilx .il .a-walk{animation:ilWalk 1.9s var(--il-soft) .55s both}
  .ilx .il .a-walk2{animation:ilWalk2 1.8s var(--il-soft) .9s both}
  .ilx .il .a-pop{animation:ilPop .6s var(--il-ease) var(--d,0s) both}
  .ilx .il .a-sway{transform-origin:50% 100%;animation:ilSway 3.2s var(--il-soft) .4s 2 both}
  .ilx .il .a-shed{transform-origin:0 50%;animation:ilShed 1.1s var(--il-ease) .2s both}
  .ilx .il .a-roll{animation:ilRoll 1.4s var(--il-ease) .7s both}
  .ilx .il .a-glow{animation:ilGlow 3.6s var(--il-soft) .2s 3 alternate both}
  .ilx .il .a-keep{animation:ilKeep 2.2s var(--il-soft) .5s both}
  .ilx .il .a-light{animation:ilLight 2.4s var(--il-soft) both}
  /* nothing moves until the drawing is on screen */
  .ilx .il:not(.is-play) [class^="a-"],.ilx .il:not(.is-play) [class*=" a-"]{animation-play-state:paused}
}
@keyframes ilDrive{from{transform:translateX(96px)}to{transform:none}}
@keyframes ilLift{from{transform:translateY(-34px)}to{transform:none}}
@keyframes ilHouseDoor{from{transform:none}to{transform:scaleX(.3)}}
@keyframes ilWalk{0%{transform:translate(-64px,0)}20%{transform:translate(-50px,-1.5px)}40%{transform:translate(-36px,0)}
  60%{transform:translate(-22px,-1.5px)}80%{transform:translate(-9px,0)}100%{transform:none}}
@keyframes ilWalk2{0%{transform:translate(-92px,0)}25%{transform:translate(-68px,-1.5px)}50%{transform:translate(-44px,0)}
  75%{transform:translate(-20px,-1.5px)}100%{transform:none}}
@keyframes ilPop{from{transform:translateY(-10px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes ilSway{0%,100%{transform:none}30%{transform:rotate(2.2deg)}70%{transform:rotate(-1.6deg)}}
@keyframes ilShed{from{transform:none}to{transform:scaleX(-.42)}}
@keyframes ilRoll{from{transform:translateX(-92px)}to{transform:none}}
@keyframes ilGlow{from{opacity:.55}to{opacity:1}}
@keyframes ilKeep{from{transform:translateY(-58px)}to{transform:none}}
@keyframes ilLight{from{opacity:.4}to{opacity:1}}

/* the print grain: one tiny generated noise tile over every drawing, the same everywhere,
   so the set reads as printed rather than vector-flat (no request: a data URI) */
.ilf{position:relative;overflow:hidden;isolation:isolate;background:#e8efe2}
.ilf::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.32;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .ilx .il .a-tick{transform-origin:0 100%;animation:ilTick .45s var(--il-ease) var(--d,0s) both}
  .ilx .il .a-board{animation:ilBoard 1s var(--il-soft) var(--d,0s) both}
  .ilx .il .a-shutter{animation:ilShutter 1.6s var(--il-ease) .3s both}
  .ilx .il .a-keys{animation:ilKeys 1.4s var(--il-soft) .6s both}
  .ilx .il .a-walkl{animation:ilWalkL 1.9s var(--il-soft) .5s both}
  .ilx .il .a-carry{animation:ilCarry 2s var(--il-soft) .4s both}
  .ilx .il .a-ladder{animation:ilLadder 1.3s var(--il-ease) .2s both}
  .ilx .il .a-lower{animation:ilLower 1.5s var(--il-soft) 1.2s both}
  .ilx .il:not(.is-play) .a-tick,.ilx .il:not(.is-play) .a-board,.ilx .il:not(.is-play) .a-shutter,.ilx .il:not(.is-play) .a-keys,
  .ilx .il:not(.is-play) .a-walkl,.ilx .il:not(.is-play) .a-carry,.ilx .il:not(.is-play) .a-ladder,.ilx .il:not(.is-play) .a-lower{animation-play-state:paused}
}
@keyframes ilTick{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes ilBoard{from{transform:none;opacity:1}to{transform:translate(70px,6px);opacity:0}}
@keyframes ilShutter{from{transform:none}to{transform:translateY(-92%)}}
@keyframes ilKeys{from{transform:translate(-14px,2px)}to{transform:none}}
@keyframes ilWalkL{0%{transform:translate(60px,0)}25%{transform:translate(45px,-1.5px)}50%{transform:translate(30px,0)}75%{transform:translate(15px,-1.5px)}100%{transform:none}}
@keyframes ilCarry{0%{transform:translate(-50px,0)}25%{transform:translate(-36px,-1.2px)}50%{transform:translate(-24px,0)}75%{transform:translate(-11px,-1.2px)}100%{transform:none}}
@keyframes ilLadder{from{transform:translateY(-82%)}to{transform:none}}
@keyframes ilLower{from{transform:translateY(-70px)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .ilx .il .a-pin{animation:ilPin .6s var(--il-ease) var(--d,0s) both}
  .ilx .il .a-route{animation:ilRoute 2.6s var(--il-soft) .3s both}
  .ilx .il:not(.is-play) .a-pin,.ilx .il:not(.is-play) .a-route{animation-play-state:paused}
}
@keyframes ilPin{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
@keyframes ilRoute{from{transform:translateX(-96px)}to{transform:none}}
.ilf--dark{background:#0e2a16}
.ilf--dark::after{opacity:.18}

/* ==========================================================================
   F VARIANTS + THE HOUSE CLEARANCE PAGES (9 Oct 2026). Loaded after f.css and illo.css.
   .dir--f      the new page components (hc-*), in F's look, for every F build
   .fv          motion for the variants: one drawing at a time (fv.py QUEUE_JS), every move
                inside 1.6 s, nothing loops, and the last frame is what a visitor with motion
                off or scripting off sees
   .fv1-.fv4    PROOF, DRAWN + PROOF, DAYLIGHT, NIGHT GREEN
   ========================================================================== */

/* ---------------------------------------------------------------- motion: the new move */
.dir--f .il .a-out{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ilx .il .a-out{animation:ilOut .5s var(--il-ease) var(--d,0s) both}
  .ilx .il:not(.is-play) .a-out{animation-play-state:paused}
}
@keyframes ilOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(18px)}}

/* ---------------------------------------------------------------- motion: the variants
   The four F moves that ended away from their drawn state rest at their end, so the still
   picture is the last frame; every other move already ends where it is drawn. */
.fv .il .a-housedoor{transform-origin:0 100%;transform:scaleX(.3)}
.fv .il .a-shed{transform-origin:0 50%;transform:scaleX(-.42)}
.fv .il .a-board{transform:translate(70px,6px);opacity:0}
.fv .il .a-shutter{transform:translateY(-92%)}
@media (prefers-reduced-motion:no-preference){
  .fv.ilx .il .a-drive,.ilx .fv .il .a-drive{animation-duration:.95s;animation-delay:calc(var(--d,0s) * .6)}
  .ilx .fv .il .a-lift{animation-duration:.45s;animation-delay:calc(var(--d,0s) * .6 + .85s)}
  .ilx .fv .il .a-housedoor{animation-duration:.55s;animation-delay:.1s}
  .ilx .fv .il .a-walk{animation-duration:1.05s;animation-delay:.3s}
  .ilx .fv .il .a-walk2{animation-duration:1s;animation-delay:.5s}
  .ilx .fv .il .a-pop{animation-duration:.4s;animation-delay:calc(var(--d,0s) * .6)}
  .ilx .fv .il .a-sway{animation-duration:1.3s;animation-delay:.2s;animation-iteration-count:1}
  .ilx .fv .il .a-shed{animation-duration:.7s;animation-delay:.1s}
  .ilx .fv .il .a-roll{animation-duration:.9s;animation-delay:.4s}
  .ilx .fv .il .a-glow{animation-duration:1.3s;animation-delay:.1s;animation-iteration-count:1;animation-direction:normal}
  .ilx .fv .il .a-keep{animation-duration:1.15s;animation-delay:.25s}
  .ilx .fv .il .a-light{animation-duration:1.4s}
  .ilx .fv .il .a-tick{animation-duration:.35s;animation-delay:calc(var(--d,0s) * .6)}
  .ilx .fv .il .a-board{animation-duration:.6s;animation-delay:calc(var(--d,0s) * .6)}
  .ilx .fv .il .a-shutter{animation-duration:1s;animation-delay:.2s}
  .ilx .fv .il .a-keys{animation-duration:.9s;animation-delay:.3s}
  .ilx .fv .il .a-walkl{animation-duration:1.1s;animation-delay:.3s}
  .ilx .fv .il .a-carry{animation-duration:1.15s;animation-delay:.2s}
  .ilx .fv .il .a-ladder{animation-duration:.8s;animation-delay:.1s}
  .ilx .fv .il .a-lower{animation-duration:.8s;animation-delay:.7s}
  .ilx .fv .il .a-pin{animation-duration:.4s;animation-delay:calc(var(--d,0s) * .6)}
  .ilx .fv .il .a-route{animation-duration:1.4s;animation-delay:.1s}
  .ilx .fv .il .a-out{animation-duration:.45s}
}

/* ---------------------------------------------------------------- shared frames */
.dir--f .fv-frame{border-radius:var(--f-r);overflow:hidden;aspect-ratio:3/2}
.dir--f .fv-frame .il{width:100%;height:100%;display:block}
.dir--f .fv-frame .il--garage,.dir--f .fv-frame .il--empties{aspect-ratio:3/2}
.dir--f .ilf.fv-frame:has(.il[viewBox="0 0 240 200"]){aspect-ratio:6/5}

/* ---------------------------------------------------------------- the pages' pieces (F look) */
.dir--f .hc-h1sub{margin:.55rem 0 0;font-weight:780;font-size:clamp(1.12rem,.95rem + .7vw,1.45rem);line-height:1.2;color:#fff}
.dir--f .hc-talk{margin:.9rem 0 0;font-size:.98rem;color:rgba(232,240,228,.86)}
.dir--f .hc-lede{background:#fff;padding-block:1.6rem 0}
.dir--f .hc-lede p{margin:0;max-width:44rem;font-size:1.12rem;line-height:1.55;color:var(--f-ink)}
.dir--f .hc-ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0}
.dir--f .hc-ctas .wa{min-height:54px;padding:.8rem 1.15rem;font-size:1.04rem}

/* the Professional block */
.dir--f .hc-pro{padding-block:var(--gap);background:#fff}
.dir--f .hc-pro__in{display:grid;gap:1.6rem}
.dir--f .hc-pro h2{margin:0}
.dir--f .hc-pro__lede{margin:.9rem 0 0;font-size:1.12rem;line-height:1.5;color:var(--f-ink);font-weight:600;max-width:52ch}
.dir--f .hc-pro__p{margin:.7rem 0 0;font-size:1.04rem;line-height:1.55;color:var(--f-ink-2);max-width:56ch}
.dir--f .hc-pro__v{display:grid;align-content:start}
@media (min-width:64rem){.dir--f .hc-pro__in{grid-template-rows:auto 1fr}.dir--f .hc-pro__t{grid-column:1;grid-row:1}.dir--f .hc-pro__t2{grid-column:1;grid-row:2}.dir--f .hc-pro__v{grid-column:2;grid-row:1 / span 2}}
@media (min-width:64rem){.dir--f .hc-pro__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.6rem;align-items:center}}

/* a real pair, his pills */
.dir--f .hc-pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.dir--f .hc-pair figure{position:relative;margin:0;border-radius:var(--f-r);overflow:hidden;aspect-ratio:3/4;background:var(--f-mist)}
.dir--f .hc-pair img{width:100%;height:100%;object-fit:cover}
.dir--f .hc-pair__cap{grid-column:1 / -1;margin:.2rem 0 0;font-size:.88rem;line-height:1.4;color:var(--f-ink-2)}
.dir--f .hc-single{margin:0}
.dir--f .hc-single img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--f-r)}
.dir--f .hc-single figcaption{margin-top:.45rem;font-size:.88rem;color:var(--f-ink-2)}

/* what customers said about the crew (his "friendly, professional team") */
.dir--f .hc-said{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.5rem}
.dir--f .hc-said li{font-size:.98rem;line-height:1.4;color:var(--f-ink)}
.dir--f .hc-said q{font-weight:750;quotes:"\201C" "\201D"}
.dir--f .hc-said a{color:var(--f-ink-2);font-size:.88rem;text-decoration:underline;text-underline-offset:.2em}

/* real jobs */
.dir--f .hc-jobs{padding-block:var(--gap);background:var(--f-mist)}
.dir--f .hc-jobs__grid{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
@media (min-width:48rem){.dir--f .hc-jobs__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dir--f .hc-job{background:#fff;border-radius:var(--f-r);padding:.55rem .55rem .8rem;box-shadow:inset 0 0 0 1px var(--f-line),var(--f-shadow)}
.dir--f .hc-job__ph{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.dir--f .hc-job__ph figure{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--f-mist-2)}
.dir--f .hc-job__ph img{width:100%;height:100%;object-fit:cover}
.dir--f .hc-job .f-pill{font-size:.92rem;padding:.3rem .7rem;bottom:.5rem}
.dir--f .hc-job__t{margin:.65rem .3rem 0;font-weight:780;font-size:1.04rem}
.dir--f .hc-jobs__more{margin:1.2rem 0 0}
.dir--f .hc-jobs__more a,.dir--f .hc-faq__more a{color:var(--f-deep);font-weight:750}

/* body sections, each with its own picture */
.dir--f .hc-sec{padding-block:clamp(2.2rem,4.6vw,4rem);background:#fff}
.dir--f .hc-sec + .hc-sec{padding-top:0}
.dir--f .hc-sec__in{display:grid;gap:1.2rem}
.dir--f .hc-sec h2{margin:0 0 .8rem}
.dir--f .hc-sec p{margin:.6rem 0 0;font-size:1.04rem;line-height:1.6;color:var(--f-ink-2);max-width:62ch}
.dir--f .hc-sec--long p{color:var(--f-ink)}
.dir--f .hc-sec__v{max-width:34rem}
@media (min-width:64rem){.dir--f .hc-sec__in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3.4rem;align-items:start}
  .dir--f .hc-sec__t{grid-column:1;grid-row:1}.dir--f .hc-sec__v{grid-column:2;grid-row:1}
  .dir--f .hc-sec:nth-of-type(even) .hc-sec__in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .dir--f .hc-sec:nth-of-type(even) .hc-sec__t{grid-column:2;grid-row:1}
  .dir--f .hc-sec:nth-of-type(even) .hc-sec__v{grid-column:1;grid-row:1}}
.dir--f .hc-items{margin:1rem 0 0;display:grid;gap:.6rem}
.dir--f .hc-items div{border-radius:12px;padding:.85rem 1rem;background:var(--f-mist)}
.dir--f .hc-items dt{font-weight:780;font-size:1.02rem}
.dir--f .hc-items dd{margin:.25rem 0 0;color:var(--f-ink-2);line-height:1.5}

/* how it goes */
.dir--f .hc-how{padding-block:var(--gap);background:var(--f-mist)}
.dir--f .hc-how__in{display:grid;gap:1.4rem}
.dir--f .hc-how h2{margin:0}
.dir--f .hc-how__l{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem}
.dir--f .hc-how__l li{display:flex;align-items:center;gap:.8rem;font-weight:700;font-size:1.06rem}
.dir--f .hc-how__l b{display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--f-deep);color:#fff;
  font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;font-size:1.2rem}
@media (min-width:64rem){.dir--f .hc-how__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:center}.dir--f .hc-how__t{grid-column:1;grid-row:1}.dir--f .hc-how__v{grid-column:2;grid-row:1}}

/* how it is priced */
.dir--f .hc-priced{padding-block:var(--gap);background:var(--f-mist)}
.dir--f .hc-priced__in{display:grid;gap:1.4rem}
.dir--f .hc-priced h2{margin:0}
.dir--f .hc-note{margin:.8rem 0 0;color:var(--f-ink-2);line-height:1.55;max-width:58ch}
.dir--f .hc-note a{color:var(--f-deep);font-weight:750}
.dir--f .hc-chips{margin-top:1rem}
.dir--f .hc-loads{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (min-width:48rem){.dir--f .hc-loads{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dir--f .hc-load{background:#fff;border-radius:14px;padding:.6rem .7rem .8rem;box-shadow:inset 0 0 0 1px var(--f-line)}
.dir--f .hc-load__fig{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--f-mist)}
.dir--f .hc-load__fig img,.dir--f .hc-load__fig svg{width:100%;height:100%;object-fit:contain}
.dir--f .hc-load__n{display:block;margin-top:.45rem;font-weight:780}
.dir--f .hc-load__p{display:block;font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;font-size:1.5rem;color:var(--f-deep)}
.dir--f .hc-itemlist{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0;max-width:34rem}
.dir--f .hc-itemlist li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--f-line)}
.dir--f .hc-itemlist b{font-variant-numeric:tabular-nums;color:var(--f-deep)}
@media (min-width:64rem){.dir--f .hc-priced__in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3rem;align-items:center}.dir--f .hc-priced__t{grid-column:1;grid-row:1}.dir--f .hc-priced__art{grid-column:2;grid-row:1}}

/* where it goes */
.dir--f .hc-where{padding-block:var(--gap);background:#fff}
.dir--f .hc-where__in{display:grid;gap:1.2rem}
.dir--f .hc-where h2{margin:0}
.dir--f .hc-where p{margin:.7rem 0 0;color:var(--f-ink-2);line-height:1.55;max-width:58ch}
.dir--f .hc-where__v{max-width:20rem}
@media (min-width:64rem){.dir--f .hc-where__in{grid-template-columns:20rem minmax(0,1fr);gap:3rem;align-items:center}}

/* questions */
.dir--f .hc-faq{padding-block:var(--gap);background:#fff}
.dir--f .hc-faq__in{display:grid;gap:1.4rem}
.dir--f .hc-faq h2{margin:0 0 1rem}
.dir--f .hc-faq__v{max-width:26rem}
@media (min-width:64rem){.dir--f .hc-faq__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:start}.dir--f .hc-faq__v{grid-column:1;grid-row:1}.dir--f .hc-faq__t{grid-column:2;grid-row:1}}
.dir--f .hc-faq__more{margin:1rem 0 0}

/* the other pages, the towns, the close */
.dir--f .hc-sibs{padding-block:var(--gap);background:var(--f-mist)}
.dir--f .hc-sibs .f-svc__art .il{width:100%;height:100%}
.dir--f .hc-towns{padding-block:var(--gap);background:#fff}
.dir--f .hc-towns__art{border-radius:var(--f-r);overflow:hidden;margin-bottom:1.4rem;max-width:52rem}
.dir--f .hc-towns__art .il{width:100%;height:auto}
.dir--f .hc-towns .linkcols a{color:var(--f-ink);font-weight:650}
.dir--f .hc-close{padding-block:var(--gap);background:var(--f-strip);color:#fff}
.dir--f .hc-close__in{display:grid;gap:1.4rem}
.dir--f .hc-close h2{margin:0;color:#fff}
.dir--f .hc-close p{color:rgba(230,238,224,.88);margin:.8rem 0 0}
.dir--f .hc-close .f-btn--go{background:var(--f-lime);color:#0b1a10}
.dir--f .hc-close__talk{font-size:.98rem}
.dir--f .hc-close__v{max-width:30rem}
@media (min-width:64rem){.dir--f .hc-close__in{grid-template-columns:minmax(0,1fr) 28rem;gap:3rem;align-items:center}}
@media (max-width:47.99rem){
  .dir--f .hc-towns__art{overflow:hidden}
  .dir--f .hc-towns__art .il--route{width:200%;max-width:none;margin-left:-54%}
  .dir--f .hc-towns__art .il--route text{font-size:23px}
}

/* ==========================================================================
   THE VARIANT HEROES (service pages and /house-clearance)
   ========================================================================== */
.fv-hero{position:relative;isolation:isolate;overflow-x:clip;color:#fff;background:var(--f-strip)}
.fv-hero__in{position:relative;display:grid}
.fv-hero__copy{padding:1.2rem 0 1.6rem;min-width:0}
.fv-hero .f-h1{font-size:clamp(3rem,1rem + 9.4vw,5.6rem)}
.fv-hero__proof{margin:0 0 .9rem}
.fv-hero__promise{margin:.8rem 0 0;font-weight:700;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.3;color:#fff;max-width:36rem}
.fv-hero__cta{display:flex;flex-wrap:nowrap;gap:.55rem;margin-top:1rem}
.fv-hero__cta .f-btn,.fv-hero__cta .wa{min-height:50px;padding:.7rem .95rem;font-size:1rem}
.fv-hero .f-btn--go{background:var(--f-lime);color:#0b1a10}
.fv-hero .f-get__card--hero{margin-top:1.1rem}
.fv-hero .hc-pair__cap,.fv-hero .hc-single figcaption{color:rgba(232,240,228,.82)}
.fv-vis{min-width:0}
@media (max-width:63.99rem){
  .fv-vis{width:100vw;margin-left:calc(50% - 50vw)}
}

/* ---------------- 1 PROOF: his real pair first, plainly, then the words on dark green */
.fv1 .fv-hero{background:linear-gradient(180deg,#0f2d18 0,#0c2614 100%)}
.fv1 .fv-vis--photo{padding:0}
.fv1 .fv-vis--photo .hc-pair--hero{gap:3px;background:#0b1a10}
.fv1 .fv-vis--photo .hc-pair--hero figure{border-radius:0;aspect-ratio:auto;height:clamp(13rem,56vw,19rem)}
.fv1 .fv-vis--photo .hc-pair--hero .hc-pair__cap{padding:.55rem var(--pad) 0;margin:0;font-size:.84rem}
.fv1 .fv-vis--photo .hc-single img{border-radius:0;aspect-ratio:auto;height:clamp(13rem,56vw,19rem)}
.fv1 .fv-vis--photo .hc-single figcaption{padding:.5rem var(--pad) 0;color:rgba(232,240,228,.82)}
.fv1 .fv-vis--drawn .fv-frame{border-radius:0;aspect-ratio:auto;height:clamp(12rem,52vw,18rem)}
.fv1 .fv-hero__proof{margin-top:-.2rem}
@media (min-width:64rem){
  .fv1 .fv-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:3.2rem;align-items:start}
  .fv1 .fv-vis{grid-column:2;grid-row:1;padding:2.6rem 0 2.4rem}
  .fv1 .fv-hero__copy{grid-column:1;grid-row:1;padding:2.4rem 0 2.6rem}
  .fv1 .fv-vis--photo .hc-pair--hero{gap:.7rem;background:none}
  .fv1 .fv-vis--photo .hc-pair--hero figure{border-radius:var(--f-r);height:auto;aspect-ratio:3/4}
  .fv1 .fv-vis--photo .hc-pair--hero .hc-pair__cap{padding:.3rem 0 0}
  .fv1 .fv-vis--photo .hc-single img{border-radius:var(--f-r);height:auto;aspect-ratio:4/3}
  .fv1 .fv-vis--drawn .fv-frame{border-radius:var(--f-r);height:auto;aspect-ratio:3/2}
  .fv1 .fv-hero .f-h1{font-size:clamp(4.2rem,1.6rem + 4vw,5.8rem)}
}

/* ---------------- 2 DRAWN + PROOF: the page's drawing, bright, fading into the dark hero (F's homepage device) */
.fv2 .fv-hero{background:linear-gradient(180deg,#07130b 0%,#0b1d10 60%,#0d1f12 100%)}
.fv2 .fv-vis--fade .fv-fade{position:relative;overflow:hidden;height:clamp(13rem,58vw,20rem);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
.fv2 .fv-vis--fade .fv-fade .il{display:block;width:100%;height:100%}
.fv2 .fv-hero__copy{margin-top:-2.4rem;position:relative;z-index:2}
@media (min-width:64rem){
  .fv2 .fv-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
  .fv2 .fv-vis{grid-column:2;grid-row:1}
  .fv2 .fv-vis--fade .fv-fade{height:auto;aspect-ratio:3/2;border-radius:var(--f-rc);-webkit-mask-image:none;mask-image:none;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(143,209,79,.18)}
  .fv2 .fv-hero__copy{grid-column:1;grid-row:1;margin-top:0;padding:2.6rem 0 2.8rem}
}

/* ---------------- 3 DAYLIGHT: light, airy, the rating above the headline, one press colour */
.fv3{--f-mist:#f3f7ef;--f-mist-2:#e9f0e4}
.fv3 .fv-hero{background:linear-gradient(180deg,#f6f9f3 0,#eef4ea 100%);color:var(--f-ink);text-align:center}
.fv3 .fv-hero__copy{padding:1.5rem 0 .4rem;justify-self:center}
.fv3 .fv-hero__proof{display:flex;justify-content:center}
.fv3 .fv-hero .gbadge{box-shadow:0 0 0 1px var(--f-line),0 12px 26px -16px rgba(11,26,16,.35)}
.fv3 .f-crumbs ol{justify-content:center;color:var(--f-ink-2)}
.fv3 .f-crumbs a{color:var(--f-ink)}
.fv3 .f-crumbs li+li::before{border-color:var(--f-deep)}
.fv3 .fv-hero .f-h1{color:var(--f-ink)}
.fv3 .f-h1__g{color:var(--f-ink);background:linear-gradient(180deg,transparent 0 12%,var(--f-lime) 12% 88%,transparent 88%);
  padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;justify-self:center;display:inline-block}
.fv3 .fv-hero .f-h1__r,.fv3 .hc-h1sub{color:var(--f-ink)}
.fv3 .fv-hero__promise{color:var(--f-ink-2);margin-inline:auto}
.fv3 .fv-vis--day{padding:1rem 0 0}
.fv3 .fv-vis--day .fv-frame{border-radius:0;aspect-ratio:auto;height:clamp(10rem,44vw,22rem);background:transparent}
.fv3 .fv-vis--day .ilf::after{opacity:.18}
.fv3 .fv-hero__form{text-align:left;padding-bottom:1.8rem}
.fv3 .fv-hero__cta{justify-content:center}
.fv3 .fv-hero .f-btn--go{background:var(--f-deep);color:#fff}
.fv3 .fv-hero .f-get__card--hero{box-shadow:0 0 0 1px var(--f-line),0 30px 60px -34px rgba(11,26,16,.4)}
.fv3 .hc-talk{color:var(--f-ink-2);text-align:center}
.fv3 .fv-hero .f-btn--line{color:var(--f-deep)}
@media (min-width:64rem){
  .fv3 .fv-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:center}
  .fv3 .fv-hero__copy{grid-column:1 / -1;max-width:56rem;padding-top:2.4rem}
  .fv3 .fv-vis--day{grid-column:2;grid-row:2;padding:0}
  .fv3 .fv-vis--day .fv-frame{border-radius:var(--f-rc);height:auto;aspect-ratio:3/2}
  .fv3 .fv-hero__form{grid-column:1;grid-row:2;padding-bottom:3rem}
  .fv3 .fv-hero .f-h1{font-size:clamp(4.4rem,1.6rem + 4.4vw,6.2rem)}
}

/* ---------------- 4 NIGHT GREEN: his photograph under a deep green grade, dark throughout */
.fv4{--f-mist:#0e1f14;--f-mist-2:#132a1b;--f-line:#21402b;--f-ink:#eef4ea;--f-ink-2:#bccbb8;--f-shadow:0 1px 0 rgba(0,0,0,.2),0 26px 50px -30px rgba(0,0,0,.8)}
.fv4 .fv-hero{background:#06100a}
.fv4 .fv-vis--grade{position:absolute;inset:0 0 auto 0;height:clamp(24rem,108vw,30rem);overflow:hidden;z-index:0;width:auto;margin:0}
.fv4 .fv-vis--grade picture,.fv4 .fv-vis--grade img,.fv4 .fv-vis--grade .ilf,.fv4 .fv-vis--grade .il{display:block;width:100%;height:100%}
.fv4 .fv-vis--grade img{object-fit:cover;object-position:50% 60%;filter:grayscale(.35) contrast(1.05)}
.fv4 .fv-vis--grade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,16,10,.55) 0,rgba(0,74,20,.45) 35%,rgba(6,16,10,.92) 78%,#06100a 100%);mix-blend-mode:normal}
.fv4 .fv-vis--grade::before{content:"";position:absolute;inset:0;z-index:1;background:#0d4a1c;mix-blend-mode:color;opacity:.55}
.fv4 .fv-vis--gradeart .il{filter:saturate(.7) brightness(.7)}
.fv4 .fv-vis__tag{position:absolute;z-index:2;right:var(--pad);top:.8rem;font-size:.78rem;font-weight:700;color:#dfe8da;
  background:rgba(6,16,10,.6);border:1px solid rgba(143,209,79,.35);border-radius:999px;padding:.22rem .6rem}
.fv4 .fv-hero__in{z-index:2}
.fv4 .fv-hero__copy{padding-top:clamp(9rem,40vw,12rem)}
.fv4 .fv-hero .f-get__card--hero{background:#0b1910;color:var(--f-ink);box-shadow:0 0 0 1px rgba(143,209,79,.45),0 0 40px -10px rgba(143,209,79,.22),0 30px 60px -30px rgba(0,0,0,.9)}
@media (min-width:64rem){
  .fv4 .fv-vis--grade{inset:0 0 0 auto;width:58vw;height:auto}
  .fv4 .fv-vis--grade::after{background:linear-gradient(90deg,#06100a 0,rgba(6,16,10,.86) 18%,rgba(0,74,20,.35) 55%,rgba(6,16,10,.35) 100%)}
  .fv4 .fv-hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:start}
  .fv4 .fv-hero__copy{padding:3rem 0 1rem}
  .fv4 .fv-hero__form{grid-column:1;padding-bottom:3rem}
  .fv4 .fv-vis__tag{top:auto;bottom:1.2rem}
}

.fv3 .fv-house__tail{margin-top:1.2rem;text-align:left}
.fv3 .fv-hero .f-hero__lede{color:var(--f-ink-2)}
.fv3 .fv-hero .f-hero__lede b,.fv3 .fv-hero .f-hero__lede .pay{color:var(--f-ink)}
.fv3 .fv-hero .f-hero__meta li{color:var(--f-ink);border-color:rgba(0,104,0,.35)}
.fv3 .fv-hero .f-hero__cta .btn--primary{background:var(--f-deep);color:#fff}
.fv3 .fv-hero .f-hero__cta .btn--ghost{color:var(--f-deep);border-color:var(--f-deep)}
.fv-house__tail{margin-top:1.4rem}
.fv-house__tail .f-hero__lede{margin:0;max-width:40rem}
.fv-hero .f-hero__meta li{color:#dfe8da}
.fv-hero .f-hero__cta .btn--primary{background:var(--f-lime);color:#0b1a10}
.fv-hero .f-hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}

/* ---------------- F4: lighter grade over the photograph (the job seen), dark everywhere below */
.fv4 .fv-vis--grade img{filter:none}
.fv4 .fv-vis--grade::before{opacity:.38}
.fv4 .fv-vis--grade::after{background:linear-gradient(180deg,rgba(6,16,10,.18) 0,rgba(0,60,18,.22) 30%,rgba(6,16,10,.82) 66%,#06100a 92%)}
.fv4 .fv-vis--gradeart .il{filter:saturate(.8) brightness(.85)}

/* ==========================================================================
   F4 NIGHT GREEN, the whole page dark (tokens first, then F's hard-coded whites)
   ========================================================================== */
.fv4{--ground:#07120b;--ground-2:#0e1f14;--surface:#0b1910;--ink:#eef4ea;--ink-muted:#bccbb8;--rule:#21402b;--rule-2:#4f6b55;
  --d-fn-ink:#eef4ea;--d-fn-muted:#bccbb8;--d-tile-bg:#0f2216;--d-tile-ink:#eef4ea;--d-tile-line:#2b4a33;--d-tile-sel:#8fd14f;--d-load-bg:#0f2216;
  background:#07120b;color:#eef4ea}
.fv4 main,.fv4 .f-svcs,.fv4 .f-get,.fv4 .f-pair,.fv4 .f-out,.fv4 .dir--f .f-where,.fv4 .f-where,.fv4 .hc-pro,.fv4 .hc-sec,.fv4 .hc-where,
.fv4 .hc-faq,.fv4 .hc-towns,.fv4 .hc-lede,.fv4 .band,.fv4 .band--rule,.fv4 .band--inset{background:#07120b;color:#eef4ea}
.fv4 .f-revs,.fv4 .f-which,.fv4 .hc-jobs,.fv4 .hc-how,.fv4 .hc-priced,.fv4 .hc-sibs,.fv4 .k-loads,.fv4 .quote{background:#0b1910;color:#eef4ea}
.fv4 .f-svc__a,.fv4 .f-sit,.fv4 .grev,.fv4 .f-revs .grev,.fv4 .hc-job,.fv4 .hc-load,.fv4 .faq details,.fv4 .load,.fv4 .record,.fv4 .town,.fv4 .sit,.fv4 .quote .card,
.fv4 .f-get__card,.fv4 .hc-items div,.fv4 .evid>div{background:#0e1f14;color:#eef4ea;box-shadow:0 0 0 1px rgba(143,209,79,.28),0 0 30px -14px rgba(143,209,79,.18)}
.fv4 main h1,.fv4 main h2,.fv4 main h3,.fv4 .f-svc__n,.fv4 .f-sit h3,.fv4 .grev__name,.fv4 .grw__ttl,.fv4 .grw__based,.fv4 .hc-job__t,.fv4 .hc-load__n,.fv4 .hc-items dt,.fv4 .f-out__t,.fv4 .fn__q,.fv4 .fn__t{color:#fff}
.fv4 main p,.fv4 main li,.fv4 main dd,.fv4 .f-svc__d,.fv4 .f-sit p,.fv4 .f-head__sub,.fv4 .hc-note,.fv4 .hc-sec p,.fv4 .hc-pro__p,.fv4 .f-pair__p,.fv4 .grev p,.fv4 .grev__date,.fv4 .hc-pair__cap,.fv4 .hc-single figcaption{color:#c9d6c5}
.fv4 .hc-pro__lede,.fv4 .hc-sec--long p,.fv4 .f-ticks li,.fv4 .hc-said li{color:#eef4ea}
.fv4 main a:not(.wa):not(.f-btn):not(.btn):not(.gbadge){color:#c4e8a2}
.fv4 .f-svc__t .f-arr,.fv4 .sit__k,.fv4 .f-sit .sit__k,.fv4 .hc-load__p,.fv4 .hc-itemlist b,.fv4 .f-head__sub b,.fv4 .f-head__sub .success,.fv4 .success{color:var(--f-lime)}
.fv4 .shead a,.fv4 .hc-jobs__more a,.fv4 .hc-faq__more a,.fv4 .hc-note a,.fv4 .more>summary{color:var(--f-lime)}
.fv4 .f-btn--go,.fv4 .btn--primary,.fv4 .fn__go{background:var(--f-lime);color:#0b1a10}
.fv4 .f-btn--go:hover,.fv4 .btn--primary:hover{background:var(--f-lime-lift)}
.fv4 .f-btn--line,.fv4 .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);border-color:rgba(255,255,255,.7);background:transparent}
.fv4 .f-ticks li::before{background-color:#2f8a1f}
.fv4 .f-svc__badge{box-shadow:0 0 0 5px #0e1f14}
.fv4 .f-svc__art,.fv4 .f-sit__art .ilf,.fv4 .fv-frame{background:#0f2216}
.fv4 .il{filter:saturate(.9) brightness(.92)}
.fv4 .fn__img--art,.fv4 .fn__tile--prop .fn__fig,.fv4 .fn__tile--load .fn__fig{background:#122a1a}
.fv4 .hc-chips li,.fv4 .chips li{background:#0e1f14;color:#eef4ea;border-color:#2b4a33}
.fv4 .faq summary{color:#fff}
.fv4 .faq summary:hover,.fv4 .faq details[open]>summary{background:#132a1b}
.fv4 .hc-itemlist li{border-color:#21402b}
.fv4 .field input,.fv4 .field textarea,.fv4 select{background:#fff;color:#14180f}
.fv4 .hc-close{background:#0f2d18}
.fv4 .linkcols a,.fv4 .hc-towns .linkcols a{color:#e3eade}
.fv4 .f-pill--b{background:#000}
.fv4 .gbadge{background:#fff;color:#202124}
.fv4 .grev .grw__stars,.fv4 .grw__stars{color:#fbbc04}

/* ==========================================================================
   THE VARIANT HOMEPAGE HEROES
   ========================================================================== */
.fv-home{position:relative;isolation:isolate;overflow-x:clip;color:#fff}
.fv-home .f-hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.fv-home .f-hero__proof{margin:0 0 1rem}
@media (max-width:39.99rem){
  .fv-home .f-hero__cta{display:grid;grid-template-columns:auto auto;justify-content:start;row-gap:.35rem}
  .fv-home .f-hero__cta .f-btn--line{grid-column:1 / -1;justify-self:start;min-height:44px;padding:.2rem 0;box-shadow:none;
    font-size:.98rem;text-decoration:underline;text-underline-offset:.25em;padding-inline:0!important}
  .fv-home .f-hero__cta .f-btn,.fv-home .f-hero__cta .wa{padding-inline:.9rem;font-size:1rem}
}
/* 1 PROOF: the words on solid dark green, his photograph below them, shown as it is */
.fv-home--1{background:linear-gradient(180deg,#0f2d18 0,#0c2614 100%)}
.fv-home--1 .fv-home__in{display:grid;gap:1.2rem;padding-block:1.3rem 0}
.fv-home--1 .f-hero__cta .f-btn--go{background:var(--f-lime);color:#0b1a10}
.fv-home--1 .f-hero__cta .f-btn--line{color:#fff}
.fv-home__ph{position:relative;margin:0}
.fv-home--1 .fv-home__ph{width:100vw;margin-left:calc(50% - 50vw)}
.fv-home--1 .fv-home__ph img{display:block;width:100%;height:clamp(14rem,64vw,22rem);object-fit:cover;object-position:50% 55%}
.fv-home--1 .fv-home__ph figcaption{padding:.55rem var(--pad) 1.2rem;font-size:.84rem;color:rgba(232,240,228,.82)}
.fv-home__truck{position:absolute;right:var(--pad);bottom:2.6rem;width:clamp(8rem,34vw,12rem);border-radius:12px;overflow:hidden;
  background:rgba(232,240,228,.92);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
.fv-home__truck .il{display:block;width:100%;height:auto}
@media (min-width:64rem){
  .fv-home--1 .fv-home__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center;padding-block:3rem 3.2rem}
  .fv-home--1 .fv-home__ph{width:auto;margin:0}
  .fv-home--1 .fv-home__ph img{height:auto;aspect-ratio:1125/803;border-radius:var(--f-rc)}
  .fv-home--1 .fv-home__ph figcaption{padding:.6rem 0 0}
  .fv-home--1 .f-h1{font-size:clamp(4.4rem,1.6rem + 4.4vw,6rem)}
  .fv-home__truck{bottom:3.2rem;right:-1.2rem}
}
/* 2 DRAWN + PROOF: F's dusk hero, shorter on a phone so the real before and after starts on the first screen */
@media (max-width:63.99rem){.fv-home--2 .f-hero__art{margin-top:-6.5rem}.fv-home--2 .f-hero__art .il--hero{width:200%;margin-left:-82%}}
/* 3 DAYLIGHT: light, centred, the rating above the headline, a big bright drawing */
.fv-home--3{background:linear-gradient(180deg,#f6f9f3 0,#eaf2e5 100%);color:var(--f-ink);text-align:center}
.fv-home--3 .fv-home__in{padding-block:1.6rem 0;display:grid;gap:.8rem}
.fv-home--3 .f-hero__proof{display:flex;justify-content:center}
.fv-home--3 .gbadge{box-shadow:0 0 0 1px var(--f-line),0 12px 26px -16px rgba(11,26,16,.35)}
.fv-home--3 .f-h1{color:var(--f-ink)}
.fv-home--3 .f-h1__g{color:var(--f-ink);display:inline;background:linear-gradient(180deg,transparent 0 10%,var(--f-lime) 10% 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
.fv-home--3 .f-hero__sub{color:var(--f-ink)}
.fv-home--3 .f-hero__lede{color:var(--f-ink-2);margin-inline:auto}
.fv-home--3 .f-hero__lede b{color:var(--f-ink)}
.fv-home--3 .f-hero__cta{justify-content:center}
@media (max-width:39.99rem){.fv-home--3 .f-hero__cta{justify-content:center}.fv-home--3 .f-hero__cta .f-btn--line{justify-self:center}}
.fv-home--3 .f-hero__cta .f-btn--go{background:var(--f-deep);color:#fff}
.fv-home--3 .f-hero__cta .f-btn--line{color:var(--f-deep)}
.fv-home--3 .fv-home__art{width:100vw;margin-left:calc(50% - 50vw);margin-top:.6rem}
.fv-home--3 .fv-home__art .fv-frame{border-radius:0;aspect-ratio:auto;height:clamp(13rem,58vw,30rem);background:transparent}
.fv-home--3 .fv-home__art .ilf::after{opacity:.16}
@media (min-width:64rem){.fv-home--3 .fv-home__in{padding-top:3rem}.fv-home--3 .f-h1{font-size:clamp(4.6rem,1.6rem + 4.8vw,6.6rem)}
  .fv-home--3 .fv-home__art{width:auto;margin-left:0}.fv-home--3 .fv-home__art .fv-frame{height:auto;aspect-ratio:3/1;border-radius:var(--f-rc) var(--f-rc) 0 0}}
/* 4 NIGHT GREEN: his driveway photograph under a deep green grade, the words over it */
.fv-home--4{background:#06100a}
.fv-home--4 .fv-home__ph{position:absolute;inset:0 0 auto 0;height:clamp(22rem,100vw,30rem);z-index:0;overflow:hidden}
.fv-home--4 .fv-home__ph picture,.fv-home--4 .fv-home__ph img{display:block;width:100%;height:100%}
.fv-home--4 .fv-home__ph img{object-fit:cover;object-position:45% 50%}
.fv-home--4 .fv-home__ph::before{content:"";position:absolute;inset:0;z-index:1;background:#0d4a1c;mix-blend-mode:color;opacity:.38}
.fv-home--4 .fv-home__ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,16,10,.15) 0,rgba(0,60,18,.25) 30%,rgba(6,16,10,.85) 66%,#06100a 92%)}
.fv-home--4 .fv-home__in{position:relative;z-index:2;padding-block:clamp(10rem,46vw,13rem) 2rem}
.fv-home--4 .f-hero__cta .f-btn--go{background:var(--f-lime);color:#0b1a10}
.fv-home--4 .f-hero__cta .f-btn--line{color:#fff}
@media (min-width:64rem){.fv-home--4 .fv-home__ph{inset:0 0 0 auto;width:60vw;height:auto}
  .fv-home--4 .fv-home__ph::after{background:linear-gradient(90deg,#06100a 0,rgba(6,16,10,.82) 16%,rgba(0,60,18,.2) 55%,rgba(6,16,10,.2) 100%)}
  .fv-home--4 .fv-home__in{padding-block:6rem 6.4rem}.fv-home--4 .fv-home__copy{max-width:38rem}
  .fv-home--4 .f-h1{font-size:clamp(4.4rem,1.6rem + 4.4vw,6rem)}}

/* photographs on the service cards and situation tiles (F1, F2, F4), "Our job" on each */
.f-svc__art--ph,.f-sit__art--ph{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--f-mist)}
.f-svc__art--ph img,.f-sit__art--ph img{width:100%;height:100%;object-fit:cover}
.f-svc__art--ph::after{display:none}
.f-svc__tag{position:absolute;z-index:2;left:.6rem;top:.6rem;font-size:.76rem;font-weight:750;color:#fff;background:rgba(11,26,16,.72);border-radius:999px;padding:.18rem .55rem}
.hc-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-weight:750;color:var(--f-deep);text-decoration:none}
.fv4 .hc-more{color:var(--f-lime)}

/* ---------------- round 3: the rating on the picture (F1, F2), at the top (F3, F4), band drawings */
.fv-vis--rated{position:relative}
.fv-vis--rated>.fv-hero__proof{position:absolute;z-index:3;left:var(--pad);top:.75rem;margin:0}
@media (min-width:64rem){.fv-vis--rated>.fv-hero__proof{left:1rem;top:1rem}}
.fv1 .fv-vis--photo .hc-pair--hero figure,.fv1 .fv-vis--photo .hc-single img,.fv1 .fv-vis--drawn .fv-frame{height:clamp(11rem,46vw,17rem)}
@media (min-width:64rem){.fv1 .fv-vis--photo .hc-pair--hero figure,.fv1 .fv-vis--photo .hc-single img,.fv1 .fv-vis--drawn .fv-frame{height:auto}}
.fv4 .fv-hero__copy{padding-top:.9rem}
.fv4 .fv-hero__copy>.fv-hero__proof{margin-bottom:clamp(6rem,30vw,8.5rem)}
@media (min-width:64rem){.fv4 .fv-hero__copy{padding-top:2.4rem}.fv4 .fv-hero__copy>.fv-hero__proof{margin-bottom:1.2rem}}
.fv3 .fv-hero__form{padding-bottom:1rem}
.fv3 .fv-vis--day{padding:.4rem 0 1.4rem}
@media (min-width:64rem){.fv3 .fv-vis--day{grid-column:2;grid-row:2;padding:0}}
.fv-bandart{max-width:24rem;margin:0 0 1.2rem}
.fv-bandart .fv-frame{aspect-ratio:3/2}
.fv-bandart .ilf:has(.il[viewBox="0 0 240 200"]){aspect-ratio:6/5;max-width:16rem}
.fv-bandart .il--truck{aspect-ratio:9/4}
.fv-bandart .ilf:has(.il--truck){aspect-ratio:9/4;max-width:20rem;background:transparent}
@media (min-width:64rem){.fv-bandart{float:right;width:min(22rem,34%);margin:0 0 1.5rem 2.5rem}}
.hc-said{border-top:1px solid var(--f-line);padding-top:1rem}
.fv4 .fv-vis__tag{top:4.1rem}
@media (min-width:64rem){.fv4 .fv-vis__tag{top:auto;bottom:1.2rem}}

/* ---------------- round 4: no long run of words without a picture on a phone */
@media (max-width:39.99rem){
  .fv .linkcols,.dir--f .hc-towns .linkcols{grid-template-columns:1fr 1fr;column-gap:.8rem}
  .fv .linkcols a,.dir--f .hc-towns .linkcols a{font-size:.9rem;line-height:1.3}
  .fv .f-pair__in{display:flex;flex-direction:column}
  .fv .f-pair__ph{order:-1}
}
.dir--f .hc-pro__t2 .f-ticks{margin-top:0}
.fv-bandart--end{margin:1.4rem 0 0}
@media (min-width:64rem){.fv-bandart--end{float:none;width:min(22rem,34%);margin:1.6rem 0 0 auto}}
.fv-fold{margin-top:.8rem}
.fv-hero .fv-fold>summary{color:#fff}
.fv3 .fv-hero .fv-fold>summary{color:var(--f-deep)}

/* ---------------- two contrast faults F had on 7 Oct, fixed for every F build (axe, 9 Oct) */
.dir--f .ftr a.wa[data-conv],.dir--f .ftr a.wa[data-conv] .wa__l{color:#111b21}      /* the footer link colour reached the WhatsApp label on its green */
.dir--f .band--dark .more>summary,.dir--f .f-cover .more>summary,.fv4 .more>summary{color:var(--f-lime)}  /* deep green "More about" on the dark band */

/* F4: hold WhatsApp's own black on its green wherever a dark-theme link colour could reach it (WhatsApp standard, trap 3) */
.fv4 a.wa[data-conv],.fv4 a.wa[data-conv] .wa__l{color:#111b21}
.fv4 .f-revs .grev p,.fv4 .f-revs .grev__date{color:#c9d6c5}
.fv4 .f-revs .grev__name{color:#fff}
/* the football line in F's dark footer: the live sheet sets it in --ink (the footer is light on the live site), so on F's
   near-black footer the club's name and John's quote were near-black on near-black (pixel probe, 9 Oct) */
.dir--f .ftr__clubs{border-top-color:#1e3324}
.dir--f .ftr__club,.dir--f .ftr__club b,.dir--f .ftr__lead{color:#eef4ea}
.dir--f .ftr .ftr__quote,.dir--f .ftr .ftr__quote p,.dir--f .ftr .ftr__quote blockquote,.dir--f .ftr .ftr__quote figcaption{color:#c9d6c5}

/* ---------------- round 5 (pixel probe): F4's dark ground under the live components' light-page greens */
.fv4 .load__p,.fv4 .load__from,.fv4 .price,.fv4 .req,.fv4 .sitc__see,.fv4 .evid b,.fv4 .evid strong{color:var(--f-lime)}
.fv4 .est__q,.fv4 .evid p{color:#c9d6c5}
.fv4 main .btn.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
/* F4: the breadcrumb sits over the photograph's lighter middle; the grade deepens there */
.fv4 .fv-vis--grade::after{background:linear-gradient(180deg,rgba(6,16,10,.22) 0,rgba(0,52,16,.42) 26%,rgba(6,16,10,.86) 46%,#06100a 82%)}
@media (min-width:64rem){.fv4 .fv-vis--grade::after{background:linear-gradient(90deg,#06100a 0,rgba(6,16,10,.86) 18%,rgba(0,74,20,.35) 55%,rgba(6,16,10,.35) 100%)}}
/* F1: the drawn truck sits on the photograph, clear of its caption */
.fv-home__truck{bottom:auto;top:.8rem}
@media (min-width:64rem){.fv-home__truck{top:auto;bottom:3.2rem}}
.fv4 .est{background:#0e1f14;border-color:rgba(143,209,79,.5)}
/* F4: the masthead stays white, so it keeps the light page's tokens (axe at 1000 px: the call label took F4's pale ink) */
.fv4 .mast{--f-ink:#111a13;--f-ink-2:#414b43;--f-line:#d9e1d4;--f-mist:#f1f5ee;--f-mist-2:#e6eee1;--ink:#14180f;--ink-muted:#464c40;--rule:#c6cbc0;--rule-2:#868c80;--surface:#ffffff;--ground:#ffffff;--ground-2:#eef0ea;color:#14180f}

/* ==========================================================================
   PHASE 2 (9 Oct 2026). Cameron picked F: "everything appears a bit big on mobile, please work to an
   incredible standard with this design". F's scale, tightened on a phone; the desktop sizes are unchanged
   (every clamp below meets its old cap at the same width). The new move (a-down) for the stairwell.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .ilx .il .a-down{animation:ilDown 1.15s var(--il-soft) .2s both}
  .ilx .il:not(.is-play) .a-down{animation-play-state:paused}
}
@keyframes ilDown{0%{transform:translate(46px,-27px)}25%{transform:translate(34px,-21px)}50%{transform:translate(23px,-13px)}75%{transform:translate(11px,-7px)}100%{transform:none}}

.dir--f{--gap:clamp(2.4rem,6.4vw,5.6rem);--gap-s:clamp(1.15rem,3vw,2.4rem);--d-q-size:clamp(1.3rem,1rem + 1.6vw,2.15rem)}
.dir--f h2{font-size:clamp(1.62rem,1.1rem + 2.6vw,3.2rem)}
.f-h1{font-size:clamp(2.45rem,1.15rem + 6.4vw,5.9rem)}
.f-hero--form .f-h1{font-size:clamp(2.5rem,.9rem + 7vw,6rem)}
.dir--f .f-revs .grw__ttl{font-size:clamp(1.62rem,1.1rem + 2.6vw,3.2rem)}
.f-hero__promise{margin:.7rem 0 0;max-width:34rem;font-weight:700;font-size:clamp(1rem,.92rem + .4vw,1.25rem);line-height:1.35;color:rgba(255,255,255,.94)}
.hc-mores{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.hc-mores .hc-more{margin:0;min-height:44px}
.dir--f .ticks a,.dir--f .f-ticks a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,104,0,.5);text-underline-offset:.2em}
.dir--f .ticks a:hover,.dir--f .f-ticks a:hover{color:var(--f-deep);text-decoration-color:currentColor}

/* spots (240 x 200) never fill a wide frame: they sit at their own size */
.dir--f .hc-sec__art .ilf:has(.il--spot),.dir--f .hc-priced__art .ilf:has(.il--spot),.dir--f .hc-faq__v .ilf:has(.il--spot){max-width:17rem}
.dir--f .hc-where__v{max-width:13rem}
.dir--f .fv-frame--truck{aspect-ratio:9/4;background:#e8efe2}
.dir--f .hc-close__v{max-width:24rem}

/* the sub-service pages' first screen: the drawing big beside the form, the pair under it */
.f-hero--hc .f-hero__side .f-hero__cta{flex-wrap:nowrap}
.f-hero--hc .f-hero__side .hc-talk{margin-top:.8rem}
@media (min-width:64rem){
  .f-hero--hc .f-hero__in{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .f-hero--hc .f-hero__side{padding:3.6rem 0 3.4rem}
  .f-hero--hc .f-hero__frame{box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(143,209,79,.16);border-radius:var(--f-rc)}
}

/* the other pages: four cards, one row on a desktop */
@media (min-width:64rem){.dir--f .hc-sibs__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:40rem) and (max-width:63.99rem){.dir--f .hc-sibs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- a phone */
@media (max-width:39.99rem){
  .f-btn{min-height:50px;padding:.7rem 1.05rem;font-size:1rem;gap:.5rem}
  .dir--f .hc-ctas .wa,.f-hero__cta .wa--hero{min-height:50px;padding:.7rem 1rem;font-size:1rem}
  .f-hero__cta,.dir--f .hc-ctas,.f-pair__cta,.f-cover__cta{gap:.5rem}
  .f-head__sub{font-size:1rem;margin-top:.6rem}
  .f-hero--form .f-hero__copy{padding:1rem 0 1.2rem}
  .f-crumbs ol{margin-bottom:.6rem;font-size:.86rem}
  .f-hero__proof{margin-top:.8rem}
  .f-get__card--hero{margin-top:.9rem;padding:.9rem .85rem 1rem}
  .f-hero__side{padding-bottom:1.6rem}
  .f-hero__side .f-hero__lede{font-size:.98rem}
  .f-hero__meta li{font-size:.8rem}
  .f-trust{padding-block:.8rem}
  .f-trust__list li{font-size:.88rem;padding:.55rem .6rem .55rem 0}
  .f-trust__list .trust__i{width:28px;height:28px}
  .f-ticks{gap:.55rem}
  .f-ticks li{font-size:.97rem;padding-left:2rem}
  .f-ticks li::before{width:1.4rem;height:1.4rem}
  .f-pill{font-size:.95rem;padding:.32rem .8rem;bottom:.6rem}
  .f-pair__p{font-size:1rem}
  /* the service cards: a picture and its words side by side, so nine fit in a screen and a half */
  .f-svcs__grid,.dir--f .hc-sibs__grid{gap:.7rem}
  .f-svc__a{display:grid;grid-template-columns:7.6rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:.9rem;align-items:start;min-height:6.4rem}
  .f-svc__art{grid-row:1 / span 2;aspect-ratio:auto;height:100%;min-height:6.4rem}
  .f-svc__art .il{height:100%;width:100%}
  .f-svc__art--ph{aspect-ratio:auto;height:100%}
  .f-svc__badge{display:none}
  .f-svc__t{padding:.8rem .9rem 0 0;font-size:1.12rem}
  .f-svc__t .f-arr{width:18px;height:18px}
  .f-svc__d{padding:.3rem .9rem .85rem 0;font-size:.9rem;line-height:1.42}
  .f-svc__a:hover{transform:none}
  /* the situations: a shorter picture */
  .f-sit__art .ilf{aspect-ratio:2/1}
  .f-sit h3{font-size:1.3rem}
  .f-sit__t{padding:.9rem 1rem 1.1rem}
  .f-sit p{font-size:.95rem}
  /* the house clearance pages' bands */
  .dir--f .hc-pro__lede{font-size:1.04rem}
  .dir--f .hc-pro__p,.dir--f .hc-sec p{font-size:1rem;line-height:1.56}
  .dir--f .hc-sec{padding-block:2rem}
  .dir--f .hc-sec h2{margin-bottom:.5rem}
  .dir--f .hc-jobs__grid{gap:.8rem}
  .dir--f .hc-job__t{font-size:.98rem}
  .dir--f .hc-load__p{font-size:1.3rem}
  .dir--f .hc-said li{font-size:.94rem}
  .dir--f .faq summary{font-size:.98rem}
  .dir--f .hc-close .hc-ctas{flex-wrap:wrap}
  .f-out__t{font-size:.94rem}
  .f-cover__art .il--route text{font-size:21px}
}
.dir--f .hc-pro__fold{margin-top:.7rem}
.dir--f .hc-pro__fold>summary,.f-hero__fold>summary{font-weight:750}
.f-hero__fold{margin-top:.9rem}
.dir--f .f-hero__fold>summary{color:#fff}
@media (max-width:39.99rem){
  /* the service cards on a phone: two to a row, the picture and the name (the line is on the card from 40rem) */
  .f-svcs__grid,.dir--f .hc-sibs__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .f-svc__a{display:flex;flex-direction:column;min-height:0}
  .f-svc__art,.f-svc__art--ph{grid-row:auto;aspect-ratio:4/3;height:auto;min-height:0}
  .f-svc__t{padding:.6rem .7rem .75rem;font-size:1.02rem;line-height:1.02;align-items:flex-start}
  .f-svc__t .f-arr{width:16px;height:16px;margin-top:.05rem}
  .f-svc__d{display:none}
  .dir--f .hc-job__ph figure{aspect-ratio:1/1}
  /* nine cards: house clearance across the top, its line with it, then four rows of two */
  .f-svcs .f-svcs__grid>li:first-child{grid-column:1 / -1}
  .f-svcs .f-svcs__grid>li:first-child .f-svc__art{aspect-ratio:2/1}
  .f-svcs .f-svcs__grid>li:first-child .f-svc__t{font-size:1.2rem}
  .f-svcs .f-svcs__grid>li:first-child .f-svc__d{display:block;padding:.2rem .7rem .8rem;font-size:.9rem}
}
/* the masthead row with seven links (Phase 2 added House clearance): one line each, from 85rem; under it, the Menu */
@media (min-width:85.3rem){
  .dir--f .mast__in .nav__l1>li>a,.dir--f .mast__in .nav summary{white-space:nowrap;padding:.55rem .5rem;font-size:.94rem}
  .dir--f .mast__in .nav__l1{gap:0}
}
@media (min-width:64rem){
  .dir--f .hc-sec__art .ilf:has(.il--spot),.dir--f .hc-priced__art .ilf:has(.il--spot),.dir--f .hc-faq__v .ilf:has(.il--spot){max-width:20rem;margin-inline:auto}
  .dir--f .hc-where__v .ilf{margin-inline:auto}
}
/* the Menu wherever the inline bar is hidden: the live sheet hides .menu from 48rem (its bar shows there), and F
   keeps its bar off until 85.3rem, so from 48rem to 85.3rem F had no menu at all (found by the no-JS gate at 1280) */
@media (min-width:48rem) and (max-width:85.29rem){
  .dir--f .mast__r{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
  .dir--f .mast__r .menu{display:block}
  .dir--f .mast__r .mast__cta{white-space:nowrap}
  .dir--f .mast__in{position:relative}
  .dir--f .mast__r .menu{position:static}
  .dir--f .mast__r .menu .nav--menu{position:absolute;left:auto;right:0;top:100%;width:min(44rem,calc(100vw - 2rem));
    max-height:calc(100vh - 9rem);overflow:auto;background:#fff;border:0;border-radius:14px;z-index:60;
    box-shadow:0 0 0 1px var(--f-line),0 24px 50px -20px rgba(12,17,11,.45)}
  .dir--f .mast__r .menu .nav--menu .wrap{width:auto;margin:0;padding:.4rem .6rem .6rem}
}

/* ==========================================================================
   PHONE, ROUND 2 (9 Oct 2026, night). Cameron, on the pages John has now: "not happy with how they look on
   mobile": every page looks the same, too busy with too many boxes, the header and form clunky, too much
   scrolling. Phone widths only; the desktop is as it was.
   ========================================================================== */
/* the sub-service hero on every width: the drawing is its own block (fv.hero) */
.hc-art{border-radius:var(--f-r);overflow:hidden;aspect-ratio:3/2}
.hc-art .il{width:100%;height:100%;display:block}
.f-hero--hc .hc-form{min-width:0}
@media (min-width:64rem){
  .f-hero--hc .f-hero__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:3rem;align-items:start;
    grid-template-areas:"copy art" "form art" "form side";grid-template-rows:auto auto 1fr}
  .f-hero--hc .f-hero__copy{grid-area:copy;padding:2.4rem 0 0}
  .f-hero--hc .hc-form{grid-area:form;padding-bottom:3.4rem}
  .f-hero--hc .hc-art{grid-area:art;margin-top:3.6rem;border-radius:var(--f-rc);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(143,209,79,.16)}
  .f-hero--hc .f-hero__side{grid-area:side;padding:1.2rem 0 3.4rem}
  .f-hero--hc .f-get__card--hero{margin-top:1.2rem}
}
@media (min-width:40rem) and (max-width:63.99rem){.f-hero--hc .hc-art{margin-top:1.2rem}.f-hero--hc .f-hero__side{padding-bottom:2rem}}

@media (max-width:47.99rem){
  /* one slim header: the phone strip goes (the bottom bar carries Call and WhatsApp), his logo stays in the middle */
  .dir--f .topbar{display:none}
  .dir--f .mast__in{padding-block:.35rem;min-height:58px}
  .dir--f .mast__logo img{height:44px}
  .dir--f .mast__l .wa--header{min-width:44px;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .dir--f .mast__l .wa--header .wa__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dir--f .mast__l .wa--header .wa__g{width:1.45rem;height:1.45rem}
  .dir--f .menu__b{min-height:44px;padding:.4rem .7rem;border-radius:999px;border-color:var(--f-line);font-size:.95rem}
}

@media (max-width:39.99rem){
  /* the first screen: the page's own drawing, full width, fading into the dark ground; then the words; then the form as
     a white sheet (no card inside a card); the call + WhatsApp pair is the bottom bar's job on a phone */
  .f-hero--hc .f-hero__in{display:flex;flex-direction:column}
  .f-hero--hc .hc-art{width:100vw;margin:0 calc(50% - 50vw);border-radius:0;aspect-ratio:16/10;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
  .f-hero--hc .hc-art::after{opacity:.22}
  .f-hero--hc .f-hero__copy{padding:0 0 1.15rem;margin-top:-1.4rem;position:relative;z-index:2}
  .f-hero--hc .f-crumbs ol{margin-bottom:.45rem;font-size:.8rem}
  .f-hero--hc .f-h1{font-size:clamp(2.2rem,.8rem + 6.4vw,2.9rem)}
  .f-hero--hc .f-hero__promise{font-size:.98rem;font-weight:600;color:rgba(232,240,228,.9);margin-top:.55rem}
  .f-hero--hc .f-hero__proof{margin-top:.75rem}
  .f-hero--hc .gbadge{transform:scale(.92);transform-origin:0 50%}
  .f-hero--hc .hc-form{margin:0 calc(-1 * var(--pad))}
  .f-hero--hc .f-get__card--hero{margin:0;border-radius:22px 22px 0 0;box-shadow:none;padding:1.25rem var(--pad) 1.3rem}
  .f-hero--hc .hc-talk{margin:0;padding:0 var(--pad) 1.2rem;background:#fff;color:var(--f-ink-2)}
  .f-hero--hc .f-hero__side{display:none}
  /* the form's tiles: the picture, then a small round mark beside the words (not on top of the picture) */
  .dir--f .fn__tile--photo,.dir--f .fn__tile--load,.dir--f .fn__tile--prop{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto 1fr;column-gap:.4rem;align-items:start;border-color:#e3e9de}
  .dir--f .fn__tile--photo .fn__img,.dir--f .fn__tile--load .fn__fig,.dir--f .fn__tile--prop .fn__fig{grid-column:1 / -1;grid-row:1}
  .dir--f .fn__tile--photo .fn__r,.dir--f .fn__tile--load .fn__r,.dir--f .fn__tile--prop .fn__r{position:static;grid-column:1;grid-row:2;
    width:18px;height:18px;margin:.6rem 0 0 .55rem;box-shadow:none;border-width:2px;color:#9aa69c}
  .dir--f .fn__tile .fn__r::before{width:8px;height:8px}
  .dir--f .fn__tile--photo .fn__t,.dir--f .fn__tile--load .fn__t,.dir--f .fn__tile--prop .fn__t{grid-column:2;grid-row:2;padding:.5rem .55rem 0 0;font-size:.95rem}
  .dir--f .fn__tile--photo .fn__s,.dir--f .fn__tile--load .fn__p{grid-column:2;grid-row:3;padding:.05rem .55rem .55rem 0;font-size:.85rem}
  .dir--f .fn__tile--prop .fn__t{padding-bottom:.55rem}
  .dir--f .fn__tiles{gap:.5rem}
  .dir--f .fn__q{margin-bottom:.7rem}
  .dir--f .fn__bar{margin-bottom:.6rem}

  /* fewer boxes: photographs and drawings stand on the page, not inside framed cards */
  .dir--f .hc-jobs{padding-block:2rem}
  .dir--f .hc-jobs__grid{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dir--f .hc-jobs__grid::-webkit-scrollbar{display:none}
  .dir--f .hc-job{flex:0 0 82%;scroll-snap-align:start;background:none;box-shadow:none;padding:0}
  .dir--f .hc-job__ph figure{aspect-ratio:4/5}
  .dir--f .hc-job__t{margin:.5rem 0 0}
  .dir--f .hc-said{margin-top:1rem}
  .dir--f .hc-sibs__grid{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .4rem;scrollbar-width:none}
  .dir--f .hc-sibs__grid::-webkit-scrollbar{display:none}
  .dir--f .hc-sibs__grid>li{flex:0 0 46%;scroll-snap-align:start}
  .dir--f .hc-sibs .f-svc__a{box-shadow:none;background:none;border-radius:0}
  .dir--f .hc-sibs .f-svc__art{border-radius:12px}
  .dir--f .hc-sibs .f-svc__t{padding:.5rem 0 0}
  .dir--f .hc-sibs,.dir--f .hc-priced,.dir--f .hc-where,.dir--f .hc-faq,.dir--f .hc-towns,.dir--f .hc-pro{padding-block:2rem}
  .dir--f .hc-load{box-shadow:none;background:none;padding:0}
  .dir--f .hc-load__fig{border-radius:12px}
  /* shorter: the section drawings sit beside the words; the spots that only decorate step aside on a phone */
  .dir--f .hc-sec__in{display:block}
  .dir--f .hc-sec__v{float:right;width:42%;margin:.2rem 0 .6rem 1rem;max-width:none}
  .dir--f .hc-sec__v .ilf{aspect-ratio:1/1;border-radius:14px}
  .dir--f .hc-sec__v .hc-pair{display:grid;gap:.3rem}
  .dir--f .hc-sec__v .hc-pair figure{aspect-ratio:1/1}
  .dir--f .hc-sec__v .hc-pair__cap{font-size:.75rem}
  .dir--f .hc-sec h2{clear:none}
  .dir--f .hc-sec::after{content:"";display:block;clear:both}
  .dir--f .hc-faq__v,.dir--f .hc-priced__art,.dir--f .hc-close__v{display:none}
  .dir--f .hc-where__in{display:block}
  .dir--f .hc-where__v{float:right;width:34%;margin:0 0 .5rem 1rem}
  .dir--f .hc-where__v .ilf{aspect-ratio:1/1;border-radius:14px}
  .dir--f .hc-where::after{content:"";display:block;clear:both}
  .dir--f .hc-priced .hc-ctas{display:none}
  .dir--f .hc-pro__v .hc-pair figure{aspect-ratio:1/1}
  .dir--f .hc-pro__art .ilf{aspect-ratio:16/10}
  /* the towns: plain links in two columns, no boxes; the road drawing shorter */
  .dir--f .hc-towns .linkcols{gap:0 .8rem}
  .dir--f .hc-towns .linkcols li{border:0!important;padding:0}
  .dir--f .hc-towns .linkcols a{display:block;padding:.4rem 0;border:0!important;background:none!important;font-size:.88rem;font-weight:600;color:var(--f-ink)}
  .dir--f .hc-towns__art{margin-bottom:.9rem}
  .dir--f .hc-towns__art .il--route{width:170%;margin-left:-36%}
}
@media (max-width:39.99rem){
  .dir--f .hc-towns .linkcols{border:0!important;background:none}
  .dir--f .hc-towns .linkcols li{background:none!important;border:0!important}
  .dir--f .hc-towns .linkcols a{min-height:40px;padding:.3rem 0;line-height:1.25}
  /* "worth knowing": a lime rule, not three boxes */
  .dir--f .hc-items{gap:.8rem}
  .dir--f .hc-items div{background:none;padding:.05rem 0 .05rem .85rem;border-radius:0;box-shadow:inset 3px 0 0 var(--f-lime)}
  /* the footer's link columns two to a row */
  .dir--f .ftr__grid>div:not(:first-child) ul{grid-template-columns:1fr 1fr;column-gap:1rem}
  .dir--f .ftr__grid>div:not(:first-child) a{font-size:.88rem}
  .dir--f .ftr__grid{gap:1.6rem}
}
/* the masthead's phone button holds its number on one line */
.dir--f .f-tel span{white-space:nowrap}
@media (max-width:39.99rem){
  /* /house-clearance keeps its call, WhatsApp and quote buttons and the fold after the form, on the dark ground */
  .f-hero--hh .f-hero__side{display:block;padding:1.1rem 0 1.5rem}
  .f-hero--hh .hc-form .f-get__card--hero{border-radius:22px}
  .f-hero--hh .hc-form{margin:0}
  .f-hero--hh .f-hero__cta{margin-top:0}
  /* the jobs, before and after: a swipe row, not three tall cards */
  .dir--f .records{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .4rem;scrollbar-width:none}
  .dir--f .records::-webkit-scrollbar{display:none}
  .dir--f .records>li,.dir--f .records>.record{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  /* his six situations: the drawing beside the words */
  .dir--f .f-sit{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:0 .9rem;align-items:start;box-shadow:none;background:none;border-radius:0;
    padding:.9rem 0;border-top:1px solid var(--f-line)}
  .dir--f .f-which__grid{gap:0}
  .dir--f .f-sit__art .ilf,.dir--f .f-sit__art--ph{aspect-ratio:1/1;border-radius:14px}
  .dir--f .f-sit__t{padding:0}
  .dir--f .f-sit h3{font-size:1.2rem}
  .dir--f .f-sit .sit__k{font-size:.78rem}
  .dir--f .f-sit p{font-size:.92rem;margin-top:.35rem}
  .dir--f .f-sit .hc-mores{margin-top:.4rem}
  .dir--f .f-sit .hc-more{min-height:36px;font-size:.92rem}
  /* what comes out: four to a row */
  .f-out__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem .5rem}
  .f-out__t{font-size:.76rem;line-height:1.2}
  .f-out__art{border-radius:12px}
  /* the towns on Where we work and the homepage: three to a row */
  .dir--f .towns{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.45rem}
  .dir--f .town .town__b strong{font-size:.86rem;line-height:1.1}
  .dir--f .town .town__b span,.dir--f .town .town__b em{font-size:.62rem}
  /* every town list: plain links */
  .dir--f .linkcols{border:0!important}
  .dir--f .linkcols li{background:none!important;border:0!important}
  .dir--f .linkcols a{min-height:40px;padding:.3rem 0;font-size:.88rem;font-weight:600;line-height:1.25;color:var(--f-ink)}
  .dir--f .band--rule .linkcols,.dir--f .k-near .linkcols{grid-template-columns:1fr 1fr;column-gap:.8rem}
}
@media (max-width:39.99rem){
  .f-hero--hh .f-hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .f-hero--hh .f-hero__cta>*{min-width:0;white-space:nowrap;justify-content:center;padding-inline:.6rem;font-size:.95rem;min-height:48px}
  .f-hero--hh .f-hero__cta>:last-child{grid-column:1 / -1}
}
@media (max-width:39.99rem){
  /* the Professional block opens with its photograph or drawing on a phone */
  .dir--f .hc-pro__in{display:flex;flex-direction:column;gap:1rem}
  .dir--f .hc-pro__v{order:-1}
}
/* the crew, in customers' words, closes the page (on the dark close band) */
.dir--f .hc-close .hc-said{border-top-color:rgba(255,255,255,.16)}
.dir--f .hc-close .hc-said li{color:#eef4ea}
.dir--f .hc-close .hc-said a{color:#c9d6c5}
@media (max-width:39.99rem){
  .dir--f .hc-pro__v .hc-pair{width:100vw;margin-left:calc(50% - 50vw);gap:3px}
  .dir--f .hc-pro__v .hc-pair figure{aspect-ratio:4/5;border-radius:0}
  .dir--f .hc-pro__v .hc-pair__cap{padding:0 var(--pad)}
  .dir--f .hc-pro__v .hc-single img{border-radius:0;width:100vw;margin-left:calc(50% - 50vw);max-width:none;aspect-ratio:4/3}
  .dir--f .hc-pro__v .hc-single figcaption{padding:0 var(--pad)}
  .dir--f .hc-job{flex-basis:86%}
  .dir--f .hc-job__ph figure{aspect-ratio:3/4}
}

/* ==========================================================================
   F · THE AD LANDING PAGES (11 Oct 2026, adland.py). Cameron's bar for every page an ad
   lands on: the first phone screen holds the ad's words, a real "from" price, the rating
   with its number, Call + WhatsApp and the start of the quote; the page ends within about
   eight phone screens; the bar never covers the form. Phone first; the desktop puts the
   words and the picture on the left and the form on the right. Everything here is scoped
   to body.al, which only adland.py's pages carry.
   ========================================================================== */
.al{--al-pad:var(--pad,1rem)}

/* ---------------------------------------------------------------- the first screen */
.al-hero{position:relative;isolation:isolate;color:#fff;background:linear-gradient(180deg,#07130b 0%,#0b1a10 60%,#0d1f12 100%)}
.al-vis{position:relative;overflow:hidden;height:clamp(7.2rem,30vw,9.5rem);background:#0d1f12}
.al-vis>svg,.al-vis .il,.al-vis picture,.al-vis img{display:block;width:100%;height:100%;object-fit:cover}
.al-vis .il{max-width:none}
.al-vis--photo img{object-position:50% 45%}
.al-vis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,19,11,0) 35%,rgba(7,19,11,.55) 72%,#07130b 100%)}
.al-in{position:relative;z-index:2}
.al-copy{margin-top:-1.55rem;position:relative}
.al .al-crumbs ol{margin:0 0 .5rem;font-size:.8rem}
.al .al-h1{font-size:clamp(2.05rem,.85rem + 6vw,2.7rem);line-height:.9}
.al .al-h1 .f-h1__r{margin-top:.4rem;font-size:clamp(.98rem,.9rem + .4vw,1.2rem);font-weight:700;color:rgba(255,255,255,.92)}
.al .al-h1sub{margin:.35rem 0 0;font-weight:700;color:#fff}
.al-price{margin:.6rem 0 0;font-size:.97rem;line-height:1.38;color:rgba(232,240,228,.92);max-width:36rem}
.al-price b{color:var(--f-lime);font-weight:800;white-space:nowrap}
.al-proof{margin-top:.7rem}
.al .al-badge{gap:.45rem;padding:.42rem .9rem .42rem .7rem;min-height:44px;box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
.al .al-badge .gbadge__logo{width:54px}
.al .al-badge .gst{font-size:1.02rem}
.al-badge__r{font-family:Anybody,AnybodyFallback,sans-serif;font-stretch:75%;font-weight:900;font-size:1.32rem;line-height:1;color:#202124}
.al .al-badge .gbadge__n{font-size:.9rem}
.al-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem}
.al .al-cta .f-btn,.al .al-cta .wa{min-height:48px;padding:.6rem .7rem;font-size:1rem;width:100%}
.al .al-cta .al-call{background:var(--f-lime);color:#0b1a10}
.al .al-cta .al-call:hover{background:var(--f-lime-lift)}
.al-form{margin-top:1rem}
.al-lede{padding:1rem 0 1.2rem}
.al-promise{margin:0;font-size:1rem;line-height:1.5;color:rgba(232,240,228,.88);max-width:38rem}
.al-talk{margin:.6rem 0 0;color:rgba(232,240,228,.88)}
.al-hero .credit{margin:0;padding:0 0 1rem;font-size:.78rem;color:rgba(232,240,228,.7)}
.al-hero .credit a{color:rgba(232,240,228,.85)}
.al-hero .al-more{margin-top:.8rem;color:#fff}
.al-hero .al-more>summary{color:#fff}
.al-hero .f-hero__meta{margin:.6rem 0 0}
.al-hero .f-hero__cta{margin-top:.8rem}

/* ---------------------------------------------------------------- the quote card */
.al-card{background:#fff;color:var(--f-ink);border-radius:20px;padding:1rem 1rem 1.05rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.al-q__h{margin:0 0 .65rem;font-size:1.55rem;color:var(--f-ink)}
.al-q__row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.al .al-f{margin-bottom:.55rem;gap:.22rem}
.al .al-f label{font-size:.86rem;font-weight:700;color:var(--f-ink)}
.al .al-f input[type=text],.al .al-f input[type=tel]{min-height:48px;font-size:16px;border-radius:10px;border:1.5px solid #8d988a;background:#fff;color:var(--f-ink);width:100%}
.al .al-f input:focus{border-color:var(--f-deep);box-shadow:0 0 0 3px rgba(0,104,0,.18);outline:0}
.al-opt{font-weight:600;color:var(--f-ink-2)}
.al .al-q__go{width:100%;min-height:52px;margin-top:.2rem;font-size:1.06rem;background:var(--f-deep);color:#fff;border:0;cursor:pointer}
.al .al-q__go:hover{background:var(--f-deep-lift)}
.al-q__fine{margin:.5rem 0 0;font-size:.82rem;line-height:1.4;color:var(--f-ink-2)}
.al-q__more{margin-top:.55rem;border-top:1px solid var(--f-line)}
.al-q__more>summary{display:flex;align-items:center;gap:.4rem;min-height:44px;cursor:pointer;font-weight:750;color:var(--f-deep);list-style:none}
.al-q__more>summary::-webkit-details-marker{display:none}
.al-q__more>summary::after{content:"+";margin-left:auto;font-size:1.4rem;line-height:1;font-weight:500}
.al-q__more[open]>summary::after{content:"\2212"}
.al-q__in{padding:.3rem 0 .2rem}
.al-q__set{border:0;margin:.6rem 0 0;padding:0;min-width:0}
.al-q__set legend{padding:0;margin:0 0 .45rem;font-weight:780;font-size:1rem;color:var(--f-ink)}
.al-q__note{display:block;margin:.4rem 0 0;font-size:.82rem;line-height:1.4;color:var(--f-ink-2)}
.al-q__note a{color:var(--f-deep);font-weight:700}
.al .al-photo input[type=file]{min-height:48px;font-size:.92rem;width:100%}
.al .al-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.al .al-tile{min-height:48px;cursor:pointer}
.al .al-tiles--word .al-tile{display:flex;align-items:center;padding:.55rem .7rem}
.al .al-unsure{display:flex;align-items:center;min-height:44px;margin-top:.35rem}
.al .al-q__go--2{margin-top:.8rem}
/* scripting is not needed: these are plain radios inside labels (fn__r hides the dot, the tile shows it) */
.al .al-q .fn__r:checked+*{outline:0}
.al .al-q .fn__tile:has(.fn__r:checked){border-color:var(--f-deep);box-shadow:inset 0 0 0 2px var(--f-deep)}
.al .al-q .fn__tile:has(.fn__r:focus-visible){outline:3px solid var(--f-deep);outline-offset:2px}

/* ---------------------------------------------------------------- the fold */
.al-more{border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line)}
.al-more>summary{display:flex;align-items:center;gap:.8rem;min-height:52px;padding:.55rem 0;cursor:pointer;list-style:none;
  font-weight:780;font-size:1.04rem;line-height:1.25;color:var(--f-deep)}
.al-more>summary::-webkit-details-marker{display:none}
.al-more__i{flex:none;margin-left:auto;width:1.9rem;height:1.9rem;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;position:relative}
.al-more__i::before,.al-more__i::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;margin:-1px 0 0 -.4rem;background:currentColor}
.al-more__i::after{transform:rotate(90deg);transition:transform .2s var(--f-ease)}
.al-more[open]>summary .al-more__i::after{transform:rotate(0)}
.al-more__in{padding:.4rem 0 1.2rem}
.al-fold{padding:1.2rem 0}
.al-fold .al-more__in>section{padding-block:1.4rem}
.al-fold .al-more__in>section:first-child{padding-top:.6rem}
.al-hero .al-more{border-color:rgba(255,255,255,.18)}
.al-hero .al-more>summary{min-height:46px;font-size:.98rem;color:#fff}

/* ---------------------------------------------------------------- the bands, tighter on a phone */
.al-local{padding:1.6rem 0 .6rem}
.al-local h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.4rem)}
.al-local .al-more{margin-top:.8rem}
.al-priced{padding:1.8rem 0}
.al-priced h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.4rem)}
.al-priced>.wrap>p{margin:.6rem 0 0;max-width:44rem}
.al-priced .hc-loads{margin-top:1rem}
.al-priced .al-more{margin-top:1rem}
.al-links{padding:1.6rem 0}
.al-links__h{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem)!important;margin:0 0 .5rem}
.al-links__sub{margin:0 0 .6rem;color:var(--f-ink-2)}
.al-links__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.al-links__l a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;padding:.35rem 0;
  border-bottom:1px solid var(--f-line);color:var(--f-ink);font-weight:650;text-decoration:none}
.al-links__l a:hover{color:var(--f-deep)}
.al-links__l .f-arr{color:var(--f-deep);width:18px;height:18px}
.al-links__2{display:grid;gap:1.6rem}
.al-links__all{margin:.7rem 0 0}
.al-links__all a{color:var(--f-deep);font-weight:750}
.al-close{padding:2rem 0 2.4rem;background:var(--f-mist)}
.al-close__in{display:grid;gap:1rem}
.al-close h2{font-size:clamp(1.7rem,1.25rem + 2vw,2.6rem);margin:0}
.al-close p{margin:.5rem 0 0}
.al-close__cta{display:grid;grid-template-columns:1fr;gap:.55rem;margin:0}
.al .al-close__cta .f-btn,.al .al-close__cta .wa{width:100%;min-height:52px}
.al .al-close .al-close__call{color:var(--f-deep)}
.al-close .hc-close__talk{color:var(--f-ink-2)}
.al-ladder{padding-top:2rem}

@media (max-width:39.99rem){
  /* the bands this page carries, closed up so the page ends inside about eight screens */
  .al .hc-jobs,.al .hc-priced,.al .hc-pro,.al .hc-faq,.al .f-which,.al .k-priced,.al .al-jobs3,.al .band.revs{padding-block:1.7rem}
  .al .hc-jobs .f-head,.al .hc-faq .f-head{margin-bottom:.8rem}
  .al main h2{font-size:clamp(1.55rem,1.15rem + 1.8vw,2.1rem)}
  .al .hc-faq__v,.al .hc-priced__art,.al .hc-pro__art{display:none}
  .al .hc-pro .hc-pair,.al .hc-pro .hc-single{max-width:100%}
  .al .band.revs .grw__note,.al .band.revs .grw__act{display:none}
  .al .band.revs .grw__sum{margin-block:.4rem .6rem}
  .al .shead{margin-bottom:1rem}
  .al .shead p{font-size:.95rem}
  .al #community{padding-block:1.6rem}
  .al .al-jobs3 .records{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--al-pad));padding-inline:var(--al-pad);scrollbar-width:none}
  .al .al-jobs3 .records>li{scroll-snap-align:start}
  .al .al-ladder{padding-bottom:1.6rem}
  .al .al-items{padding-block:1.6rem}
  .al .al-covers{padding-block:1.6rem}
}

/* the bar steps out of the way while a quote form is on screen or being typed in (BAR_JS) */
.al .callbar{transition:transform .25s var(--f-ease),visibility 0s}
.al-barout .callbar{transform:translateY(110%);visibility:hidden;transition:transform .25s var(--f-ease),visibility 0s .25s}
@media (prefers-reduced-motion:reduce){.al .callbar,.al-barout .callbar{transition:none}}

/* ---------------------------------------------------------------- 40rem up */
@media (min-width:40rem){
  .al-vis{height:13rem}
  .al .al-h1{font-size:clamp(2.7rem,1.2rem + 4.4vw,3.6rem)}
  .al-cta{display:flex;flex-wrap:wrap}
  .al .al-cta .f-btn,.al .al-cta .wa{width:auto;padding-inline:1.15rem}
  .al-card{padding:1.3rem 1.3rem 1.3rem}
  .al .al-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .al .al-tiles--word{grid-template-columns:1fr 1fr}
  .al-links__l{grid-template-columns:1fr 1fr;column-gap:2rem}
  .al-close__cta{grid-template-columns:repeat(3,auto);justify-content:start}
  .al .al-close__cta .f-btn,.al .al-close__cta .wa{width:auto}
}

/* ---------------------------------------------------------------- the desktop */
@media (min-width:64rem){
  /* the page's own picture fills the right half, under the form card; the words sit on the dark */
  .al-vis{position:absolute;top:0;right:0;bottom:0;width:50%;height:auto;z-index:0}
  .al-vis::after{background:linear-gradient(90deg,#07130b 0,rgba(7,19,11,.55) 22%,rgba(7,19,11,.12) 55%,rgba(7,19,11,.2) 100%)}
  .al-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy form" "lede form" "credit form";
    grid-template-rows:auto auto 1fr;column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start;padding:2.6rem 0 3rem;
    /* 11 Oct: tall enough that a late font swap in the left column cannot change the hero's height (fontlate.mjs: the
       hub's form and the band below moved 0.064 at 1440 with min(40rem, ...)); the form stays centred in a box that does not grow */
    min-height:max(40rem,calc(100vh - 7.5rem))}
  .al-copy{grid-area:copy;margin:0}
  .al-form{grid-area:form;margin:0;align-self:center}
  .al-lede{grid-area:lede;padding:1.3rem 0 0}
  .al-in>.credit{grid-area:credit;align-self:end;padding:1rem 0 0}
  .al .al-crumbs ol{font-size:.9rem;margin-bottom:.9rem}
  .al .al-h1{font-size:clamp(3.6rem,1.2rem + 3.4vw,5rem)}
  .al .al-h1 .f-h1__r{font-size:1.3rem;margin-top:.6rem}
  .al-price{font-size:1.1rem;margin-top:1rem}
  .al-proof{margin-top:1rem}
  .al-cta{margin-top:1.1rem}
  .al .al-cta .f-btn,.al .al-cta .wa{min-height:54px;font-size:1.04rem}
  .al-card{padding:1.6rem 1.6rem 1.5rem;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
  .al-q__h{font-size:2rem}
  .al .al-tiles{grid-template-columns:1fr 1fr}
  .al-local,.al-priced,.al-links{padding-block:3rem}
  .al-links__2{grid-template-columns:1fr 1fr;gap:3rem}
  .al-close__in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .al-fold{padding:2rem 0}
}

/* the footer's link groups fold on a phone (foot_fold); open everywhere else and with scripting off */
.al-ff>summary{list-style:none;cursor:default}
.al-ff>summary::-webkit-details-marker{display:none}
.al-ff>summary h2{display:inline}
@media (max-width:39.99rem){
  .al-ff>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;border-bottom:1px solid #1e3324}
  .al-ff>summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--f-lime);font-weight:500}
  .al-ff[open]>summary::after{content:"\2212"}
  .al-ff>summary h2{margin:0}
  .al-ff>ul{margin-top:.6rem}
}
.al-local h2+p{margin-top:.7rem}
.al-ff>summary h2{border:0;padding:0}
.al .al-f textarea{min-height:88px;font-size:16px;border-radius:10px;border:1.5px solid #8d988a;width:100%}
.al-close__h3{margin:1.2rem 0 .5rem;font-size:1.06rem}
.al-close__pts{margin:0}
.al-close__pts li{font-size:.96rem}
.al-promise--2{margin-top:.6rem}
/* the hub's meta pills, at the foot on the light closing band (they were drawn for the dark hero) */
.al-close .al-meta--light li{color:var(--f-ink);border-color:rgba(0,104,0,.35)}
.al-close .al-more{margin-top:1rem}