/* =========================================================
   ABICO Trading Co. — abicotrading.com
   Design system + site styles
   ========================================================= */

:root{
  /* Brand */
  --navy-900:#131E39;
  --navy-800:#1B2848;
  --navy-700:#24355F;
  --navy-600:#2F4276;
  --navy-100:#EAEEF6;

  /* HP blue is reserved for places where the subject genuinely is HP:
     the partner badge, the Amplify panel and the authenticity notes. */
  /* HP Electric Blue, per the FY26 brand guide (HEX 024AD8). The previous
     value was HP's retired cyan. Used only where the subject genuinely is HP. */
  --hp:#024AD8;
  --hp-dark:#0139A8;
  --hp-50:#EDF2FE;

  /* ABICO's own accent. Two tones because gold needs a dark value to stay
     legible on white and a light one to stay legible on navy.
     Contrast: accent-ink 5.3:1 on white, 4.8:1 on accent-soft;
     accent-light 7.9:1 on navy-700; accent-on 7.7:1 on accent. */
  --accent:#D9A93A;
  --accent-dark:#C9971F;
  --accent-ink:#8A6510;
  --accent-light:#F2CE72;
  --accent-soft:#FBF3DF;
  --accent-on:#241D06;

  /* Neutrals */
  --ink:#0F1729;
  --body:#4B566B;
  /* 5.27:1 on white, 4.95:1 on surface-2, 4.77:1 on surface-3 — passes AA
     on every surface it actually sits on, while staying lighter than
     --body (7.39:1) so the type hierarchy survives. */
  --muted:#5F6C88;
  --line:#E3E8F0;
  --line-soft:#EDF1F7;
  --surface:#FFFFFF;
  --surface-2:#F6F8FC;
  --surface-3:#F0F4FA;

  /* Type */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Cairo','Segoe UI',Tahoma,sans-serif;

  /* Space */
  --container:1180px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 6px 24px -8px rgba(19,30,57,.14);
  --shadow-lg:0 24px 60px -22px rgba(19,30,57,.34);

  --header-h:84px;

  /* Floating contact buttons (phones and small tablets) */
  --fab-size:56px;   /* also the touch target: comfortably over the 44px floor */
  --fab-gap:12px;    /* between the two circles */
  --fab-edge:16px;   /* from the screen edge */
  --fab-clear:32px;  /* white left below the footer, under the top circle */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.panel :focus-visible,.cta-band :focus-visible,.footer :focus-visible,
.page-hero :focus-visible,.mobile-bar :focus-visible,.nav-tel:focus-visible{outline-color:var(--accent-light)}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.1vw,2.5rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}

/* ---------- Arabic / RTL ---------- */
[dir="rtl"] body{font-family:var(--font-ar);line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-ar);letter-spacing:0;line-height:1.35;font-weight:700}
[dir="rtl"] .eyebrow{letter-spacing:0}
[dir="rtl"] .icon-flip{transform:scaleX(-1)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:64px 0}
.section--alt{background:var(--surface-2)}
.section--line{border-top:1px solid var(--line-soft)}

.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.center{text-align:center}
/* Present to assistive technology and to crawlers, invisible on screen —
   used where a card grid needs a section heading the design does not want. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.narrow{max-width:720px;margin-inline:auto}

.num{direction:ltr;unicode-bidi:embed;display:inline-block;font-size:inherit;font-weight:inherit}
/* Latin brand and program names sitting inside Arabic text. Without this the
   bidi algorithm is free to break "Managed Print Services" across two lines,
   which splits an HP program name in half. */
