/* ============================================================
   site-v2.css  ·  Gtech FZE design system
   ------------------------------------------------------------
   Loaded ONLY by pages converted to the v2 layout. Pages still
   on the old design keep style_v5.css + refinements.css and are
   completely unaffected, so conversion can happen page by page.

   Not scoped with a prefix, and it does not need to be: this file
   is only ever linked by v2 pages, and those pages deliberately do
   not load Bootstrap, style_v5, refinements, Owl, WOW or animate.css.
   Nothing else is present to collide with. The body carries .v2 so
   page-specific overrides have something to hang off.

   Source of truth for the design is DESIGN.md.
   ============================================================ */

/* ============================================================
   TOKENS  ·  one dominant colour, one accent, the rest neutral
   ============================================================ */
/* Light is the default. Surfaces are numbered rather than named after a
   colour, so dark is the same design with different values. Depth comes from
   stepping between surface levels, which is what gives sections their edges. */
:root{
  /* Red does two incompatible jobs. As TEXT it must contrast with the page;
     as a FILL it must let white text sit on it. In light mode one value clears
     both (6.05:1 white-on-red, 5.58:1 as text on the band), which is why the
     split only shows up in dark. Keeping them as separate tokens means neither
     mode has to compromise. */
  --red:#bf2034; --red-fill:#bf2034; --red-dark:#4a050e; --orange:#ff6922;
  --ink:#12161c; --body:#4a5260; --muted:#616978;
  /* The banded surface is mostly white with a cool blue cast, one hue family
     with dark's #12161c rather than a separate tinted panel. Separation comes
     from the grid and the hairline border, not from pushing s1 darker: at
     1.08:1 against the page it should be felt more than seen. Cards stay pure
     white so they still lift off the band. */
  --s0:#ffffff; --s1:#f3f6fb; --s2:#ffffff; --s3:#e8eef7;
  --line:#e0e6ef; --line-soft:#ecf0f6;
  --tint:rgba(191,32,52,.07);
  --shot-bg:#f6f7f9;
  /* The grid line is where the navy lives, and only just: 8.5% of a saturated
     navy over a warm base. The line lands cooler than the surface it sits on,
     which is what makes it read blue at an opacity this low. Raising either
     the opacity or the surface tint turns the whole band blue, which is not
     what this is for. */
  --grid-line:rgba(26,48,92,.085);
  --red-on-dark:var(--red);
  /* Brand red is only 2.6:1 on the maroon hero gradient, so hero and CTA
     accents need a lighter value. The old #ff97a4 went so far up the
     lightness scale that it read pink. This keeps the brand hue at 353deg
     and stops at the darkest red that still clears AA on that gradient. */
  --red-on-hero:#eb4c5f;
  /* Background washes: warm, low-opacity, anchored to the brand. Kept under
     5% so they read as paper warmth rather than decorative glow. */
  --wash-a:rgba(191,32,52,.035);
  --wash-b:rgba(255,105,34,.028);
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 12px rgba(16,24,40,.07);
  --sh-3:0 12px 28px rgba(16,24,40,.10), 0 2px 8px rgba(16,24,40,.05);
  --sh-4:0 24px 56px rgba(16,24,40,.14), 0 4px 12px rgba(16,24,40,.06);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --t-hero:clamp(2rem,1.15rem + 3.6vw,3.7rem);
  --t-h2:clamp(1.5rem,1.08rem + 1.9vw,2.4rem);
  --t-h3:clamp(1.08rem,1rem + .55vw,1.3rem);
  --t-body:clamp(1rem,.97rem + .12vw,1.06rem);
  --gut:clamp(1.15rem,4vw,3rem);
  --sect:clamp(3rem,6vw,5.5rem);
}

:root[data-theme="dark"]{
  /* #e0364c was doing both jobs and failing both: 4.36:1 as text on the page,
     3.91:1 on a card, and only 4.37:1 under white button text. Split, each
     value clears AA on its own surface. */
  --red:#ef6d80; --red-fill:#cc2a3f; --orange:#ff8a4c;
  --ink:#f2f4f7; --body:#b6bdc9; --muted:#8b93a1;
  --s0:#0d1014; --s1:#12161c; --s2:#171c24; --s3:#1d232c;
  --line:#252c37; --line-soft:#1c222b;
  --tint:rgba(224,54,76,.11);
  --shot-bg:#f3f4f6;
  /* White at 3% is invisible on a #12161c band. Dark surfaces need far
     more relative lift than light ones to read as the same texture. */
  --grid-line:rgba(255,255,255,.085);
  /* Superseded by the --red split above, which applies the same reasoning
     everywhere rather than only in the menu. Kept as an alias so existing
     rules keep working; --red is now always the text-safe value. */
  --red-on-dark:var(--red);
  /* The hero and CTA gradients are the same in both modes, so the accent on
     them is too. Restated only so the pair is never edited in isolation. */
  --red-on-hero:#eb4c5f;
  --wash-a:rgba(224,54,76,.07);
  --wash-b:rgba(255,138,76,.05);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px rgba(0,0,0,.35);
  --sh-3:0 12px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --sh-4:0 24px 56px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  background:var(--s0)}


