/* ============================================================================
   AI-KON Solution — production design system  ·  "Industrial Editorial"
   One stylesheet for the public site. Tokens → base → layout → components.
   Arabic (RTL) is the primary direction; English mirrors through logical
   properties. No gradients, no neon, no decorative motion.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  --purple:#300B4D; --purple-2:#421468; --purple-tint:#F1ECF6; --purple-deep:#1F0733;
  --amber:#F0A202; --amber-deep:#B97A00; --amber-tint:#FDF3DF;
  --grey:#C6C6C6;
  --ink:#15111A; --ink-2:#4B4552; --ink-3:#7A7482;
  --paper:#F7F6F3; --paper-2:#EFEDE8; --white:#FFFFFF;
  --rule:#E7E4DF; --rule-2:#D2CEC7;
  --ok:#1E7A46; --no:#B3261E;

  --f-ar:'Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;
  --f-en:'Outfit','Segoe UI',Helvetica,Arial,sans-serif;

  --t-display:clamp(2.2rem,1.25rem + 2.8vw,3.9rem);
  /* the homepage hero has its own scale so it can be tuned without touching
     any other h1: 390→34px · 1024→47px · 1280→53px · 1440→57px · 1920→64px */
  /* Homepage hero only. Calm, not loud: 1024→36 · 1280→38 · 1440→40 · 1920→44.
     Phones keep their own flatter curve (see below) so 390 lands at 27–30. */
  --t-hero:clamp(2.125rem,1.634rem + 0.96vw,2.75rem);
  --t-h1:clamp(1.7rem,1.15rem + 1.7vw,2.7rem);
  --t-h2:clamp(1.35rem,1.05rem + 1.05vw,1.95rem);
  --t-h3:1.2rem; --t-lead:1.125rem; --t-body:1rem; --t-sm:.9rem; --t-xs:.78rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:5.5rem;
  --sec:clamp(3.5rem,5.5vw,6rem);
  --r:3px; --r-2:6px;
  --sh:0 1px 2px rgba(21,17,26,.05),0 10px 30px rgba(21,17,26,.06);
  --sh-lift:0 12px 40px rgba(21,17,26,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --page-max:1500px; --wrap:1320px; --wrap-n:960px;
  --gutter:clamp(18px, 2vw + 12px, 64px);   /* 390→20px · 768→27px · 1280→38px · 1440→41px · 1920→50px */
  --hdr:72px;
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-size:var(--t-body);line-height:1.8;
  font-family:var(--f-ar);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[dir=ltr] body{font-family:var(--f-en);line-height:1.6}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;letter-spacing:-.005em}
html[dir=ltr] h1,html[dir=ltr] h2,html[dir=ltr] h3{line-height:1.15;letter-spacing:-.01em}
html[dir=rtl] .t-h1,html[dir=rtl] .t-h2{line-height:1.45}
.t-h1,.t-h2{text-wrap:balance}
.model{font-family:var(--f-en);white-space:nowrap;font-feature-settings:"tnum"}
p{margin:0}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.15em}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.num,.lat,[dir=ltr] .num{font-family:var(--f-en);font-feature-settings:"tnum"}
.skip{position:absolute;inset-inline-start:1rem;top:-3rem;background:var(--purple);color:#fff;padding:.6rem 1rem;border-radius:var(--r);z-index:1000}
.skip:focus{top:1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------- layout -- */
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.wrap--n{width:min(100% - 2*var(--gutter),var(--wrap-n))}
/* full-bleed sections keep their inner content on the same container; nothing is offset by hand */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) var(--s6)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
@media (max-width:1024px){.c3,.c4{grid-column:span 6}.c5,.c7{grid-column:span 12}.c8,.c9{grid-column:span 12}}
@media (max-width:640px){.c3,.c4,.c6{grid-column:span 12}}
.sec{padding-block:var(--sec)}
.sec--paper{background:var(--paper)}
.sec--dark{background:var(--purple-deep);color:#fff}
.sec--dark a{color:#fff}
.sec--tight{padding-block:calc(var(--sec) * .6)}
.sec--grey{background:var(--paper-2)}
.sec--rel{padding-block:calc(var(--sec) * .85)}
.sec--rel .wrap{border-bottom:1px solid var(--rule);padding-bottom:calc(var(--sec) * .6)}
.sec--sol{background:var(--purple-deep);color:#fff}

.sec--sol .lead{color:rgba(255,255,255,.8)}
.sec--moment{overflow:hidden}
.sec__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5) var(--s7);align-items:end;margin-bottom:var(--s7)}
.sec__head--c{grid-template-columns:1fr;max-width:52rem}
@media (max-width:1024px){.sec__head{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:var(--s3);font-family:var(--f-en)}
html[dir=rtl] .eyebrow{letter-spacing:0;font-size:var(--t-xs);font-family:var(--f-ar);font-weight:700;color:var(--ink-2)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)}
.eyebrow::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber);opacity:.7}
.eyebrow--plain::after{display:none}
.eyebrow--plain::before{display:none}
/* On the dark purple sections the small kicker is mango, not grey: one rule,
   stated last, so nothing downstream can quietly dull it again. Headings and
   body copy on those sections stay white/neutral. */
.sec--sol .eyebrow,.band .eyebrow,.sec--dark .eyebrow,
html[dir=rtl] .sec--sol .eyebrow,html[dir=rtl] .band .eyebrow,html[dir=rtl] .sec--dark .eyebrow{color:var(--amber)}
.sec--sol .eyebrow::before,.band .eyebrow::before,.sec--dark .eyebrow::before,
.sec--sol .eyebrow::after,.band .eyebrow::after,.sec--dark .eyebrow::after{background:var(--amber);opacity:1}
.t-display{font-size:var(--t-display);line-height:1.2}
html[dir=ltr] .t-display{line-height:1.05}
.t-h1{font-size:var(--t-h1)}.t-h2{font-size:var(--t-h2)}.t-h3{font-size:var(--t-h3)}
.lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.9}
html[dir=ltr] .lead{line-height:1.65}
.body{color:var(--ink-2)}
.small{font-size:var(--t-sm);color:var(--ink-3)}
.chip{display:inline-block;border:1px solid var(--rule-2);border-radius:var(--r);padding:.15rem .6rem;font-size:var(--t-xs);color:var(--ink-2);background:#fff;white-space:nowrap}
.chip--amber{border-color:var(--amber);color:var(--amber-deep);background:var(--amber-tint)}
.chip--purple{border-color:var(--purple);color:var(--purple);background:var(--purple-tint)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.cta{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s5)}

/* -------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.7rem 1.35rem;
  border:1px solid transparent;border-radius:var(--r);font-weight:600;font-size:var(--t-sm);line-height:1.2;
  text-decoration:none!important;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
/* Primary and purple buttons lift very slightly and carry a soft shadow in
   their own colour — enough to read as the main action without decoration. */
.btn--primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.btn--primary:hover{background:#FFB326;transform:translateY(-1px);box-shadow:0 6px 18px rgba(240,162,2,.32)}
.btn--purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn--purple:hover{background:var(--purple-2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(48,11,77,.26)}
.btn--ghost{background:transparent;color:var(--purple);border-color:var(--purple)}
.btn--ghost:hover{background:var(--purple-tint)}
.btn--light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--light:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn--primary:focus-visible{outline-color:var(--purple)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn--lg{min-height:52px;padding:.85rem 1.7rem;font-size:var(--t-body)}
.btn--sm{min-height:38px;padding:.45rem .9rem;font-size:var(--t-xs)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--purple)}
.link::after{content:"←";font-family:var(--f-en)}
html[dir=ltr] .link::after{content:"→"}

/* --------------------------------------------------------------- header -- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:var(--s5);min-height:var(--hdr)}
.hdr__logo img{height:36px;width:auto}
.hdr__nav{display:flex;gap:.2rem;margin-inline-start:var(--s4);flex:1 1 auto}
.hdr__nav a{padding:.55rem .75rem;border-radius:var(--r);color:var(--ink-2);font-size:var(--t-sm);font-weight:600;text-decoration:none;position:relative}
.hdr__nav a:hover,.hdr__nav a[aria-current=page]{color:var(--purple);background:var(--purple-tint)}
.hdr__acts{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.hdr__lang{font-family:var(--f-en);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;border:1px solid var(--rule-2);border-radius:var(--r);padding:.45rem .7rem;color:var(--ink-2);text-decoration:none!important}
.hdr__lang:hover{border-color:var(--purple);color:var(--purple)}
.hdr__ico{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);color:var(--ink-2)}
.hdr__ico:hover{background:var(--paper);color:var(--purple)}
.hdr__ico svg{width:21px;height:21px}
.hdr__burger{display:none}
@media (max-width:1180px){.hdr__nav a{padding:.5rem .55rem;font-size:var(--t-xs)}}
@media (max-width:1024px){
  .hdr__nav,.hdr__acts .btn,.hdr__acts .hdr__lang{display:none}
  .hdr__burger{display:grid}
  .hdr__logo img{height:30px}
  :root{--hdr:62px}
}
/* mobile drawer */
.drawer{position:fixed;inset:0 auto 0 0;width:min(360px,88vw);background:#fff;z-index:210;transform:translateX(-100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
html[dir=rtl] .drawer{inset:0 0 0 auto;transform:translateX(100%)}
.drawer.is-open{transform:none}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--rule)}
.drawer__hd img{height:30px}
.drawer__nav{padding:.6rem 0}
.drawer__nav a{display:block;padding:.95rem 1.4rem;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--rule)}
.drawer__nav a[aria-current=page]{color:var(--purple);background:var(--purple-tint)}
.drawer__ft{margin-top:auto;padding:1.2rem 1.4rem;display:grid;gap:.6rem;border-top:1px solid var(--rule)}
.drawer__lang{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-sm);color:var(--ink-2)}
.scrim{position:fixed;inset:0;background:rgba(21,17,26,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-open{opacity:1;pointer-events:auto}
html.no-scroll,html.no-scroll body{overflow:hidden}
/* search */
.search{position:fixed;inset:0;z-index:220;background:rgba(21,17,26,.6);display:none;align-items:flex-start;justify-content:center;padding:12vh 1rem}
.search.is-open{display:flex}
.search__box{width:min(720px,100%);background:#fff;border-radius:var(--r-2);box-shadow:var(--sh-lift);overflow:hidden}
.search__in{display:flex;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid var(--rule)}
.search__in input{flex:1;border:0;font-size:1.05rem;padding:.6rem .4rem;outline:0}
.search__res{max-height:50vh;overflow:auto}
.search__res a{display:grid;gap:.15rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.search__res a:hover{background:var(--paper)}
.search__res a small{color:var(--ink-3);font-size:var(--t-xs)}
.search__res p{padding:1rem 1.2rem;color:var(--ink-3);font-size:var(--t-sm)}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;background:var(--purple-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;opacity:.72;filter:saturate(.85) contrast(1.04)}
html[dir=rtl] .hero__bg img{object-position:38% 45%}
/* layered tonal control: a light global veil + a localised text gradient on the reading side */
.hero__veil{position:absolute;inset:0;z-index:1;background:rgba(31,7,51,.32)}
html[dir=rtl] .hero__veil{background:linear-gradient(270deg,rgba(31,7,51,.86) 0%,rgba(31,7,51,.62) 42%,rgba(31,7,51,.22) 78%,rgba(31,7,51,.3) 100%)}
html[dir=ltr] .hero__veil{background:linear-gradient(90deg,rgba(31,7,51,.86) 0%,rgba(31,7,51,.62) 42%,rgba(31,7,51,.22) 78%,rgba(31,7,51,.3) 100%)}
.hero__vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 55%,rgba(21,17,26,.45) 100%)}
.hero__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero__in{position:relative;z-index:2;min-height:min(80vh,780px);display:grid;align-content:center;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero__rel{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);padding:.4rem .8rem;margin-bottom:var(--s5);max-width:100%;background:rgba(31,7,51,.25);backdrop-filter:blur(4px);justify-self:start}
.hero__rel svg{width:16px;height:16px;flex:0 0 auto;color:var(--amber)}
@media (max-width:600px){:root{--t-hero:clamp(1.6875rem,1.45rem + 0.8vw,1.9375rem)}}
/* The hero headline is set on its own, never through the global h1 scale:
   lighter weight, a calmer line-height and a narrow measure so the two-line
   structure stays intentional at every width. */
.hero__title{font-size:var(--t-hero);font-weight:620;max-width:13em;line-height:1.31;
  letter-spacing:0;text-shadow:0 2px 20px rgba(0,0,0,.22);text-wrap:balance}
html[dir=ltr] .hero__title{line-height:1.3;max-width:15.5em;letter-spacing:-.005em}
.hero__lead{font-size:var(--t-lead);color:rgba(255,255,255,.88);max-width:52rem;margin-top:var(--s5);line-height:1.95}
html[dir=ltr] .hero__lead{line-height:1.6}
.hero__cta{margin-top:var(--s6);gap:.75rem;align-items:center}
.hero__pts{display:flex;gap:var(--s3) var(--s6);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);font-size:var(--t-sm)}
.hero__pts li{display:flex;align-items:center;gap:.5rem}
.hero__pts li::before{content:"";width:6px;height:6px;background:var(--amber);border-radius:50%}
/* technical keyline in the lower corner */
.hero__key{position:absolute;z-index:2;bottom:1.4rem;inset-inline-end:clamp(1rem,4vw,2.5rem);display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.55);font-family:var(--f-en);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.hero__key i{width:56px;height:1px;background:rgba(255,255,255,.4)}
.br-d{display:none}
@media (min-width:1025px){.br-d{display:inline}}
@media (max-width:640px){.hero__in{min-height:0}.hero__pts{gap:.5rem 1.2rem}.hero__key{display:none}.hero__bg img{opacity:.6}.hero__veil,html[dir=rtl] .hero__veil,html[dir=ltr] .hero__veil{background:linear-gradient(180deg,rgba(31,7,51,.55),rgba(31,7,51,.8))}}

/* ------------------------------------------------------- machine stage --
   V4. The image file is a transparent cutout of the machine only, at its own
   aspect ratio; everything about the presentation lives here. No frame, no
   drawn floor line, no baked-in canvas. Per-model optics arrive inline as
   --m-w / --m-h / --m-y (set by eye on the internal QA contact sheets). */
.mstage{--m-w:88%;--m-h:84%;--m-y:3%;
  position:relative;display:flex;align-items:center;justify-content:center;
  background:#F7F6F3;border-radius:var(--r-2);overflow:hidden;isolation:isolate}
.mstage__m{position:relative;z-index:2;display:block;width:auto;height:auto;
  max-width:var(--m-w);max-height:var(--m-h);object-fit:contain;
  transform:translateY(var(--m-y));transition:transform .5s var(--ease)}
/* soft elliptical grounding — no hard line, the machine is not floating */
.mstage::after{content:"";position:absolute;z-index:1;left:50%;bottom:calc(8% - var(--m-y));
  width:min(52%,340px);height:26px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(21,17,26,.16),rgba(21,17,26,0) 70%);filter:blur(6px)}
.mstage--dark{background:transparent}
.mstage--dark::after{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.3),rgba(0,0,0,0) 70%)}
.mstage--legacy{background:var(--paper-2)}
.mstage__tag{position:absolute;z-index:3;bottom:.6rem;inset-inline-end:.7rem;font-size:10px;letter-spacing:.06em;color:var(--ink-3);
  background:rgba(255,255,255,.82);border-radius:var(--r);padding:.15rem .5rem;font-family:var(--f-en)}
