/*
 * AQUROV campaign landing page — the "ROV thruster" paid-ads page.
 *
 * The markup this sheet styles lives in single-landing_page.php: a document with
 * no site header and no site footer, a sticky in-page nav and five content
 * sections. assets/css/landing.css still loads first and owns the plain canvas —
 * the reading column and the typography of pasted content — and this campaign
 * layer loads after it and turns that canvas into a designed page.
 *
 * Same rule as every other page sheet in this theme: every colour, radius,
 * shadow and duration is read from assets/css/tokens.css, so the campaign page
 * cannot drift from the rest of the site. Every rule here is scoped to the page:
 * the sections live under .aq-lp (the page root, <main class="aq-lp">), the nav —
 * which is a sibling of <main> — under .aq-lp-nav, and the two other hooks the
 * template prints outside <main> (.aq-lp-body on <body>) and inside the enquity
 * card (.aq-lp-form) under those names. No bare element selector is styled
 * anywhere in this file, so nothing here can reach another page of the site.
 *
 * The shared primitives the markup reuses — .aq-specs, .aq-specs-table,
 * .aq-card-specs, .aq-badge — keep their own look from components.css; where
 * this page tightens them the override is scoped and minimal.
 *
 * The enquiry form is the shared component (components/inquiry-form.php). It
 * brings its own inline sheet for the .aqf-* structure, but its shell and its
 * submit button come from assets/css/static-page.css, which this page does not
 * load. Section 12 aliases the --sp-* variables to the --aq-* tokens and
 * provides the few .sp-* rules that shell needs, scoped to .aq-lp-form.
 *
 * Motion is transitions only — no keyframes, because the site's motion layer
 * owns reveals — and everything that moves is wrapped in
 * @media (prefers-reduced-motion: no-preference) in section 13. The responsive
 * rules come last: 1100px, 820px, then the phone layout at 620px.
 */

/* 1. Page root and the one column ---------------------------------------- */