h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.14;letter-spacing:-.022em;font-weight:800;text-wrap:balance}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- Section rhythm ----------
   Alternating surfaces plus a hairline rule, so sections read as distinct
   bands instead of one continuous sheet of white. */
.sect{padding-block:var(--sect);position:relative}
/* Sections are separated by a change of surface and texture, not by boxing
   each one. The grid is what marks a band, so it means something instead of
   being wallpaper: plain sections are clean white, banded sections carry the
   grid over a faint tint. Cards are reserved for genuine bounded objects,
   which is to say products and services, not layout containers. */
.sect{padding-block:var(--sect)}
.sect--soft{
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/44px 44px,
    var(--s1);
  border-block:1px solid var(--line)}
:root[data-theme="dark"] .sect--soft{box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.sect--tint{
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/44px 44px,
    var(--s1);
  border-block:1px solid var(--line)}


.eyebrow{display:block;font-size:.92rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin-bottom:.9rem}
.sect-head{max-width:64ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.sect-head p{color:var(--muted);margin:0}

/* ---------- Buttons ---------- */
.btn{--bg:var(--red-fill);--fg:#fff;--bd:var(--red-fill);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.75rem 1.4rem;font:inherit;font-weight:600;font-size:1rem;
  border-radius:var(--r-sm);border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);
  cursor:pointer;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-1)}
.btn--ghost{--bg:var(--s2);--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bd:var(--red);--fg:var(--red)}
.btn--dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.42)}
.btn--dark:hover{--bd:#fff;--bg:rgba(255,255,255,.1)}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:120;background:color-mix(in srgb, var(--s0) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:88px}
.hdr-logo img{width:72px;height:72px}
.nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav>li{list-style:none;position:relative}
.nav ul{list-style:none;margin:0;padding:0}
.nav>li>a:not(.btn),.nav>li>button{
  display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .8rem;border:0;background:none;
  border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:.875rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;cursor:pointer;
  transition:color .18s var(--ease),background-color .18s var(--ease)}
.nav>li>a:not(.btn):hover,.nav>li>button:hover,.nav>li[data-open] >button{color:var(--red);background:var(--tint)}
.caret{width:14px;height:14px;transition:transform .22s var(--ease)}
.nav>li[data-open] .caret{transform:rotate(180deg)}

/* Mega menu. Opens on hover on desktop and on click/keyboard everywhere, and
   there is no gap between the trigger and the panel, so the pointer can reach
   it without the menu closing. */
.mega{position:absolute;top:100%;left:0;min-width:min(560px,90vw);
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-4);padding:1rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;
  display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.5rem}
.nav>li:hover>.mega,.nav>li[data-open]>.mega{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav>li:last-child .mega{left:auto;right:0}
/* Panel widths as modifiers rather than inline styles. Inline min-widths beat
   the mobile rules below, which is what left the three dropdowns at three
   different widths on a phone, none of them lining up with the nav above. */
.mega--sm{min-width:min(430px,90vw)}
.mega--one{min-width:min(340px,90vw);grid-template-columns:1fr}
/* Category headings in brand red with a hairline under them, so each group in
   the mega menu is visually separated from the links above it. */
.mega h5{grid-column:1/-1;margin:.75rem 0 .45rem;padding-bottom:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red-on-dark);border-bottom:1px solid var(--line)}
.mega h5:first-child{margin-top:.25rem}
.mega a{display:block;padding:.55rem .7rem;border-radius:var(--r-sm);font-size:.95rem;color:var(--ink);
  transition:background-color .16s var(--ease),color .16s var(--ease)}
.mega a:hover{background:var(--tint);color:var(--red)}
.hdr .btn{margin-left:.5rem}
/* The in-nav CTA is the mobile one; the standalone button serves desktop. */
@media(min-width:1081px){ .nav>li>.btn{display:none} }
.theme-btn{width:44px;height:44px;flex-shrink:0;margin-left:.5rem;display:grid;place-items:center;
  border:1.5px solid var(--line);background:var(--s2);color:var(--ink);border-radius:var(--r-sm);
  cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease)}
.theme-btn:hover{border-color:var(--red);color:var(--red)}
.theme-btn svg{width:19px;height:19px}
/* Show the icon for the mode you would switch TO. */
.theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:block}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1.5px solid var(--line);
  background:var(--s2);border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:22px;height:22px;color:var(--ink)}

@media(max-width:1080px){
  .hdr-in{min-height:74px}
  .hdr-logo img{width:58px;height:58px}
  .burger{display:inline-flex}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--s2);border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
    padding:.5rem var(--gut) 1.25rem;margin:0;max-height:calc(100dvh - 74px);overflow-y:auto;
    display:none}
  .nav.open{display:flex}
  .nav>li>a,.nav>li>button{width:100%;justify-content:space-between;padding:.9rem .25rem;font-size:.95rem}
  /* Stacked and flush with the nav links above: no min-width, one column, and
     the width comes from the parent rather than from the viewport. */
  .mega,.mega--sm,.mega--one{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;
    min-width:0;width:auto;padding:.15rem 0 .5rem .75rem;
    margin-left:.25rem;display:none;grid-template-columns:1fr;gap:0}
  .mega h5{margin:.9rem 0 .35rem}
  .mega h5:first-child{margin-top:.35rem}
  .mega a{padding:.6rem .5rem}
  .nav>li[data-open]>.mega{display:grid}
  .nav>li:hover>.mega{display:none}
  .nav>li[data-open]:hover>.mega{display:grid}
  .hdr .btn{display:none}
  .nav .btn{display:inline-flex;margin:.75rem 0 0;width:100%}
}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#1a0308 0%,#4a050e 52%,#8d1526 100%)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.75rem,4.5vw,4rem);
  align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
