/* ============================================================================
   WADSWORTH QUADS — house system (light)
   Built on the client's own identity: the brand green #69BE28 taken from
   wadsworthquads.co.uk, where it has been their colour for a decade and sits
   naturally beside Kawasaki, their biggest brand.

   TWO CONTRAST FACTS SHAPE EVERYTHING HERE
   1. #69BE28 on white is 2.33:1. The brand green can be a SURFACE but never
      text on a light ground. Green type uses --wq-green-ink (#3F7A15, 5.5:1).
   2. White on #69BE28 is also 2.33:1. Every green surface carries near-black
      text (8.3:1). Green is never a white-text button.

   The logo wordmark is white in the original, so light pages use logo-dark.png
   — the same file with the white recoloured and the green swoosh preserved.

   Type: Archivo (display, client-committed in DESIGN.md) + Source Sans 3
   (body). Both self-hosted variable woff2. See the note above :root for why
   the previous Archivo + Inter pairing was replaced.
   ========================================================================= */

/* Body face. Archivo is a neo-grotesque; Inter is another neo-grotesque, so the
   old pair had no contrast axis at all (and Inter is the reflex default this
   kind of page reaches for). Source Sans 3 is humanist — genuine personality
   contrast against Archivo — and its open apertures hold up at 17px for the
   older readership PRODUCT.md describes. Variable, 28KB, one file. */
@font-face{ font-family:'Source Sans 3'; src:url(/assets/fonts/source-sans-3.woff2) format('woff2');
    font-weight:300 700; font-display:swap; }
/* Metric-matched fallback so the swap doesn't shift layout. */
@font-face{ font-family:'SS3 Fallback'; src:local('Helvetica Neue'),local('Arial');
    size-adjust:97%; ascent-override:98%; descent-override:28%; line-gap-override:0%; }

/* Display face — Clash Display (Fontshare, self-hosted). Replaces Archivo for
   headings: a sharper, more characterful cut that gives the big uppercase hero
   real presence. Weight ranges map an 800 request to the 700 file (no synthetic
   bold). Archivo stays as the metric-ish fallback. */
@font-face{ font-family:'Clash Display'; src:url(/assets/fonts/clash-display-600.woff2) format('woff2');
    font-weight:500 640; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url(/assets/fonts/clash-display-700.woff2) format('woff2');
    font-weight:641 900; font-display:swap; }

:root{
    /* ---- Colour ---- */
    --wq-bg:#FFFFFF;
    --wq-tint:#F5F7F2;         /* section wash — neutral with a green lean, not cream */
    --wq-panel:#FFFFFF;
    --wq-stage:#F2F4EE;        /* product image ground */
    --wq-line:#E2E7DC;
    --wq-line-2:#CFD6C7;
    --wq-green:#69BE28;        /* SURFACES ONLY */
    --wq-green-hi:#7ED233;
    --wq-green-ink:#3F7A15;    /* green TEXT on light — 5.5:1 on white */
    --wq-green-deep:#084423;   /* the real logo green — wordmark on white, 11.9:1 */
    --wq-ink:#141810;          /* headings / primary — 18.9:1 */
    --wq-ink-2:#4C5545;        /* body — 7.8:1 on white, 7.1:1 on tint */
    --wq-ink-3:#636C5B;        /* meta — 5.5:1 on white, 5.0:1 on tint */
    --wq-dark:#141810;         /* dark bands */

    /* ---- Type scale, 1.28 ratio. Base 17px: PRODUCT.md calls out an older
           agricultural readership and legible sizes. 12px is a hard floor. --- */
    --t-xs:  .75rem;      /* 12 — flags, tiny labels     */
    --t-sm:  .8125rem;    /* 13 — meta, eyebrows         */
    --t-md:  .9375rem;    /* 15 — secondary copy         */
    --t-base:1.0625rem;   /* 17 — body                   */
    --t-lg:  1.1875rem;   /* 19 — card titles            */
    --t-xl:  1.5rem;      /* 24 — block headings         */
    --t-2xl: clamp(1.9rem,3.3vw,2.7rem);
    --t-3xl: clamp(2.3rem,5vw,4.1rem);

    /* ---- Spacing, derived from the type -----------------------------------
       The body line box IS the unit: 17px x 1.647 = 28px. Every vertical value
       below is a multiple of it, so text and space share one base instead of
       being two unrelated systems sitting next to each other. Sections keep
       three deliberate rhythms — uniform padding gives a page no pacing. */
    --rhythm:1.75rem;                       /* 28px — one body line */
    --s-1:calc(var(--rhythm) * .25);        /*  7 */
    --s-2:calc(var(--rhythm) * .5);         /* 14 */
    --s-3:calc(var(--rhythm) * .75);        /* 21 */
    --s-4:var(--rhythm);                    /* 28 */
    --s-5:calc(var(--rhythm) * 1.5);        /* 42 */
    --s-6:calc(var(--rhythm) * 2);          /* 56 */
    --sec-tight:clamp(calc(var(--rhythm) * 1.5), 4.6vw, calc(var(--rhythm) * 2.5));
    --sec:clamp(calc(var(--rhythm) * 2.5), 7.4vw, calc(var(--rhythm) * 4));
    --sec-airy:clamp(calc(var(--rhythm) * 3), 9.6vw, calc(var(--rhythm) * 6));

    --display:'Clash Display','Archivo',system-ui,sans-serif;
    --wq-body:'Source Sans 3','SS3 Fallback',var(--body);
    --wq-ez:cubic-bezier(.22,.9,.28,1);
    --wq-wrap:1320px;
    --wq-gut:clamp(20px,3vw,40px);
}

/* ---- Typography ----------------------------------------------------------
   Uppercase is a voice, not a default: the hero headline and the closing band,
   plus small labels. Everything a customer reads runs in natural case —
   section headings, card titles, model rows. Tracking follows size.
   ------------------------------------------------------------------------ */
.wq{ background:var(--wq-bg); color:var(--wq-ink-2);
     font-family:var(--wq-body);
     font-size:var(--t-base); line-height:1.647;   /* 17 x 1.647 = 28 = --rhythm */
     font-kerning:normal; font-optical-sizing:auto; }
.wq *{ box-sizing:border-box; }
.wq h1,.wq h2,.wq h3,.wq h4{ font-family:var(--display); color:var(--wq-ink);
    font-weight:800; line-height:1.08; margin:0; text-transform:none;
    letter-spacing:-.004em; text-wrap:balance; }
.wq h1{ letter-spacing:-.012em; line-height:1.02; }
/* :where() — zero specificity, so component measures are not overridden. */
.wq :where(p){ margin:0; text-wrap:pretty; max-width:72ch; }
.wq img{ display:block; max-width:100%; height:auto; }
.wq a{ text-decoration:none; }
.wqwrap{ width:100%; max-width:var(--wq-wrap); margin:0 auto; padding:0 var(--wq-gut); }
.wqnum{ font-variant-numeric:tabular-nums; }
.wq :where(a,button):focus-visible{ outline:3px solid var(--wq-green-ink); outline-offset:3px; }

/* ---- Buttons ---- */
.wqbtn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:var(--wq-body); font-weight:700; font-size:var(--t-md); letter-spacing:.02em;
    padding:1rem 1.9rem; border:2px solid transparent; border-radius:3px; cursor:pointer;
    transition:background .2s var(--wq-ez), border-color .2s var(--wq-ez), color .2s var(--wq-ez); }