.mstage__note{font-size:var(--t-xs);color:var(--ink-3);margin-top:.5rem;line-height:1.6}

/* contexts — one stage rhythm, machines scale optically inside it */
/* v6: a shorter card stage. A 4:1 mono line used to float in a 280px frame with
   most of it empty; at 236px the machine reads as the subject of the card. */
.mstage--card{height:236px}
/* Long machines: shorten the frame instead of enlarging the machine. The image
   keeps its natural proportions and its --m-w / --m-h budget exactly; only the
   empty band above and below it is removed. */
.mstage--card.mstage--w2{height:208px}
.mstage--card.mstage--w3{height:184px}
.mstage--compare{height:150px;background:transparent;border-radius:0}
.mstage--compare::after{display:none}
.mstage--hero{height:clamp(270px,30vw,400px);background:transparent}
.mstage--hero.mstage--w2{height:clamp(230px,25vw,330px)}
.mstage--hero.mstage--w3{height:clamp(200px,22vw,290px)}
/* the homepage flagship carries a little more presence than a catalogue card */
.mstage--spot{--m-w:86%;--m-h:82%}
@media (max-width:1024px){.mstage--card{height:220px}.mstage--card.mstage--w2{height:194px}.mstage--card.mstage--w3{height:172px}}
@media (max-width:640px){.mstage--card{height:210px}.mstage--hero{height:240px}.mstage{--m-w:94%;--m-h:88%}
  .mstage--card.mstage--w2{height:180px}.mstage--card.mstage--w3{height:150px}
  .mstage--hero.mstage--w2{height:200px}.mstage--hero.mstage--w3{height:170px}}

/* ------------------------------------------------------ product gallery --
   Main view plus the verified extra views supplied for that model. A model
   with one image simply renders the single stage; no slot is invented. */