@media(max-width:940px){.hero-in{grid-template-columns:1fr;padding-block:2.25rem;gap:2rem}}
.hero .eyebrow{color:var(--red-on-hero)}
.hero h1{color:#fff;font-size:var(--t-hero);letter-spacing:-.03em;margin-bottom:.85rem}
.hero h1 em{font-style:normal;color:var(--red-on-hero)}
.hero-sub{font-size:clamp(1rem,.94rem + .38vw,1.16rem);color:rgba(255,255,255,.87);max-width:56ch;margin-bottom:1.5rem}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
@media(max-width:560px){.hero-cta .btn{width:100%}}
.hero-marks{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.8)}
.hero-marks span{display:inline-flex;align-items:center;gap:.4rem}
.hero-marks svg{width:15px;height:15px;color:#6ed295;flex-shrink:0}
.hero-shot{border-radius:var(--r-xl);box-shadow:var(--sh-4);width:100%;display:block}


/* ---------- Quick actions, directly under the hero ----------
   So the two things people come to do are reachable without scrolling. */
.quick{background:var(--s0);border-bottom:1px solid var(--line-soft)}
.quick-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:820px){.quick-in{grid-template-columns:1fr}}
.quick-item{background:var(--s2);display:flex;align-items:center;gap:.9rem;padding:1.25rem clamp(1rem,2.5vw,1.75rem);
  transition:background-color .18s var(--ease)}
.quick-item:hover{background:var(--s3)}
.quick-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:var(--tint);color:var(--red)}
.quick-ico svg{width:20px;height:20px}
.quick-item b{display:block;color:var(--ink);font-size:.98rem;font-weight:700;line-height:1.3}
/* Specificity guard: `.quick-item span` below would otherwise flip the icon
   box back to display:block and strand the glyph in the top-left corner. */
.quick-item .quick-ico{display:grid;place-items:center}
.quick-item span{display:block;font-size:.85rem;color:var(--muted)}
.quick-arrow{margin-left:auto;color:var(--muted);width:18px;height:18px;flex-shrink:0;
  transition:transform .2s var(--ease),color .2s var(--ease)}
.quick-item:hover .quick-arrow{transform:translateX(4px);color:var(--red)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.75rem}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.stat b{display:block;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);font-weight:800;
  color:var(--red);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:.3rem;font-size:.84rem;color:var(--muted);font-weight:500}

/* ---------- Cards ---------- */
.grid{display:grid;gap:clamp(.9rem,1.8vw,1.35rem)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* auto-fit gives three columns at desktop width, which strands the fourth card
   alone on a second row. Four items are a 2x2, so say so. Matching on "last
   child is also the fourth" keeps this automatic: add a fifth card and the
   grid goes back to auto-fit without anyone editing CSS. */
.grid--3:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.grid--3:has(> :last-child:nth-child(4)){grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;height:100%;background:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.55rem;box-shadow:var(--sh-1);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:rgba(191,32,52,.26)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.94rem;margin:0}
.card-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:1rem;background:var(--tint);color:var(--red);flex-shrink:0}
.card-ico svg{width:22px;height:22px}
.card-more{margin-top:auto;padding-top:1rem;color:var(--red);font-weight:600;font-size:.89rem;
  display:inline-flex;align-items:center;gap:.4rem}
.card-more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.card:hover .card-more svg{transform:translateX(4px)}

/* ---------- Product rail ---------- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem}
.rail-nav{display:flex;gap:.5rem;flex-shrink:0}
@media(max-width:620px){.rail-nav{display:none}}
.rail-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--s2);
  border:1.5px solid var(--line);color:var(--ink);cursor:pointer;box-shadow:var(--sh-1);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),
             transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s}
.rail-btn:hover:not(:disabled){background:var(--red-fill);border-color:var(--red-fill);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-3)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail-btn svg{width:18px;height:18px}
/* Fixed track widths: minmax(0,…) lets the grid squeeze every card in rather
   than overflow, which silently kills the scrolling. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:80vw;gap:1.25rem;
  overflow-x:auto;scroll-behavior:smooth;padding-bottom:.5rem;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
@media(min-width:620px){.rail{grid-auto-columns:calc(50% - .625rem)}}
@media(min-width:1100px){.rail{grid-auto-columns:calc(33.333% - .84rem)}}

.prod{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out)}
.prod:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(191,32,52,.26)}
.prod-img{aspect-ratio:5/4;background:var(--s2);display:grid;place-items:center;padding:1.6rem;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;max-width:100%;
  transition:transform .4s var(--ease-out)}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-body{padding:1.25rem 1.4rem 1.5rem}
.prod-tag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.prod-body h3{font-size:1.12rem;margin:.3rem 0 .2rem}
.prod-body p{font-size:.9rem;color:var(--muted);margin:0}
/* Catalogue cards. Titles are h2 there, because the page h1 is the category
   and each product is a sibling heading under it, not a sub-heading of one.
   Both are clamped so a long DB title or spec blurb cannot push one card
   taller than the rest of its row. */