.lat{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ---------- Bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.eyebrow--light{color:var(--accent-light)}
.eyebrow--light::before{background:var(--accent-light)}

.lede{font-size:1.1rem;color:var(--muted)}
.section-head{max-width:760px;margin-bottom:44px}
.section-head.center{margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-on);box-shadow:0 10px 24px -10px rgba(201,151,31,.7)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-navy{background:var(--navy-700);color:#fff;box-shadow:0 10px 24px -12px rgba(36,53,95,.8)}
.btn-navy:hover{background:var(--navy-800)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.btn-outline{background:#fff;color:var(--navy-700);border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy-700);box-shadow:var(--shadow)}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn svg{width:17px;height:17px;flex:none}

.link-more{
  display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink);
  font-weight:700;font-size:.95rem;
}
.link-more svg{width:15px;height:15px;transition:transform .18s ease}
.link-more:hover svg{transform:translateX(3px)}
[dir="rtl"] .link-more svg{transform:scaleX(-1)}
[dir="rtl"] .link-more:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px -12px rgba(19,30,57,.4)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:18px}

.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand-mark{height:46px;width:auto}
/* Mark + wordmark only. The HP partner credential is deliberately NOT locked
   up with the logo: it lives in the hero badge, the footer and the page copy,
   so it reads as a claim ABICO makes rather than part of its identity.
   Arabic script needs more height than Latin at the same optical size. */
.brand-txt{display:flex;align-items:center}
.brand-word{height:24px;width:auto;display:block}
.brand-word--ar{display:none;height:30px}
[dir="rtl"] .brand-word--en{display:none}
[dir="rtl"] .brand-word--ar{display:block}

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.nav a{
  padding:9px 14px;border-radius:9px;font-size:.95rem;font-weight:600;color:var(--body);
  transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.nav a:hover{background:var(--surface-3);color:var(--ink)}
.nav a.active{color:var(--navy-700);font-weight:800}

.header-actions{display:flex;align-items:center;gap:10px;flex:none}

.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--navy-700);font-weight:800;font-size:.83rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.lang-btn:hover{border-color:var(--navy-600);box-shadow:var(--shadow-sm)}
.lang-btn svg{width:15px;height:15px;opacity:.65}
.lang-short{display:none}

.burger{
  display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:#fff;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:2px;background:var(--navy-700);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--navy-700);border-radius:2px;transition:transform .2s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.main{padding-top:var(--header-h)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800) 0%,var(--navy-700) 45%,#2C4A83 100%);
  color:#fff;padding:96px 0 104px;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 88% 8%,rgba(217,169,58,.26),transparent 65%),
    radial-gradient(520px 420px at 4% 96%,rgba(217,169,58,.10),transparent 68%);
}
.hero-waves{
  position:absolute;top:-10%;inset-inline-end:-6%;width:min(660px,58vw);opacity:.16;
  pointer-events:none;color:#fff;
}
[dir="rtl"] .hero-waves{transform:scaleX(-1)}
.hero-inner{position:relative;z-index:2;max-width:730px}
.hero h1{color:#fff}
.hero h1 .accent{color:var(--accent-light)}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.82);max-width:600px}
.hero p strong{color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Symmetric padding. The old 9px on the start side was spacing for a small HP
   mark that used to sit inside the pill and was removed for the brand guide;
   the footer's text-only pill already has its own symmetric .pill--plain. */
.hp-badge{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:8px 16px;border-radius:999px;margin-bottom:26px;
  backdrop-filter:blur(6px);
}
/* Three badges, not one, since MPS carries its Specialist designations too —
   so this wraps by default rather than only on a landing hero. */
.hero-cred{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
/* .hp-badge carries a 26px bottom margin that predates these rows using flex
   gap. gap already spaces the pills when they wrap, so in a hero the margin
   only pads the space underneath the row — 56px between the pills and the
   printers hero's proof rule, and 26px of unasked-for depth under the MPS
   hero, where the pills are the last thing in it. Scoped to .hero-cred so
   the inner-page .page-cred rows are left alone. */
.hero-cred .hp-badge{margin-bottom:0}
.hp-badge span{font-size:.85rem;font-weight:700;color:#fff;letter-spacing:.01em}

/* Hero stat rail */
.hero-stats{
  position:relative;z-index:2;margin-top:56px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);overflow:hidden;
}
.hero-stats div{background:rgba(10,18,38,.58);padding:20px 22px;backdrop-filter:blur(4px)}
.hero-stats b{display:block;font-size:1.65rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.2}
.hero-stats>div>span{font-size:.83rem;color:rgba(255,255,255,.72);font-weight:600;display:block}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  height:100%;
}
/* Only a card that actually goes somewhere lifts. This used to apply to
   every card, so five inert cards on the services grid promised an
   interaction they did not have — and on a phone, where there is no
   hover at all, the one card that was a link had no cue whatsoever.
   That is what .card-go below is for. */
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D5DEEC}
.card-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  color:var(--navy-700);font-weight:700;font-size:.92rem;
}
a.card{display:flex;flex-direction:column}
a.card:hover .card-go{gap:11px}
.card-go span{transition:transform .2s ease}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted);font-size:.97rem;margin-bottom:0}
.card ul.ticks{margin-top:16px}

.ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:20px;
}
.ico svg{width:24px;height:24px}

.ticks li{
  position:relative;padding-inline-start:28px;margin-bottom:9px;
  font-size:.95rem;color:var(--body);
}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.42em;
  width:17px;height:17px;border-radius:50%;background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px rgba(138,101,16,.3);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6510' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px;
}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
/* Two ways to lead with the media column, and they differ only on mobile.
   --rev: panel left on desktop, but BELOW the heading once stacked (About).
   --lead: panel leads at every width, because on Products the panel states
   the claim and the text column is the invitation to check it. */
.split--rev .split-media{order:-1}
.split--lead .split-media{order:-1}
/* the text column is the long one on a --lead split, so give it the wide track */
.split--lead{grid-template-columns:.95fr 1.05fr}
/* The quote sections invert the usual balance: the form is the point, and
   every 10px it gains is a label or a placeholder that stops wrapping, so
   the extra width buys height back rather than spending it. */
.split--form{grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}