.pgal{display:grid;gap:var(--s3)}
.pgal__main .mstage{height:clamp(270px,29vw,390px)}
.pgal__main .mstage--w2{height:clamp(230px,25vw,330px)}
.pgal__main .mstage--w3{height:clamp(200px,22vw,290px)}
.pgal__thumbs{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.pgal__t{width:84px;height:56px;padding:6px;border:1px solid var(--rule);border-radius:var(--r);background:#FBFAF8;cursor:pointer;
  display:grid;place-items:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.pgal__t img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pgal__t:hover{border-color:var(--rule-2);background:#fff}
.pgal__t.is-on{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple);background:#fff}
.pgal__t:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:640px){.pgal__thumbs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem;scrollbar-width:thin}
  .pgal__t{flex:0 0 auto;width:76px;height:50px}.pgal__main .mstage{height:240px}}

/* -------------------------------------------------------- product card -- */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;color:inherit;text-decoration:none!important;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.pcard .mstage{border-radius:0;border-bottom:1px solid var(--rule)}
.pcard:hover{border-color:var(--rule-2);box-shadow:0 1px 2px rgba(21,17,26,.04),0 16px 40px rgba(21,17,26,.08);transform:translateY(-2px)}
.pcard:hover .mstage__m{transform:translateY(var(--m-y)) scale(1.03)}
.pcard:hover .mstage{background:#F4F2ED}
.pcard__body{padding:var(--s4) var(--s5) var(--s5);display:grid;gap:.4rem}
.pcard__kicker{font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);display:flex;align-items:center;gap:.5rem}
.pcard__kicker::before{content:"";width:14px;height:2px;background:var(--amber)}
html[dir=ltr] .pcard__kicker{font-family:var(--f-en);text-transform:uppercase;letter-spacing:.12em}
.pcard__name{font-family:var(--f-en);font-size:1.35rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__pos{color:var(--ink-2);font-size:var(--t-sm);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.7em)}
.pcard__specs{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem;min-height:2rem;align-content:start}
.pcard__specs li{font-family:var(--f-en);font-size:var(--t-xs);font-weight:600;border:1px solid var(--rule-2);border-radius:var(--r);padding:.15rem .5rem;color:var(--ink-2);white-space:nowrap}
.pcard__foot{margin-top:auto;padding-top:.7rem;display:flex;justify-content:space-between;align-items:center;font-size:var(--t-sm)}
.pcard .link::after{transition:transform .3s var(--ease);display:inline-block}
.pcard:hover .link::after{transform:translateX(-4px)}
html[dir=ltr] .pcard:hover .link::after{transform:translateX(4px)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:stretch}
.pgrid>*{display:flex;min-width:0}
.pgrid>*>.pcard{flex:1 1 auto;width:100%}
@media (max-width:1024px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}

/* featured machine on the homepage — one centred container, copy 42% / machine 58%,
   both halves on the section's own neutral field. No frame, no negative margins. */
.sec--moment{background:#F7F6F3;padding-block:clamp(3.5rem,5.5vw,6rem)}
.moment{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:var(--s5) var(--s7);align-items:center}
.moment__copy{min-width:0;max-width:540px}
.moment__visual{grid-column:auto;position:relative;margin:0;min-width:0;display:flex;flex-direction:column}
.moment__visual .mstage{background:transparent;height:clamp(320px,30vw,470px)}
.moment__visual .mstage::before{content:"";position:absolute;inset:12% 8% 14% 8%;z-index:0;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
/* The flagship label sits in normal flow ABOVE the technical field, so no
   keyline can ever cross it. The decorations are positioned inside
   .moment__field, which starts below this label. */
.moment__label{display:flex;align-items:center;gap:.55rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.55rem;border-bottom:1px solid var(--rule);margin-bottom:.2rem}
.moment__label::before{content:"";width:18px;height:2px;background:var(--amber);flex:0 0 auto}
.moment__label bdi{font-family:var(--f-en);letter-spacing:.1em;color:var(--ink-2);font-weight:600}
.moment__field{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
/* Flagship spotlight: a technical field behind the machine, drawn entirely in
   CSS — a faint measured grid, four corner keylines and one annotation. No
   images, no script, nothing that costs a request. */
.moment__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.36;
  background-image:linear-gradient(to right,rgba(48,11,77,.07) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(48,11,77,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 50%,#000 30%,transparent 100%)}
.moment__frame{position:absolute;inset:0;z-index:1;pointer-events:none}
.moment__frame::before,.moment__frame::after{content:"";position:absolute;width:26px;height:26px;
  border:1px solid var(--rule-2)}
.moment__frame::before{top:0;inset-inline-start:0;border-width:1px 0 0 1px}
html[dir=rtl] .moment__frame::before{border-width:1px 1px 0 0}
.moment__frame::after{bottom:0;inset-inline-end:0;border-width:0 1px 1px 0}
html[dir=rtl] .moment__frame::after{border-width:0 0 1px 1px}
.moment__ann{position:absolute;bottom:-.2rem;inset-inline-end:0;z-index:3;display:inline-flex;align-items:center;gap:.5rem;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);direction:ltr}
.moment__ann i{display:block;width:34px;height:1px;background:var(--amber)}
.moment__ann b{font-weight:600}
@media (max-width:860px){.moment__grid,.moment__frame,.moment__ann{display:none}}
.moment__name{font-family:var(--f-en);font-size:clamp(2rem,1.15rem + 2.1vw,3.35rem);line-height:1.06;letter-spacing:-.02em;margin-top:var(--s3);
  direction:ltr;text-align:start;unicode-bidi:isolate}
html[dir=rtl] .moment__name{text-align:end}
.moment__series{font-weight:400;color:var(--ink-3)}
.moment__lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.9;margin-top:var(--s4)}
html[dir=ltr] .moment__lead{line-height:1.6}
@media (max-width:1024px){.moment{grid-template-columns:1fr}.moment__copy{max-width:none}.moment__visual{order:-1}}

/* KPI strip — light: equal columns, thin dividers, numbers that do not shout */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule-2);list-style:none;padding-inline:0}
.kpis li{padding-inline-end:var(--s4);min-width:0}
.kpis li + li{border-inline-start:1px solid var(--rule-2);padding-inline-start:var(--s4)}
.kpis li:last-child{padding-inline-end:0}
.kpis li b{display:block;font-family:var(--f-en);font-size:clamp(1.5rem,1.15rem + .9vw,2rem);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--purple);direction:ltr}
.kpis li span{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:.45rem;line-height:1.5;overflow-wrap:anywhere}
.sec--dark .kpis{border-top-color:rgba(255,255,255,.18)}
.sec--dark .kpis li b{color:#fff}
.sec--dark .kpis li span{color:rgba(255,255,255,.7)}
@media (max-width:420px){.kpis li b{font-size:1.35rem}.kpis li,.kpis li + li{padding-inline:0 .6rem}.kpis li + li{padding-inline-start:.7rem}}

/* --------------------------------------------------------- product hero -- */
/* Product opening: the machine sits on its own quiet field so the page starts
   with the product rather than with a wall of text. */
.sec--phero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 62%,#fff 62%,#fff 100%)}
.phero__tier{font-size:var(--t-xs);letter-spacing:.06em;color:var(--amber-deep);font-weight:600;margin:0 0 var(--s4)}
.phero{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--s6) var(--s7);align-items:center;padding-block:var(--s6) var(--s7)}
.phero--series{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
@media (max-width:1024px){.phero,.phero--series{grid-template-columns:1fr;padding-block:var(--s6)}}
.phero__name{font-family:var(--f-en);font-size:clamp(1.9rem,1.2rem + 2.2vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:.4rem 0 var(--s4)}
@media (min-width:1025px){.phero__name{white-space:nowrap}}
.phero figure{position:relative}

.phero__meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:var(--s4)}
.spec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule)}
.spec-list dt{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em}
.spec-list dd{margin:.2rem 0 0;font-family:var(--f-en);font-weight:700;font-size:1.15rem}
.vsel{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:var(--s4)}
.vsel a{font-family:var(--f-en);font-size:var(--t-xs);font-weight:600;border:1px solid var(--rule-2);border-radius:var(--r);padding:.35rem .7rem;color:var(--ink-2);text-decoration:none!important}
.vsel a[aria-current=page]{background:var(--purple);border-color:var(--purple);color:#fff}
.vsel a:hover{border-color:var(--purple);color:var(--purple)}

/* --------------------------------------------------------------- tables -- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule);font-size:var(--t-sm)}
.tbl th,.tbl td{padding:.85rem 1rem;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
.tbl thead th{background:var(--paper);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-2)}
.tbl tbody th{font-weight:400;color:var(--ink-3);white-space:nowrap}
.tbl td{font-family:var(--f-en);font-weight:600}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r);background:#fff}
.cmp table{min-width:860px;border:0}
.cmp thead th{position:sticky;top:0;z-index:2}
.cmp tbody th{position:sticky;inset-inline-start:0;background:#fff;z-index:1}
.cmp .mstage{margin-bottom:.5rem;min-width:150px}
.cmp__name{font-family:var(--f-en);font-size:1rem;font-weight:700;display:block}
.cmp__use{font-weight:400;font-family:inherit;font-size:var(--t-xs);color:var(--ink-2);line-height:1.6}
/* stacked comparison — shown instead of the table below 768px */
.cmpm{display:none;grid-template-columns:1fr;gap:var(--s4)}
.cmpm__card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4);display:grid;gap:.5rem}
.cmpm__card dl{margin:.4rem 0 0;display:grid;gap:.3rem;border-top:1px solid var(--rule);padding-top:.6rem}
.cmpm__card dl div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm)}
.cmpm__card dt{color:var(--ink-3)}.cmpm__card dd{margin:0;font-family:var(--f-en);font-weight:600}
@media (max-width:768px){.cmp{display:none}.cmpm{display:grid}}
@media (min-width:480px) and (max-width:768px){.cmpm{grid-template-columns:1fr 1fr}}

/* -------------------------------------------------- editorial patterns -- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:var(--s4) var(--s5);align-items:baseline;padding:1.4rem 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none!important;transition:background .25s var(--ease),padding-inline-start .3s var(--ease)}
.row:hover{background:var(--paper);padding-inline-start:.8rem}
.row__n{font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.14em;color:var(--ink-3)}
.row__t{font-size:var(--t-h3);font-weight:600}
.row__d{grid-column:2;font-size:var(--t-sm);color:var(--ink-2);line-height:1.7}
.row__a{grid-row:1;color:var(--amber-deep);font-family:var(--f-en)}
@media (max-width:640px){.row{grid-template-columns:2.2rem 1fr}.row__a{display:none}.row__d{grid-column:1 / -1}}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6) var(--s6)}
.feat__n{font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.14em;color:var(--amber-deep);font-weight:700}
.feat h3{margin:.6rem 0 .5rem;font-size:var(--t-h3)}
.feat p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.8}
.sec--dark .feat p{color:rgba(255,255,255,.8)}
.ico{width:44px;height:44px;border:1px solid var(--rule-2);border-radius:var(--r);display:grid;place-items:center;color:var(--purple);margin-bottom:var(--s3)}
.ico svg{width:22px;height:22px}
.sec--dark .ico{border-color:rgba(255,255,255,.3);color:var(--amber)}
.checks{display:grid;gap:.6rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2);line-height:1.7}
.checks li svg{width:18px;height:18px;flex:0 0 auto;color:var(--ok);margin-top:.25em}
.sec--dark .checks li{color:rgba(255,255,255,.85)}
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s7);align-items:center}
.split--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:1024px){.split,.split--wide{grid-template-columns:1fr}}
.photo{border-radius:var(--r);overflow:hidden;background:var(--paper-2);position:relative;isolation:isolate}
.photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(21,17,26,.08);pointer-events:none}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9);transition:transform .6s var(--ease)}
.pcard:hover .photo img{transform:scale(1.03)}
.photo--wide img{aspect-ratio:16/9}
.pcard .photo img{aspect-ratio:16/10}
.band{position:relative;color:#fff;background:var(--purple-deep);isolation:isolate;overflow:hidden}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.band__veil{position:absolute;inset:0;z-index:1;background:rgba(31,7,51,.6)}
.band__in{position:relative;z-index:2;padding-block:var(--sec);max-width:44rem}
.band .lead{color:rgba(255,255,255,.85)}

.aside{border-inline-start:2px solid var(--amber);background:var(--paper);padding:1.1rem 1.3rem;border-radius:var(--r);color:var(--ink-2);font-size:var(--t-sm);line-height:1.8}
.notice{border:1px solid var(--rule-2);background:#fff;padding:1rem 1.2rem;border-radius:var(--r);font-size:var(--t-sm);color:var(--ink-2)}

/* ------------------------------------------------ solutions composition -- */
.sol{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.sol__main{grid-column:span 6;grid-row:span 2;position:relative;display:grid;align-content:start;gap:.6rem;padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--purple);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);text-decoration:none!important;overflow:hidden;isolation:isolate;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.sol__main::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--amber);opacity:.7}
.sol__mod{grid-column:span 3;position:relative;display:grid;align-content:start;gap:.5rem;padding:clamp(1.2rem,2.4vw,1.8rem);
  background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);border-radius:var(--r);text-decoration:none!important;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.sol__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.sol__n{font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.18em;color:var(--amber);font-weight:700}