.prod-name{font-size:1.08rem;font-weight:700;color:var(--ink);letter-spacing:-.012em;
  line-height:1.32;margin:.3rem 0 .35rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-name a:hover{color:var(--red)}
.prod-spec{font-size:.89rem;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod .prod-body{display:flex;flex-direction:column;flex:1}
.prod .prod-actions{margin-top:auto}


/* ---------- Why us ---------- */
.why{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.why{grid-template-columns:1fr}}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.why-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:1.02rem;color:var(--ink)}
.why-list svg{width:24px;height:24px;color:var(--red);flex-shrink:0;margin-top:.18rem}
.why-panel{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh-2);text-align:center}
.why-panel .big{font-size:clamp(2.4rem,2rem + 2vw,3.4rem);font-weight:800;color:var(--red);
  line-height:1;letter-spacing:-.03em}
.why-panel .cap{color:var(--muted);font-size:.92rem;margin:.4rem 0 1.5rem}
.why-panel .btn{width:100%}
.why-panel .btn+.btn{margin-top:.6rem}

/* ---------- Brand marquee ---------- */
.marquee{position:relative;overflow:hidden;padding-block:.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  animation:marquee 40s linear infinite;will-change:transform}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
/* The brand files in photo/brands are 300x175 with a lot of baked-in white
   padding, so the visible mark is only about 60% of the box. Sizing for the
   box makes the logos look tiny. These numbers are chosen for the padded
   source, not for a trimmed one. max-width keeps wide wordmarks like
   Gestetner from dwarfing the squarer marks. */
.marquee img{height:88px;width:auto;max-width:240px;object-fit:contain;opacity:.72;filter:grayscale(1);
  transition:opacity .25s var(--ease),filter .25s var(--ease)}
@media(max-width:620px){.marquee img{height:64px;max-width:180px}}
.marquee img:hover{opacity:1;filter:none}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,#0d0d0d 0%,#2d000a 55%,var(--red-dark) 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(2rem,4.5vw,3.5rem);text-align:center}
.cta .eyebrow{color:var(--red-on-hero)}
.cta h2{color:#fff;margin-bottom:.55rem}
.cta p{color:rgba(255,255,255,.82);max-width:56ch;margin:0 auto 1.6rem}
.cta-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.cta-row .btn{width:100%}}