.aq-lp-body { background: var(--aq-white, #fff); }

.aq-lp {
  --aq-lp-nav-h: 64px;                              /* the sticky nav's height */
  --aq-lp-anchor: calc(var(--aq-lp-nav-h) + 16px);  /* what an anchor clears */

  background: var(--aq-white, #fff);
  color: var(--aq-ink, #17212B);
  font-family: var(--aq-font, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.aq-lp,
.aq-lp *,
.aq-lp *::before,
.aq-lp *::after { box-sizing: border-box; }

.aq-lp .aq-lp-wrap {
  max-width: var(--aq-wrap, 1220px);
  margin: 0 auto;
  padding: 0 var(--aq-gutter, 24px);
}

/* 2. Sticky in-page nav ---------------------------------------------------
 * One row at every width: brand on the left, the link rail beside it, the
 * WhatsApp button pinned right. The rail scrolls sideways instead of wrapping,
 * which is what keeps the button in the row on a narrow screen. The background
 * is deliberately opaque: a backdrop-filter would make this element the
 * containing block of any fixed descendant the runtime might place.
 */

.aq-lp-nav {
  --aq-lp-nav-h: 64px;                              /* the height the page offsets anchors by */

  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--aq-white, #fff);
  border-bottom: 1px solid var(--aq-border, #DBE3EA);
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
  color: var(--aq-ink, #17212B);
  font-family: var(--aq-font, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.4;
}

.aq-lp-nav,
.aq-lp-nav *,
.aq-lp-nav *::before,
.aq-lp-nav *::after { box-sizing: border-box; }

.aq-lp-nav .aq-lp-nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--aq-lp-nav-h, 64px);
  max-width: var(--aq-wrap, 1220px);
  margin: 0 auto;
  padding: 8px var(--aq-gutter, 24px);
}

.aq-lp-nav .aq-lp-nav-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

/* The brand artwork, not a plate: the same frame the site header gives the theme's
   own lockup (aqurov_logo_vector() in inc/brand-mark.php), at the brand's own
   181 : 152 proportion, so the drawing goes into it whole and nothing is cropped,
   restyled or keyed out. The frame carries no ink of its own - the artwork is
   painted with currentColor and the rule below sets the blue the light header row
   sets. */
.aq-lp-nav .aq-logo {
  display: block;
  flex: none;
  overflow: hidden;
}

.aq-lp-nav .aq-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aq-lp-nav .aq-logo.aq-lp-nav-logo {
  width: 52px; /* 44 x 181 / 152, the artwork's own box rounded to the pixel */
  height: 44px;
  color: #0064D2; /* the artwork's own blue, as the site's light header row sets it */
}

/* The brand's own file, placed at the proportion it was exported with: the height
   is set and the width follows, so the artwork is never squeezed, stretched or
   cropped, and no filter or colour of the page's own is applied to it. This is the
   horizontal lockup - shield and wordmark on one line - so 40px of height is about
   120px of width, which is the whole brand at a glance inside a 64px bar that it
   does not make taller: 40 + the row's 8px above and below is 56px. */
.aq-lp-nav .aq-lp-nav-logo--file {
  display: block;
  width: auto;
  max-width: 190px;
  height: 40px;
  object-fit: contain;
}

/* The template prints the page's own title here, so it is one line that gives
   way rather than a label that pushes the row: it truncates with an ellipsis. */
.aq-lp-nav .aq-lp-nav-sub {
  min-width: 0;
  max-width: 26ch;
  padding-left: 10px;
  border-left: 1px solid var(--aq-border, #DBE3EA);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
}

/* The rail never wraps: sideways scrolling is the overflow behaviour. */
.aq-lp-nav .aq-lp-nav-links {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.aq-lp-nav .aq-lp-nav-links::-webkit-scrollbar { width: 0; height: 0; }
.aq-lp-nav .aq-lp-nav-links > li { flex: 0 0 auto; }

.aq-lp-nav .aq-lp-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: var(--aq-radius-sm, 6px);
  font-size: 14px;
  font-weight: 600;
  color: var(--aq-body, #40505E);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              background var(--aq-dur-fast, 180ms) var(--aq-ease, ease);
}

.aq-lp-nav .aq-lp-nav-links a:hover,
.aq-lp-nav .aq-lp-nav-links a:focus-visible {
  color: var(--aq-blue, #0F5FB8);
  background: rgba(15, 95, 184, 0.07);
}

/* The section the visitor is reading. These are in-page anchors rather than
   pages, so the nav carries no aria-current and the runtime toggles this class
   instead — which is why it has to be styled here. */
.aq-lp-nav .aq-lp-nav-links a.is-current {
  color: var(--aq-blue, #0F5FB8);
  background: rgba(15, 95, 184, 0.1);
  font-weight: 700;
}

/* One route out of the page, kept under the weight of the hero's own button: the
   shorter label, the smaller pill and the 12.5px setting all keep it in the bar
   without competing with what converts on the page itself. */
.aq-lp-nav .aq-lp-nav-wa {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--aq-blue, #0F5FB8);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--aq-dur-fast, 180ms) var(--aq-ease, ease);
}

.aq-lp-nav .aq-lp-nav-wa:hover,
.aq-lp-nav .aq-lp-nav-wa:focus-visible { background: var(--aq-blue-dark, #0A4D95); }

/* A static "someone is there" light — this page has no keyframes at all. */
.aq-lp-nav .aq-lp-wa-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.26);
}

/* Focus -------------------------------------------------------------------
 * The theme's global ring is 3px of brand blue, which disappears on a blue
 * button and on the dark band, so those two surfaces get a scoped ring.
 */
.aq-lp :focus-visible,
.aq-lp-nav :focus-visible {
  outline: 3px solid var(--aq-blue, #0F5FB8);
  outline-offset: 2px;
}

.aq-lp .aq-lp-sec--dark :focus-visible,
.aq-lp-nav .aq-lp-nav-wa:focus-visible { outline-color: var(--aq-cyan-soft, #6FC3DC); }

/* 3. Section shells -------------------------------------------------------
 * The three surfaces the rest of the site uses: a white block, the alt grey,
 * and the dark technical band (the homepage gradient, built from the tokens).
 * The quote block sits on the surface grey so the white form card inside it has
 * an edge to sit on. Every section clears the sticky nav when it is jumped to.
 */

.aq-lp .aq-lp-sec {
  padding: var(--aq-section, 80px) 0;
  scroll-margin-top: var(--aq-lp-anchor, 80px);
}

.aq-lp .aq-lp-sec--white { background: var(--aq-white, #fff); }
.aq-lp .aq-lp-sec--alt { background: var(--aq-alt, #F5F7FA); }
.aq-lp .aq-lp-sec--quote { background: var(--aq-surface, #EEF3F7); }

.aq-lp .aq-lp-sec--dark {
  color: #fff;
  background:
    radial-gradient(circle at 84% 8%, rgba(22, 151, 184, 0.18), transparent 34%),
    radial-gradient(circle at 10% 94%, rgba(15, 95, 184, 0.16), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255, 255, 255, 0.026) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255, 255, 255, 0.026) 48px),
    linear-gradient(180deg, var(--aq-navy-2, #102438) 0%, var(--aq-navy, #0D1B2A) 100%);
}

/* The form's own container is an anchor target too (#inquiry). */
.aq-lp-form [id] { scroll-margin-top: var(--aq-lp-anchor, 80px); }

/* 4. Section head and type ------------------------------------------------ */

.aq-lp .aq-lp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 12px;
  align-items: end;
  margin-bottom: 38px;
}

/* Eyebrow over the heading on the left, the lead aligned to the bottom of the
   two rows on the right — the same relationship as .home-section-head. */
.aq-lp .aq-lp-head > .aq-lp-eyebrow { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
.aq-lp .aq-lp-head > .aq-lp-h2 { grid-column: 1; grid-row: 2; }
.aq-lp .aq-lp-head > .aq-lp-lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

.aq-lp .aq-lp-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aq-cyan-soft, #6FC3DC);
}

.aq-lp .aq-lp-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aq-blue, #0F5FB8);
}

.aq-lp .aq-lp-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--aq-cyan, #1697B8);
}

.aq-lp .aq-lp-h1 {
  margin: 0 0 20px;
  max-width: 18ch;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.032em;
  font-weight: 800;
  color: #fff;
}

.aq-lp .aq-lp-h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--aq-muted, #687684);
}

/* On the dark band the same four type roles switch to the on-dark pair. */
.aq-lp .aq-lp-sec--dark .aq-lp-h2 { color: #fff; }
.aq-lp .aq-lp-sec--dark .aq-lp-eyebrow { color: var(--aq-cyan-soft, #6FC3DC); }
.aq-lp .aq-lp-sec--dark .aq-lp-eyebrow::after { background: rgba(111, 195, 220, 0.55); }
.aq-lp .aq-lp-sec--dark .aq-lp-lead { color: var(--aq-on-dark-muted, #A9BCCB); }

/* A closing line under a block, on either surface. */
.aq-lp .aq-lp-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

.aq-lp .aq-lp-sec--dark .aq-lp-note { color: var(--aq-on-dark-muted, #A9BCCB); }

/* The small heading that opens a panel: the proof list, the company record and
   the checklist aside all open with it, each on its own surface. The entry
   headings inside the proof list are one size down from it. */
.aq-lp .aq-lp-sub {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-sec--dark .aq-lp-sub { color: #fff; }

.aq-lp .aq-lp-proof h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

/* 5. Buttons --------------------------------------------------------------
 * The same button as .home-btn and .sp-btn, with the two campaign variants
 * this page needs: a filled WhatsApp button that stands on its own, and the
 * ghost pair (light surface, dark band). 44px minimum height, as everywhere.
 */

.aq-lp .aq-lp-btn {
  min-height: var(--aq-control, 44px);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--aq-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              border-color var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              color var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              box-shadow var(--aq-dur-fast, 180ms) var(--aq-ease, ease);
}

.aq-lp .aq-lp-btn--lg { min-height: 48px; padding: 0 24px; font-size: 14.5px; }
.aq-lp .aq-lp-btn--block { width: 100%; }

.aq-lp .aq-lp-btn--primary { background: var(--aq-blue, #0F5FB8); color: #fff; }
.aq-lp .aq-lp-btn--primary:hover,
.aq-lp .aq-lp-btn--primary:focus-visible { background: var(--aq-blue-dark, #0A4D95); }

/* Filled on its own, because three of the four "chat with us" buttons carry no
   other variant; the dot is the same mark the nav shows, drawn with ::before so
   the markup stays exactly what it is. */
.aq-lp .aq-lp-btn--wa { background: var(--aq-blue, #0F5FB8); color: #fff; }

.aq-lp .aq-lp-btn--wa::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26);
}

.aq-lp .aq-lp-btn--wa:hover,
.aq-lp .aq-lp-btn--wa:focus-visible { background: var(--aq-blue-dark, #0A4D95); }

.aq-lp .aq-lp-btn--ghost {
  background: #fff;
  color: var(--aq-blue, #0F5FB8);
  border-color: var(--aq-border-strong, #B9C8D6);
}

.aq-lp .aq-lp-btn--ghost:hover,
.aq-lp .aq-lp-btn--ghost:focus-visible { border-color: var(--aq-blue, #0F5FB8); background: rgba(15, 95, 184, 0.05); }

/* The hero uses the same ghost button on its dark band, where a white panel
   would shout louder than the primary beside it. */
.aq-lp .aq-lp-hero .aq-lp-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.aq-lp .aq-lp-hero .aq-lp-btn--ghost:hover,
.aq-lp .aq-lp-hero .aq-lp-btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.14); }

.aq-lp .aq-lp-btn--ghostdark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.aq-lp .aq-lp-btn--ghostdark:hover,
.aq-lp .aq-lp-btn--ghostdark:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.aq-lp .aq-lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.aq-lp .aq-lp-actions--center { justify-content: center; margin-top: 36px; }

/* 6. Hero -----------------------------------------------------------------
 * A full-bleed dark band: the copy on the left, one photograph in a technical
 * frame on the right, and nothing laid over the picture. The band is the
 * homepage hero's gradient, read from the tokens instead of retyped.
 */

.aq-lp .aq-lp-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 68px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(22, 151, 184, 0.22), transparent 30%),
    radial-gradient(circle at 58% 88%, rgba(15, 95, 184, 0.2), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255, 255, 255, 0.028) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255, 255, 255, 0.028) 48px),
    linear-gradient(180deg, var(--aq-navy-2, #102438) 0%, var(--aq-navy-3, #08131F) 100%);
}

.aq-lp .aq-lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 52px;
  align-items: center;
}

/* A long word or a wide photograph must not push the grid past the frame. */
.aq-lp .aq-lp-hero-copy,
.aq-lp .aq-lp-hero-media { min-width: 0; }

.aq-lp .aq-lp-hero-lead {
  margin: 0 0 30px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.68;
  color: var(--aq-on-dark, #C3D2DF);
}

.aq-lp .aq-lp-hero-media {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--aq-radius-lg, 12px);
  overflow: hidden;
  background: var(--aq-navy-2, #102438);
  box-shadow: var(--aq-shadow-dark, 0 30px 70px rgba(0, 0, 0, 0.28));
}

.aq-lp .aq-lp-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The frame before a photograph arrives: same box, same proportion, same radius,
   filled with the band's own dark gradient. It states nothing — the pixel size a
   placeholder picture used to print is a note for the editor, not for a buyer. */
.aq-lp .aq-lp-hero-img--empty {
  background:
    radial-gradient(circle at 72% 18%, rgba(22, 151, 184, 0.2), transparent 58%),
    linear-gradient(180deg, var(--aq-navy-2, #102438) 0%, var(--aq-navy-3, #08131F) 100%);
}

/* The facts a buyer checks first: the value on top, what it means under it. */
.aq-lp .aq-lp-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 26px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--aq-border-dark, rgba(255, 255, 255, 0.16));
}

.aq-lp .aq-lp-fact { padding-left: 12px; border-left: 2px solid rgba(111, 195, 220, 0.5); }

.aq-lp .aq-lp-fact b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.aq-lp .aq-lp-fact span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aq-on-dark-muted, #A9BCCB);
}

/* The photograph's column: one picture and nothing beside it. */
.aq-lp .aq-lp-hero-visual { min-width: 0; }

/* 7. Specifications: the numbered index and the specification card --------- */

.aq-lp .aq-lp-resources {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
}

/* A numbered entry with a hairline under it: the block reads as an index of
   what the page answers rather than as a brochure. */
.aq-lp .aq-lp-resource {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--aq-border, #DBE3EA);
}

/* The entry has three children in a two-column grid, so the placement is
   explicit: the number is a side note beside the whole entry, and the title and
   its paragraph stack in the reading column. Without this the paragraph falls
   into the 52px number column and sets one word per line. */
.aq-lp .aq-lp-resource-num { grid-column: 1; grid-row: 1 / span 2; }

.aq-lp .aq-lp-resource-num {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--aq-blue, #0F5FB8);
  font-variant-numeric: tabular-nums;
}

.aq-lp .aq-lp-resource h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-resource p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

/* One model in full: the parameters on the left, the way to order on the right.
   With no published parameter groups the template drops the left column and
   marks the card --single, so it becomes one column instead of an empty one. */
.aq-lp .aq-lp-spec {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: 30px;
  padding: 28px 30px 30px;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius-lg, 12px);
  box-shadow: var(--aq-shadow-sm, 0 8px 22px rgba(13, 27, 42, 0.06));
}

.aq-lp .aq-lp-spec--single { grid-template-columns: minmax(0, 1fr); }

.aq-lp .aq-lp-spec-main { min-width: 0; }

.aq-lp .aq-lp-spec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--aq-border-soft, #E8EEF3);
}

.aq-lp .aq-lp-spec-head h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; }

.aq-lp .aq-lp-spec-head h3 a { color: inherit; text-decoration: none; }

.aq-lp .aq-lp-spec-head h3 a:hover {
  color: var(--aq-blue, #0F5FB8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aq-lp .aq-lp-spec-sku {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
  font-variant-numeric: tabular-nums;
}

/* The table's own scope, above its name: these rows are one model, and the
   label says so before the first figure is read. */
.aq-lp .aq-lp-spec-label {
  flex: 0 0 100%;
  order: -1;
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-blue, #0F5FB8);
}

/* The shared parameter table (.aq-specs, .aq-specs-table, components.css) keeps
   its own look — the group label, the row rhythm, the emphasised value. This
   page only tightens its spacing and drops the rule under the closing row, and
   every selector stays scoped so no other surface is reached. */
.aq-lp .aq-specs + .aq-specs { margin-top: 22px; }
.aq-lp .aq-specs-group { margin: 0 0 8px; }
.aq-lp .aq-specs-table { margin: 0; font-size: 13.5px; }

.aq-lp .aq-specs-table th,
.aq-lp .aq-specs-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--aq-border-soft, #E8EEF3);
}

.aq-lp .aq-specs-table th { width: 42%; background: var(--aq-alt, #F5F7FA); }

.aq-lp .aq-specs-table tr:last-child th,
.aq-lp .aq-specs-table tr:last-child td { border-bottom: 0; }

/* Small print with a link out to the model's own page. */
.aq-lp .aq-lp-spec-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--aq-border-soft, #E8EEF3);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--aq-muted, #687684);
}

.aq-lp .aq-lp-spec-note a {
  color: var(--aq-blue, #0F5FB8);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aq-lp .aq-lp-spec-note a:hover { color: var(--aq-blue-dark, #0A4D95); }

/* The buy box beside the table: the side-panel shape the business pages use,
   drawn here from the tokens. */
.aq-lp .aq-lp-spec-aside {
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-left: 3px solid var(--aq-blue, #0F5FB8);
  border-radius: var(--aq-radius, 8px);
  background: var(--aq-alt, #F5F7FA);
}

/* The specified model, above the document request: the picture that belongs to
   the table beside it, so the section is not a page of numbers alone. */
.aq-lp .aq-lp-spec-photo {
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--aq-border, #DBE3EA);
}

.aq-lp .aq-lp-spec-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius-sm, 6px);
}

.aq-lp .aq-lp-spec-photo figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--aq-body, #40505E);
}

.aq-lp .aq-lp-spec-aside h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-spec-aside p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--aq-body, #40505E);
}

.aq-lp .aq-lp-spec-aside .aq-lp-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

/* 8. Models and prices ----------------------------------------------------
 * The catalogue card: photograph, name, the parameters a buyer compares, then
 * the price with the availability badge and the buy button. The parameter rows
 * are the shared .aq-card-specs list, so a card here reads exactly like a card
 * in the catalogue; only the spacing is decided on this page.
 */

.aq-lp .aq-lp-models {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.aq-lp .aq-lp-model {
  display: flex;
  flex-direction: column;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius, 8px);
  overflow: hidden;
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
  transition: border-color var(--aq-dur, 280ms) var(--aq-ease, ease),
              box-shadow var(--aq-dur, 280ms) var(--aq-ease, ease);
}

.aq-lp .aq-lp-model-media {
  display: block;
  background: var(--aq-media, #E4EBF1);
  overflow: hidden;
}

.aq-lp .aq-lp-model-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--aq-dur-slow, 640ms) var(--aq-ease, ease);
}

.aq-lp .aq-lp-model-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 20px 22px;
}

/* Every card states the same six things in the same order — photograph, name,
   up to three parameters, price, availability, one button — and each of them
   holds its place, so a row of three cards reads across instead of stepping:
   a long name clamps at two lines, a product with one parameter keeps the rows
   its neighbours use, and the price with the button land on the same lines. */
.aq-lp .aq-lp-model-name {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}

.aq-lp .aq-lp-model-name a { color: inherit; text-decoration: none; }
.aq-lp .aq-lp-model-name a:hover { color: var(--aq-blue, #0F5FB8); }

/* The parameter slot between the name and the price: three rows reserved on
   every card, whether the product published three or none. Inside it the rows
   stay on one line each, the value giving way to an ellipsis rather than
   wrapping into the row below and pushing the price off its line. */
.aq-lp .aq-lp-model-specs { min-height: 63px; }

.aq-lp .aq-lp-model .aq-card-specs {
  margin: 0;
  grid-auto-rows: 19px;
  gap: 3px;
}

.aq-lp .aq-lp-model .aq-card-specs li {
  min-width: 0;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}

.aq-lp .aq-lp-model .aq-card-specs li > span,
.aq-lp .aq-lp-model .aq-card-specs li > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aq-lp .aq-lp-model-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--aq-border-soft, #E8EEF3);
}

.aq-lp .aq-lp-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--aq-ink, #17212B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A sale price says the old figure once, struck, and the current one once: the
   struck copy is WooCommerce's own <del>, the live one its <ins>, and the
   second copy it adds for a screen reader is clipped here rather than printed,
   so the row never shows the same money twice. */
.aq-lp .aq-lp-price del {
  font-size: 14px;
  font-weight: 600;
  color: var(--aq-muted, #687684);
}

.aq-lp .aq-lp-price ins { text-decoration: none; }

.aq-lp .aq-lp-price .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 8b. The models side by side ------------------------------------------------
 * Four facts and a way into the model page — thrust, voltage, depth, link —
 * each read from that model's own specification table, with the condition the
 * model page states printed under the figure it belongs to. It is a real table,
 * so the columns keep their alignment; on a narrow screen the whole table
 * scrolls sideways inside its own frame instead of squeezing five columns into
 * a phone or widening the page.
 */

.aq-lp .aq-lp-compare {
  margin: 30px 0 0;
  padding: 22px 24px 24px;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius, 8px);
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
  /* The specification table links into this block, so it clears the sticky
     section bar the way a section does. */
  scroll-margin-top: var(--aq-lp-anchor, 80px);
}

.aq-lp .aq-lp-compare-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-compare-lead {
  margin: 0 0 16px;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

/* Printed only where the table really has to scroll — a phone, not a desktop. */
.aq-lp .aq-lp-compare-hint {
  display: none;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--aq-muted, #687684);
}

/* The line that closes the comparison: the same quiet size as the table's own
   aside, with the one part that goes somewhere marked as a link, so it reads as a
   footnote to the figures rather than a call to action competing with the model
   cards above it. */
.aq-lp .aq-lp-compare-foot {
  margin: 14px 0 0;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

.aq-lp .aq-lp-compare-foot a {
  color: var(--aq-blue, #0F5FB8);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.aq-lp .aq-lp-compare-foot a:hover { color: var(--aq-ink, #17212B); }

.aq-lp .aq-lp-compare-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.aq-lp .aq-lp-compare-scroll:focus-visible {
  outline: 2px solid var(--aq-blue, #0F5FB8);
  outline-offset: 3px;
}

.aq-lp .aq-lp-compare-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.aq-lp .aq-lp-compare-table th,
.aq-lp .aq-lp-compare-table td {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid var(--aq-border-soft, #E8EEF3);
}

/* The header row keeps one rhythm with the body: same 14px side padding, the
   same first-column start, and a label over the link column so no column is
   headless. */
.aq-lp .aq-lp-compare-table thead th {
  padding-top: 0;
  border-top: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-muted, #687684);
  white-space: nowrap;
}

.aq-lp .aq-lp-compare-table thead th.aq-lp-compare-col-go { white-space: normal; }

.aq-lp .aq-lp-compare-table tbody th {
  width: 30%;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.aq-lp .aq-lp-compare-table tbody th a { color: var(--aq-ink, #17212B); text-decoration: none; }
.aq-lp .aq-lp-compare-table tbody th a:hover { color: var(--aq-blue, #0F5FB8); }

.aq-lp .aq-lp-compare-table td b {
  display: block;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
  white-space: nowrap;
  /* Digits keep one width down the column, so "7.5 kg" and "20.1 kg" sit on the
     same grid and a column can be read top to bottom. */
  font-variant-numeric: tabular-nums;
}

/* The condition a figure was measured or stated under, printed with the figure
   and never moved into a footnote the reader has to go looking for. */
.aq-lp .aq-lp-compare-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--aq-muted, #687684);
  font-variant-numeric: normal;
}

.aq-lp .aq-lp-compare-none { color: var(--aq-muted, #687684); }

.aq-lp .aq-lp-compare-go {
  font-weight: 700;
  color: var(--aq-blue, #0F5FB8);
  text-decoration: none;
  white-space: nowrap;
}

.aq-lp .aq-lp-compare-go:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One row is read across five columns, so the whole line marks itself under the
   pointer and under keyboard focus, which keeps the model name next to the
   figures it belongs to. */
.aq-lp .aq-lp-compare-table tbody tr:hover > *,
.aq-lp .aq-lp-compare-table tbody tr:focus-within > * { background: #F6F9FC; }

/* 8c. The families chosen with the thruster ---------------------------------
 * Four doors into the neighbouring catalogue — the controller, the power path,
 * the control electronics and the connectors. Each card is a real category of
 * the store: the name, the count and the link are read from it at render time.
 */

.aq-lp .aq-lp-pairs {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.aq-lp .aq-lp-pair { display: flex; min-width: 0; }

.aq-lp .aq-lp-pair-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-top: 3px solid var(--aq-cyan, #1697B8);
  border-radius: var(--aq-radius, 8px);
  background: var(--aq-white, #fff);
  color: inherit;
  text-decoration: none;
}

.aq-lp .aq-lp-pair-name {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--aq-ink, #17212B);
}

.aq-lp .aq-lp-pair-count {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aq-blue, #0F5FB8);
  font-variant-numeric: tabular-nums;
}

.aq-lp .aq-lp-pair-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

.aq-lp .aq-lp-pair-go {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--aq-blue, #0F5FB8);
}

/* 9. Services -------------------------------------------------------------
 * Four cards that lead to the service pages, two per row so the four always pair
 * up: three per row left the fourth on a line of its own with an empty cell
 * beside it. The template wraps the whole card in one link
 * (.aq-lp-service-link), so the link is the flex column and the forward step
 * under the paragraph stays pinned to the bottom of the card.
 */

.aq-lp .aq-lp-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.aq-lp .aq-lp-service {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-top: 3px solid var(--aq-cyan, #1697B8);
  border-radius: var(--aq-radius, 8px);
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
  transition: border-color var(--aq-dur, 280ms) var(--aq-ease, ease),
              box-shadow var(--aq-dur, 280ms) var(--aq-ease, ease);
}

.aq-lp .aq-lp-service-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.aq-lp .aq-lp-service h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.3; font-weight: 700; }

.aq-lp .aq-lp-service h3 a { color: inherit; text-decoration: none; }

.aq-lp .aq-lp-service h3 a:hover,
.aq-lp .aq-lp-service-link:hover h3 {
  color: var(--aq-blue, #0F5FB8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aq-lp .aq-lp-service p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--aq-muted, #687684); }

/* The forward step under the paragraph. The arrow is drawn here; the movement
   it makes on hover lives in section 13, inside the reduced-motion guard. */
.aq-lp .aq-lp-service-go {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--aq-blue, #0F5FB8);
}

.aq-lp .aq-lp-service-go::after { content: " \2192"; display: inline-block; }

/* 10. Factory and quality (the dark band) ---------------------------------
 * Three test photographs at their own 4:3 shape: one on the left with two stacked
 * beside it, then the written proof and the record of where everything is made.
 * Everything here reads on the dark surface, including the small print.
 */

.aq-lp .aq-lp-photos {
  display: grid;
  /* 2.23 : 1 rather than 2 : 1. Each frame now carries a caption line, and the
     caption height is the same on both sides, so the left picture has to be a
     little wider than twice the right column for its own 4:3 height to equal the
     two frames beside it — that is what keeps the row level without cropping the
     photograph on the left to fit. */
  grid-template-columns: minmax(0, 2.23fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* The pair sits in its own column beside the test photograph, so the band reads
   as one picture on the left and two on the right wherever two columns fit. */
.aq-lp .aq-lp-photos-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
}

.aq-lp .aq-lp-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--aq-radius, 8px);
  overflow: hidden;
  background: var(--aq-navy-2, #102438);
}

.aq-lp .aq-lp-photo img,
.aq-lp .aq-lp-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The test photograph takes the height the pair beside it adds up to, so the row
   ends level. Cover-cropped, never stretched. */
.aq-lp .aq-lp-photo--main .aq-lp-photo-img {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* All three photographs are 4:3, so each one keeps its own shape: the pair on
   the right is measured from the same ratio as the picture beside it, and the
   left photograph takes the height the pair adds up to, so the row ends level
   without stretching anything. */
.aq-lp .aq-lp-photos-side .aq-lp-photo--side .aq-lp-photo-img { aspect-ratio: 4 / 3; }

/* The caption sits under the photograph rather than over it, so it keeps a
   readable size whatever the picture behind it happens to be. */
.aq-lp .aq-lp-photo figcaption {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--aq-border-dark, rgba(255, 255, 255, 0.16));
  background: rgba(8, 19, 31, 0.55);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--aq-on-dark, #C3D2DF);
}

.aq-lp .aq-lp-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 36px;
}

.aq-lp .aq-lp-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
}

.aq-lp .aq-lp-proof li {
  padding-top: 16px;
  border-top: 1px solid var(--aq-border-dark, rgba(255, 255, 255, 0.16));
}

.aq-lp .aq-lp-proof h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; font-weight: 700; color: #fff; }
.aq-lp .aq-lp-proof p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--aq-on-dark-muted, #A9BCCB); }

/* The record panel: a labelled list, the same shape as the definition rows the
   business pages use. */
.aq-lp .aq-lp-factlist {
  padding: 22px 22px 24px;
  border: 1px solid var(--aq-border-dark, rgba(255, 255, 255, 0.16));
  border-radius: var(--aq-radius, 8px);
  background: rgba(255, 255, 255, 0.05);
}

.aq-lp .aq-lp-factlist h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--aq-cyan-soft, #6FC3DC);
}

.aq-lp .aq-lp-dl { margin: 0; display: grid; }

.aq-lp .aq-lp-dl-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--aq-border-dark, rgba(255, 255, 255, 0.16));
}

.aq-lp .aq-lp-dl-row:last-child { padding-bottom: 0; border-bottom: 0; }

.aq-lp .aq-lp-dl dt { margin: 0; font-size: 13px; line-height: 1.6; color: var(--aq-on-dark-muted, #A9BCCB); }

.aq-lp .aq-lp-dl dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

/* A field the page cannot answer yet. It stays legible and honest instead of
   reading like a value that was entered. */
.aq-lp .aq-lp-dl dd.is-empty { font-weight: 400; font-style: italic; color: var(--aq-on-dark-muted, #A9BCCB); }

/* The reminder shown to signed-in editors only: a dashed panel with the amber
   edge the site uses for a notice, so it can never be mistaken for copy that
   ships to a visitor. */
.aq-lp .aq-lp-todo {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--aq-border-dark, rgba(255, 255, 255, 0.16));
  border-left: 3px solid var(--aq-amber, #A86A12);
  border-radius: var(--aq-radius-sm, 6px);
  background: rgba(168, 106, 18, 0.14);
  font-size: 12px;
  line-height: 1.6;
  color: var(--aq-on-dark, #C3D2DF);
}

/* The doors out of the verification band. The test procedure and the reports
   live where they are maintained, so this is one row of plain links rather than
   a second card grid: the band stays short and nothing is restated in
   miniature. */
.aq-lp .aq-lp-doclinks {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.aq-lp .aq-lp-doclinks a {
  display: inline-flex;
  align-items: baseline;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--aq-on-dark, #C3D2DF);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  transition: color var(--aq-dur, 280ms) var(--aq-ease, ease),
              border-color var(--aq-dur, 280ms) var(--aq-ease, ease);
}

.aq-lp .aq-lp-doclinks a::after {
  content: " \2192";
  margin-left: 8px;
  color: var(--aq-cyan-soft, #6FC3DC);
}

.aq-lp .aq-lp-doclinks a:hover,
.aq-lp .aq-lp-doclinks a:focus-visible {
  color: #fff;
  border-bottom-color: var(--aq-cyan-soft, #6FC3DC);
}

/* 11. Get a quote: the aside ----------------------------------------------
 * Two columns: on the left what a useful first message contains plus the direct
 * line, on the right the enquiry form. The aside is the side-panel shape the
 * business pages use, drawn from the tokens.
 */

.aq-lp .aq-lp-quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 28px;
  align-items: start;
}

.aq-lp .aq-lp-quote-aside {
  padding: 26px 24px 26px;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-left: 3px solid var(--aq-blue, #0F5FB8);
  border-radius: var(--aq-radius, 8px);
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
}

.aq-lp .aq-lp-checklist {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 11px;
}

/* The same tick the homepage trust strip draws: a soft disc with a check in it,
   drawn rather than loaded. */
.aq-lp .aq-lp-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aq-body, #40505E);
}

.aq-lp .aq-lp-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(47, 123, 75, 0.12);
  box-shadow: inset 0 0 0 1px rgba(47, 123, 75, 0.35);
}

.aq-lp .aq-lp-checklist li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--aq-green, #2F7B4B);
  border-bottom: 1.5px solid var(--aq-green, #2F7B4B);
  transform: rotate(-45deg);
}

/* The direct line under the checklist, and the small print under that. */
.aq-lp .aq-lp-quote-aside .aq-lp-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--aq-muted, #687684);
}

/* 12. Get a quote: the enquiry form card ----------------------------------
 * The form is the shared component (components/inquiry-form.php): a section in
 * a wrap, a section head, an optional callout and the fields. It ships its own
 * inline sheet for the .aqf-* structure, but its shell and submit button come
 * from assets/css/static-page.css, which this campaign page does not load.
 *
 * So the component's own variables are aliased to the site tokens here, and the
 * small set of .sp-* rules the shell needs is provided in this scope only. The
 * section carries no padding of its own — the card is the container, and the
 * wrap inside it carries the padding once, so the form reads as this page's card
 * rather than as an interior page pasted into it.
 */

.aq-lp-form {
  --sp-blue: var(--aq-blue, #0F5FB8);
  --sp-blue-dark: var(--aq-blue-dark, #0A4D95);
  --sp-cyan: var(--aq-cyan, #1697B8);
  --sp-navy: var(--aq-navy, #0D1B2A);
  --sp-white: var(--aq-white, #FFFFFF);
  --sp-surface: var(--aq-surface, #EEF3F7);
  --sp-alt: var(--aq-alt, #F5F7FA);
  --sp-border: var(--aq-border, #DBE3EA);
  --sp-ink: var(--aq-ink, #17212B);
  --sp-body: var(--aq-body, #40505E);
  --sp-muted: var(--aq-muted, #687684);
  --sp-green: var(--aq-green, #2F7B4B);
  --sp-amber: var(--aq-amber, #A86A12);
  --sp-radius: var(--aq-radius, 8px);

  min-width: 0;
  background: var(--aq-white, #fff);
  border: 1px solid var(--aq-border, #DBE3EA);
  border-radius: var(--aq-radius-lg, 12px);
  box-shadow: var(--aq-shadow-sm, 0 8px 22px rgba(13, 27, 42, 0.06));
  overflow: hidden;
}

.aq-lp-form .sp-section { padding: 0; background: transparent; }
.aq-lp-form .sp-wrap { max-width: none; margin: 0; padding: 28px 28px 30px; }

.aq-lp-form .sp-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin: 0 0 20px;
}

.aq-lp-form .sp-section-head > div { min-width: 0; }

.aq-lp-form .sp-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aq-blue, #0F5FB8);
}

.aq-lp-form .sp-section-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--aq-ink, #17212B);
}

.aq-lp-form .sp-lead {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--aq-muted, #687684);
}

/* The notice the component prints above the fields when the handler sends the
   visitor back with a reason. Amber — the way the site marks something that
   needs attention — with dark ink on the tint so the sentence stays readable. */
.aq-lp-form .sp-callout {
  padding: 14px 16px;
  border: 1px solid var(--aq-border, #DBE3EA);
  border-left: 3px solid var(--aq-amber, #A86A12);
  border-radius: var(--aq-radius, 8px);
  background: var(--aq-amber-bg, #FBF0DD);
}

.aq-lp-form .sp-callout p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--aq-ink, #17212B); }
.aq-lp-form .aqf-callout { margin: 0 0 20px; }

/* The submit button is this page's primary button, not the interior-page one:
   the same blue, the same radius and the same hover as every other action on
   the page, at the campaign page's larger control height. */
.aq-lp-form .sp-btn {
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--aq-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              border-color var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              color var(--aq-dur-fast, 180ms) var(--aq-ease, ease),
              box-shadow var(--aq-dur-fast, 180ms) var(--aq-ease, ease);
}

.aq-lp-form .sp-btn-primary {
  background: var(--aq-blue, #0F5FB8);
  color: #fff;
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
}

.aq-lp-form .sp-btn-primary:hover,
.aq-lp-form .sp-btn-primary:focus-visible { background: var(--aq-blue-dark, #0A4D95); }

/* The component's inline sheet assumes it sits in a page section; inside a card
   the fields start straight under the head and the closing row is tighter. */
.aq-lp-form .aqf-form { margin-top: 0; }
.aq-lp-form .aqf-grid { gap: 16px 18px; }
.aq-lp-form .aqf-actions { margin-top: 22px; }
.aq-lp-form .aqf-actions .aqf-note { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.6; }

/* 13. Motion --------------------------------------------------------------
 * Transitions only, and only on hover or focus: this page defines no keyframe
 * animation, because the site's motion layer (assets/css/motion.css and
 * assets/js/aq-motion.js) owns everything that arrives on scroll.
 *
 * The rules below are the ones that move something. They are grouped inside
 * prefers-reduced-motion: no-preference, so a visitor who has asked their system
 * for less motion still gets the colour and shadow response above but nothing
 * shifts, and nothing is ever hidden behind a movement.
 */

@media (prefers-reduced-motion: no-preference) {
  .aq-lp .aq-lp-model,
  .aq-lp .aq-lp-pair-link,
  .aq-lp .aq-lp-service {
    transition: transform var(--aq-dur, 280ms) var(--aq-ease, ease),
                border-color var(--aq-dur, 280ms) var(--aq-ease, ease),
                box-shadow var(--aq-dur, 280ms) var(--aq-ease, ease);
  }

  .aq-lp .aq-lp-service-go::after { transition: transform var(--aq-dur, 280ms) var(--aq-ease, ease); }

  .aq-lp .aq-lp-model:hover,
  .aq-lp .aq-lp-pair-link:hover,
  .aq-lp .aq-lp-service:hover {
    transform: translateY(-3px);
    border-color: var(--aq-border-strong, #B9C8D6);
    box-shadow: var(--aq-shadow-lift, 0 16px 34px rgba(13, 27, 42, 0.12));
  }

  /* The photograph inside the frame steps in slightly as the card lifts. */
  .aq-lp .aq-lp-model:hover .aq-lp-model-img { transform: scale(1.045); }
  .aq-lp .aq-lp-service:hover .aq-lp-service-go::after { transform: translateX(3px); }
}

/* 14. 1100px ---------------------------------------------------------------
 * The two-column compositions give way first: the hero stacks with the
 * photograph under the copy, the section head becomes a single column, and the
 * three-across grids become two-across. Nothing becomes one column yet — that
 * is the phone layout, below.
 */

@media (max-width: 1100px) {
  .aq-lp .aq-lp-hero { padding: 52px 0 58px; }
  .aq-lp .aq-lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .aq-lp .aq-lp-hero-media { max-width: 620px; }
  .aq-lp .aq-lp-h1 { font-size: 44px; max-width: 22ch; }
  .aq-lp .aq-lp-hero-lead { font-size: 16px; }

  .aq-lp .aq-lp-sec { padding: var(--aq-section-sm, 56px) 0; }

  .aq-lp .aq-lp-head { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 10px; margin-bottom: 30px; }

  /* The head is one column now, so the placement set at the top of the sheet
     has to be released as well — otherwise the lead would still be asking for a
     second column and would create one. */
  .aq-lp .aq-lp-head > .aq-lp-eyebrow,
  .aq-lp .aq-lp-head > .aq-lp-h2,
  .aq-lp .aq-lp-head > .aq-lp-lead { grid-column: 1; grid-row: auto; align-self: start; }

  .aq-lp .aq-lp-head > .aq-lp-lead { margin-top: 8px; }

  .aq-lp .aq-lp-models,
  .aq-lp .aq-lp-services,
  .aq-lp .aq-lp-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .aq-lp .aq-lp-spec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .aq-lp .aq-lp-resources { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .aq-lp .aq-lp-quote-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .aq-lp .aq-lp-proof-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .aq-lp-nav .aq-lp-nav-links a { padding: 0 12px; }
  .aq-lp-nav .aq-lp-nav-logo--file { height: 36px; }
}

/* 15. 820px ----------------------------------------------------------------
 * Tablet and small laptop. The photograph pair stacks, the proof list stacks,
 * and the nav sheds the page-title label so the link rail keeps as much of the
 * row as possible — the brand name and the WhatsApp button both stay.
 */

@media (max-width: 820px) {
  .aq-lp .aq-lp-hero { padding: 44px 0 50px; }
  .aq-lp .aq-lp-h1 { font-size: 38px; }
  .aq-lp .aq-lp-hero-lead { font-size: 15.5px; }
  .aq-lp .aq-lp-facts { gap: 12px 20px; }
  .aq-lp .aq-lp-head { margin-bottom: 26px; }

  .aq-lp .aq-lp-photos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aq-lp .aq-lp-photos-side { gap: 14px; }
  .aq-lp .aq-lp-photo--main .aq-lp-photo-img {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .aq-lp .aq-lp-proof { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .aq-lp .aq-lp-spec { padding: 24px 22px 26px; }
  .aq-lp .aq-lp-model-body { padding: 16px 18px 20px; }

  .aq-lp-nav .aq-lp-nav-inner { gap: 8px; padding: 8px 16px; }
  .aq-lp-nav .aq-lp-nav-sub { display: none; }
  .aq-lp-nav .aq-lp-nav-links a { padding: 0 10px; font-size: 13.5px; }
}

/* 16. 620px — the phone layout --------------------------------------------
 * Everything is one column, the type steps down one size, the hero facts stack,
 * the photo grid and the model grid sit one per row, the definition rows put the
 * label above its value, and every control keeps a 44px-tall hit area (the nav
 * links and buttons were built at that height and are not reduced here).
 */

@media (max-width: 620px) {
  .aq-lp .aq-lp-wrap { padding: 0 18px; }

  /* Nav: the category label is gone at 820px, so only paddings tighten - the
     artwork keeps its proportion and steps down a size with the row. */
  .aq-lp-nav .aq-lp-nav-inner { gap: 8px; padding: 8px 14px; }
  .aq-lp-nav .aq-logo.aq-lp-nav-logo { width: 45px; height: 38px; }
  .aq-lp-nav .aq-lp-nav-logo--file { height: 32px; max-width: 140px; }
  .aq-lp-nav .aq-lp-nav-links a { padding: 0 9px; font-size: 13px; }
  .aq-lp-nav .aq-lp-nav-wa { min-height: 36px; padding: 0 12px; font-size: 12px; }

  /* Type scale */
  .aq-lp .aq-lp-hero { padding: 36px 0 42px; }
  .aq-lp .aq-lp-sec { padding: 44px 0; }
  .aq-lp .aq-lp-h1 { font-size: 30px; letter-spacing: -0.02em; max-width: none; }
  .aq-lp .aq-lp-h2 { font-size: 23px; }
  .aq-lp .aq-lp-hero-lead { margin-bottom: 24px; font-size: 15px; }
  /* The section lead and the five-number paragraphs are the page's reading copy,
     not captions: at 14-14.5px inside a 390px column they sat below the size a
     phone reader is comfortable with, so they step up where the column is
     narrowest and keep 1.65 of leading. */
  .aq-lp .aq-lp-lead { font-size: 15.5px; line-height: 1.65; }
  .aq-lp .aq-lp-head { margin-bottom: 22px; }

  /* Hero: the photograph keeps its own width. */
  .aq-lp .aq-lp-hero-media { max-width: none; }
  .aq-lp .aq-lp-hero-img { aspect-ratio: 5 / 4; }
  .aq-lp .aq-lp-actions .aq-lp-btn { flex: 1 1 100%; }
  .aq-lp .aq-lp-actions--center { margin-top: 26px; }
  .aq-lp .aq-lp-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; padding-top: 18px; }
  .aq-lp .aq-lp-fact b { font-size: 16.5px; }

  /* Sections */
  .aq-lp .aq-lp-resources { margin-bottom: 30px; }
  .aq-lp .aq-lp-resource { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .aq-lp .aq-lp-resource p { font-size: 15px; line-height: 1.65; }
  .aq-lp .aq-lp-spec { padding: 20px 18px 22px; gap: 20px; }
  .aq-lp .aq-lp-spec-head { margin-bottom: 14px; padding-bottom: 13px; }
  .aq-lp .aq-lp-spec-head h3 { font-size: 17px; }
  .aq-lp .aq-lp-spec-aside { padding: 18px 18px 20px; }
  .aq-lp .aq-lp-models,
  .aq-lp .aq-lp-services,
  .aq-lp .aq-lp-pairs { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .aq-lp .aq-lp-pairs { margin-bottom: 24px; }
  .aq-lp .aq-lp-pair-link { padding: 18px; }
  .aq-lp .aq-lp-photos { gap: 12px; }
  .aq-lp .aq-lp-photos-side { gap: 12px; }
  .aq-lp .aq-lp-photo figcaption { padding: 10px 12px 12px; }
  .aq-lp .aq-lp-factlist { padding: 18px 18px 20px; }
  .aq-lp .aq-lp-dl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .aq-lp .aq-lp-quote-grid { gap: 18px; }
  .aq-lp .aq-lp-quote-aside { padding: 20px 18px 22px; }
  .aq-lp .aq-lp-checklist { margin-bottom: 16px; }

  /* The comparison keeps its five columns and scrolls sideways inside its own
     frame, with the hint that tells a thumb there is more to the right. */
  .aq-lp .aq-lp-compare { margin-top: 24px; padding: 16px 14px 18px; }
  .aq-lp .aq-lp-compare-table { min-width: 640px; font-size: 12.5px; }
  .aq-lp .aq-lp-compare-table th,
  .aq-lp .aq-lp-compare-table td { padding: 9px 11px; }
  .aq-lp .aq-lp-compare-hint { display: block; }
  .aq-lp .aq-lp-compare-foot { font-size: 13.5px; }

  /* The model name stays pinned while the figures scroll past it, so a thumb
     swiping to the depth column can still see which model the row belongs to. */
  .aq-lp .aq-lp-compare-table thead th:first-child,
  .aq-lp .aq-lp-compare-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--aq-white, #fff);
    box-shadow: 1px 0 0 var(--aq-border-soft, #E8EEF3), 8px 0 8px -8px rgba(13, 27, 42, 0.18);
  }
  .aq-lp .aq-lp-compare-table thead th:first-child { z-index: 2; }

  /* The form card: its own padding, one full-width submit, note under it. */
  .aq-lp-form .sp-wrap { padding: 20px 18px 22px; }
  .aq-lp-form .sp-section-head h2 { font-size: 19px; }
  .aq-lp-form .aqf-actions { gap: 12px; }
  .aq-lp-form .sp-btn { width: 100%; }
  .aq-lp-form .aqf-actions .aqf-note { flex: 1 1 100%; }
}