.sol__main .sol__n{font-size:var(--t-sm)}
.sol__mod .sol__n{color:var(--amber-deep)}
.sol__t{font-size:var(--t-h3);font-weight:700;line-height:1.4}
.sol__main .sol__t{font-size:var(--t-h2);margin-top:.2rem}
.sol__p{font-size:var(--t-sm);line-height:1.8;color:var(--ink-2)}
.sol__main .sol__p{color:rgba(255,255,255,.82);font-size:var(--t-body);max-width:34rem}
.sol__a{font-size:var(--t-sm);line-height:1.8;color:var(--ink);padding-top:.6rem;border-top:1px solid var(--rule-2)}
.sol__main .sol__a{color:rgba(255,255,255,.92);border-top-color:rgba(255,255,255,.18);max-width:36rem}
.sol__go{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--t-sm);color:var(--purple);margin-top:.2rem}
.sol__go i{font-style:normal;font-family:var(--f-en);transition:transform .3s var(--ease);display:inline-block}
.sol__main .sol__go{color:var(--amber)}
.sol__g{width:88px;height:auto;color:var(--purple);opacity:.85;flex:0 0 auto;transition:opacity .3s var(--ease)}
.sol__g--flow{width:min(100%,520px);color:rgba(255,255,255,.85);margin:var(--s4) 0 var(--s3)}
.sol__mod:hover{border-color:var(--purple);background:#fff;transform:translateY(-2px)}
.sol__mod:hover .sol__g{opacity:1}
.sol__main:hover{border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
html[dir=rtl] .sol__mod:hover .sol__go i,html[dir=rtl] .sol__main:hover .sol__go i{transform:translateX(-4px)}
html[dir=ltr] .sol__mod:hover .sol__go i,html[dir=ltr] .sol__main:hover .sol__go i{transform:translateX(4px)}
@media (max-width:1024px){.sol__main{grid-column:span 12;grid-row:auto}.sol__mod{grid-column:span 6}}
@media (max-width:640px){.sol{gap:var(--s3)}.sol__mod{grid-column:span 12}.sol__g{width:84px}}

/* -------------------------------------------- maintenance split band -- */
.band--split{background:var(--purple-deep);min-height:0}
.band__photo{position:absolute;inset:0 0 0 auto;width:52%;z-index:0}
html[dir=rtl] .band__photo{inset:0 auto 0 0}
.band__photo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:saturate(.8) contrast(1.05)}
.band__blend{position:absolute;inset:0;z-index:1;pointer-events:none}
html[dir=ltr] .band__blend{background:linear-gradient(90deg,var(--purple-deep) 44%,rgba(31,7,51,.55) 60%,rgba(31,7,51,.12) 100%)}
html[dir=rtl] .band__blend{background:linear-gradient(270deg,var(--purple-deep) 44%,rgba(31,7,51,.55) 60%,rgba(31,7,51,.12) 100%)}
.band--split .band__in{max-width:42rem;padding-block:calc(var(--sec) * 1.1)}
.band__pts{display:flex;gap:.5rem 1.4rem;flex-wrap:wrap;margin-top:var(--s5);font-size:var(--t-sm);color:rgba(255,255,255,.85)}
.band__pts li{display:flex;align-items:center;gap:.5rem}
.band__pts li::before{content:"";width:14px;height:1px;background:var(--amber)}
@media (max-width:1024px){.band__photo{width:100%;position:relative;height:min(52vw,380px);inset:auto}
  html[dir=ltr] .band__blend,html[dir=rtl] .band__blend{background:linear-gradient(180deg,rgba(31,7,51,.05) 0%,rgba(31,7,51,.2) 45%,var(--purple-deep) 100%)}
  .band--split .band__in{padding-block:var(--s6) var(--sec);margin-top:-6rem;position:relative;z-index:2}}

/* ---------------------------------------- industries — compact image grid --
   Four columns, two rows: commercial printing spans two, the other six take one
   cell each. Whole grid stays around 400px tall on desktop. */
.sec--ind{padding-block:clamp(3.5rem,5.5vw,6rem)}
.sec--ind .sec__head{margin-bottom:var(--s5)}
.ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:218px;gap:var(--s3);margin-top:var(--s5)}
.ind__c{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--purple-deep);color:#fff;text-decoration:none!important;isolation:isolate}
.ind__c--w{grid-column:span 2}
.ind__ph{position:absolute;inset:0;z-index:0}
.ind__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .7s var(--ease),filter .5s var(--ease)}
.ind__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(31,7,51,.15) 0%,rgba(31,7,51,.42) 45%,rgba(31,7,51,.88) 100%);transition:background .4s var(--ease)}
.ind__n{position:absolute;z-index:2;top:.8rem;inset-inline-start:.9rem;font-family:var(--f-en);font-size:10px;letter-spacing:.2em;color:var(--amber);font-weight:700}
.ind__body{position:absolute;z-index:2;inset:auto .9rem .85rem .9rem;display:grid;gap:.15rem;padding-inline-end:1.8rem}
.ind__t{font-size:1.06rem;font-weight:700;line-height:1.4;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.ind__c--w .ind__t{font-size:calc(var(--t-h3) * 1.1)}
.ind__d{font-size:.82rem;color:rgba(255,255,255,.84);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* a hairline that draws itself across the top of the tile on hover */
.ind__c::after{content:"";position:absolute;z-index:3;top:0;inset-inline-start:0;height:2px;width:0;
  background:var(--amber);transition:width .45s var(--ease)}
.ind__c:hover::after,.ind__c:focus-visible::after{width:100%}
.ind__a{position:absolute;z-index:2;bottom:.9rem;inset-inline-end:.9rem;width:26px;height:26px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;font-family:var(--f-en);font-size:13px;color:#fff;transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.ind__c:hover .ind__ph img{transform:scale(1.035);filter:saturate(1)}
.ind__c:hover .ind__veil{background:linear-gradient(180deg,rgba(31,7,51,.08) 0%,rgba(31,7,51,.34) 45%,rgba(31,7,51,.9) 100%)}
.ind__c:hover .ind__a{background:var(--amber);border-color:var(--amber);color:var(--ink)}
html[dir=rtl] .ind__c:hover .ind__a{transform:translateX(-3px)}
html[dir=ltr] .ind__c:hover .ind__a{transform:translateX(3px)}
.ind__c:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:1024px){.ind{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:185px}.ind__c--w{grid-column:span 2}}
@media (max-width:560px){.ind{grid-template-columns:1fr;grid-auto-rows:165px}.ind__c--w{grid-column:span 1}}
@media (prefers-reduced-motion:reduce){.ind__ph img,.ind__a{transition:none}}
.why--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.why--3{grid-template-columns:1fr}.why--3 .why__i{border-inline-end:0;margin-inline-end:0;border-bottom:1px solid var(--rule-2);padding-inline-end:0}.why--3 .why__i:last-child{border-bottom:0}}

/* --------------------------------------------- why AI-KON numbered grid -- */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-2)}
.why__i{padding-block:var(--s5);padding-inline:0 var(--s5);border-inline-end:1px solid var(--rule-2);margin-inline-end:var(--s5);display:grid;align-content:start;gap:.5rem}
.why__i:last-child{border-inline-end:0;margin-inline-end:0}
.why__i{transition:transform .4s var(--ease)}
.why__n{font-family:var(--f-en);font-size:clamp(2.2rem,1.6rem + 1.6vw,3rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--purple);margin-bottom:var(--s3);
  transition:color .35s var(--ease)}
/* the amber rule under each number extends as the eye arrives — the only motion
   in this section, and it is cheap: one transform, no layout */
.why__n::after{content:"";display:block;width:26px;height:2px;background:var(--amber);margin-top:.6rem;
  transform-origin:inline-start;transition:width .5s var(--ease)}
.why__i:hover{transform:translateY(-3px)}
.why__i:hover .why__n{color:var(--purple-2)}
.why__i:hover .why__n::after{width:64px}
.why__t{font-size:var(--t-h3);font-weight:700;line-height:1.4}
.why__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
@media (prefers-reduced-motion:reduce){.why__i,.why__n::after{transition:none}.why__i:hover{transform:none}}
@media (max-width:1024px){.why{grid-template-columns:1fr 1fr}.why__i:nth-child(2n){border-inline-end:0;margin-inline-end:0}.why__i:nth-child(-n+2){border-bottom:1px solid var(--rule-2)}}
@media (max-width:600px){.why{grid-template-columns:1fr}.why__i{border-inline-end:0;margin-inline-end:0;border-bottom:1px solid var(--rule-2);padding-inline-end:0}.why__i:last-child{border-bottom:0}}

/* ---------------------------------------------------------------- trust -- */
/* Tiles use a fixed pixel height and max-width/max-height images. No aspect-ratio
   and no percentage heights: those resolve to zero height for the image in some
   engines, which is what previously produced blank logo tiles. */
.trust{padding-block:clamp(4.5rem,6vw,6.25rem)}
.trust__head{display:grid;gap:.25rem;margin:0 auto var(--s5);text-align:center;justify-items:center}
.trust__head .eyebrow{margin-bottom:0}
.trust__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4);max-width:calc(4 * 240px + 3 * var(--s4));margin-inline:auto;padding:0}
.trust__tile{flex:0 0 auto;width:240px;height:136px;background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;padding:22px 26px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.trust__tile img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.trust__tile:hover{border-color:var(--rule-2);box-shadow:var(--sh)}
@media (max-width:1180px){.trust__grid{max-width:calc(3 * 240px + 2 * var(--s4))}}
@media (max-width:820px){.trust__tile{width:calc((100% - var(--s4)) / 2);height:120px;padding:18px 20px}}
@media (max-width:420px){.trust__tile{height:104px;padding:14px 16px}}

/* --------------------------------------------------------------- finder -- */
.finder{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(1.2rem,3vw,2.2rem)}
.finder__prog{display:flex;gap:.4rem;margin-bottom:var(--s5)}
.finder__prog i{flex:1;height:3px;background:var(--rule);border-radius:2px}
.finder__prog i.is-on{background:var(--amber)}
.finder__prog i.is-done{background:var(--purple)}
.finder__q{font-size:var(--t-h3);font-weight:600;margin-bottom:.4rem}
.finder__hint{color:var(--ink-3);font-size:var(--t-sm);margin-bottom:var(--s4)}
.opts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opts--2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer}
.opt span{display:block;padding:1rem 1.1rem;border:1px solid var(--rule-2);border-radius:var(--r);background:#fff;font-size:var(--t-sm);line-height:1.6;transition:border-color .2s,background .2s}
.opt span small{display:block;color:var(--ink-3);font-size:var(--t-xs);margin-top:.15rem}
.opt input:checked + span{border-color:var(--purple);background:var(--purple-tint)}
.opt input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}
.opt--lg span{padding:1.3rem 1.2rem;font-size:1rem}
.finder__nav{display:flex;gap:.6rem;justify-content:space-between;align-items:center;margin-top:var(--s5);flex-wrap:wrap}
.finder__res{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
@media (max-width:900px){.finder__res{grid-template-columns:1fr}}
.finder__why{display:grid;gap:.5rem;margin:var(--s4) 0}
.finder__why li{display:flex;gap:.6rem;font-size:var(--t-sm);color:var(--ink-2)}
.finder__why li::before{content:"";width:6px;height:6px;margin-top:.55em;background:var(--amber);border-radius:50%;flex:0 0 auto}
.finder__alt{border-top:1px solid var(--rule);padding-top:var(--s4);margin-top:var(--s4);font-size:var(--t-sm)}
.finder__alt a{font-family:var(--f-en);font-weight:600}

/* ---------------------------------------------------------------- forms --
   Guided six-step request experience: intro block, progress rail, one card
   per step, choice tiles instead of bare radios, review with inline editing. */
.fhead{max-width:44rem;margin:0 auto var(--s6);text-align:center}
.fhead .eyebrow{justify-content:center}
.fhead .lead{margin-top:.7rem}
.fhead__pts{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-2);list-style:none;padding:0}
/* four compact reassurance pills instead of a long bullet list */
.fpills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:var(--s5) 0 0;padding:0;list-style:none}
.fpill{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);color:var(--ink-2);
  background:#fff;border:1px solid var(--rule-2);border-radius:999px;padding:.35rem .8rem;white-space:nowrap}
.fpill svg{width:13px;height:13px;color:var(--ok);flex:0 0 auto}
@media (max-width:420px){.fpill{font-size:10.5px;padding:.3rem .6rem}}
.fhead__pts li{display:inline-flex;align-items:center;gap:.45rem}
.fhead__pts svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto}
.fcard{background:#fff;border:1px solid var(--rule);border-radius:var(--r-2);box-shadow:0 1px 2px rgba(21,17,26,.04),0 18px 48px rgba(21,17,26,.05);
  padding:clamp(1.4rem,3.2vw,2.8rem);display:grid;gap:var(--s5);max-width:min(100%,960px);margin-inline:auto}
/* a preset entry page states which path the visitor is already on */
.fhead__lock{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;
  margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-2);
  background:var(--purple-tint);border:1px solid var(--rule-2);border-radius:999px;padding:.4rem .95rem}
.fhead__lock svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto}
.fhead__lock b{color:var(--purple)}
.fhelp{text-align:center;margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-3)}
.fhelp a{font-weight:600}

/* progress — a calm line, the current step, and "3 من 6". No numbered tabs. */
.fprog{display:grid;gap:.5rem}
/* A progress HEADER, not a list of five labels: "Step 2 of 5 · Machine" plus a
   bar. Small step chips appear from 900px up, where there is room for them. */