/* ---------- Footer ---------- */
.ft{background:#0f1319;color:#a9b1bf;padding-top:clamp(2.75rem,5vw,4.5rem);font-size:.93rem}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(1.75rem,3vw,3rem)}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft h4{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.ft a{color:#a9b1bf;transition:color .18s var(--ease)}
.ft a:hover{color:#fff}
.ft-logo{width:64px;height:64px;margin-bottom:1rem;background:#fff;border-radius:12px;padding:6px}
.ft-about{max-width:36ch;margin:0 0 1.25rem;color:#8b93a1;font-size:.89rem;line-height:1.7}
.ft-contact{display:flex;flex-direction:column;gap:.5rem}
.ft-contact a{display:inline-flex;align-items:center;gap:.6rem}
.ft-contact svg{width:16px;height:16px;color:var(--red);flex-shrink:0}
.ft-bottom{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.09);
  padding-block:1.3rem;display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  /* #6f7787 on the #0f1319 footer is 4.14:1, under AA for text this size.
     #838d9e reaches 5.3:1 and still reads as the quiet line it should be. */
  font-size:.84rem;color:#838d9e}

/* ---------- Floating WhatsApp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;align-items:center;gap:.6rem}
.wa-label{background:var(--s2);color:var(--ink);font-weight:600;font-size:.87rem;padding:.55rem .9rem;
  border-radius:50rem;box-shadow:var(--sh-3);white-space:nowrap}
@media(max-width:620px){.wa-label{display:none}}
.wa-btn{width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);flex-shrink:0;
  animation:jiggle 12s var(--ease) infinite;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.wa-btn:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(37,211,102,.5);animation-play-state:paused}
.wa-btn svg{width:30px;height:30px;color:#fff}
@keyframes jiggle{
  0%,88%,100%{transform:rotate(0) scale(1)}
  89%{transform:rotate(-11deg) scale(1.06)} 91%{transform:rotate(9deg) scale(1.06)}
  93%{transform:rotate(-7deg) scale(1.04)} 95%{transform:rotate(5deg) scale(1.02)}
  97%{transform:rotate(0) scale(1)}
}

/* ============================================================
   INNER PAGES
   ------------------------------------------------------------
   Everything above this line was written for the homepage. The
   twenty other pages need a smaller, denser vocabulary: a short
   page hero instead of a full one, breadcrumbs, long-form prose,
   spec tables, a form, an FAQ. All of it reuses the same tokens,
   so nothing here introduces a new colour or radius.
   ============================================================ */

/* ---------- Page hero ----------
   Same gradient as the homepage hero at roughly half the height, because on
   an inner page the content below is the point and the hero is orientation. */
.phero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#1a0308 0%,#4a050e 52%,#8d1526 100%)}
.phero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding-block:clamp(2rem,4.5vw,3.5rem)}
.phero-in>div:first-child{min-width:0}
@media(max-width:860px){.phero-in{grid-template-columns:1fr;padding-block:1.9rem;gap:1.5rem}
  .phero-art{display:none}}
.phero .eyebrow{color:var(--red-on-hero)}
.phero h1{color:#fff;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.9rem);letter-spacing:-.028em;margin-bottom:.6rem}
.phero h1 em{font-style:normal;color:var(--red-on-hero)}
.phero p{color:rgba(255,255,255,.84);max-width:62ch;margin:0 0 1.25rem;
  font-size:clamp(1rem,.96rem + .25vw,1.1rem)}
.phero-cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:560px){.phero-cta .btn{width:100%}}
.phero-art img{border-radius:var(--r-lg);box-shadow:var(--sh-4);width:100%}

/* ---------- Breadcrumb ----------
   Sits above the h1 inside the hero. On dark it needs its own colours, so it
   does not inherit --muted, which is tuned for light surfaces. */
.crumb{margin:0 0 .9rem;font-size:.85rem}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;padding:0}
.crumb a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .18s var(--ease)}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb li[aria-current]{color:rgba(255,255,255,.55)}
.crumb li+li::before{content:"/";margin-right:.4rem;color:rgba(255,255,255,.35)}

/* ---------- Brand stat strip ---------- */
.strip{background:linear-gradient(120deg,var(--red-dark) 0%,var(--red-fill) 100%);color:#fff}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.5rem;text-align:center}
@media(max-width:720px){.strip-in{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
.strip b{display:block;font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.strip span{display:block;margin-top:.25rem;font-size:.82rem;color:rgba(255,255,255,.82)}

/* ---------- Text beside an image ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.25rem);align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
.split--narrow{grid-template-columns:.85fr 1.15fr}
/* Grid items default to min-width:auto, so one wide child (a reCAPTCHA iframe,
   a spec table, a long unbroken model code) makes the whole column refuse to
   shrink and pushes the page sideways on a phone. */
.split>*{min-width:0}
.grid>*{min-width:0}
.form-row>*{min-width:0}
@media(max-width:900px){.split,.split--wide,.split--narrow{grid-template-columns:1fr}
  .split--flip>*:first-child{order:2}}
.split img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%}
.split p{color:var(--body)}

/* ---------- Checklists ---------- */
.checks{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.7rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);font-size:1rem}
.checks svg{width:21px;height:21px;color:var(--red);flex-shrink:0;margin-top:.16rem}
.checks--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ---------- Prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.5rem}
.prose>*:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.25rem;display:grid;gap:.45rem}
.prose li{color:var(--body)}
.prose strong{color:var(--ink)}
.prose a:not(.btn){color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---------- Bordered panel ---------- */
.panel{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.5vw,1.85rem);box-shadow:var(--sh-1)}
.panel h3{margin-bottom:.5rem}
.panel>*:last-child{margin-bottom:0}

/* ---------- FAQ ----------
   <details>, so a question is readable and expandable with no JavaScript at
   all. Answers stay in the DOM, which is what the FAQPage schema claims. */
.faq{display:grid;gap:.7rem;max-width:80ch}
.faq details{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.faq details[open]{border-color:rgba(191,32,52,.3);box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 1.15rem;font-weight:700;color:var(--ink);
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:11px;height:11px;margin-top:.35rem;
  border-right:2.2px solid var(--red);border-bottom:2.2px solid var(--red);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a{padding:0 1.15rem 1.15rem;color:var(--body)}
.faq .faq-a>*:last-child{margin-bottom:0}

/* ---------- Tables ----------
   The wrapper scrolls, never the page. A spec table on a 360px phone is
   otherwise the single most common cause of horizontal body scroll. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--s2)}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl thead th{background:var(--s1);color:var(--ink);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;border-bottom:1px solid var(--line)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--s1)}
.tbl th[scope="row"]{color:var(--ink);font-weight:600;white-space:nowrap}
/* The winning column in a head-to-head table. Colour alone would not carry it
   for anyone who cannot see red, so the cell also gets a tick. */
.tbl td.win{color:var(--red);font-weight:700}
.tbl td.win::before{content:"";display:inline-block;width:7px;height:12px;margin-right:.5rem;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:50rem;
  border:1.5px solid var(--line);background:var(--s2);color:var(--body);
  font-size:.88rem;font-weight:600;white-space:nowrap;
  transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease)}
.chip:hover{border-color:var(--red);color:var(--red)}
/* Region and tag lists are labels, not controls: no pointer, no hover state. */
.chip--static,.chip--static:hover{cursor:default;border-color:var(--line);color:var(--body)}
.chip[aria-current="true"],.chip.is-on{background:var(--red-fill);border-color:var(--red-fill);color:#fff}

/* ---------- Forms ---------- */
.form{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:.35rem}
.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--s2);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;
  min-height:48px;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--tint)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616978' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px}
:root[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
/* jQuery Validate writes .error on the control and appends a label.error. */
.field input.error,.field select.error,.field textarea.error{border-color:var(--red)}
.field label.error{color:var(--red);font-size:.83rem;font-weight:600}
/* ---------- Phone field (intl-tel-input) ----------
   The widget's own stylesheet comes from a CDN, and the page must not depend
   on it arriving: without it the injected country list falls back to a static
   320px block that stretches the field and pushes the whole page sideways on
   a phone. These rules are the minimum geometry the widget needs, written so
   they still hold when the vendor CSS does load. */
.field .iti{position:relative;display:block;width:100%}
.field .iti input[type="tel"]{width:100%}
.field .iti__flag-container{position:absolute;top:0;bottom:0;left:0;padding:1px;
  border-right:1px solid var(--line)}
.field .iti__selected-flag{display:flex;align-items:center;gap:.35rem;height:100%;
  padding:0 .6rem;border-radius:calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px);
  background:var(--s1);cursor:pointer}
.field .iti--separate-dial-code input[type="tel"]{padding-left:5.2rem}
.field .iti__country-list{position:absolute;z-index:30;top:100%;left:0;margin:.25rem 0 0;
  padding:.3rem;list-style:none;max-height:230px;overflow-y:auto;
  width:max-content;max-width:min(320px,calc(100vw - 3rem));
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh-3);color:var(--ink);text-align:left}
.field .iti__country-list.iti__hide,.field .iti__hide{display:none}
.field .iti__country{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
  border-radius:calc(var(--r-sm) - 2px);cursor:pointer;font-size:.92rem;white-space:nowrap}