.wqbtn--green{ background:var(--wq-green); color:#0B0D0A; }
.wqbtn--green:hover{ background:var(--wq-green-hi); }
.wqbtn--line{ border-color:var(--wq-line-2); color:var(--wq-ink); }
.wqbtn--line:hover{ border-color:var(--wq-ink); }
.wqbtn--dark{ background:var(--wq-dark); color:#fff; }
.wqbtn--dark:hover{ background:#000; }
.wqbtn .ar{ transition:transform .2s var(--wq-ez); }
.wqbtn:hover .ar{ transform:translateX(4px); }

/* ---- Section furniture ---- */
.wqkick{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:var(--t-xs);
    letter-spacing:.2em; text-transform:uppercase; color:var(--wq-green-ink); }
.wqkick::before{ content:"»"; font-size:1rem; line-height:1; }
.wqh2{ font-size:var(--t-2xl); margin-top:var(--s-2); letter-spacing:-.025em; }
.wqlead{ color:var(--wq-ink-3); font-size:var(--t-base); line-height:1.647;
    max-width:62ch; margin-top:var(--s-3); }
.wqsec{ padding:var(--sec) 0; }
.wqsec--airy{ padding:var(--sec-airy) 0; }
.wqsec--tight{ padding:var(--sec-tight) 0; }
.wqsec--tint{ background:var(--wq-tint); }
/* Grid, not flex: as a flex row the heading and the lead never both fitted and
   the lead dropped underneath, wasting the right half of every section head. */
.wqhead{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--s-3) clamp(32px,5vw,80px); align-items:end; margin-bottom:var(--s-6); }
.wqhead .wqlead{ margin-top:0; }
@media(max-width:900px){ .wqhead{ grid-template-columns:1fr; } }

/* ---- Header ---- */
.wq-head.site-head{ background:var(--wq-bg); border-bottom:1px solid var(--wq-line); }
.wq-head .wrap{ max-width:var(--wq-wrap); height:104px; padding:0 var(--wq-gut); }
.wq-head .logo .mark{ display:none; }
.wq-head .logo img{ height:58px; width:auto; }
/* Real nav logo — wide name+strapline lockup; size by height, cap so it
   never crowds the menu (beats the mobile height rule via a.wqnav__logo). */
.wq-head a.wqnav__logo img{ height:clamp(34px,3vw,42px); width:auto; }
.wq-head .nav{ gap:var(--s-4); }
.wq-head .nav a:not(.btn){ font-family:var(--wq-body); font-weight:700; font-size:var(--t-sm);
    letter-spacing:.1em; text-transform:uppercase; color:var(--wq-ink); }
.wq-head .nav a:not(.btn):hover{ color:var(--wq-green-ink); }
.wq-head .navdrop__t{ font-family:var(--wq-body); font-weight:700; font-size:var(--t-sm);
    letter-spacing:.1em; text-transform:uppercase; color:var(--wq-ink); }
.wq-head .navdrop__menu{ background:#fff; border-color:var(--wq-line); border-radius:3px;
    box-shadow:0 26px 50px -28px rgba(20,24,16,.34); }
.wq-head .navdrop__menu a{ color:var(--wq-ink-2); border-radius:2px; }
.wq-head .navdrop__menu a:hover{ background:var(--wq-tint); color:var(--wq-green-ink); }
.wq-head .navdrop__lab{ color:var(--wq-ink-3); border-color:var(--wq-line); }
.wq-head .nav .phone{ border-color:var(--wq-line-2); color:var(--wq-ink); border-radius:3px; }
.wq-head .nav .phone svg{ color:var(--wq-green-ink); }
.wq-head .nav .btn--red{ background:var(--wq-green); color:#0B0D0A; border-radius:3px; font-weight:700; }
.wq-head .nav .btn--red:hover{ background:var(--wq-green-hi); box-shadow:none; transform:none; }
.wq-head .nav-toggle{ color:var(--wq-ink); }
.wq-head .mnav{ background:#fff; border-top:1px solid var(--wq-line); }
.wq-head .mnav a{ color:var(--wq-ink); border-color:var(--wq-line); }
.wq-head .mnav a.sub{ color:var(--wq-ink-3); }
/* Utility strip: the one dark band at the top, carrying both branch numbers */
.topbar.wq-top{ background:var(--wq-dark); border-bottom:0; font-size:var(--t-sm); color:#9FA898; }
.topbar.wq-top .wrap{ max-width:var(--wq-wrap); min-height:46px; padding:0 var(--wq-gut); }
.topbar.wq-top a{ color:#fff; font-weight:700; }
.topbar.wq-top a:hover{ color:var(--wq-green); }
.topbar.wq-top .r{ color:#9FA898; }

/* ---- Hero ---- */
/* 80% of the viewport, not the whole of it — so the facts strip below shows a
   sliver and the page reads as having somewhere to go. svh rather than vh so
   iOS doesn't jump when the URL bar collapses; vh first as the fallback. */
.wqhero{ position:relative; overflow:hidden; background:var(--wq-dark);
    min-height:80vh; min-height:80svh; display:grid; align-items:center; }
.wqhero__bg{ position:absolute; inset:0; z-index:0; }
.wqhero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
/* Eased from .92/.80 — the heavier scrim flattened the dry stone wall and tree
   on the left into black. White headline still clears AA comfortably. */
.wqhero__bg::after{ content:""; position:absolute; inset:0; background:
    linear-gradient(92deg, rgba(11,14,8,.90) 0%, rgba(11,14,8,.74) 34%, rgba(11,14,8,.20) 66%, rgba(11,14,8,.38) 100%),
    linear-gradient(0deg, rgba(11,14,8,.58) 0%, rgba(11,14,8,0) 32%); }
/* Kept tight so the hero still fits inside 80svh on a ~800px laptop viewport;
   any taller and the content, not the min-height, sets the height and the strip
   below disappears. */
.wqhero .wqwrap{ position:relative; z-index:1; width:100%;
    padding-top:clamp(32px,3.4vw,52px); padding-bottom:clamp(32px,3.4vw,52px); }
.wqhero .wqkick{ color:#fff; font-size:var(--t-sm); letter-spacing:.24em; opacity:.92; margin-bottom:var(--s-2); }
/* Designed eyebrow: swap the » glyph for a short green rule. */
.wqhero .wqkick::before{ content:""; width:30px; height:2px; background:var(--wq-green); border-radius:2px; }
.wqhero .wqbtn--green{ box-shadow:0 16px 34px -14px rgba(105,190,40,.55); }

/* Typeset wordmark — from the shopfront sign, no logo file exists. Serif name +
   green specialism line; colour set by context (dark header / dark footer). */
.wqmark{ display:inline-flex; flex-direction:column; line-height:1; gap:5px; }
.wqmark__name{ font-family:Georgia,'Times New Roman',serif; font-weight:700;
    font-size:clamp(1.1rem,1.5vw,1.45rem); letter-spacing:.004em; text-transform:uppercase;
    color:var(--wq-green-deep); white-space:nowrap; }
.wqmark__amp{ color:inherit; }
.wqmark__sub{ font-family:var(--wq-body); font-weight:700; font-size:.55rem;
    letter-spacing:.2em; text-transform:uppercase; color:var(--wq-ink-3); }
.wq-foot .wqmark__name{ color:#fff; }
.wq-foot .wqmark__amp{ color:var(--wq-green); }
.wq-foot .wqmark__sub{ color:var(--wq-green); }
.wqhero h1{ font-size:clamp(2.5rem,5.4vw,4.6rem); max-width:15ch; text-transform:uppercase; color:#fff;
    letter-spacing:-.005em; line-height:.98; word-spacing:.04em; }
.wqhero h1 em{ font-style:normal; color:var(--wq-green); }
.wqhero__sub{ color:#D4DBCE; font-size:clamp(1.05rem,1.2vw,1.15rem);
    /* Light on dark reads lighter: line-height +.06, tracking +.012em and one
       weight step up, per the type reference. All three, not just one. */
    line-height:1.68; letter-spacing:.012em; font-weight:450;
    max-width:46ch; margin:var(--s-3) 0 var(--s-4); }
.wqhero__acts{ display:flex; gap:14px; flex-wrap:wrap; }
/* The hero is now the only dark surface on the page, so the outline button
   needs inverting — the light-page version is ink-on-transparent and vanishes
   against the photograph. */
.wqhero .wqbtn--line{ border-color:rgba(255,255,255,.45); color:#fff; }
.wqhero .wqbtn--line:hover{ border-color:#fff; background:rgba(255,255,255,.12); }

/* Facts strip sits under the hero on the light ground, not over the photo */
.wqfacts{ background:var(--wq-tint); border-bottom:1px solid var(--wq-line); }
.wqfacts .wqwrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--wq-line); padding:0; }
.wqfacts div{ background:var(--wq-tint); padding:var(--s-4) clamp(20px,2.6vw,36px); }
.wqfacts b{ display:block; font-family:var(--display); font-weight:800; color:var(--wq-ink);
    font-size:1.06rem; letter-spacing:.004em; word-spacing:.05em; }
.wqfacts span{ display:block; font-size:var(--t-sm); color:var(--wq-ink-3); margin-top:4px; }

/* ---- Machine cards ---- */
.wqgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); }
.wqmore{ display:flex; justify-content:center; margin-top:var(--s-3); }
.wqm{ background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:4px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:border-color .24s var(--wq-ez), box-shadow .24s var(--wq-ez), transform .24s var(--wq-ez); }
.wqm:hover{ border-color:var(--wq-line-2); transform:translateY(-4px);
    box-shadow:0 26px 46px -30px rgba(20,24,16,.4); }
.wqm__img{ position:relative; aspect-ratio:4/3; background:var(--wq-stage); display:grid;
    place-items:center; padding:7%; overflow:hidden; }
.wqm__img img{ width:100%; height:100%; object-fit:contain; transition:transform .4s var(--wq-ez); }
.wqm__img--photo{ padding:0; }
.wqm__img--photo img{ object-fit:cover; }
.wqm:hover .wqm__img img{ transform:scale(1.05); }
.wqm__flag{ position:absolute; top:12px; left:12px; z-index:2; background:var(--wq-green); color:#0B0D0A;
    font-weight:800; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
    padding:.3em .68em; border-radius:2px; }
.wqm__flag--used{ background:var(--wq-dark); color:#fff; }
.wqm__b{ padding:var(--s-3) var(--s-3) 0; flex:1; }
.wqm__k{ font-size:var(--t-xs); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--wq-ink-3); }
.wqm h3{ font-size:var(--t-lg); font-weight:700; line-height:1.3; letter-spacing:-.008em; margin:9px 0 9px; }
.wqm__s{ font-size:var(--t-md); color:var(--wq-ink-3); line-height:1.55; }
.wqm__f{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:var(--s-2) var(--s-3) var(--s-3); margin-top:var(--s-3); border-top:1px solid var(--wq-line); }
.wqm__p{ font-family:var(--display); font-weight:800; font-size:1.35rem; color:var(--wq-ink);
    line-height:1.05; letter-spacing:-.015em; }
.wqm__p small{ display:block; font-family:var(--wq-body); font-weight:600; font-size:var(--t-xs);
    letter-spacing:.1em; text-transform:uppercase; color:var(--wq-ink-3); margin-top:4px; }
.wqm__go{ font-size:var(--t-sm); font-weight:700; color:var(--wq-green-ink); white-space:nowrap;
    letter-spacing:.06em; text-transform:uppercase; }

/* ---- Split blocks ---- */
.wqsplit{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,88px); align-items:center; }
.wqsplit__img{ border-radius:4px; overflow:hidden; border:1px solid var(--wq-line); }
.wqsplit__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.wqlist{ list-style:none; margin:var(--s-4) 0 var(--s-5); padding:0; }
.wqlist li{ position:relative; padding:12px 0 12px 28px; border-bottom:1px solid var(--wq-line);
    font-size:var(--t-md); line-height:1.6; color:var(--wq-ink-2); }
.wqlist li::before{ content:"»"; position:absolute; left:0; top:12px; color:var(--wq-green-ink); font-weight:700; }

/* ---- Honda price table ---- */
.wqtable{ width:100%; border-collapse:collapse; margin:var(--s-4) 0 var(--s-5); }
.wqtable th{ padding:10px 0; text-align:left; font-family:var(--wq-body); font-weight:700;
    font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--wq-ink-3); }
.wqtable th:last-child{ text-align:right; }
.wqtable tr{ border-bottom:1px solid var(--wq-line); }
.wqtable tr:first-child{ border-top:2px solid var(--wq-ink); }
.wqtable td{ padding:14px 0; font-size:var(--t-base); }
.wqtable td:first-child{ font-family:var(--display); font-weight:750; color:var(--wq-ink); letter-spacing:-.005em; }
.wqtable td:nth-child(2){ color:var(--wq-ink-3); font-size:var(--t-sm); }
.wqtable td:last-child{ text-align:right; font-family:var(--display); font-weight:800;
    color:var(--wq-ink); white-space:nowrap; }

/* ---- Branches ---- */
.wqbranch{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.wqbranch > div{ background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:4px;
    padding:clamp(28px,3vw,44px); }
.wqbranch h3{ font-size:var(--t-xl); letter-spacing:-.015em; }
.wqbranch .role{ color:var(--wq-green-ink); font-weight:700; font-size:var(--t-xs); letter-spacing:.14em;
    text-transform:uppercase; margin:9px 0 var(--s-3); }
.wqbranch address{ font-style:normal; color:var(--wq-ink-3); font-size:var(--t-md); line-height:1.75; }
.wqbranch .tel{ display:block; font-family:var(--display); font-weight:800; font-size:1.5rem;
    color:var(--wq-ink); margin:var(--s-2) 0 4px; }
.wqbranch .tel:hover{ color:var(--wq-green-ink); }
.wqbranch .hrs{ color:var(--wq-ink-3); font-size:var(--t-md); margin:0 0 8px; }
.wqbranch .mail{ color:var(--wq-green-ink); font-size:var(--t-md); }

/* ---- Quotes ---- */
.wqquotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,48px); }
.wqquote{ margin:0; padding:var(--s-3) 0 0; border-top:3px solid var(--wq-green); }
.wqquote p{ font-size:var(--t-base); line-height:1.65; color:var(--wq-ink-2); }
.wqquote cite{ display:block; margin-top:18px; font-style:normal; font-weight:700;
    color:var(--wq-ink); font-size:var(--t-md); }
.wqquote cite span{ color:var(--wq-ink-3); font-weight:400; }

/* ---- Areas served ---- */
.wqareas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-3); }
.wqareas span{ border:1px solid var(--wq-line); border-radius:2px; padding:.44rem .9rem;
    font-size:var(--t-md); color:var(--wq-ink-2); background:#fff; }

/* ---- Closing band ---- */
.wqband{ background:var(--wq-green); color:#0B0D0A; }
.wqband .wqwrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
    flex-wrap:wrap; padding-top:var(--sec-tight); padding-bottom:var(--sec-tight); }
.wqband h2{ color:#0B0D0A; font-size:clamp(1.5rem,2.6vw,2.1rem); text-transform:uppercase; letter-spacing:-.02em; }
.wqband p{ color:rgba(11,13,10,.76); margin-top:8px; }
.wqband .wqbtn--line{ border-color:rgba(11,13,10,.38); color:#0B0D0A; }
.wqband .wqbtn--line:hover{ border-color:#0B0D0A; background:rgba(11,13,10,.08); }
.wqband .wqbtn--dark{ background:#0B0D0A; color:var(--wq-green); }
.wqband .wqbtn--dark:hover{ background:#000; }

@media(max-width:1100px){
    .wqcats,.wqgrid{ grid-template-columns:1fr 1fr; }
    .wqsplit,.wqbranch{ grid-template-columns:1fr; }
    .wqquotes{ grid-template-columns:1fr; }
    .wqfacts .wqwrap{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
    .wqcats,.wqgrid{ grid-template-columns:1fr; }
    .wqfacts .wqwrap{ grid-template-columns:1fr; }
    .wq-head .wrap{ height:78px; }
    .wq-head .logo img{ height:44px; }
}
@media(prefers-reduced-motion:reduce){
    .wq *{ transition:none !important; }
    .wqcat:hover,.wqm:hover{ transform:none; }
    .wqcat:hover .wqcat__img img,.wqm:hover .wqm__img img{ transform:none; }
}

/* ============================================================================
   SITEWIDE RECOLOUR + FOOTER
   The inner templates keep their layout and copy — only the header, footer and
   colour change. The older stylesheet drives everything off --red, so the
   tokens are repointed here and then the handful of cases where a straight
   swap would break are corrected explicitly.

   Three rules, because green behaves nothing like the red it replaces:
   1. Green TEXT on a light ground must be --wq-green-ink. Bright #69BE28 on
      white is 2.33:1.
   2. Green SURFACES carry near-black text. White on #69BE28 is also 2.33:1.
   3. Error states stay red. Turning validation green destroys the signal.
   ========================================================================= */
:root{
    --red:#69BE28;            /* decorative + surfaces + text on dark */
    --red-dk:#54A01C;
    --red-soft:#EDF7E3;
    --wq-err:#C4342C;         /* validation only */
}

/* --- 1. Green text on light grounds --------------------------------------- */
.dot,
.sec-head h2 .r,
.hlist li .pr,
.branch .role,
.tlink .ar,
.bc__ico,
.seeall svg,
.cbranch .tel,
.detail__feats span::before,
.opt:hover span,
.reset:hover,
.chip:hover,
.chip:hover span,
.navdrop__menu a:hover,
.tax:hover{ color:var(--wq-green-ink); }
/* …but on the dark blocks the bright green is right and reads at 8.3:1.
   .dot defaults to the ink green above, so every dark context re-brightens it. */
.hero h1 .r,.hero .dot,.trust h2 .r,.trust .dot,.topbar a:hover,
.pagehead .dot,.pagehead .r,.cta .dot,.photoband .dot,.sband .dot,
.hero__phone .lab svg,.yard--now b{ color:var(--wq-green); }

/* Breadcrumb separator on the dark pageheads measured 2.23:1 — pre-existing
   in both accent modes, caught by the red-mode sweep which no longer skips
   .pagehead. */
.pagehead .crumb span{ color:#A9AFB8; }

/* Placeholder wordmark on machines with no photo. aria-hidden, so decorative,
   but 1.34:1 was unreadable even as a placeholder. */
.mcard__media .ghost,.tile__ghost{ color:#B9C0B2; }

/* --- 2. Green surfaces take near-black text ------------------------------- */
.btn--red,.nav a.btn--red{ background:var(--wq-green); color:#0B0D0A; }
.btn--red:hover,.nav a.btn--red:hover{ background:var(--wq-green-hi); color:#0B0D0A; box-shadow:none; }
.tag--new,.filters-btn .badge,.pricebox__sold{ background:var(--wq-green); color:#0B0D0A; }
.chip--clear:hover{ background:var(--wq-green); border-color:var(--wq-green); color:#0B0D0A; }
.bc--red{ background:var(--wq-green); color:#0B0D0A; }
.bc--red h3,.bc--red .price-lg{ color:#0B0D0A; }
.bc--red p{ color:rgba(11,13,10,.74); }
.bc--red .tlink,.bc--red .tlink .ar{ color:#0B0D0A; }
.bc--red .bc__ico{ background:rgba(11,13,10,.14); color:#0B0D0A; }
.cta{ background:var(--wq-green); color:#0B0D0A; }
.cta h2{ color:#0B0D0A; }
.cta p{ color:rgba(11,13,10,.74); }
.cta .btn--dark{ background:#0B0D0A; color:var(--wq-green); }
.cta .btn--line-w{ border-color:rgba(11,13,10,.4); color:#0B0D0A; }
.cta .btn--line-w:hover{ background:rgba(11,13,10,.08); border-color:#0B0D0A; }
::selection{ background:var(--wq-green); color:#0B0D0A; }

/* --- 3. Errors stay red --------------------------------------------------- */
.field .err{ color:var(--wq-err); }
.field input.is-err,.field select.is-err,.field textarea.is-err{ border-color:var(--wq-err); }
.flash-err{ background:#FBECEB; border-color:#EFC5C2; color:#8E241E; }

/* --- Footer -------------------------------------------------------------- */
.site-foot.wq-foot{ background:var(--wq-dark); color:#A9B3A0; font-family:var(--wq-body);
    font-size:var(--t-md); border-top:3px solid var(--wq-green); }
.wq-foot .wrap{ max-width:var(--wq-wrap); padding-left:var(--wq-gut); padding-right:var(--wq-gut);
    padding-top:var(--sec-tight); padding-bottom:var(--s-6); gap:var(--s-5); }
.wq-foot .logo .mark{ display:none; }
.wq-foot .logo img{ height:52px; width:auto; }
/* Real banner logo sits on a white panel — it's forest-green + black on white. */
.wqfoot__logo{ display:inline-block; width:min(88%,404px); background:#fff; padding:12px 16px;
    border-radius:10px; box-shadow:0 10px 30px -18px rgba(0,0,0,.55); }
.wq-foot .wqfoot__logo img{ display:block; width:100%; height:auto; }
.wq-foot h3{ font-family:var(--wq-body); font-weight:700; font-size:var(--t-xs);
    letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 var(--s-3); }
.wq-foot .fnav{ gap:var(--s-2); font-size:var(--t-md); }
.wq-foot .fnav a{ color:#A9B3A0; }
.wq-foot .fnav a:hover{ color:var(--wq-green); }
.wq-foot address{ font-size:var(--t-md); line-height:1.75; color:#A9B3A0; }
.wq-foot address strong{ color:#fff; }
.wq-foot address a{ color:#fff !important; font-weight:700; }
.wq-foot address a:hover{ color:var(--wq-green) !important; }
.wq-foot p{ color:#A9B3A0; }
.wq-foot .base{ border-top:1px solid rgba(255,255,255,.12); }
.wq-foot .base .wrap{ max-width:var(--wq-wrap); padding:var(--s-3) var(--wq-gut);
    font-size:var(--t-sm); color:#8A9382; }

/* ---- Footer scene: photograph dissolving into the footer ground ----------
   The blend only works if the gradient's final stop is EXACTLY the footer
   background. Anything approximate leaves a visible seam across full width. */
.wqfoot__scene{ position:relative; isolation:isolate; overflow:hidden;
    min-height:clamp(480px,50vw,700px); display:grid; align-items:end; }
.wqfoot__scene img{ position:absolute; inset:0; z-index:-2;
    width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* Scrim is calibrated to the photograph, not guessed. The previous sunlit
   shot needed ~.96 under the CTA to keep the green line legible; this one is
   a wet, overcast scene that is already dark, so the scrim is pulled right
   back and the machine actually reads. Values below are set from measuring
   the brightest pixel under each text element and recomputing — see the
   commit for the numbers. */
.wqfoot__scene::after{ content:""; position:absolute; inset:0; z-index:-1; background:
    linear-gradient(180deg,
        rgba(20,24,16,.10) 0%,
        rgba(20,24,16,.20) 34%,
        rgba(20,24,16,.50) 54%,
        rgba(20,24,16,.80) 66%,
        rgba(20,24,16,.96) 86%,
        var(--wq-dark) 100%); }
.wqfoot__cta{ text-align:center; padding:0 var(--wq-gut) var(--s-5); }
.wqfoot__cta h2{ color:#fff; font-size:clamp(1.9rem,4vw,3.2rem); text-transform:uppercase;
    letter-spacing:-.028em; line-height:1.06; }
.wqfoot__cta h2 em{ font-style:normal; color:var(--wq-green); }
.wqfoot__cta p{ color:#C3CCBB; margin:var(--s-3) auto 0; max-width:48ch; font-size:var(--t-base); }
.wqfoot__cta .wqbtn{ margin-top:var(--s-4); }
.wqbtn--white{ background:#fff; color:#0B0D0A; }
.wqbtn--white:hover{ background:var(--wq-green); color:#0B0D0A; }

/* ---- Footer columns ---- */
.wq-foot .wrap{ grid-template-columns:1.5fr .8fr .8fr .9fr 1.2fr; align-items:start; }
.wqfoot__brand p{ margin:var(--s-3) 0 0; max-width:42ch; font-size:var(--t-md); line-height:1.7; }
.wqfoot__social{ display:flex; gap:10px; margin-top:var(--s-4); }
.wqfoot__social a{ width:40px; height:40px; border-radius:50%; background:var(--wq-green);
    color:#0B0D0A; display:grid; place-items:center; transition:background .2s var(--wq-ez); }
.wqfoot__social a:hover{ background:#fff; }
.wqfoot__social svg{ width:18px; height:18px; }
.wqfoot__yards .cols{ grid-template-columns:1fr 1fr; gap:var(--s-3); }

@media(max-width:1100px){
    .wq-foot .wrap{ grid-template-columns:1fr 1fr 1fr; }
    .wqfoot__brand{ grid-column:1 / -1; }
    .wqfoot__yards{ grid-column:1 / -1; }
}
@media(max-width:640px){
    .wq-foot .wrap{ grid-template-columns:1fr; }
    .wqfoot__yards .cols{ grid-template-columns:1fr; }
    .wqfoot__scene{ min-height:340px; }
}

/* ---- Hero video ---------------------------------------------------------
   The still underneath is the LCP element and the reduced-motion fallback;
   the video simply covers it. Same crop and object-position on both so there
   is no shift when the video starts. */
.wqhero__bg video{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 62%; }
@media(prefers-reduced-motion:reduce){
    .wqhero__bg video{ display:none; }
}

/* ---- Brand logo strip ----------------------------------------------------
   Five franchise logos normalised to one ink silhouette (see tools note in
   _brands.php). Rest at 55% opacity so the strip reads as texture, not five
   competing marks; full opacity on hover/focus names the brand. */
.wqbrandbar{ background:var(--wq-tint); border-block:1px solid var(--wq-line); }
.wqbrandbar .wqwrap{ display:flex; align-items:center; gap:clamp(20px,3.4vw,54px);
    padding-top:var(--s-4); padding-bottom:var(--s-4); flex-wrap:wrap; }
.wqbrandbar__lab{ font-weight:700; font-size:var(--t-xs); letter-spacing:.18em;
    text-transform:uppercase; color:var(--wq-ink-3); flex:none; }
.wqbrandbar__row{ display:flex; align-items:center; gap:clamp(18px,3vw,48px);
    flex:1; flex-wrap:wrap; }
.wqbrandbar__row a{ display:block; opacity:.55; transition:opacity .2s var(--wq-ez); }
.wqbrandbar__row a:hover,.wqbrandbar__row a:focus-visible{ opacity:1; }
.wqbrandbar__row img{ height:clamp(30px,3.4vw,46px); width:auto; }

/* ---- Inner page header (About etc): short dark band over a photograph ---- */
.wqpage{ position:relative; overflow:hidden; background:var(--wq-dark); }
.wqpage__bg{ position:absolute; inset:0; z-index:0; }
.wqpage__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.wqpage__bg::after{ content:""; position:absolute; inset:0; background:
    linear-gradient(92deg, rgba(11,14,8,.92) 0%, rgba(11,14,8,.78) 40%, rgba(11,14,8,.3) 75%, rgba(11,14,8,.5) 100%); }
.wqpage .wqwrap{ position:relative; z-index:1; padding-top:clamp(48px,5.4vw,84px);
    padding-bottom:clamp(48px,5.4vw,84px); }
.wqpage .wqkick{ color:var(--wq-green); }
.wqpage h1{ color:#fff; font-size:clamp(2rem,4vw,3.2rem); text-transform:uppercase; max-width:20ch; }
.wqpage__sub{ color:#D4DBCE; max-width:52ch; margin-top:var(--s-3); }
.wqpage__crumb{ font-size:var(--t-sm); color:#9FA898; margin-bottom:var(--s-3); }
/* Legal / prose pages (privacy) */
.wqlegal{ max-width:70ch; }
.wqlegal h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:var(--s-5) 0 var(--s-2); }
.wqlegal p, .wqlegal li{ font-size:var(--t-md); line-height:1.7; color:var(--wq-ink-2); }
.wqlegal p{ margin:0 0 var(--s-3); }
.wqlegal ul.wqlist{ margin:0 0 var(--s-3); }
.wqlegal a{ color:var(--wq-green-ink); text-decoration:underline; }
.wqform__privacy{ font-size:var(--t-sm); color:var(--wq-ink-3); margin-top:var(--s-3); }
.wqform__privacy a{ color:var(--wq-green-ink); }
.wqpage__crumb a{ color:#fff; }
.wqpage__crumb a:hover{ color:var(--wq-green); }

/* ---- About: icon value row ---- */
.wqvals{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); }
.wqvals > div{ border-top:2px solid var(--wq-green); padding-top:var(--s-3); }
.wqvals svg{ width:30px; height:30px; color:var(--wq-green-ink); }
.wqvals b{ display:block; font-family:var(--display); font-weight:800; color:var(--wq-ink);
    font-size:var(--t-lg); margin:12px 0 8px; }
.wqvals p{ font-size:var(--t-md); color:var(--wq-ink-3); line-height:1.6; }
@media(max-width:1000px){ .wqvals{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .wqvals{ grid-template-columns:1fr; } }

/* ---- Brand tabs (new machines) ------------------------------------------
   Head: title left, tablist right. Tabs are real buttons with tab ARIA;
   without JS the first panel simply renders and the rest stay [hidden]. */
.wqtabhead{ display:flex; align-items:flex-end; justify-content:space-between;
    gap:var(--s-3) var(--s-4); flex-wrap:wrap; margin-bottom:clamp(28px,3.4vw,44px); }
.wqtabs{ display:flex; gap:8px; flex-wrap:wrap; }
.wqtab{ font-family:var(--wq-body); font-weight:700; font-size:var(--t-sm); letter-spacing:.06em;
    text-transform:uppercase; color:var(--wq-ink); background:#fff; border:1.5px solid var(--wq-line-2);
    border-radius:3px; padding:.72rem 1.3rem; cursor:pointer;
    transition:background .18s var(--wq-ez), border-color .18s var(--wq-ez); }
.wqtab:hover{ border-color:var(--wq-ink); }
.wqtab.on{ background:var(--wq-green); border-color:var(--wq-green); color:#0B0D0A; }
.wqtabempty{ border:1px solid var(--wq-line); border-radius:4px; background:var(--wq-tint);
    padding:clamp(28px,3.4vw,52px); text-align:center; }
.wqtabempty h3{ font-size:var(--t-xl); }
.wqtabempty p{ color:var(--wq-ink-3); max-width:52ch; margin:12px auto var(--s-4); }
.wqtabempty > div{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media(max-width:900px){ .wqtabhead{ align-items:flex-start; flex-direction:column; } }

/* Note above a brand tab that only holds used stock — keeps the "new machines"
   promise honest while still showing the brand's yard. */
.wqtabnote{ font-size:var(--t-md); color:var(--wq-ink-3); max-width:62ch;
    margin:0 0 var(--s-3); padding-left:14px; position:relative; }
.wqtabnote::before{ content:"»"; position:absolute; left:0; color:var(--wq-green-ink); font-weight:700; }

/* ---- Department ad bento (white) ----------------------------------------
   Patriot-style collage flipped to white per Nick: white cards, ink copy,
   product cut-outs anchored to the free corner (the supplier studio shots
   are white-seamless, so they sit on white natively — no scrim needed and
   text contrast is plain ink-on-white). Copy is width-capped so text and
   image never share ground; overlap is asserted in the browser. Lawnmowers
   and trailers have no photography yet, so those cards carry a large pale
   line-icon motif until real shots arrive. */
.wqads{ display:grid; grid-template-columns:1.3fr .5fr .5fr; gap:16px;
    grid-template-areas:"big top top" "big b1 b2"; }
.wqad{ position:relative; display:flex; border-radius:4px; overflow:hidden; isolation:isolate;
    background:#fff; border:1px solid var(--wq-line);
    transition:transform .24s var(--wq-ez), box-shadow .24s var(--wq-ez), border-color .24s var(--wq-ez); }
.wqad:hover{ transform:translateY(-4px); border-color:var(--wq-line-2);
    box-shadow:0 30px 50px -30px rgba(20,24,16,.35); }
.wqad--big{ grid-area:big; min-height:560px; }
.wqad--top{ grid-area:top; min-height:230px; }
.wqad--sm:nth-of-type(3){ grid-area:b1; }
.wqad--sm:nth-of-type(4){ grid-area:b2; }
.wqad--sm{ min-height:300px; }
.wqad__in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; padding:clamp(22px,2.6vw,40px); width:100%; }
.wqad--big .wqad__in{ max-width:30rem; }
.wqad--top .wqad__in{ max-width:60%; }
.wqad__kick{ font-weight:700; font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
    color:var(--wq-green-ink); margin-bottom:14px; }
.wqad__h{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--wq-ink);
    line-height:1.05; letter-spacing:-.02em; font-size:clamp(1.2rem,1.7vw,1.55rem); text-wrap:balance; }
.wqad--big .wqad__h{ font-size:clamp(2.2rem,3.8vw,3.4rem); letter-spacing:-.028em; }
.wqad__sub{ color:var(--wq-ink-3); font-size:var(--t-md); line-height:1.6; max-width:38ch; margin-top:14px; }
.wqad--big .wqad__sub{ font-size:var(--t-base); color:var(--wq-ink-2); }
.wqad .wqbtn{ margin-top:var(--s-4); }
.wqad__go{ font-weight:700; font-size:var(--t-sm); letter-spacing:.06em; text-transform:uppercase;
    color:var(--wq-green-ink); margin-top:var(--s-3); }
.wqad:hover .wqad__go{ color:var(--wq-ink); }
.wqad__feats{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-top:var(--s-5);
    padding-top:var(--s-4); border-top:1px solid var(--wq-line); width:100%; }
.wqad__feats > span{ display:grid; grid-template-columns:22px 1fr; gap:4px 12px; align-items:start; }
.wqad__feats svg{ width:20px; height:20px; color:var(--wq-green-ink); grid-row:1/3; margin-top:2px; }
.wqad__feats b{ font-weight:700; font-size:var(--t-sm); color:var(--wq-ink); letter-spacing:.02em; }
.wqad__feats i{ font-style:normal; font-size:var(--t-xs); color:var(--wq-ink-3); }
/* Product cut-out — in flow as a flex sibling, NOT absolutely positioned:
   the absolute version sat the Honda's wheels on top of the feature labels.
   As a flex child overlap is impossible by construction. */
.wqad__img{ align-self:flex-end; object-fit:contain; height:auto; flex:none; }
.wqad--big .wqad__img{ width:min(42%,360px); margin:0 10px 10px 0; }
.wqad--top .wqad__img{ width:min(38%,290px); margin:0 14px 12px 0; }
/* Small card: cut-out dropped in the bottom-right corner, behind the text
   (text is top-left only, so no overlap — same idea as the old icon motif). */
.wqad--sm .wqad__img{ position:absolute; right:-6px; bottom:-8px; width:min(76%,206px); z-index:0; margin:0; }
.wqad--big .wqad__in,.wqad--top .wqad__in{ flex:1 1 auto; min-width:0; }
/* Pale line-icon motif for cards awaiting photography */
.wqad__motif{ position:absolute; z-index:0; right:-24px; bottom:-24px; color:var(--wq-line);
    pointer-events:none; }
.wqad__motif svg{ width:200px; height:200px; stroke-width:1; }
@media(max-width:1100px){
    .wqads{ grid-template-columns:1fr 1fr; grid-template-areas:"big big" "top top" "b1 b2"; }
    .wqad--big{ min-height:520px; }
}
@media(max-width:640px){
    .wqads{ grid-template-columns:1fr; grid-template-areas:"big" "top" "b1" "b2"; }
    /* Stack text over image on phones — as a row the cut-out squeezed into the
       text column and collided with the headline. */
    .wqad--big,.wqad--top{ flex-direction:column; min-height:0; }
    .wqad--big .wqad__in,.wqad--top .wqad__in{ max-width:100%; }
    .wqad--big .wqad__img,.wqad--top .wqad__img{ width:min(78%,340px); margin:0 14px 14px auto; }
    .wqad__feats{ gap:14px 16px; }
}

/* =========================================================================
   HOMEPAGE FLOW — rebuilt sections (Jul 30)
   Order: hero · new stock · ad bento · used stock · brand strip · Honda range ·
   beyond-the-quads · workshop · EASI · yards · reviews · coverage.
   Section grounds alternate white / tint / dark so the page has pacing:
   two identical grounds never sit next to each other.
   ========================================================================= */

/* ---- Tabbed stock sections (shared by new + used) ---------------------- */
.wqtabhead__lead{ margin-top:14px; max-width:62ch; }
.wqtabmore{ margin-top:var(--s-4); }

/* ---- Brand strip — tiles, not a washed-out logo row -------------------- */
.wqbrandbar{ background:var(--wq-tint); border-block:1px solid var(--wq-line); }
.wqbrandbar .wqwrap{ display:block; padding-top:var(--sec-tight); padding-bottom:var(--sec-tight); }
.wqbrandbar__lab{ display:flex; align-items:center; gap:16px; justify-content:center;
    font-weight:700; font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
    color:var(--wq-ink-3); margin-bottom:var(--s-3); text-align:center; }
.wqbrandbar__lab::before,.wqbrandbar__lab::after{ content:""; height:1px; flex:1 1 40px; max-width:120px; background:var(--wq-line-2); }
.wqbrandbar__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:stretch; }
.wqbrandbar__row a{ display:flex; align-items:center; justify-content:center; opacity:1;
    background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:4px;
    padding:22px 18px; min-height:96px; position:relative;
    transition:border-color .2s var(--wq-ez), transform .2s var(--wq-ez), box-shadow .2s var(--wq-ez); }
.wqbrandbar__row a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--wq-green); transform:scaleX(0); transition:transform .24s var(--wq-ez); }
.wqbrandbar__row a:hover,.wqbrandbar__row a:focus-visible{ border-color:var(--wq-line-2);
    transform:translateY(-2px); box-shadow:0 10px 24px -18px rgba(20,24,16,.5); }
.wqbrandbar__row a:hover::after,.wqbrandbar__row a:focus-visible::after{ transform:scaleX(1); }
.wqbrandbar__row img{ height:clamp(26px,2.6vw,38px); width:auto; }

/* ---- Beyond the quads ------------------------------------------------- */
.wqalso{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2); margin-top:var(--s-5); }
.wqalso__c{ display:flex; flex-direction:column; gap:10px; background:var(--wq-panel);
    border:1px solid var(--wq-line); border-radius:4px; padding:var(--s-3);
    text-decoration:none; transition:border-color .2s var(--wq-ez), transform .2s var(--wq-ez), box-shadow .2s var(--wq-ez); }
.wqalso__c:hover{ border-color:var(--wq-line-2); transform:translateY(-3px);
    box-shadow:0 14px 30px -22px rgba(20,24,16,.55); }
.wqalso__i{ display:flex; align-items:center; justify-content:center; width:46px; height:46px;
    border-radius:3px; background:var(--wq-stage); color:var(--wq-green-ink); }
.wqalso__i svg{ width:24px; height:24px; }
.wqalso__c h3{ margin:6px 0 0; font-size:var(--t-lg); letter-spacing:-.01em; color:var(--wq-ink); }
.wqalso__c p{ margin:0; color:var(--wq-ink-2); font-size:var(--t-md); line-height:1.6; }
.wqalso__go{ margin-top:auto; padding-top:10px; color:var(--wq-green-ink); font-weight:700; font-size:var(--t-sm); }
.wqalso__c:hover .wqalso__go .ar{ transform:translateX(4px); }
.wqalso__go .ar{ display:inline-block; transition:transform .2s var(--wq-ez); }

/* ---- EASI training — the page's dark anchor --------------------------- */
.wqeasi{ background:var(--wq-dark); padding:var(--sec) 0; }
.wqeasi__in{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(28px,4.4vw,72px); align-items:center; }
.wqeasi__img{ position:relative; border-radius:4px; overflow:hidden; }
.wqeasi__img img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.wqeasi__badge{ position:absolute; left:0; bottom:0; display:flex; flex-direction:column;
    background:var(--wq-green); color:#0B0D0A; padding:14px 20px 13px; }
.wqeasi__badge b{ font-family:var(--display); font-size:1.6rem; line-height:1;
    letter-spacing:-.02em; text-transform:uppercase; }
.wqeasi__badge span{ font-size:var(--t-sm); font-weight:600; margin-top:3px; }
.wqeasi .wqkick{ color:var(--wq-green); }
.wqeasi .wqh2{ color:#fff; }
.wqeasi .wqlead{ color:rgba(255,255,255,.82); max-width:56ch; }
.wqsteps{ list-style:none; margin:var(--s-4) 0 var(--s-4); padding:0; counter-reset:st; display:grid; gap:14px; }
.wqsteps li{ counter-increment:st; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:baseline; }
.wqsteps li::before{ content:counter(st,decimal-leading-zero); font-family:var(--display); font-weight:800;
    font-size:var(--t-md); color:var(--wq-green); letter-spacing:.02em; }
.wqsteps b,.wqsteps span{ grid-column:2; }  /* both sit beside the number, not under it */
.wqsteps b{ display:block; color:#fff; font-size:var(--t-base); }
.wqsteps span{ display:block; color:rgba(255,255,255,.7); font-size:var(--t-md); line-height:1.6; margin-top:2px; }

/* ---- Yards / store locations ------------------------------------------ */
.wqyards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-top:var(--s-5); }
.wqyard{ background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:4px; overflow:hidden;
    display:flex; flex-direction:column; }
.wqyard__img{ position:relative; }
.wqyard__img img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.wqyard__img::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,10,6,.92) 0%, rgba(8,10,6,.55) 34%, rgba(8,10,6,.1) 68%, rgba(8,10,6,0) 100%); }
.wqyard__img h3{ position:absolute; left:var(--s-3); bottom:16px; z-index:1; margin:0; color:#fff;
    font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.02em; text-transform:uppercase; }
.wqyard__b{ padding:var(--s-3); display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.wqyard__role{ margin:0; color:var(--wq-green-ink); font-weight:700; font-size:var(--t-xs);
    letter-spacing:.14em; text-transform:uppercase; }
.wqyard address{ font-style:normal; color:var(--wq-ink-2); font-size:var(--t-md); line-height:1.7; }
.wqyard__tel{ font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em;
    color:var(--wq-ink); text-decoration:none; }
.wqyard__tel:hover{ color:var(--wq-green-ink); }
.wqyard__hrs{ margin:0; color:var(--wq-ink-3); font-size:var(--t-md); }
.wqyard__hrs span{ display:block; }
.wqyard__acts{ margin-top:auto; padding-top:var(--s-2); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.wqyard__mail{ color:var(--wq-green-ink); font-size:var(--t-md); word-break:break-all; }

/* ---- Reviews as cards ------------------------------------------------- */
.wqquotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3); margin-top:var(--s-5); }
.wqquote{ position:relative; margin:0; padding:var(--s-4) var(--s-3) var(--s-3);
    background:var(--wq-panel); border:1px solid var(--wq-line); border-top:3px solid var(--wq-green);
    border-radius:4px; display:flex; flex-direction:column; }
.wqquote__mark{ position:absolute; top:4px; right:16px; font-family:var(--display); font-weight:800;
    font-size:5rem; line-height:1; color:var(--wq-green); opacity:.16; pointer-events:none; }
.wqquote blockquote{ margin:0; }
.wqquote p{ margin:0; font-size:var(--t-base); line-height:1.68; color:var(--wq-ink-2); position:relative; }
.wqquote figcaption{ margin-top:var(--s-3); padding-top:var(--s-2); border-top:1px solid var(--wq-line); }
.wqquote figcaption b{ display:block; font-size:var(--t-base); color:var(--wq-ink); }
.wqquote figcaption span{ display:block; margin-top:2px; color:var(--wq-ink-3); font-size:var(--t-md); }

/* ---- Coverage / areas served ------------------------------------------ */
.wqcover{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3) var(--s-4); margin-top:var(--s-5); }
.wqcover__g h3{ display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:var(--t-lg);
    letter-spacing:-.01em; color:var(--wq-ink); }
.wqcover__g h3 svg{ width:19px; height:19px; color:var(--wq-green-ink); flex:0 0 auto; }
.wqcover__g ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wqcover__g li{ background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:2px;
    padding:.42rem .8rem; font-size:var(--t-md); color:var(--wq-ink-2); }
.wqcover__note{ grid-column:1/-1; margin:var(--s-2) 0 0; padding-top:var(--s-3);
    border-top:1px solid var(--wq-line-2); color:var(--wq-ink-3); font-size:var(--t-md); }

@media(max-width:1080px){
    .wqalso{ grid-template-columns:1fr 1fr; }
    .wqbrandbar__row{ grid-template-columns:repeat(3,1fr); }
    .wqeasi__in{ grid-template-columns:1fr; }
    .wqeasi__img{ max-width:520px; }
}
@media(max-width:820px){
    .wqyards{ grid-template-columns:1fr; }
    .wqquotes{ grid-template-columns:1fr; }
    .wqcover{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
    .wqalso{ grid-template-columns:1fr; }
    .wqbrandbar__row{ grid-template-columns:repeat(2,1fr); }
    .wqcover{ grid-template-columns:1fr; }
}

/* =========================================================================
   MACHINE DETAIL — built to the supplied reference layout.
   Gallery left / enquiry column right, full-width tabs, centred similar row.
   The reference's commerce furniture maps to enquiry equivalents; nothing
   here pretends to be a checkout.
   ========================================================================= */
.wqcrumb{ border-bottom:1px solid var(--wq-line); background:var(--wq-bg); }
.wqcrumb .wqwrap{ padding-top:16px; padding-bottom:16px; font-size:var(--t-md); color:var(--wq-ink-3); }
.wqcrumb a{ color:var(--wq-ink-2); text-decoration:none; }
.wqcrumb a:hover{ color:var(--wq-green-ink); }
.wqcrumb span{ color:var(--wq-line-2); margin:0 6px; }
.wqcrumb em{ font-style:normal; color:var(--wq-ink); }

.wqpd{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
/* Grid/flex children default to min-width:auto, so the thumb rail's content
   width (6 thumbs) pushed the whole column past the viewport on mobile. */
.wqpd__gal,.wqpd__buy{ min-width:0; }

/* ---- Gallery ---------------------------------------------------------- */
.wqgal__main{ position:relative; background:var(--wq-stage); border:1px solid var(--wq-line);
    border-radius:4px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.wqgal__main img{ width:100%; height:100%; object-fit:contain; }
.wqgal__flag{ position:absolute; top:14px; left:14px; z-index:2; background:var(--wq-green); color:#0B0D0A;
    font-size:var(--t-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .6rem; border-radius:2px; }
.wqgal__flag--used{ background:var(--wq-dark); color:#fff; }
.wqgal__flag--sold{ background:var(--wq-err); color:#fff; }
.wqgal__ghost{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,4vw,2.6rem);
    text-transform:uppercase; letter-spacing:-.02em; color:var(--wq-line-2); }
.wqgal__rail{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.wqgal__thumbs{ display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; flex:1 1 auto; min-width:0; }
.wqgal__thumbs::-webkit-scrollbar{ display:none; }
.wqgal__t{ flex:0 0 auto; width:clamp(76px,9vw,104px); padding:0; background:var(--wq-stage);
    border:1px solid var(--wq-line); border-radius:3px; cursor:pointer; overflow:hidden;
    transition:border-color .18s var(--wq-ez); }
.wqgal__t img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:contain; display:block; }
.wqgal__t:hover{ border-color:var(--wq-line-2); }
.wqgal__t.on{ border-color:var(--wq-green); box-shadow:inset 0 0 0 1px var(--wq-green); }
.wqgal__arrow{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:3px; cursor:pointer;
    font-size:1.3rem; line-height:1; color:var(--wq-ink-2); }
.wqgal__arrow:hover{ border-color:var(--wq-ink-3); color:var(--wq-ink); }
.wqgal__arrow[disabled]{ opacity:.35; cursor:default; }

/* ---- Enquiry column --------------------------------------------------- */
.wqpd__titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.wqpd__buy h1{ margin:10px 0 0; font-size:clamp(1.7rem,2.8vw,2.5rem); letter-spacing:-.025em; }
.wqpd__nav{ display:flex; gap:6px; flex:0 0 auto; margin-top:4px; }
.wqpd__nav a,.wqpd__nav span{ width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--wq-line); border-radius:3px; color:var(--wq-ink-2); text-decoration:none;
    font-size:1.2rem; line-height:1; }
.wqpd__nav a:hover{ border-color:var(--wq-ink-3); color:var(--wq-ink); }
.wqpd__nav span{ opacity:.35; }
.wqpd__facts{ display:flex; flex-wrap:wrap; gap:8px 0; margin:14px 0 0; }
.wqpd__facts span{ color:var(--wq-ink-3); font-size:var(--t-md); }
.wqpd__facts span + span::before{ content:"·"; margin:0 9px; color:var(--wq-line-2); }
.wqpd__price{ margin:12px 0 0; font-family:var(--display); font-weight:800; letter-spacing:-.02em;
    font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; color:var(--wq-green-ink); }
.wqpd__price small{ display:block; margin-top:7px; font-family:var(--wq-body); font-weight:600;
    font-size:var(--t-md); letter-spacing:0; color:var(--wq-ink-3); }
.wqpd__short{ margin-top:var(--s-3); padding:var(--s-3) 0; border-block:1px solid var(--wq-line); }
.wqpd__short p{ margin:0 0 10px; color:var(--wq-ink-2); font-size:var(--t-base); line-height:1.68; max-width:62ch; }
.wqpd__short p:last-child{ margin-bottom:0; }
.wqpd__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-3); }
.wqbtn--big{ padding:1rem 1.6rem; font-size:var(--t-base); }
.wqpd__mini{ display:flex; flex-wrap:wrap; gap:22px; margin-top:var(--s-3); }
.wqpd__mini a{ display:inline-flex; align-items:center; gap:8px; color:var(--wq-ink-2);
    font-size:var(--t-md); font-weight:600; text-decoration:none; }
.wqpd__mini a:hover{ color:var(--wq-green-ink); }
.wqpd__mini svg{ width:19px; height:19px; color:var(--wq-green-ink); }
.wqpd__sold{ margin-top:var(--s-2); color:var(--wq-ink-3); font-size:var(--t-md); max-width:56ch; }
.wqpd__meta{ margin:var(--s-3) 0 0; padding-top:var(--s-3); border-top:1px solid var(--wq-line); }
.wqpd__meta div{ display:flex; gap:8px; margin-bottom:7px; font-size:var(--t-md); }
.wqpd__meta dt{ color:var(--wq-ink-3); }
.wqpd__meta dd{ margin:0; color:var(--wq-ink-2); }
.wqpd__meta a{ color:var(--wq-green-ink); }
.wqpd__share{ display:flex; align-items:center; gap:12px; margin-top:var(--s-3);
    padding-top:var(--s-3); border-top:1px solid var(--wq-line); }
.wqpd__share span{ color:var(--wq-ink-3); font-size:var(--t-md); margin-right:2px; }
.wqpd__share a{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    border:1px solid var(--wq-line); border-radius:3px; color:var(--wq-ink-2); }
.wqpd__share a:hover{ border-color:var(--wq-green); color:var(--wq-green-ink); }
.wqpd__share svg{ width:17px; height:17px; }

/* ---- Underline tabs (reference: Description | Reviews) ---------------- */
.wqtabs--under{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); justify-content:center;
    border-bottom:1px solid var(--wq-line); padding:0 0 0; }
.wqtabs--under .wqtab{ background:none; border:0; border-radius:0; padding:0 2px 14px; margin-bottom:-1px;
    font-family:var(--display); font-weight:700; font-size:var(--t-lg); letter-spacing:-.01em;
    color:var(--wq-ink-3); border-bottom:2px solid transparent; text-transform:none; }
.wqtabs--under .wqtab:hover{ color:var(--wq-ink); }
.wqtabs--under .wqtab.on{ background:none; color:var(--wq-green-ink); border-bottom-color:var(--wq-green); }
.wqpd__panel{ padding-top:var(--s-5); }
.wqpd__panel > p{ color:var(--wq-ink-2); font-size:var(--t-base); line-height:1.72; max-width:78ch; margin:0 0 16px; }
.wqpd__feats{ list-style:none; margin:var(--s-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wqpd__feats li{ background:var(--wq-tint); border:1px solid var(--wq-line); border-radius:2px;
    padding:.42rem .85rem; font-size:var(--t-md); color:var(--wq-ink-2); }
.wqpd__sheet{ width:100%; max-width:680px; border-collapse:collapse; }
.wqpd__sheet th,.wqpd__sheet td{ text-align:left; padding:13px 0; border-bottom:1px solid var(--wq-line);
    font-size:var(--t-base); }
.wqpd__sheet th{ width:38%; font-weight:600; color:var(--wq-ink-3); }
.wqpd__sheet td{ color:var(--wq-ink); font-weight:600; }
.wqpd__note{ margin-top:var(--s-3); color:var(--wq-ink-3); font-size:var(--t-md); max-width:62ch; }
.wqpd__handcta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-4); }

/* ---- Centred section head with the reference's squiggle --------------- */
.wqcent{ text-align:center; }
.wqcent .wqh2{ margin:0; }
.wqsquig{ display:block; width:88px; height:12px; margin:14px auto 0; color:var(--wq-green); }
.wqcent--act{ margin:var(--s-5) 0 0; }
.wqm__flag--sold{ background:var(--wq-err); color:#fff; }

@media(max-width:960px){
    .wqpd{ grid-template-columns:1fr; }
    .wqpd__buy h1{ font-size:clamp(1.6rem,5.4vw,2rem); }
}
@media(max-width:560px){
    .wqpd__act .wqbtn{ width:100%; justify-content:center; }
    .wqpd__mini{ gap:14px; flex-direction:column; }
    .wqtabs--under{ gap:18px; }
    .wqtabs--under .wqtab{ font-size:var(--t-base); }
}

/* =========================================================================
   INNER PAGES — Servicing, Parts, Contact (and About's shared blocks).
   These were on the legacy shell: a slanted .photoband, centred narrow text
   columns with dead space either side, and no photography. Rebuilt on the
   homepage system so every page reads as one site.
   ========================================================================= */

/* Split: actions row under the copy, and a flipped variant so consecutive
   splits alternate image side instead of marching down one edge. */
.wqsplit__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-4); }
.wqsplit--flip .wqsplit__img{ order:-1; }
.wqlist--2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-4); margin-bottom:0; }
/* Static version of the homepage's "beyond the quads" card — not a link. */
.wqalso__c--static{ cursor:default; }
.wqalso__c--static:hover{ border-color:var(--wq-line); transform:none; box-shadow:none; }

/* Slimmer page header for pages that lead with a form rather than a pitch. */
.wqpage--slim .wqwrap{ padding-top:var(--sec-tight); padding-bottom:var(--sec-tight); }

/* ---- Taxonomy chips (parts categories, stocked brands, attachments) --- */
.wqchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-3); }
.wqchips span{ background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:2px;
    padding:.44rem .85rem; font-size:var(--t-md); color:var(--wq-ink-2); }
.wqsec--tint .wqchips span{ background:var(--wq-panel); }
.wqchips--brand span{ background:var(--wq-dark); border-color:var(--wq-dark); color:#fff; font-weight:600; }
.wqchips__lab{ margin:var(--s-3) 0 0; font-weight:700; font-size:var(--t-xs); letter-spacing:.16em;
    text-transform:uppercase; color:var(--wq-ink-3); }

/* ---- Attachments: image beside grouped chip lists --------------------- */
.wqattach{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    gap:clamp(26px,3.6vw,56px); margin-top:var(--s-5); align-items:start; }
.wqattach__img{ border:1px solid var(--wq-line); border-radius:4px; overflow:hidden;
    align-self:stretch; min-height:320px; }  /* matches the chip column's height exactly — no dead space */
.wqattach__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.wqattach__list{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4); min-width:0; align-content:start; }
.wqattach__g h3{ margin:0; font-size:var(--t-lg); letter-spacing:-.01em; color:var(--wq-ink); }
.wqattach__g .wqchips{ margin-top:12px; }

/* ---- CTA band --------------------------------------------------------- */
.wqcta{ background:var(--wq-dark); padding:var(--sec-tight) 0; }
.wqcta__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.wqcta .wqkick{ color:var(--wq-green); }
.wqcta .wqh2{ color:#fff; margin:10px 0 0; }
.wqcta p{ margin:12px 0 0; color:rgba(255,255,255,.82); font-size:var(--t-base); max-width:52ch; }
.wqcta__acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- Contact ---------------------------------------------------------- */
.wqcontact{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
    gap:clamp(28px,4vw,64px); align-items:start; }
.wqform h2{ margin:0 0 var(--s-3); }
.wqform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-3); }
.wqform__re{ margin:0 0 var(--s-3); padding:12px 16px; background:var(--wq-tint);
    border-left:0; border:1px solid var(--wq-line); border-radius:3px;
    font-size:var(--t-md); color:var(--wq-ink-2); }
.wqfield{ margin:0 0 var(--s-3); max-width:none; }  /* <p>, so opt out of the 72ch prose cap */
.wqfield label{ display:block; font-weight:700; font-size:var(--t-md); color:var(--wq-ink); margin-bottom:7px; }
.wqfield label em{ font-style:normal; font-weight:400; color:var(--wq-ink-3); }
.wqfield input,.wqfield select,.wqfield textarea{ width:100%; padding:12px 14px; font:inherit;
    font-size:var(--t-base); color:var(--wq-ink); background:var(--wq-panel);
    border:1px solid var(--wq-line-2); border-radius:3px; }
.wqfield input:focus,.wqfield select:focus,.wqfield textarea:focus{ outline:2px solid var(--wq-green);
    outline-offset:1px; border-color:var(--wq-green); }
.wqfield__err{ display:block; margin-top:6px; color:var(--wq-err); font-size:var(--t-md); font-weight:600; }
.wqflash{ display:block; padding:16px 18px; border-radius:3px; background:var(--red-soft);
    border:1px solid var(--wq-green); color:var(--wq-ink); font-size:var(--t-base); margin-bottom:var(--s-3); }
.wqflash span{ display:block; margin-top:4px; color:var(--wq-ink-2); font-size:var(--t-md); }
.wqflash--err{ background:#FDF1F0; border-color:var(--wq-err); }
.wqquick .wqh2{ margin:0 0 12px; }
.wqquick .wqlead{ margin-bottom:var(--s-3); }
.wqquick__c{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px;
    background:var(--wq-panel); border:1px solid var(--wq-line); border-radius:3px; text-decoration:none;
    transition:border-color .2s var(--wq-ez), transform .2s var(--wq-ez); }
.wqquick__c:hover{ border-color:var(--wq-green); transform:translateX(2px); }
.wqquick__c svg{ width:22px; height:22px; flex:0 0 auto; color:var(--wq-green-ink); }
.wqquick__c b{ display:block; font-size:var(--t-md); color:var(--wq-ink); }
.wqquick__c i{ display:block; font-style:normal; font-family:var(--display); font-weight:800;
    font-size:1.15rem; letter-spacing:-.01em; color:var(--wq-ink); word-break:break-word; }
.wqquick__hrs{ margin:var(--s-3) 0 0; padding-top:var(--s-3); border-top:1px solid var(--wq-line);
    color:var(--wq-ink-2); font-size:var(--t-md); line-height:1.8; }
.wqquick__hrs b{ display:block; color:var(--wq-ink); margin-bottom:4px; }
.wqquick__hrs span{ display:block; margin-top:6px; color:var(--wq-ink-3); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---- Yard card in map mode (Contact) ---------------------------------- */
.wqyard__map{ position:relative; background:var(--wq-stage); }
.wqyard__map iframe{ display:block; width:100%; height:100%; aspect-ratio:3/2; border:0; }
.wqyard__map h3{ position:absolute; left:var(--s-3); bottom:0; z-index:1; margin:0; color:#fff;
    font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:-.02em; text-transform:uppercase;
    background:var(--wq-dark); padding:6px 14px; }

@media(max-width:960px){
    .wqcontact{ grid-template-columns:1fr; }
    .wqattach{ grid-template-columns:1fr; }
    .wqattach__img{ aspect-ratio:16/9; min-height:0; }
    /* Flipped splits stack image-first on desktop; on mobile every split
       leads with its copy so the reading order stays consistent. */
    .wqsplit--flip .wqsplit__img{ order:0; }
}
@media(max-width:620px){
    .wqlist--2,.wqform__grid,.wqattach__list{ grid-template-columns:1fr; }
    .wqcta__acts{ width:100%; }
    .wqcta__acts .wqbtn{ flex:1 1 auto; justify-content:center; }
}