.fprog__t{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.fprog__step{font-size:var(--t-body);font-weight:700;color:var(--purple)}
.fprog__n{font-family:var(--f-en);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.fprog__bar{height:3px;background:var(--rule);border-radius:3px;overflow:hidden}
.fprog__bar i{display:block;height:100%;background:var(--amber);border-radius:3px;transition:width .4s var(--ease)}
.fprog__l{display:none}
@media (min-width:900px){
  .fprog__l{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:.15rem 0 0;padding:0}
  .fprog__i{display:flex;align-items:center;min-width:0}
  .fprog__i + .fprog__i::before{content:"";width:10px;height:1px;background:var(--rule-2);margin-inline:.2rem;flex:0 0 auto}
  .fprog__b{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .45rem;border:0;background:none;
    font:inherit;font-size:10.5px;color:var(--ink-3);border-radius:999px;text-align:start}
  button.fprog__b{cursor:pointer}
  button.fprog__b:hover{background:var(--paper);color:var(--purple)}
  button.fprog__b:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
  .fprog__d{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;flex:0 0 auto;
    border:1px solid var(--rule-2);font-family:var(--f-en);font-size:9px;font-weight:700;line-height:1}
  .fprog__i.is-done .fprog__d{background:var(--purple);border-color:var(--purple);color:#fff}
  .fprog__i.is-done .fprog__b{color:var(--ink-2)}
  .fprog__i.is-on .fprog__d{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .fprog__i.is-on .fprog__b{color:var(--purple);font-weight:700}
  .fprog__i.is-todo .fprog__b{color:var(--ink-3);opacity:.65}
}

/* step */
/* ONE PANEL AT A TIME.
   `hidden` only works if no class rule re-declares `display`. `.fset` and
   `.fgrid` both set `display:grid`, which silently overrode the attribute and
   painted every step and every branch on the page together — this rule is what
   makes the wizard a wizard. */
[hidden]{display:none!important}
.fset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s4)}
.fset:not([hidden]){animation:stepin .19s var(--ease) both}
@keyframes stepin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fset:not([hidden]){animation:none}}
.fset legend{padding:0;font-size:var(--t-xs);letter-spacing:.14em;color:var(--ink-3);font-weight:600;text-transform:uppercase}
html[dir=rtl] .fset legend{letter-spacing:0;text-transform:none}
.fset__h{font-size:clamp(1.15rem,1rem + .5vw,1.5rem);font-weight:700;line-height:1.45;margin:.2rem 0 0}
.fset__h:focus{outline:0}
.fset__d{font-size:var(--t-sm);color:var(--ink-3);margin:-.4rem 0 .2rem;line-height:1.7}
.fgrid{display:grid;gap:var(--s5)}

/* choice tiles */
.picks{display:grid;gap:.6rem;grid-template-columns:1fr}
.picks--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.picks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pick{position:relative;display:block;min-width:0}
.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.pick__b{display:grid;gap:.3rem;padding:1.15rem 1.25rem;border:1px solid var(--rule-2);border-radius:var(--r-2);background:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);height:100%;align-content:start}
.pick__i{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r);background:var(--paper);color:var(--purple);margin-bottom:.35rem}
.pick__i svg{width:19px;height:19px}
.pick__t{font-size:var(--t-body);font-weight:600;line-height:1.5;padding-inline-end:1.6rem}
.pick__s{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6}
.pick__c{position:absolute;top:.9rem;inset-inline-end:.9rem;width:18px;height:18px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;color:transparent;transition:all .2s var(--ease)}
.pick__c svg{width:11px;height:11px;stroke-width:3}
.pick:hover .pick__b{border-color:var(--purple);background:var(--purple-tint)}
.pick input:checked + .pick__b{border-color:var(--purple);background:var(--purple-tint);
  box-shadow:inset 0 0 0 1px var(--purple);color:var(--purple)}
.pick input:checked + .pick__b .pick__t{color:var(--purple)}
.pick input:disabled + .pick__b{opacity:.5;cursor:not-allowed}
.pick input:focus-visible + .pick__b{outline:2px solid var(--amber);outline-offset:2px}
.pick input:checked + .pick__b .pick__c{background:var(--purple);border-color:var(--purple);color:#fff}
.pick input:checked + .pick__b .pick__i{background:#fff}
.pick input:focus-visible + .pick__b{outline:2px solid var(--amber);outline-offset:2px}
.picks--sm .pick__b{padding:.8rem .95rem;gap:.12rem;border-radius:var(--r)}
.picks--sm .pick__t{font-size:var(--t-sm);font-weight:600;padding-inline-end:1.3rem}
.picks--sm .pick__c{width:15px;height:15px;top:.65rem;inset-inline-end:.65rem}
.pick--lg .pick__b{padding:1.15rem 1.25rem}
@media (max-width:600px){.picks--2,.picks--3{grid-template-columns:1fr}}

/* fields */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:720px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem;min-width:0}
.field > label{font-size:var(--t-sm);color:var(--ink);font-weight:600}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:.8rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical;line-height:1.75}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-tint)}
.field--err input,.field--err select,.field--err textarea{border-color:var(--no)}
.field__err{font-size:var(--t-xs);color:var(--no);min-height:1em}
.field__hint{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6}
.field input[type=file]{padding:.7rem .9rem;background:var(--paper);border-style:dashed}
.field input[type=file]::file-selector-button{font:inherit;font-size:var(--t-sm);border:1px solid var(--rule-2);background:#fff;color:var(--ink);border-radius:var(--r);padding:.45rem .85rem;margin-inline-end:.8rem;cursor:pointer}
.attlist{display:grid;gap:.3rem;list-style:none;padding:0;margin:0}
.attlist li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-xs);border:1px solid var(--rule);border-radius:var(--r);padding:.45rem .75rem;background:#fff}
.attlist li.is-bad{border-color:var(--no);color:var(--no)}
/* Honeypot. Kept in the DOM and focusable by a bot, but removed from the
   visual and accessibility layers: never display:none, which some bots skip. */
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;left:-9999px;top:auto}