.field .iti__country.iti__highlight,.field .iti__country:hover{background:var(--tint)}
.field .iti__divider{margin:.3rem 0;border:0;border-bottom:1px solid var(--line)}
.field .iti__dial-code{color:var(--muted)}

.form-note{font-size:.85rem;color:var(--muted);margin:0}
.form-msg{border-radius:var(--r-sm);padding:.85rem 1rem;font-weight:600;font-size:.94rem}
.form-msg--ok{background:rgba(46,160,97,.1);color:#1c7a45;border:1px solid rgba(46,160,97,.32)}
.form-msg--bad{background:var(--tint);color:var(--red);border:1px solid rgba(191,32,52,.32)}
:root[data-theme="dark"] .form-msg--ok{color:#6ed295}

/* ---------- Contact details list ---------- */
.contacts{display:grid;gap:1rem;list-style:none;margin:0;padding:0}
.contacts li{display:flex;gap:.85rem;align-items:flex-start}
.contacts .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:var(--tint);color:var(--red)}
.contacts .ci svg{width:19px;height:19px}
.contacts b{display:block;color:var(--ink);font-size:.9rem}
.contacts span,.contacts a{display:block;font-size:.94rem;color:var(--body)}
.contacts a:hover{color:var(--red)}

/* ---------- Map ---------- */
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-1);background:var(--s1)}
.map iframe{display:block;width:100%;height:clamp(260px,38vw,420px);border:0}
/* Facade shown until someone asks for the map. Sized to the iframe it will be
   replaced by, so nothing shifts when it loads. */
.map--facade{position:relative;height:clamp(260px,38vw,420px);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/28px 28px,
    var(--s1)}
.map-load{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.75rem;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--body);
  transition:background-color .2s var(--ease)}
.map-load:hover{background:var(--tint)}
.map-load svg{width:32px;height:32px;color:var(--red)}
.map-load b{display:block;color:var(--ink);font-size:1rem}
.map-load span span{display:block;font-size:.88rem;color:var(--muted)}

/* ---------- Product grid and gallery ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.9rem,1.8vw,1.35rem)}
@media(max-width:420px){.pgrid{grid-template-columns:1fr}}
.prod-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.prod-actions .btn{min-height:40px;padding:.45rem .9rem;font-size:.88rem}
.pick{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--body);
  font-weight:600;cursor:pointer;user-select:none}
.pick input{width:17px;height:17px;min-height:0;accent-color:var(--red);cursor:pointer;flex-shrink:0}

.gal{display:grid;gap:.7rem}
.gal-main{background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);
  aspect-ratio:4/3;display:grid;place-items:center;padding:1.5rem;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:contain;max-width:100%}
.gal-thumbs{display:flex;gap:.55rem;flex-wrap:wrap}
.gal-thumbs button{width:70px;height:70px;padding:6px;background:var(--s2);cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;
  transition:border-color .18s var(--ease)}
.gal-thumbs button:hover{border-color:var(--red)}
.gal-thumbs button[aria-current="true"]{border-color:var(--red);box-shadow:0 0 0 2px var(--tint)}
.gal-thumbs img{width:100%;height:100%;object-fit:contain}

/* ---------- Admin-authored rich content ----------
   prod_highlight, prod_features and prod_spec are whatever HTML the WYSIWYG
   saved. In practice that means baked-in `font-family: tahoma`, `font-size:
   1rem`, `text-align: justify` and hardcoded colours on almost every node, so
   the content arrives fighting the type scale rather than inheriting it.
   None of it can be fixed at source without re-entering every product, so it
   is normalised here. Scoped to .prose and .rich-table, never global. */