.panel{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-700));
  border-radius:var(--radius-lg);padding:38px 34px;color:#fff;position:relative;overflow:hidden;
}
.panel::after{
  content:"";position:absolute;inset-inline-end:-70px;bottom:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(2,74,216,.45),transparent 68%);
}
.panel h3{color:#fff;font-size:1.35rem}
.panel p{color:rgba(255,255,255,.78)}
.panel .ticks li{color:rgba(255,255,255,.9)}
.panel .ticks li::before{
  background-color:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
/* flow-root so the floated HP badge (see .panel .creds) is contained: .panel
   has overflow:hidden and would otherwise clip a badge taller than the copy. */
.panel-inner{position:relative;z-index:1;display:flow-root}

/* A one-sentence panel: keeps the note's icon-beside-text shape, so it does not
   compete with the full panels elsewhere on the same page. */
.panel--note{padding:24px 26px}
.panel--note .panel-inner{display:flex;gap:14px;align-items:flex-start}
.panel--note svg{width:26px;height:26px;flex:none;margin-top:2px;color:var(--accent-light)}

/* The icon set is drawn on a 24px grid with a 1.7 stroke. A panel renders it at
   42px, which scales the stroke to ~3px — proportionally identical, optically
   much heavier. Thin it, the way an icon set does as the size grows. The 24px
   chips keep 1.7. */
.panel-inner > svg{stroke-width:1.35}
.panel--note p{margin:0;color:rgba(255,255,255,.82);font-size:.96rem}

.stat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;
}
.tile b{display:block;font-size:2rem;font-weight:800;color:var(--navy-700);letter-spacing:-.03em;line-height:1.1}
.tile>span{font-size:.88rem;color:var(--muted);font-weight:600;display:block}

/* ---------- Sector chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:.93rem;font-weight:600;color:var(--body);
}
.chip--navy{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* Client name wall */
.clients{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.clients div{
  background:#fff;min-height:104px;display:grid;place-items:center;padding:20px 18px;text-align:center;
  font-weight:700;color:var(--navy-700);font-size:1.02rem;letter-spacing:-.01em;line-height:1.35;
  transition:background .18s ease;
}
.clients div:hover{background:var(--surface-2)}

/* ---------- Product category rows ---------- */
.cat{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 30px;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.cat:hover{box-shadow:var(--shadow);border-color:#D5DEEC}
.cat .ico{margin-bottom:0}
.cat h3{margin-bottom:.3em}
.cat p{margin:0;color:var(--muted);font-size:.97rem}
.cat-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cat-tags span{
  font-size:.79rem;font-weight:600;color:var(--body);
  background:var(--surface-3);border-radius:6px;padding:4px 10px;
}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.step{background:#fff;padding:28px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.step::before{
  counter-increment:s;content:counter(s);
  font-weight:800;font-size:1.05rem;color:var(--accent-ink);
  background:var(--accent-soft);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
}
.step h3{font-size:1.08rem;margin-bottom:.35em}
.step p{margin:0;color:var(--muted);font-size:.96rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(140deg,var(--navy-800),var(--navy-700) 60%,#2D4B85);
  color:#fff;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset-inline-start:-8%;top:-40%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,169,58,.24),transparent 66%);
}
.cta-band .container{position:relative;z-index:1;padding-top:76px;padding-bottom:76px}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.8);font-size:1.08rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---------- Contact ---------- */
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;
  height:100%;display:flex;flex-direction:column;
}
/* margin-top:auto pushes the actions to the card's bottom edge, so the button
   rows line up across the row however unequal the content above them is. */
.contact-card .contact-actions{margin-top:auto;padding-top:22px}
.contact-card h3{display:flex;align-items:center;gap:10px;font-size:1.15rem}
.tag{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-ink);padding:4px 10px;border-radius:999px;
}
[dir="rtl"] .tag{letter-spacing:0;font-size:.75rem}
.dl{margin:0}
.dl div{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.dl div:first-child{border-top:0}
.dl dt{font-size:.83rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
[dir="rtl"] .dl dt{letter-spacing:0;text-transform:none;font-size:.9rem}
.dl dd{margin:0;color:var(--ink);font-weight:600;font-size:.98rem;font-variant-numeric:tabular-nums}
.dl dd a:hover{color:var(--accent-ink)}
/* Below ~1100px three .contact-card columns cannot hold a 112px label column
   plus an unbreakable address or email beside it, and the grid overflowed the
   viewport at its min-content width. Stacking label over value fixes it at the
   source; forcing the values to wrap instead broke sales@abicotrading.com
   across three lines. */
@media (max-width:1100px){
  .dl div{grid-template-columns:1fr;gap:2px}
}


.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.contact-card > .dl{margin-bottom:0}

/* ---------- Footer ---------- */
/* 40px here plus .footer-bottom's own 22px closes the page on 62px, against
   the 64px above the wordmark. Without it the footer had no bottom padding at
   all and the legal text sat 22px from the edge. */
.footer{background:var(--navy-900);color:rgba(255,255,255,.68);padding:64px 0 40px;font-size:.95rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.footer h2{color:#fff;font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
[dir="rtl"] .footer h2{letter-spacing:0;text-transform:none;font-size:1rem}
.footer a:hover{color:#fff}
.footer li{margin-bottom:10px}
.footer .fl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1px}
[dir="rtl"] .footer .fl{letter-spacing:0;text-transform:none;font-size:.8rem}
.footer-brand img.wm{height:52px;width:auto;margin-bottom:20px}
.footer-brand p{max-width:330px;font-size:.95rem;line-height:1.7}
.footer-badges{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.footer-badges .pill{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px 7px 8px;
}
[dir="rtl"] .footer-badges .pill{padding:7px 8px 7px 15px}
.footer-badges .pill img{height:22px;width:22px}
.footer-badges .pill span{font-size:.78rem;font-weight:700;color:#fff}
.footer-badges .pill--plain{padding:7px 15px}
[dir="rtl"] .footer-badges .pill--plain{padding:7px 15px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;
}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:background .18s ease;
}
.social a:hover{background:rgba(255,255,255,.18)}
.social svg{width:17px;height:17px;fill:#fff}

/* ---------- Floating WhatsApp ---------- */
.fab{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  background:#107C41;color:#fff;font-weight:700;font-size:.92rem;
  padding:13px 20px 13px 16px;border-radius:999px;
  box-shadow:0 14px 32px -12px rgba(16,124,65,.85);
  transition:transform .2s ease;
}
[dir="rtl"] .fab{padding:13px 16px 13px 20px}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:21px;height:21px;fill:#fff;flex:none}

/* ---------- Persistent contact on phones ----------
   The header CTA is hidden below 1100px and the drawer holds only page links,
   so before this bar the first tappable number on the home page sat at the
   bottom of a nine-screen scroll. Paid mobile traffic lands here. */
.mobile-bar{display:none}
.header-tel{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:.95rem;color:var(--navy-700);padding:9px 12px;border-radius:9px;
}
.header-tel:hover{background:var(--surface-3)}
.header-tel svg{width:16px;height:16px;opacity:.7}
.nav .nav-tel{
  display:none;align-items:center;gap:9px;margin-bottom:6px;padding:13px 12px;
  border-radius:10px;background:var(--navy-700);color:#fff;font-weight:700;font-size:1.02rem;
}
.nav .nav-tel:hover{background:var(--navy-800);color:#fff}
.nav-tel svg{width:17px;height:17px;fill:currentColor;flex:none}
.nav-tel .num{font-weight:700}

@media (max-width:1150px){
  .nav .nav-tel{display:flex}
}
@media (max-width:1100px){
  /* Two floating circles at the bottom-right rather than a bar across the
     screen. A rectangle spanning the bottom edge was what read as browser
     chrome; this leaves the full width of the page clear as you scroll, and it
     matches the floating button the desktop already uses.
     The cost, taken deliberately: neither action is labelled. A green WhatsApp
     mark and a handset glyph are both universally read, and every page still
     carries labelled Call / WhatsApp / Email buttons in its closing band. */
  .mobile-bar{
    display:flex;flex-direction:column-reverse;gap:var(--fab-gap);
    position:fixed;z-index:95;width:auto;
    inset-inline:auto var(--fab-edge);
    bottom:calc(var(--fab-edge) + env(safe-area-inset-bottom,0px));
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;
    width:var(--fab-size);height:var(--fab-size);border-radius:50%;
    /* Three layers, and each is load-bearing. A solid circle floating over a
       page that has both white and navy sections cannot be legible on both from
       its fill alone: navy measures 12:1 on white but 1.37:1 on the CTA band,
       and gold is the exact reverse. Even the WhatsApp green drops to 2.28:1
       there, under the 3:1 that WCAG asks of a control's boundary.
         1. a white ring, which defines the edge on the dark sections
         2. a faint dark hairline outside it, which defines it on the light ones
         3. the drop shadow, for depth
       Change the fill colour freely; do not remove 1 or 2. */
    box-shadow:0 0 0 3px rgba(255,255,255,.94),
               0 0 0 4px rgba(19,30,57,.14),
               0 10px 26px -6px rgba(19,30,57,.5);
  }
  /* the labels are the accessible name's job now — see aria-label in build.py */
  .mobile-bar a span{display:none}
  .mobile-bar svg{width:24px;height:24px;flex:none;fill:currentColor}
  .mb-call{background:var(--navy-700);color:#fff}
  .mb-wa{background:#107C41;color:#fff}

  /* The reserve is the stack's own height plus a clearance, written out rather
     than hard-coded: at exactly the stack height the top circle begins on the
     very pixel the footer ends, which reads as touching. */
  body{
    padding-bottom:calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap)
                        + var(--fab-size) + var(--fab-clear)
                        + env(safe-area-inset-bottom,0px));
  }
  /* Contact carries no floating buttons, so it reserves no room for them. */
  body.no-bar .mobile-bar{display:none}
  body.no-bar{padding-bottom:0}
  .fab{display:none}
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(150deg,var(--navy-800),var(--navy-700) 70%,#2C4A83);
  color:#fff;padding:66px 0 72px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 320px at 92% 0%,rgba(217,169,58,.24),transparent 66%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,3.7vw,2.9rem);margin-bottom:.4em}
.page-hero p{color:rgba(255,255,255,.8);max-width:640px;font-size:1.08rem;margin:0}
/* Services carries all three pills, every other page one — so this wraps. */
.page-cred{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.crumbs{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.crumbs a:hover{color:#fff}

/* ---------- HP Amplify badges ----------
   HP Amplify Brand Guide FY26: badges are a secondary element, minimum 130px
   high, must not be modified in colour or proportion, and must be kept clear
   of other copy. Only one Program Insignia per page. Nothing here recolours,
   crops or overlays them — only scales. */
/* HP badges are shown unmodified and with no card behind them. flex:none on
   both the row and the image: a nested flex context would otherwise shrink
   them and break the aspect ratio, which the brand guide forbids. The guide's
   floor is 130px high; nothing here may go below that. */
.creds{display:flex;flex-wrap:wrap;align-items:flex-start;gap:34px;margin-top:34px}

/* A credential band closing a section: spread across the full container rather
   than sitting under one column, bottom-aligned so the badges' ribbons line up
   with each other, and separated by a hairline so it reads as deliberate. */
.creds--band{
  justify-content:space-evenly;align-items:flex-end;
  margin-top:52px;padding-top:44px;border-top:1px solid var(--line);
}
.creds img{height:200px;width:auto;display:block;flex:none;max-width:none}

/* Inside the navy panel the badge is floated so the heading, the paragraph and
   the bullets all wrap around it (option F). .panel has overflow:hidden, which
   would clip a float taller than the copy, so .panel-inner becomes a block
   formatting context and grows to contain it instead. */
.panel .creds{display:block;float:right;width:auto;flex:none;
  margin:0 0 16px 28px}
[dir="rtl"] .panel .creds{float:left;margin:0 28px 16px 0}
@media (max-width:520px){
  /* Measured: the column beside the floated badge is 274px here and collapses
     fast below it (234px at 480, 174px at 420). Stack rather than squeeze. */
  .panel .creds,[dir="rtl"] .panel .creds{float:none;margin:0 0 20px}
}
@media (max-width:560px){
  .creds{gap:22px;margin-top:26px}
  .creds img{height:150px}

  /* Icon-only contact buttons in the closing band, so three stacked pills
     become one row. Every one of them carries an aria-label in the markup —
     hiding the label must not remove the accessible name. The Products band
     opts out with .cta-band--labels: "Send your list on WhatsApp" is the
     instruction there, not decoration. */
  .cta-band .cta-actions{flex-wrap:nowrap;gap:14px}
  .cta-band .btn span{display:none}
  .cta-band .btn{padding:16px;border-radius:50%}
  .cta-band .btn svg{width:22px;height:22px}
  .cta-band--labels .cta-actions{flex-wrap:wrap;gap:12px}
  .cta-band--labels .btn span{display:inline}
  .cta-band--labels .btn{padding:14px 26px;border-radius:999px}
  .cta-band--labels .btn svg{width:18px;height:18px}
}

/* ---------- Notice ---------- */
.note{
  background:var(--hp-50);border:1px solid rgba(2,74,216,.22);border-radius:var(--radius);
  padding:20px 24px;display:flex;gap:14px;align-items:flex-start;
}
.note svg{width:20px;height:20px;color:var(--hp);flex:none;margin-top:3px}
.note p{margin:0;font-size:.96rem;color:var(--navy-700)}

/* ---------- Responsive ---------- */
/* The English nav ("About Us", "Contact Us") stops fitting beside the brand
   below ~1050px, so the drawer menu takes over here rather than at 860. */
/* Brand + nav + phone + quote button need ~1135px; below that the
   header switches to brand + burger, with the number in the drawer. */
@media (max-width:1150px){
  .hide-sm{display:none}
  /* The phone number goes into the drawer below this width, but the quote
     button stays: it is the only persistent route to the form on a phone,
     where the header is the one surface always on screen. The bottom-right
     corner is full — two circles and, on a first visit, the cookie card —
     so a third floating control there would crowd it. Compact, not hidden. */
  .nav-quote{padding:9px 13px;font-size:.8rem}
}
.nq-short{display:none}
/* Small phones: the wordmark, the quote button and the burger cannot all have
   what they want in ~340px. Shortening the label is the cheapest of the three
   — the button is gold, sits in the header and points at the form, so "Quote"
   is unambiguous there, whereas losing the wordmark costs the brand on the one
   element that is on screen at every scroll position. The header also tightens
   its own gutter here; the rest of the page keeps the 24px one. */
@media (max-width:429px){
  .nq-long{display:none}
  .nq-short{display:inline}
  .header .container{padding-inline:18px}
  .header-actions{gap:7px}
}
@media (max-width:1150px){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);padding:14px 20px 22px;
    box-shadow:var(--shadow);transform:translateY(-14px);opacity:0;pointer-events:none;
    /* visibility, not just opacity: without it the five links stay in the
       tab order while invisible, and Enter navigates with no feedback. */
    visibility:hidden;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;max-height:calc(100vh - var(--header-h));overflow:auto;
  }
  body.menu-open .nav{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  body.menu-open{overflow:hidden}
  .nav-scrim{
    position:fixed;inset:0;z-index:99;background:rgba(15,23,41,.45);
    opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s ease,visibility .2s;
  }
  body.menu-open .nav-scrim{opacity:1;pointer-events:auto;visibility:visible}
  .nav a{padding:13px 12px;font-size:1.02rem;border-radius:10px}
  .header-actions{margin-inline-start:auto}
  .split{grid-template-columns:1fr;gap:38px}
  .split--rev .split-media{order:0}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero{padding:64px 0 72px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .g-3,.g-2{grid-template-columns:1fr}
  .section{padding:64px 0}
  .cat{grid-template-columns:1fr;gap:16px}
  .cat .cat-cta{justify-self:start}
  .step{grid-template-columns:1fr;gap:14px}
  /* The footer stays two columns on phones. Collapsing it to one added ~350px
     of navy to the end of every page, which is what made the dark run read as
     two screenfuls. The brand block spans both. */
  .footer-top{grid-template-columns:1fr 1fr;gap:30px 26px}
  .footer-brand{grid-column:1 / -1}
  /* Get in touch lands alone on the last row, so half the width was empty
     while the addresses wrapped against the other half. It holds the longest
     unbreakable strings in the footer — an email and a street address — and
     is the one block that should never be the narrow one. */
  .footer-top > div:last-child{grid-column:1 / -1}
  .fab span{display:none}
  .fab{padding:15px;border-radius:50%}
  body{font-size:16px}
}
/* Very small phones only: the mark alone, or the menu button gets clipped.
   Above this the wordmark stays and the quote button shortens its label
   instead — see .nq-long / .nq-short. body has overflow-x:hidden, so an
   overrun here does not scroll, it silently clips the burger off the right
   edge and the menu becomes unreachable. Measured, not guessed. */
@media (max-width:359px){
  .brand-word,.brand-word--ar,[dir="rtl"] .brand-word--ar{display:none}
}

/* Phones: shrink the wordmark and the language button rather than hiding the
   company name, which is the whole point of the header. */
@media (max-width:560px){
  .brand{gap:10px}
  .brand-mark{height:40px}
  .brand-word{height:18px}
  .brand-word--ar{height:23px}
  .lang-full{display:none}
  .lang-short{display:inline}
  .lang-btn{padding:9px 12px;gap:5px}
  .header-actions{gap:8px}
  :root{--header-h:72px}
}
@media (max-width:520px){
  /* min-width:auto on a grid item makes the track at least min-content wide,
     and .btn is nowrap — so one long button label was widening the whole
     column past the container. */
  .split>*{min-width:0}
  .btn{white-space:normal}
  .g-4{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 auto}
  .dl div{grid-template-columns:1fr;gap:2px}
  .stat-tiles{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Reveal on scroll ---------- */
.has-reveal .reveal{opacity:0;transform:translateY(18px)}
.has-reveal .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.has-reveal .reveal{opacity:1;transform:none}}

/* print */
@media print{
  .header,.fab,.cta-band,.mobile-bar{display:none}
  .main{padding-top:0}
  /* the reveal system is opacity-based; without this, printing or saving
     to PDF before scrolling loses every unrevealed section. */
  .has-reveal .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Opening hours ----------
   A separate band rather than two more rows in the Head office list: every
   other row there is an address you use, and hours are a constraint on when.
   Sitting in the same pattern as the fax number made them unscannable. */
.hours-band{
  margin-top:22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px 28px;
  display:flex;flex-wrap:wrap;gap:14px 48px;
}
.hours-band > div{display:flex;gap:12px;align-items:baseline}
.hours-band .hours-label{align-items:center;gap:9px;color:var(--ink);font-weight:800;
  font-size:.94rem;margin-inline-end:6px}
.hours-band .hours-label svg{width:17px;height:17px;color:var(--accent-ink);flex:none}
.hours-band .hours-label span{color:inherit;font-size:inherit;font-weight:inherit}
/* direct children only: this used to catch the .num span inside the value,
   which is why "9 AM - 5 PM" rendered a size smaller and a shade lighter
   than "Closed". */
.hours-band > div > span{color:var(--muted);font-size:.94rem}
.hours-band b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .hours-band{flex-direction:column;gap:10px;padding:20px 22px}
  .hours-band > div{justify-content:space-between}
  .hours-band .hours-label{justify-content:flex-start;margin:0 0 2px}
}

/* ==========================================================================
   Campaign landing page, quote form, privacy policy, cookie notice
   ========================================================================== */

/* ---------- Product families ----------
   Image left, text right, alternating. The shot sits in a fixed-ratio box so a
   real product photo of any dimensions drops into the same layout without
   moving anything: object-fit does the work, not the file. */
/* A class that sets display beats the user-agent's [hidden]{display:none},
   which is how the form's success and failure panels ended up permanently
   on screen underneath the form. Global, because the next component to set
   display on a toggled element would hit the same wall. */
[hidden]{display:none!important}

.fams{display:flex;flex-direction:column;gap:26px}
.fam{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;
  align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 30px;
}
.fam-shot{
  aspect-ratio:4/3;max-width:100%;background:var(--surface,#F7F8FA);
  border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;
}
.fam-shot img{width:100%;height:100%;object-fit:contain;max-width:100%}
.fam-txt{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.fam-txt h3{font-size:1.18rem;margin:0}
.fam-txt p{margin:0;color:var(--muted)}
.fam-txt .ticks{margin:2px 0 4px}
@media (max-width:820px){
  /* 4/3 matches the product images. A 16/9 box here cropped the feet off every
     machine: height:100% on the img does not resolve against an aspect-ratio
     box, so object-fit:contain never engaged and overflow:hidden did the rest. */
  .fam{grid-template-columns:1fr;gap:20px;padding:22px}
}

.lede-p{max-width:62ch;margin:10px auto 0;color:var(--muted)}

/* ---------- Ways to reach us, beside the form ---------- */
.reach{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.reach-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.reach-row:hover{border-color:var(--accent-ink);transform:translateY(-1px)}
.reach-ico{
  flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);
}
.reach-ico svg{width:19px;height:19px;stroke-width:1.6}
.reach-ico--wa{background:#E7FBF0;color:#12A150}
.reach-row b{display:block;color:var(--ink);font-size:1rem;font-weight:700}
.reach-row em{display:block;font-style:normal;color:var(--muted);font-size:.87rem;
  line-height:1.45}

/* ---------- The quote form ----------
   Every field is a field someone has to fill on a phone, so the set is kept to
   what is genuinely needed to price a request. Phone is required alongside
   email: in this market the reply that lands is a call. */
.formcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:0 22px 48px -34px rgba(16,24,40,.45);
}
#quote-form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld label{font-size:.86rem;font-weight:700;color:var(--ink)}
.fld label span{color:var(--accent-ink)}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:.97rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fld textarea{resize:vertical;min-height:84px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(36,53,95,.14);
}
.fld input[aria-invalid="true"]{border-color:#A33A2A;box-shadow:0 0 0 3px rgba(163,58,42,.12)}
.fld .err{font-size:.82rem;color:#A33A2A;font-weight:600}
.btn-block{width:100%;justify-content:center}
.form-fine{font-size:.83rem;color:var(--muted);margin:2px 0 0;line-height:1.55}
.form-fine a{color:var(--navy-700);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.form-fine a .num{text-decoration:underline}
/* The honeypot. Not display:none — some bots skip hidden fields but happily
   tick one they can find in the DOM. Clipped to a 1px box in place rather than
   pushed off-screen with a negative offset: at -9999px it sits outside the
   document box and the overflow sweep reports it as horizontal scroll, which
   is exactly the bug that check exists to catch. */
.hp-trap{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  opacity:0;pointer-events:none}
.form-done{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
/* The failure panel is an alert, not a paragraph. Without a container it read
   as a continuation of the fine print under the button — the one place someone
   who just clicked Send is not looking. Tinted box, at the top of the card,
   with the recovery routes styled as the links they are. */
.form-fail{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  background:#FCF1EF;border:1px solid #EFC9C1;border-radius:var(--radius);
  padding:16px 18px;margin-bottom:18px;
}
.form-fail a{color:#8C2E20;font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.form-fail a:hover{color:#6E241A}
.form-fail a .num,.form-done a .num{text-decoration:underline}
.form-done-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:#E7FBF0;color:#12A150;
}
.form-done-ico svg{width:23px;height:23px}
.form-done h3,.form-fail h3{margin:0;font-size:1.15rem}
.form-done p,.form-fail p{margin:0;color:var(--muted);font-size:.96rem}
.form-fail h3{color:#A33A2A}
@media (max-width:560px){
  .formcard{padding:22px 20px}
  .fld-row{grid-template-columns:1fr}
}

/* ---------- Privacy policy ---------- */
.narrow-col{max-width:74ch}
.narrow-col h2{font-size:1.2rem;margin:34px 0 10px}
.narrow-col h2:first-of-type{margin-top:0}
.narrow-col p{margin:0 0 12px;color:var(--body,var(--muted))}
.narrow-col .ticks{margin:6px 0 12px}
.policy-date{font-size:.86rem;color:var(--muted);margin:0 0 26px}
.narrow-col code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface,#F7F8FA);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ---------- Cookie notice ----------
   Not a wall: it informs and links, it does not gate. Sits clear of the
   floating contact circles on the right rather than underneath them. */
.cookie-note{
  position:fixed;left:18px;bottom:18px;z-index:60;width:min(430px,calc(100vw - 36px));
  display:flex;align-items:center;gap:14px;
  background:var(--navy-800,#1B2745);color:rgba(255,255,255,.86);
  padding:14px 16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 50px -22px rgba(10,16,32,.7);
  font-size:.85rem;line-height:1.5;
  margin-bottom:env(safe-area-inset-bottom,0px);
}
.cookie-note p{margin:0;flex:1;min-width:0}
.cookie-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-note .btn{flex:none}
/* Reserve the card's height while it is showing, so the bottom of the
   page is never permanently underneath it. Removed on dismissal. */
@media (min-width:1101px){
  /* no floating buttons up here, so the card is the only thing to clear */
  body.has-cookie-note{padding-bottom:120px}
}
@media (max-width:1100px){
  /* elsewhere the floating-button reserve already exceeds the card, except
     on the contact page, which reserves nothing because it has no buttons */
  body.no-bar.has-cookie-note{padding-bottom:160px}
}
@media (max-width:560px){
  .cookie-note{left:12px;bottom:12px;width:auto;padding:14px 16px;font-size:.83rem;
    flex-direction:column;align-items:flex-start;gap:10px;
    /* stop short of the floating circles instead of sitting under them:
       the dismiss button was measurably unclickable underneath one */
    right:calc(var(--fab-edge) + var(--fab-size) + 12px)}
  /* the contact page has no floating buttons, so nothing to clear */
  body.no-bar .cookie-note{right:12px}
  /* right-aligned: in a narrow column the button reads better trailing
     the text than hanging off the left edge under it */
  .cookie-note .btn{align-self:flex-end}
}

/* Inline text links — used where a section points at the page that carries
   the detail, rather than repeating it. A button would read as the section's
   action; this is a way out, not a call to action. */
.inline-link{
  color:var(--navy-700);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(36,53,95,.35);
}
.inline-link:hover{text-decoration-color:var(--navy-700)}
.inline-link--light{
  color:#fff;text-decoration-color:rgba(255,255,255,.45);
}
.inline-link--light:hover{text-decoration-color:#fff}

/* Landing hero. A fleet buyer arriving from a paid ad is task-focused, not
   being romanced: the first screen has to answer "can these people handle
   something this size", and a full-height hero with a slogan delays that.
   So 64/72 rather than the home page's 96/104.

   This was .hero--tight, a second modifier alongside .hero--lp, and only the
   printers hero carried both. The MPS hero — the other landing page, reached
   by the same campaign — kept the home page's padding, so the two pages a
   visitor compares side by side sat 32px apart at the top and 32px at the
   bottom, with their breadcrumbs on different lines. Two class names for one
   idea is how that happens; there is now one, and it is on both pages by
   definition of being a landing page. */
.hero--lp{padding-block:64px 72px}
.hero--lp .hero-inner{max-width:none}
/* The landing hero has no stat rail beside it, so the 600px measure that
   suits the home page leaves this one too narrow — the customer segments
   were breaking with "bodies." alone on a third line. */
.hero--lp p{max-width:680px;text-wrap:pretty}
@media (max-width:700px){ .hero--lp{padding-block:44px 52px} }

/* The proof line that closes a landing hero. It had no style of its own —
   .95rem at 74% white is the lead paragraph one notch quieter — so once it
   grew past a line it read as prose that had wandered below the CTAs rather
   than as a credential. The rule closes the hero the way the gold eyebrow
   dash opens it, and the two figures are lifted out of the sentence: a
   reader who takes nothing else from it still leaves with 600 and 1986. */
/* `.hero p` sets 1.15rem at 82% white and outranks a lone `.hero-fact` — one
   class plus a type selector beats one class. So the quiet type this rule
   exists to set never applied, on this version or the one before it, and the
   line rendered identically to the lead paragraph three elements above.
   It was invisible in review because the mock styled `.v-a .hero-fact`,
   two classes, which did win. Qualify the selector and it behaves. */
.hero p.hero-fact{
  margin:30px 0 0;padding-top:20px;max-width:680px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem;color:rgba(255,255,255,.66);
}
.hero p.hero-fact .num{color:#fff;font-weight:700}

/* "optional" marker on a form label — the presence of these fields is the
   signal that fleet enquiries are normal here; requiring them would tax the
   small buyer to serve the large one. */
.opt-note{
  margin:2px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5;
}
/* The fleet questions fold away. Collapsed they cost 155px of form height
   that was deterring the people who only want a price for four printers;
   open they are the same four fields. The summary line is doing work even
   while shut — it tells a buyer specifying 35 devices that this form
   expects him, which is most of what the fields were there to signal. */
.opt-more{
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:0 14px;
}
.opt-more summary{
  cursor:pointer;list-style:none;padding:12px 0;font-size:.88rem;font-weight:700;
  color:var(--navy-700);display:flex;align-items:center;gap:9px;
}
.opt-more summary::-webkit-details-marker{display:none}
.opt-more summary::before{
  content:"";width:9px;height:9px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-inline-start:2px;
  transition:transform .18s ease;
}
.opt-more[open] summary::before{transform:rotate(45deg)}
.opt-more .fld-row{margin-top:12px}
.opt-more .fld-row:last-child{margin-bottom:14px}
[dir="rtl"] .opt-more summary::before{transform:rotate(-135deg)}
[dir="rtl"] .opt-more[open] summary::before{transform:rotate(135deg)}
/* Checkboxes rather than a single-select: a buyer whose answer is
   "printers AND managed print AND toner" was being forced to describe
   the largest opportunity as the smallest. */
.fld-set{border:0;padding:0;margin:0;min-width:0}
.fld-set legend{font-size:.86rem;font-weight:700;color:var(--ink);padding:0;margin-bottom:8px}
.checks{display:flex;flex-direction:column;gap:8px}
.checks label{
  display:flex;align-items:center;gap:9px;font-size:.95rem;color:var(--body);
  cursor:pointer;line-height:1.4;
}
.checks input{width:17px;height:17px;flex:none;accent-color:var(--navy-700);margin:0}
.fld label .opt,.fld-set legend .opt{
  color:var(--muted);font-weight:600;font-size:.78rem;letter-spacing:0;
  text-transform:none;margin-inline-start:4px;
}