/* navigation + review */
.fnav{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:var(--s4);border-top:1px solid var(--rule);position:sticky;bottom:0;background:#fff;z-index:5}
.fnav .btn{min-width:9rem}
.fnav [data-next],.fnav [type=submit]{margin-inline-start:auto}
.rgrp{border:1px solid var(--rule);border-radius:var(--r-2);overflow:hidden;background:#fff;margin-bottom:.7rem}
.rgrp__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;background:var(--paper);border-bottom:1px solid var(--rule)}
.rgrp__h h3{font-size:var(--t-sm);font-weight:700}
.review{border:0;border-radius:0;background:#fff;overflow:hidden;margin:0}
.review__r{display:grid;grid-template-columns:minmax(9rem,32%) 1fr auto;gap:.6rem 1rem;padding:.75rem 1rem;border-bottom:1px solid var(--rule);align-items:baseline;background:#fff}
.review__r:last-child{border-bottom:0}
.review__r dt{font-size:var(--t-xs);color:var(--ink-3)}
.review__r dd{margin:0;font-size:var(--t-sm);overflow-wrap:anywhere;font-weight:600}
.review__edit{font-size:var(--t-xs);color:var(--purple);text-decoration:underline;background:none;border:0;cursor:pointer}
@media (max-width:600px){.review__r{grid-template-columns:1fr auto}.review__r dd{grid-column:1 / -1}}
@media (max-width:640px){.fnav{padding-block:.8rem;margin-inline:calc(-1 * clamp(1.4rem,3.2vw,2.8rem));padding-inline:clamp(1.4rem,3.2vw,2.8rem);box-shadow:0 -6px 20px rgba(21,17,26,.06)}.fnav .btn{flex:1 1 auto;min-width:0}}
.fnote{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-xs);color:var(--ink-2);line-height:1.7;background:var(--paper);border-radius:var(--r);padding:.85rem 1rem}
.fnote svg{width:16px;height:16px;color:var(--amber-deep);flex:0 0 auto;margin-top:.15em}
.alert{border:1px solid var(--rule-2);border-inline-start:3px solid var(--no);background:#fff;padding:.8rem 1rem;border-radius:var(--r);font-size:var(--t-sm);color:var(--no);min-height:0;margin:0}
.alert:empty{display:none}
.alert--ok{border-inline-start-color:var(--ok);color:var(--ok)}

/* thank-you */
.done__check{width:56px;height:56px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;margin-bottom:var(--s4)}
.done__ref{font-family:var(--f-en);font-weight:700;font-size:1.2rem}
.done__copy{font-size:var(--t-xs);border:1px solid var(--rule-2);border-radius:var(--r);padding:.25rem .6rem;color:var(--ink-2);background:#fff;vertical-align:middle;margin-inline-start:.5rem;cursor:pointer}
.next{border:1px solid var(--rule);border-radius:var(--r);background:#fff;padding:var(--s5) var(--s6)}
.next ol{display:grid;gap:1rem;margin-top:var(--s4);counter-reset:n;list-style:none;padding:0}
.next li{display:grid;grid-template-columns:28px 1fr;gap:.9rem;counter-increment:n}
.next li::before{content:counter(n);font-family:var(--f-en);font-weight:600;font-size:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--purple)}
.next li b{display:block;font-size:var(--t-sm)}
.next li span{font-size:var(--t-xs);color:var(--ink-2);line-height:1.7}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--purple-deep);color:rgba(255,255,255,.82);padding-block:var(--s8) var(--s6);margin-top:0}
.ftr a{color:#fff}
.ftr__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.5fr));gap:var(--s6) var(--s6)}
@media (max-width:1024px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr__grid{grid-template-columns:1fr}}
.ftr__logo img{height:38px;width:auto;margin-bottom:var(--s4)}
.ftr__line{font-size:var(--t-sm);line-height:1.8;max-width:34rem}
.ftr h4{color:#fff;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s3);font-weight:600}
html[dir=rtl] .ftr h4{letter-spacing:0;font-size:var(--t-sm)}
.ftr ul{display:grid;gap:.5rem;font-size:var(--t-sm)}
.ftr__phone{font-family:var(--f-en);font-size:1.15rem;font-weight:600}
.ftr__bot{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:var(--t-xs);color:rgba(255,255,255,.6)}

/* -------------------------------------------------------- mobile bar -- */
.mbar{position:fixed;inset-inline:0;bottom:0;z-index:150;display:none;gap:.5rem;padding:.55rem;background:rgba(255,255,255,.97);border-top:1px solid var(--rule);backdrop-filter:blur(8px)}
.mbar .btn{flex:1;min-height:46px;padding:.6rem .5rem;font-size:var(--t-xs);white-space:nowrap}
.mbar__wa{flex:0 0 48px!important;width:48px;padding:0!important;color:var(--ink)}
.mbar__wa svg{width:22px;height:22px}
@media (max-width:640px){.mbar{display:flex}body{padding-bottom:66px}}

/* ------------------------------------------------------------ assistant -- */
.ai{position:fixed;inset-inline-end:1.15rem;bottom:1.15rem;z-index:890}
@media (max-width:640px){.ai{bottom:calc(66px + .8rem)}}
.ai__launch{display:inline-flex;align-items:center;gap:.65rem;background:var(--purple);color:#fff;font-weight:600;font-size:var(--t-sm);padding:.8rem 1.25rem .8rem 1rem;border-radius:999px;box-shadow:0 10px 30px rgba(48,11,77,.35);border:1px solid rgba(255,255,255,.12);transition:background .2s,transform .2s var(--ease),box-shadow .2s}
html[dir=rtl] .ai__launch{padding:.8rem 1rem .8rem 1.25rem}
.ai__launch:hover{background:var(--purple-2);transform:translateY(-1px);box-shadow:0 14px 34px rgba(48,11,77,.4)}
.ai__launch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(240,162,2,.25)}
.ai__launch svg{width:19px;height:19px}
@media (max-width:640px){.ai__launch{padding:.75rem 1rem;font-size:var(--t-xs)}}
.ai__panel{position:fixed;inset-inline-end:1.15rem;bottom:1.15rem;width:min(440px,calc(100vw - 2.3rem));height:min(700px,calc(100vh - 2.3rem));
  background:#fff;border:1px solid var(--rule-2);border-radius:8px;box-shadow:0 24px 60px rgba(21,17,26,.28);display:none;flex-direction:column;z-index:900;
  opacity:0;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.ai__panel:not([hidden]){display:flex}
.ai__panel.is-open{opacity:1;transform:none}
@media (max-width:900px){.ai__panel{inset:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}}
.ai__hd{display:flex;align-items:center;gap:.8rem;padding:1rem 1.15rem;border-bottom:2px solid var(--amber);background:var(--purple);color:#fff;flex:0 0 auto}
.ai__mark{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto}
.ai__mark img{width:22px;height:22px}
.ai__hd b{display:block;font-size:var(--t-sm)}
.ai__hd small{display:block;font-size:var(--t-xs);color:rgba(255,255,255,.72)}
.ai__x{margin-inline-start:auto;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r);color:#fff}
.ai__x:hover{background:rgba(255,255,255,.12)}
.ai__log{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.15rem;display:grid;gap:.9rem;align-content:start;background:var(--paper);background-image:linear-gradient(180deg,#fff 0,var(--paper) 96px)}
.ai__turn{display:grid;gap:.2rem}
.ai__turn--u{justify-items:end}
.ai__who{font-size:var(--t-xs);color:var(--ink-3)}
.ai__m{max-width:88%;padding:.85rem 1.05rem;border-radius:var(--r-2);font-size:var(--t-sm);line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.ai__m--u{background:var(--purple);color:#fff;border-end-end-radius:2px}
.ai__m--a{background:#fff;border:1px solid var(--rule);border-inline-start:2px solid var(--purple);border-end-start-radius:2px;box-shadow:0 1px 2px rgba(21,17,26,.04)}
.ai__m--sys{justify-self:stretch;max-width:100%;background:transparent;border:1px dashed var(--rule-2);color:var(--ink-2);font-size:var(--t-xs)}
.ai__tools{display:flex;gap:.6rem}
.ai__tool{font-size:var(--t-xs);color:var(--ink-3);text-decoration:underline}
.ai__typing{display:flex;gap:.28rem;align-items:center;justify-self:start;width:auto}
.ai__typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:aidot 1.1s var(--ease) infinite}
.ai__typing i:nth-child(2){animation-delay:.16s}.ai__typing i:nth-child(3){animation-delay:.32s}
@keyframes aidot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.ai__typing i{animation:none;opacity:.6}.ai__panel{transition:none}}
.ai__quick{display:flex;flex-wrap:wrap;gap:.4rem}
.ai__q{background:#fff;border:1px solid var(--rule-2);border-radius:999px;font-size:var(--t-xs);color:var(--ink);padding:.5rem .85rem;transition:border-color .2s,background .2s,color .2s;display:inline-flex;align-items:center;gap:.4rem}
.ai__q::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}
.ai__q:hover{border-color:var(--purple);background:var(--purple-tint);color:var(--purple)}
.ai__acts{display:flex;gap:.5rem;flex-wrap:wrap}
.ai__acts a{font-size:var(--t-xs);border:1px solid var(--rule-2);border-radius:999px;padding:.45rem .8rem;color:var(--ink);background:#fff;text-decoration:none!important}
.ai__acts a:hover{border-color:var(--purple);color:var(--purple)}
.ai__card{display:grid;gap:.5rem;background:#fff;border:1px solid var(--rule-2);border-inline-start:3px solid var(--amber);border-radius:var(--r);padding:.9rem 1rem}
.ai__card p{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6}
.ai__card label{display:grid;gap:.2rem;font-size:var(--t-xs);color:var(--ink-3)}
.ai__card input{font-size:16px;border:1px solid var(--rule-2);border-radius:var(--r);padding:.55rem .7rem;width:100%}
.ai__card input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-tint)}
.ai__cerr{color:var(--no);font-size:var(--t-xs);min-height:1em}
.ai__crow{display:flex;gap:.5rem;flex-wrap:wrap}
.ai__crow button{font-size:var(--t-xs);border-radius:var(--r);padding:.5rem .85rem;min-height:40px}
.ai__crow button[type=submit]{background:var(--purple);color:#fff}
.ai__crow .ai__skip{border:1px solid var(--rule-2);color:var(--ink-2)}
.ai__note{padding:.5rem 1.1rem;border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;flex:0 0 auto;background:#fff}
.ai__ft{border-top:1px solid var(--rule);padding:.75rem;display:flex;gap:.55rem;flex:0 0 auto;background:#fff}
.ai__ft input{flex:1 1 auto;font-size:16px;border:1px solid var(--rule-2);border-radius:999px;padding:.72rem 1.05rem;min-width:0;background:var(--paper)}
.ai__ft input:focus{background:#fff}
.ai__ft input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-tint)}
.ai__ft button{background:var(--amber);color:var(--ink);border-radius:999px;padding:.72rem 1.15rem;font-size:var(--t-sm);min-height:44px;font-weight:700;transition:background .2s}
.ai__ft button:hover{background:#FFB326}
html.ai-locked,html.ai-locked body{overflow:hidden}

/* -------------------------------------------------- relationship chain -- */
.chain{display:grid;gap:var(--s4);justify-items:center;text-align:center}
.chain__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);width:100%;max-width:960px;list-style:none;padding:0;margin:0}
.chain__s{position:relative;background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:1.1rem 1rem;display:grid;gap:.25rem;align-content:start}
.chain__s.is-us{border-color:var(--purple);background:var(--purple-tint)}
.chain__s + .chain__s::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--s3) - 1px);top:50%;width:var(--s3);height:1px;background:var(--rule-2)}
html[dir=rtl] .chain__s + .chain__s::before{inset-inline-start:auto;inset-inline-end:calc(-1 * var(--s3) - 1px)}
.chain__n{font-family:var(--f-en);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.chain__r{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5}
.chain__x{position:absolute;top:.5rem;inset-inline-end:.5rem;color:var(--ink-3);opacity:.7}
.chain__x svg{width:13px;height:13px}
.chain__x:hover{color:var(--purple);opacity:1}
.chain__note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.85;max-width:56rem;margin:0}
.chain__cta{display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:center;margin:0}
.link--ext svg{width:14px;height:14px;margin-inline-start:.35rem;vertical-align:-2px}
.link--ext::after{display:none}
.chain--c{justify-items:stretch;text-align:start}
.chain--c .chain__l{grid-template-columns:1fr;gap:.5rem}
.chain--c .chain__s{display:flex;align-items:baseline;gap:.7rem;padding:.7rem .9rem}
.chain--c .chain__s + .chain__s::before{inset-inline-start:1.6rem;inset-block-start:calc(-1 * .5rem - 1px);width:1px;height:.5rem}
html[dir=rtl] .chain--c .chain__s + .chain__s::before{inset-inline-start:auto;inset-inline-end:1.6rem}
.chain--c .chain__r{margin-inline-start:auto}
.chain--c .chain__cta{justify-content:flex-start;gap:var(--s4)}
.chain--c .chain__x{position:static;margin-inline-start:.3rem}
@media (max-width:760px){.chain__l{grid-template-columns:1fr}.chain__s + .chain__s::before{inset-inline-start:50%;inset-block-start:calc(-1 * var(--s3) - 1px);width:1px;height:var(--s3)}html[dir=rtl] .chain__s + .chain__s::before{inset-inline-end:50%}}
.ftr__ext{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:.9rem;font-size:var(--t-sm)}
.ftr__ext a{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.75)}
.ftr__ext a:hover{color:#fff}
.ftr__ext svg{width:13px;height:13px}

/* ------------------------------------- operational pillars (services) -- */
.pill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7);list-style:none;padding:0;margin:0}
.pill__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)}
.pill__n{font-family:var(--f-en);font-size:var(--t-sm);font-weight:700;color:var(--amber-deep);letter-spacing:.1em}
.pill__t{font-size:var(--t-h3);font-weight:700;line-height:1.4}
.pill__d{color:var(--ink-2);font-size:var(--t-sm);line-height:1.8;margin-top:.3rem}
.pill__p{display:grid;gap:.35rem;margin-top:.7rem;list-style:none;padding:0}
.pill__p li{position:relative;font-size:var(--t-xs);color:var(--ink-3);line-height:1.7;padding-inline-start:.9rem}
.pill__p li::before{content:"";position:absolute;inset-inline-start:0;top:.65em;width:5px;height:1px;background:var(--amber)}
@media (max-width:900px){.pill{grid-template-columns:1fr}}

/* ---------------------------------------------------------- error pages -- */
.err{min-height:60vh;display:grid;align-content:center;padding-block:var(--s8)}
.err__code{font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.2em;color:var(--amber-deep);font-weight:700}

/* ------------------------------------------------- RTL typography tuning -- */
html[dir=rtl] .hero__title{line-height:1.32;max-width:13em}
html[dir=rtl] .ind__t,html[dir=rtl] .sol__t,html[dir=rtl] .why__t,html[dir=rtl] .pcard__pos{line-height:1.6}
html[dir=rtl] .lead{line-height:1.95}
html[dir=rtl] .btn{letter-spacing:0}
html[dir=rtl] .hero__lead{max-width:38rem}
html[dir=rtl] .sol__p,html[dir=rtl] .sol__a,html[dir=rtl] .ind__d{line-height:1.9}
html[dir=rtl] .kpis li span{max-width:10rem}
html[dir=rtl] .tbl td,html[dir=rtl] .spec-list dd,html[dir=rtl] .cmpm__card dd{direction:ltr;text-align:end;unicode-bidi:isolate}
html[dir=rtl] .field input[dir=ltr]{text-align:start}
html[dir=rtl] .phero__name,html[dir=rtl] .pcard__name,html[dir=rtl] .cmp__name,html[dir=rtl] .moment__name{direction:ltr;text-align:end;unicode-bidi:isolate}
html[dir=rtl] .ftr__phone,html[dir=rtl] .done__ref{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* --------------------------------------------------------------- motion -- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}
html.rv-done .rv{opacity:1;transform:none}
.pgrid>.rv:nth-child(2),.sol>.rv:nth-child(2),.why>.rv:nth-child(2),.imx>.rv:nth-child(4n+2){transition-delay:.08s}
.pgrid>.rv:nth-child(3),.sol>.rv:nth-child(3),.why>.rv:nth-child(3),.imx>.rv:nth-child(4n+3){transition-delay:.16s}
.sol>.rv:nth-child(4),.why>.rv:nth-child(4),.imx>.rv:nth-child(4n+4){transition-delay:.24s}
.sol>.rv:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
html.no-js .rv{opacity:1;transform:none}