/* Take back typography from the editor. The DB sets tahoma on most spans,
   which is why product copy used to render in a different face from the rest
   of the page, and justify, which opens rivers in a narrow column. */
.prose [style*="font-family"]{font-family:inherit !important}
.prose [style*="font-size"]{font-size:inherit !important}
.prose [style*="text-align: justify"],.prose [style*="text-align:justify"]{text-align:left !important}
.prose [style*="color"]{color:inherit !important}
.prose [style*="background"]{background:transparent !important}

/* Headings inside admin copy are h2 in the DB. They are subordinate to the
   section heading they sit under, so they are sized as a lead-in, not as a
   competing h2. */
.prose h2{font-size:1.15rem;font-weight:700;letter-spacing:-.012em;margin:0 0 .6rem}
.prose h2:not(:first-child){margin-top:1.6rem}
.prose blockquote{margin:0 0 1rem;padding-left:1rem;border-left:3px solid var(--red)}
.prose blockquote p:last-child{margin-bottom:0}
.prose>div{margin-bottom:.6rem}
.prose iframe,.prose img{max-width:100%}

/* ---------- Highlights ----------
   Feature lists were arriving as plain paragraphs with default bullets, which
   reads as text dropped into a box. Each point now gets a red marker and near
   black text, so the list scans as a list of features. */
.prose--feat{color:var(--ink)}
.prose--feat p,.prose--feat li,.prose--feat div{color:var(--ink)}
.prose--feat ul{list-style:none;padding-left:0;display:grid;gap:.6rem;margin:0 0 1rem}
.prose--feat ul li{position:relative;padding-left:1.9rem;line-height:1.6}
/* Drawn rather than a glyph, so it lines up with the cap height at any size
   and inherits colour in both themes. */
.prose--feat ul li::before{content:"";position:absolute;left:.15rem;top:.52em;
  width:7px;height:12px;border-right:2.4px solid var(--red);border-bottom:2.4px solid var(--red);
  transform:rotate(45deg) translate(-1px,-2px)}
.prose--feat ol{padding-left:1.3rem;display:grid;gap:.6rem}
.prose--feat ol li{padding-left:.3rem}
.prose--feat ol li::marker{color:var(--red);font-weight:700}
.prose--feat strong,.prose--feat b{color:var(--ink);font-weight:700}

/* Half the products write their feature list as <ul><li>, the other half as a
   <blockquote> holding one <p> per feature. Both are lists; only one of them
   says so. This gives the paragraph shape the same markers rather than leaving
   it as stacked sentences with no entry point. */
.prose--feat blockquote{margin:0;padding:0;border:0;display:grid;gap:.6rem}
.prose--feat blockquote p{position:relative;margin:0;padding-left:1.9rem;line-height:1.6}
.prose--feat blockquote p::before{content:"";position:absolute;left:.15rem;top:.52em;
  width:7px;height:12px;border-right:2.4px solid var(--red);border-bottom:2.4px solid var(--red);
  transform:rotate(45deg) translate(-1px,-2px)}
/* A blockquote that is genuinely one quotation, not a disguised list, has a
   single child and keeps the quotation treatment. */
.prose--feat blockquote > p:only-child{padding-left:1rem;border-left:3px solid var(--red)}
.prose--feat blockquote > p:only-child::before{content:none}

/* Equal-height columns, and a one-item row that takes the full width rather
   than sitting in half of one. */
.split--stretch{align-items:stretch}
.split--single{grid-template-columns:1fr}

/* ---------- Embedded video ----------
   prod_features is a bare <iframe width="425" height="350"> wrapped in a <p>,
   so left alone it sits as a small letterboxed rectangle floating in a much
   larger card. The wrapper is flattened and the iframe is stretched to fill
   the panel edge to edge at 16/9. */
.embed{padding:0;overflow:hidden;background:var(--s1);min-height:260px;
  position:relative;display:block}
.embed>p,.embed>div{margin:0;padding:0;line-height:0}
/* Absolute rather than aspect-ratio, so the video fills whatever height the
   Highlights panel beside it happens to be instead of leaving dead space under
   a 16/9 box. YouTube letterboxes inside its own frame, so nothing is cropped
   and nothing is stretched. */