/* ------------------------------------------- five operational axes (/services/) -- */
.sec--paper2{background:var(--paper-2)}
.axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.axes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the first two cards carry the weight of the set, so they take the wider cells */
.axis{display:grid;align-content:start;gap:.45rem;padding:var(--s5) var(--s4) var(--s5);
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.axis:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--sh)}
.axis__n{font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.18em;font-weight:700;color:var(--amber-deep)}
.axis__g{display:block;color:var(--purple);opacity:.9;margin:.2rem 0 .5rem}
.axis__g svg{width:78px;height:auto}
.axis__t{font-size:var(--t-h3);font-weight:700;line-height:1.4}
.axis__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
.axis__p{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem;
  padding-top:.7rem;border-top:1px solid var(--rule)}
.axis__p li{position:relative;font-size:var(--t-xs);color:var(--ink-2);line-height:1.7;padding-inline-start:.95rem}
.axis__p li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:1px;background:var(--amber-deep)}
.axes__note{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  margin-top:var(--s5);padding:var(--s5);background:var(--purple);color:#fff;border-radius:var(--r)}
.axes__note p{font-size:var(--t-sm);line-height:1.85;color:rgba(255,255,255,.88);max-width:74ch}
.axes__note b{color:var(--amber)}
.axes__note .cta{margin-top:0;flex-wrap:nowrap}
.axes__note .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.axes__note .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media (max-width:1024px){.axes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .axes__note{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:620px){.axes{grid-template-columns:1fr}.axes__note .cta{flex-wrap:wrap}}

/* ------------------------------- three questions (/industries/), compact -- */
/* Previously a wide two-column split that left a large empty gutter. Now one
   balanced band: a short heading column and three tight numbered rows. */
.q3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--s6) var(--s7);
  align-items:start;padding:var(--s6);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-2)}
.q3__hd .t-h3{margin:.3rem 0 .5rem}
.q3__lead{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
.q3__l{list-style:none;margin:0;padding:0;display:grid;gap:0}
.q3__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-top:1px solid var(--rule-2)}
.q3__i:first-child{padding-top:0;border-top:0}
.q3__i:last-child{padding-bottom:0}
.q3__n{font-family:var(--f-en);font-size:var(--t-sm);font-weight:700;letter-spacing:.1em;color:var(--amber-deep);padding-top:.15rem}
.q3__tx{display:grid;gap:.2rem;min-width:0}
.q3__tx b{font-size:var(--t-body);line-height:1.5}
.q3__tx span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.8}
@media (max-width:860px){.q3{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) var(--s4)}}

/* Partner marks are shown exactly as supplied: contained, never stretched,
   never recoloured. The plate normalises optical height only. */
.mark{display:grid;place-items:center}
.mark img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.mark--wm{gap:0;line-height:1.1;text-align:center}
.mark--wm b{font-family:var(--f-en);font-size:1.5rem;font-weight:700;letter-spacing:-.01em;color:var(--purple)}
.mark--wm i{font-family:var(--f-en);font-style:normal;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}

/* manufacturer mark used for identification on the Konica Minolta page */
.kmark{display:grid;place-items:center;width:150px;height:88px;margin-top:var(--s5);
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:.9rem}
.kmark__i{display:grid;place-items:center;width:100%;height:100%}
.kmark img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* ------------------------------------------- relationship, told with marks -- */
/* Three stages, each with its own role label. Equal plate heights normalise the
   optical size of marks that have very different natural proportions; the marks
   themselves are contained, never stretched and never recoloured. */
/* ---------------------------------------------- brand relationship plates -- */
/* Three equal plates, thin connectors, ONE line of role text each. The supplied
   logos already carry their own wordmarks, so the company name is never printed
   again underneath — the mark IS the name (it stays in the image alt text for
   screen readers). Logos are placed with object-fit:contain and never recoloured;
   Infinity ships a reversed (white) mark, so only ITS well is dark. */
.rmk{margin-top:var(--s5)}
.rmk__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;
  gap:var(--s4);list-style:none;margin:0;padding:0;max-width:960px;margin-inline:auto;position:relative}
.rmk__s{position:relative;display:grid;grid-template-rows:auto 1fr;gap:.55rem;
  padding:var(--s4) var(--s4) var(--s5);background:#fff;border:1px solid var(--rule);
  border-radius:var(--r-2);text-align:center;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.rmk__s:hover{border-color:var(--rule-2);box-shadow:var(--sh)}
.rmk__s.is-us{border-color:var(--purple);box-shadow:inset 0 3px 0 var(--purple)}
/* one shared logo-area height keeps the three role lines on the same baseline */
.rmk__m{display:grid;place-items:center;height:80px;padding:14px 20px;border-radius:var(--r);overflow:visible}
.rmk__m img{display:block;width:auto;height:auto;max-width:86%;max-height:60px;object-fit:contain}
.rmk__s.is-dark .rmk__m{background:var(--purple)}
.rmk__r{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;max-width:24ch;margin-inline:auto;align-self:center}
.rmk__x{position:absolute;top:.55rem;inset-inline-end:.6rem;color:var(--ink-3);line-height:0}
.rmk__x svg{width:13px;height:13px}
.rmk__x:hover{color:var(--purple)}
.rmk__a{display:none}
.rmk__l::before,.rmk__l::after{content:"";position:absolute;top:50%;width:var(--s4);height:1px;
  background:var(--rule-2);z-index:1}
.rmk__l::before{inset-inline-start:calc(33.333% - var(--s4) / 2)}
.rmk__l::after{inset-inline-start:calc(66.666% - var(--s4) / 2)}
.rmk__note{max-width:74ch;margin:var(--s4) auto 0;text-align:center;font-size:var(--t-xs);color:var(--ink-3);line-height:1.8}

/* compact variant — the homepage trust moment */
.rmk--c{margin-top:var(--s5)}
.rmk--c .rmk__l{max-width:840px;gap:var(--s3)}
.rmk--c .rmk__s{padding:var(--s3) var(--s3) var(--s4)}
.rmk--c .rmk__m{height:76px;padding:12px 18px}
.rmk--c .rmk__m img{max-width:84%;max-height:56px}
.rmk--c .rmk__r{font-size:var(--t-xs);max-width:22ch}
.rmk--c .rmk__x{display:none}
.rmk--c .rmk__s.is-us{box-shadow:inset 0 2px 0 var(--purple)}
@media (max-width:760px){
  .rmk__l{grid-template-columns:1fr;gap:var(--s3);max-width:400px}
  .rmk__l::before,.rmk__l::after{display:none}
  .rmk__a{display:grid;place-items:center;color:var(--rule-2)}
  .rmk__a i{display:block;width:1px;height:16px;background:var(--rule-2)}
}

/* ------------------------------------------------- Konica Minolta link -- */
/* The relationship CTA under the homepage opening statement. It has to read as
   a door, not a footnote: full-width plate, the manufacturer mark, an arrow
   that moves on hover. */
.klink--text{grid-template-columns:minmax(0,1fr) auto}
.klink{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  margin-top:var(--s6);padding:var(--s5) var(--s6);text-decoration:none!important;color:inherit;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.klink:hover{border-color:var(--purple);background:#fff;transform:translateY(-2px);box-shadow:var(--sh)}
.klink__mark{display:grid;place-items:center;width:120px;height:70px;flex:0 0 auto;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:.7rem}
.klink__mark img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.klink__tx{display:grid;gap:.25rem;min-width:0}
.klink__k{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);font-weight:700}
html[dir=rtl] .klink__k{letter-spacing:0;text-transform:none}
.klink__t{font-size:var(--t-h3);font-weight:700;line-height:1.4;color:var(--purple)}
.klink__d{font-size:var(--t-sm);line-height:1.75;color:var(--ink-2);max-width:60ch}
.klink__go{font-family:var(--f-en);font-size:1.5rem;line-height:1;color:var(--purple);flex:0 0 auto;
  transition:transform .3s var(--ease)}
html[dir=ltr] .klink:hover .klink__go{transform:translateX(5px)}
html[dir=rtl] .klink:hover .klink__go{transform:translateX(-5px)}
@media (max-width:720px){
  .klink{grid-template-columns:auto 1fr;padding:var(--s4);gap:var(--s4)}
  .klink__tx{grid-column:1 / -1}
  .klink__go{grid-row:1;justify-self:end}
}

/* flagship spotlight — provenance line under the KPI strip */
.moment__src{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s3);line-height:1.7}

/* solutions — the explicit scope note that keeps the claim honest */
.sol__scope{max-width:72ch;margin-top:var(--s4);padding-inline-start:var(--s4);
  border-inline-start:2px solid var(--amber);font-size:var(--t-sm);line-height:1.85;color:rgba(255,255,255,.78)}

/* ---------------------------------------------------- what we do (duo) --
   Two propositions on the dark purple section. The markup shipped without any
   styling, so the inline SVGs fell back to their default replaced-element size
   and the section collapsed into dark-on-dark text. Everything here is stated
   explicitly: the card is a flex column, the graphic lives in a fixed box, and
   every text colour is set against the purple rather than inherited. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.duo__c{display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;
  min-height:320px;padding:30px;border-radius:10px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  transition:border-color .18s var(--ease),transform .18s var(--ease),background-color .18s var(--ease)}
.duo__n{font-family:var(--f-en);font-size:clamp(1.875rem,1.6rem + .55vw,2.375rem);font-weight:700;
  line-height:1;color:var(--amber);letter-spacing:.01em}
/* the graphic is support, not content: a fixed box the SVG can never escape */
.duo__g{width:100%;max-width:220px;height:130px;display:grid;place-items:center;margin:20px 0;
  color:rgba(255,255,255,.16);transition:color .18s var(--ease)}
.duo__g svg{width:100%;height:100%;max-width:220px;max-height:130px;display:block}
.duo__t{font-size:clamp(1.375rem,1.25rem + .3vw,1.5rem);font-weight:700;line-height:1.45;color:#fff}
.duo__p{margin-top:12px;font-size:clamp(.9375rem,.906rem + .13vw,1.0625rem);line-height:1.8;color:rgba(255,255,255,.8)}
.duo__go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-sm);font-weight:700;color:var(--amber)}
.duo__go i{font-style:normal;transition:transform .18s var(--ease)}
@media (hover:hover){
  .duo__c:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.075);transform:translateY(-2px)}
  .duo__c:hover .duo__g{color:rgba(255,255,255,.26)}
  .duo__c:hover .duo__go i{transform:translateX(3px)}
  html[dir=rtl] .duo__c:hover .duo__go i{transform:translateX(-3px)}
}
.duo__c:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:760px){
  .duo{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .duo__c{min-height:0;padding:24px}
  .duo__g{height:100px;max-width:180px;margin:16px 0}
  .duo__g svg{max-height:100px;max-width:180px}
}

/* ------------------------------------------------- continuity band cards -- */
.band__h{max-width:26ch}
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);list-style:none;
  margin:var(--s6) 0 0;padding:0}