.embed:has(iframe),.embed:has(video){background:#000}
.embed iframe,.embed video,.embed embed,.embed object{
  position:absolute;inset:0;display:block;width:100%;height:100%;border:0;max-width:none}
.embed img{width:100%;height:100%;object-fit:cover}
/* The panel holding the video needs no inner padding: the video is the panel. */
.panel.embed{padding:0}
/* Stacked on a phone, there is no neighbour to match, so give it its own
   height rather than inheriting a collapsed one. */
@media(max-width:900px){.embed{min-height:0;padding-top:56.25%}}

/* ---------- Spec sheet ----------
   gt_spec_table() has already turned the editor's flat <td>/<td> grid into
   <th scope="row"> labels and full-width section rows. This gives that
   structure something to look like: a label column that reads as a column, and
   section headings that read as headings rather than as another data row. */
.rich-table table,.spec{width:100%;border-collapse:collapse;font-size:.94rem;
  min-width:520px;color:var(--body);background:var(--s2)}
.rich-table th,.rich-table td{padding:.8rem 1.1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
/* The label column. The tint plus the rule is what stops the sheet reading as
   one bare list of sentences. */
.rich-table th[scope="row"]{background:var(--s1);color:var(--ink);font-weight:600;
  width:38%;min-width:190px;border-right:1px solid var(--line)}
.rich-table td{background:var(--s2)}
.rich-table tbody tr:hover td{background:var(--s1)}
/* Section headings: GENERAL, PRINTER, SCANNER. Uppercase, tracked out, on the
   raised surface, so they are unmistakably a level above the rows they head. */
.rich-table .spec-section th{background:var(--s3);color:var(--ink);font-weight:800;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding-block:.7rem;border-right:0;border-bottom:1px solid var(--line)}
.rich-table .spec-section + tr th,.rich-table .spec-section + tr td{border-top:0}
.rich-table tr:last-child th,.rich-table tr:last-child td{border-bottom:0}
.rich-table [style*="font-family"]{font-family:inherit !important}
.rich-table [style*="font-size"]{font-size:inherit !important}
.rich-table [style*="text-align"]{text-align:left !important}
/* DB content arrives with inline colours baked in from the WYSIWYG editor,
   which turn invisible in dark mode. currentColor wins them back. */
:root[data-theme="dark"] .rich-table [style*="color"]{color:inherit !important}
:root[data-theme="dark"] .rich-table [style*="background"]{background:transparent !important}

/* ---------- Compare bar ----------
   Fixed to the bottom while products are selected. It clears the WhatsApp
   button, which is 56px plus an 18px offset in the same corner. */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:190;
  background:var(--s2);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,24,40,.12);
  padding:.75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom))}
.cmpbar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cmpbar b{color:var(--ink)}
.cmpbar .btn{margin-left:auto}
@media(max-width:620px){.cmpbar .btn{margin-left:0;flex:1}
  .cmpbar-in{padding-right:76px}}

/* ---------- Comparison table ----------
   Column 1 is the spec label and sticks while the product columns scroll,
   which is what makes a three-product table usable on a phone. */
.cmp{table-layout:fixed;min-width:640px}
.cmp th[scope="row"]{position:sticky;left:0;z-index:2;background:var(--s1);
  width:170px;white-space:normal;font-size:.88rem}
.cmp thead th:first-child{left:0;z-index:3}
.cmp td{text-align:left;font-size:.92rem}
.cmp-head{text-align:center;vertical-align:top;padding-block:1.25rem;min-width:210px}
/* A percentage max-height does not resolve inside a table cell: a specified
   height on a block in a <th> is treated as a minimum, so the containing block
   stays indefinite, max-height:100% computes to none, and the image renders at
   its natural size. On a 3960px press photo that meant it spilled across three
   rows. Absolute height plus object-fit needs no percentage to resolve, and
   overflow:hidden is the backstop if anything else ever goes indefinite. */
.cmp-shot{display:block;padding:8px;margin-bottom:.75rem;overflow:hidden}
.cmp-shot img{display:block;width:100%;height:134px;object-fit:contain;
  max-width:100%;max-height:134px}
.cmp-name{display:block;font-weight:700;color:var(--ink);font-size:.98rem;
  line-height:1.35;margin-bottom:.75rem;text-transform:none;letter-spacing:0}
.cmp-name:hover{color:var(--red)}
.cmp-head .btn{min-height:40px;padding:.45rem 1rem;font-size:.88rem;width:100%}
.cmp-band td{background:var(--s3);color:var(--ink);font-weight:700;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}
/* prod_highlight and prod_spec are admin-authored HTML, so cap what a pasted
   block can do to the row height and drop its baked-in margins. */
.cmp-rich{font-size:.9rem}
.cmp-rich *{font-size:inherit !important;margin:0 !important;padding:0 !important;
  font-weight:inherit !important}
.cmp-rich ul,.cmp-rich ol{padding-left:1.1rem !important}
/* Same editor output as the product pages: maroon text on a forced white
   background, which in dark mode is either invisible or a white patch. */
.cmp-rich [style*="color"]{color:inherit !important}
.cmp-rich [style*="background"]{background:transparent !important}
.cmp-rich [style*="font-family"]{font-family:inherit !important}

.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Pagination ---------- */
.pager{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;
  list-style:none;padding:0}
.pager a,.pager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--s2);
  color:var(--body);font-weight:600;font-size:.92rem;
  transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease)}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager .is-on,.pager [aria-current="page"]{background:var(--red-fill);border-color:var(--red-fill);color:#fff}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:clamp(2rem,5vw,3.5rem) 1rem;color:var(--muted)}
.empty svg{width:40px;height:40px;color:var(--line);margin-bottom:.75rem}
.empty h3{color:var(--ink);margin-bottom:.4rem}

/* ---------- Utilities ----------
   A deliberately short list. Anything used more than three times gets a real
   class instead, which is how the old pages ended up with 33 inline styles. */
.u-center{text-align:center;margin-inline:auto}
.u-mb0{margin-bottom:0}

/* Nothing starts hidden. No scroll-reveal: that pattern is what leaves
   invisible headings behind, and WOW.js with `transition:.5s` on every
   property is what makes the live site's scrolling choppy. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .marquee-track,.wa-btn{animation:none}
}