.bcard{display:grid;align-content:start;gap:.4rem;padding:var(--s4);border-radius:var(--r);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.bcard:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.bcard__t{font-weight:700;font-size:var(--t-body);line-height:1.45;color:#fff;
  padding-bottom:.45rem;border-bottom:1px solid rgba(240,162,2,.55)}
.bcard__d{font-size:var(--t-sm);line-height:1.8;color:rgba(255,255,255,.8)}
@media (max-width:860px){.bcards{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s5)}}

/* ------------------------------------------------------------- marquee -- */
/* Deterministic infinite loop, CSS only — no measuring, no script.
   The track is two IDENTICAL units, so translating it by exactly -50% lands
   unit B precisely where unit A began: the last frame of a cycle is the same
   picture as the first, which is why there is no seam and no restart.
   Each unit repeats the approved seven-logo sequence three times (21 tiles,
   5376px), so one unit is far wider than any viewport we support and the strip
   can never run out of logos — that was the white gap.
   Spacing lives on the tile, never on the track: a flex `gap` would add one
   extra gap to the first half and the 50% seam would drift every pass. */
/* direction:ltr on the CONTAINER too, not only the track. The track is
   width:max-content and overflows; inside an RTL block an overflowing child is
   aligned to its parent's RIGHT edge, so on the Arabic page the strip started
   with every tile off-screen to the left and the visible band was empty. The
   heading above sits in its own .wrap and stays RTL. */
.mq{position:relative;overflow:hidden;margin-top:var(--s5);direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* one duration, both languages; the track is always LTR because the logos are
   direction-neutral and the Arabic page must not mirror the motion */
.mq__track{display:flex;direction:ltr;width:max-content;padding:.35rem 0;
  will-change:transform;animation:clientMarquee var(--mq-dur,112s) linear infinite}
.mq__unit{display:flex;flex:none;align-items:center}
.mq__item{flex:0 0 auto;width:240px;height:136px;margin-right:16px}
@keyframes clientMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* pause only where hover is real; :focus-within could freeze the strip for good */
@media (hover:hover){.mq:hover .mq__track{animation-play-state:paused}}
@media (max-width:640px){.mq__item{width:180px;height:104px;margin-right:12px}}

/* reduced motion: a static row the visitor scrolls themselves */
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none}
  .mq__track{animation:none}
}

/* ----------------------------------------------------------- catalogues -- */
/* A quiet document shelf: paper card, hairline rows, one clear download action.
   Used on product pages (H.catalogBlock) and on the /downloads/ library. */
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--purple);border-color:var(--purple)}

.cat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s6) var(--s6) var(--s5)}
.cat__hd{max-width:62ch}
.cat__hd .t-h3{margin:.35rem 0 .5rem}
.cat__note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.75}
.cat__l{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:0}
.cat__i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--rule)}
.cat__i:last-child{border-bottom:1px solid var(--rule)}
.cat__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--rule);color:var(--purple)}
.cat__ico svg{width:22px;height:22px}
.cat__tx{display:grid;gap:.22rem;min-width:0}
.cat__t{font-weight:600;line-height:1.5}
.cat__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65}
.cat__m{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em}
.cat__for{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.cat__for a{font-family:var(--f-en);font-size:var(--t-xs);color:var(--ink-2);text-decoration:none;
  border:1px solid var(--rule-2);border-radius:999px;padding:.16rem .6rem;transition:.18s var(--ease)}
.cat__for a:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-tint)}
.cat__a{display:flex;gap:.5rem;flex:0 0 auto}
.cat__more{margin-top:var(--s4);font-size:var(--t-sm)}
/* library variant sits directly on the section, without the card frame */
.cat__l--lib{margin-top:var(--s5)}
.cat__l--lib .cat__ico{background:var(--paper)}
.sec--paper .cat__l--lib .cat__ico{background:var(--white)}
@media (max-width:820px){
  .cat{padding:var(--s5) var(--s4)}
  .cat__i{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s3)}
  .cat__a{grid-column:1 / -1}
  .cat__a .btn{flex:1 1 0}
}

/* ---------------------------------------------------------------- print -- */
@media print{.hdr,.ftr,.mbar,.ai,.ai__panel,.drawer,.scrim,.search{display:none!important}body{padding:0}}

/* ===========================================================================
   FINAL PRODUCTION PASS — V11.1
   Everything below was added in the final client pass. Each block says which
   reported problem it fixes.
   ========================================================================= */

/* --- success screen: the reference plate -----------------------------------
   thankyou.js builds .refplate / .refplate__l / __v / __c / __d / __n, and the
   stylesheet had no rule for any of them — so the reference number, the copy
   button and the department line rendered as unstyled inline text on the one
   screen that has to look trustworthy. */
.refplate{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:var(--white);border:1px solid var(--rule);border-inline-start:3px solid var(--amber);
  border-radius:var(--r-2);padding:var(--s4) var(--s5);box-shadow:var(--sh);
}
.refplate__l{
  font-family:var(--f-en);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);
}
.refplate__v{
  font-family:var(--f-en);font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);font-weight:700;
  color:var(--purple);letter-spacing:.02em;margin-inline-end:auto;
  /* a Latin reference inside an Arabic paragraph keeps its own direction */
  unicode-bidi:isolate;
}
.refplate__c{
  font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  background:var(--purple-tint);color:var(--purple);border:1px solid transparent;
  border-radius:var(--r);padding:.45rem .9rem;transition:background .18s var(--ease),color .18s var(--ease);
}
.refplate__c:hover{background:var(--purple);color:var(--white)}
.refplate__c:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.refplate__c.is-done{background:var(--ok);color:var(--white)}
.refplate__d{
  margin:var(--s3) 0 0;font-size:var(--t-body);font-weight:600;color:var(--ink);
}
.refplate__n{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-3)}
@media (max-width:480px){
  .refplate{padding:var(--s3) var(--s4)}
  .refplate__v{margin-inline-end:0;width:100%}
  .refplate__c{width:100%}
}

/* --- fixed header vs in-page anchors ---------------------------------------
   NOT a bug fix: html{scroll-padding-top:calc(var(--hdr) + 1rem)} was already
   in place at the top of this file and is correct. scroll-padding only applies
   when the browser performs the scroll, so this adds the matching per-element
   offset, which also covers focus moved programmatically (skip links, the
   assistant returning focus to a section). */
:target{scroll-margin-top:calc(var(--hdr) + 1rem)}

/* --- mixed Arabic / Latin text ---------------------------------------------
   Model names, references, phone numbers and URLs are Latin runs inside Arabic
   sentences. Without isolation the bidi algorithm reorders the punctuation
   around them — "AccurioPress C12010." renders with the full stop on the wrong
   side, and "+20 103 400 3637" loses its plus sign to the end. */
bdi,.ltr{unicode-bidi:isolate}
[dir="rtl"] .num,[dir="rtl"] [dir="ltr"]{unicode-bidi:isolate;direction:ltr}
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{unicode-bidi:isolate;direction:ltr}

/* --- product cards on a phone ----------------------------------------------
   .pcard .photo img is object-fit:cover at aspect-ratio 16/10. A production
   press is wide and tall, so cover cropped the chassis of the C12010 and
   C12010S — the machine the card is selling was cut off at 390px. contain
   shows the whole unit and never distorts a supplied brand render; the paper
   backdrop already behind .photo fills the spare space. */
@media (max-width:820px){
  .pcard .photo img,.photo--wide img{
    object-fit:contain;
    background:var(--paper-2);
    filter:none;              /* the saturate(.9) wash reads as dirt on white */
  }
  /* the zoom-on-hover has no meaning on a touch screen and clipped the render */
  .pcard:hover .photo img{transform:none}
}

/* --- assistant launcher vs the sticky bottom CTA ---------------------------
   .mbar is a fixed bottom action bar shown at =<640px (bottom:0, z-index:150)
   and .ai is the assistant launcher, also fixed at bottom:1.15rem — so the
   launcher sat on top of the bar's right-hand button. The launcher is lifted
   clear of the bar, and both clear the iOS home indicator.
   .mbar's own height is 46px of button + .55rem padding top and bottom ≈ 64px,
   which matches the body padding-bottom:66px already set at that breakpoint. */
@media (max-width:640px){
  :root{--mbar-h:66px}
  .mbar{padding-block-end:calc(.55rem + env(safe-area-inset-bottom, 0px))}
  body{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px))}
  .ai{
    bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + .6rem);
    z-index:890;   /* above .mbar's 150, unchanged — only the offset moves */
  }
  /* the panel must not sit under the bar either */
  .ai__panel{
    bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + .6rem);
    height:min(700px, calc(100dvh - var(--mbar-h) - env(safe-area-inset-bottom, 0px) - 1.8rem));
  }
}

/* ===========================================================================
   V11.2 — assistant loading and failure states
   The assistant previously showed three animated dots and nothing else, with
   no timeout: a request that never returned left those dots on screen for
   ever. These style the readable status line, the calm failure notice and the
   retry control that replaced it.
   ========================================================================= */

/* the pending row reuses the .ai__m--a bubble, with the dots inline */
.ai__pending{display:flex;align-items:center;gap:.55rem}
.ai__pending .ai__typing{justify-self:auto;flex:0 0 auto}
.ai__pending__t{font-size:var(--t-xs);color:var(--ink-3)}

/* failure notice: same bubble, amber rule instead of purple, plus retry */
.ai__fail{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  border-inline-start-color:var(--amber)!important}
.ai__retry{
  font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer;
  background:var(--purple);color:#fff;border:0;border-radius:var(--r);
  padding:.42rem .9rem;transition:background .18s var(--ease);
}
.ai__retry:hover{background:var(--purple-2)}
.ai__retry:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* while a request is in flight the composer is locked — make that visible
   rather than leaving a button that looks clickable but silently does nothing */
.ai__ft[aria-busy="true"] input,
.ai__ft[aria-busy="true"] button[type=submit]{opacity:.55;cursor:not-allowed}

/* --- success screen: request type and responsible team ---------------------
   thankyou.js renders these as a <dl> beside the request number, so the two
   facts the customer needs are visible without reading a sentence. */
.refplate__facts{
  display:grid;grid-template-columns:auto 1fr;gap:.3rem var(--s4);
  margin:var(--s3) 0 0;align-items:baseline;
}
.refplate__facts dt{
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);font-weight:700;
}
.refplate__facts dd{margin:0;font-size:var(--t-body);font-weight:600;color:var(--ink)}
@media (max-width:480px){
  .refplate__facts{grid-template-columns:1fr;gap:.1rem}
  .refplate__facts dd{margin-block-end:.4rem}
}