/* ============================================================
   ADON MEDIA — page system
   Extends styles.css for the service / about / contact / legal
   pages. Logical properties throughout: RTL is structural.
   ============================================================ */

/* ---------- browser surfaces ----------
   The parts we didn't draw still carry the design. */
::selection{background:rgba(46,107,255,.22);color:var(--ink)}
.dark ::selection,.site-footer ::selection,.page-hero ::selection{background:rgba(46,107,255,.34);color:var(--ink-inv)}
:root{accent-color:var(--blue);caret-color:var(--blue);color-scheme:light}
html{scrollbar-color:var(--line) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--warm);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#BFB7A4}
a{text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
time,.tnum,.matrix td:last-child,.stack .n,.step .n{font-variant-numeric:tabular-nums}

/* skip link — visible on focus, never hover-only */
.skip-link{
  position:absolute;inset-block-start:-100px;inset-inline-start:var(--pad-inline);z-index:400;
  background:var(--blue);color:#fff;padding:12px 20px;font-size:14px;letter-spacing:.06em;
  text-decoration:none;transition:inset-block-start .18s ease;
}
.skip-link:focus{inset-block-start:12px}

/* ============================================================
   PAGE SHELL
   ============================================================ */
body.page{background:var(--warm);color:var(--ink)}
main{display:block}
.page-main{padding-block-start:0}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{
  padding-block:0 6px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-inv-2);
}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li+li::before{content:'/';color:rgba(154,164,180,.5)}
.breadcrumbs a{color:var(--ink-inv-2);text-decoration:none}
.breadcrumbs a:hover{color:var(--ink-inv);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--ink-inv)}

/* ============================================================
   PAGE HERO — dark, structural, fast.
   No cinematic intro: information must be reachable immediately.
   ============================================================ */
.page-hero{
  position:relative;background:var(--midnight);color:var(--ink-inv);
  padding-block:clamp(104px,13vw,168px) clamp(52px,7vw,88px);
  padding-inline:var(--pad-inline);overflow:hidden;
}
/* a single measured light source, from the reading side */
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(74% 120% at 18% 0%,rgba(46,107,255,.20),transparent 62%);
}
[dir="rtl"] .page-hero::before{background:radial-gradient(74% 120% at 82% 0%,rgba(46,107,255,.20),transparent 62%)}
/* hairline structure, inherited from the office architecture */
.page-hero::after{
  content:'';position:absolute;inset-inline:0;inset-block-end:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-dark) 18%,var(--line-dark) 82%,transparent);
}
.page-hero > *{position:relative;z-index:1}
.hero-inner{max-width:1240px;margin-inline:auto}
.page-hero .eyebrow{color:#8FB0FF}
.page-hero h1{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(33px,5.4vw,66px);line-height:1.03;letter-spacing:-.025em;
  max-width:19ch;text-wrap:balance;margin-block:14px 20px;
}
.page-hero .lede{font-size:clamp(16.5px,1.7vw,20px);color:var(--ink-inv-2);max-width:56ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-block-start:34px}

/* ---------- keyword pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:30px;padding:0;list-style:none}
.pills li{
  font-family:var(--display);font-weight:650;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,239,233,.9);
  border:1px solid rgba(143,176,255,.4);background:rgba(10,16,26,.4);
  padding:7px 13px;white-space:nowrap;
}
.light .pills li{color:var(--ink-2);border-color:var(--line);background:transparent}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding-block:var(--section-gap);padding-inline:var(--pad-inline)}
.sec-inner{max-width:1240px;margin-inline:auto}
.sec.dark{background:var(--midnight);color:var(--ink-inv)}
.sec.elevated{background:var(--warm-2)}
.sec.tight{padding-block:clamp(52px,7vw,92px)}
.sec h2{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(26px,3.5vw,46px);line-height:1.06;letter-spacing:-.02em;
  max-width:21ch;text-wrap:balance;
}
.sec .lede{font-size:clamp(16.5px,1.6vw,19px);color:var(--ink-2);max-width:var(--measure);margin-block-start:18px}
.sec.dark .lede{color:var(--ink-inv-2)}
.sec p{max-width:var(--measure)}
.sec .eyebrow+h2{margin-block-start:12px}
/* more space above a heading than below it */
.sec-inner > h2{margin-block-start:0}
.sec-inner > * + h2{margin-block-start:56px}

/* ============================================================
   SPLIT — asymmetric editorial two-column
   ============================================================ */
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,74px);align-items:start;margin-block-start:44px;
}
.split.reverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.reverse > :first-child{order:2}
.split.reverse > :last-child{order:1}
.split h3{font-size:clamp(19px,2vw,24px);font-weight:700;margin-block-end:10px;letter-spacing:-.01em}
.split p{color:var(--ink-2);font-size:15.8px}
.sec.dark .split p{color:var(--ink-inv-2)}
.split p + p{margin-block-start:14px}
.split-list{list-style:none;padding:0;margin-block-start:22px;display:grid;gap:0}
.split-list li{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  padding-block:13px;border-block-start:1px solid var(--line);font-size:15.5px;
}
.sec.dark .split-list li{border-block-start-color:var(--line-dark)}
.split-list li:last-child{border-block-end:1px solid var(--line)}
.sec.dark .split-list li:last-child{border-block-end-color:var(--line-dark)}
.split-list .icon{color:var(--blue);margin-block-start:2px}

/* ============================================================
   STACK — ordered sequence as hairline rows.
   The number carries real information: order of operations.
   ============================================================ */
.stack{margin-block-start:40px;counter-reset:stack}
.stack-row{
  display:grid;grid-template-columns:auto minmax(0,15rem) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding-block:clamp(20px,2.6vw,30px);border-block-start:1px solid var(--line);
}
.sec.dark .stack-row{border-block-start-color:var(--line-dark)}
.stack-row:last-child{border-block-end:1px solid var(--line)}
.sec.dark .stack-row:last-child{border-block-end-color:var(--line-dark)}
.stack-row .n{
  font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:750;
  font-size:clamp(15px,1.5vw,18px);color:var(--blue);min-width:2.4ch;
}
.stack-row h3{font-size:clamp(17px,1.9vw,21px);font-weight:700;letter-spacing:-.01em}
.stack-row p{color:var(--ink-2);font-size:15.5px;max-width:52ch}
.sec.dark .stack-row p{color:var(--ink-inv-2)}
/* hover reveals the row without moving it */
.stack-row{transition:background .3s ease}
.stack-row:hover{background:rgba(46,107,255,.035)}
.sec.dark .stack-row:hover{background:rgba(46,107,255,.08)}

/* ============================================================
   MATRIX — dense capability inventory.
   A list this long reads badly as cards; it reads well as a table.
   ============================================================ */
.matrix{margin-block-start:40px;border-block-start:1px solid var(--line)}
.sec.dark .matrix{border-block-start-color:var(--line-dark)}
.matrix-group{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(14px,3vw,48px);padding-block:clamp(22px,2.8vw,32px);
  border-block-end:1px solid var(--line);
}
.sec.dark .matrix-group{border-block-end-color:var(--line-dark)}
.matrix-group h3{
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.7vw,19px);
  letter-spacing:-.005em;align-self:start;
}
.matrix-items{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:2px 26px;
}
.matrix-items li{
  font-size:15px;color:var(--ink-2);padding-block:7px;
  display:grid;grid-template-columns:14px 1fr;gap:11px;align-items:baseline;
}
.sec.dark .matrix-items li{color:var(--ink-inv-2)}
.matrix-items li::before{
  content:'';width:5px;height:5px;background:var(--blue);
  transform:translateY(-3px);margin-inline-start:4px;
}

/* ============================================================
   FLOWLINE — connected stages. The connection is the content.
   ============================================================ */
.flowline{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-block-start:44px;border-block-start:1px solid var(--line-dark);
}
.flow-step{
  position:relative;padding:30px clamp(14px,2vw,26px) 28px;
  border-inline-start:1px solid var(--line-dark);
}
.flow-step:last-child{border-inline-end:1px solid var(--line-dark)}
.flow-step::before{
  content:'';position:absolute;inset-block-start:-4px;inset-inline-start:-4px;
  width:7px;height:7px;background:var(--blue);
}
.flow-step h3{
  font-family:var(--display);font-weight:700;font-size:15.5px;
  color:var(--ink-inv);margin-block-end:8px;letter-spacing:.01em;
}
.flow-step p{font-size:14px;color:var(--ink-inv-2);line-height:1.55}
.flow-step .icon{color:#8FB0FF;margin-block-end:14px}
/* the travelling pulse: one authored motion moment */
@media (prefers-reduced-motion:no-preference){
  .flowline{position:relative;overflow:hidden}
  .flowline::after{
    content:'';position:absolute;inset-block-start:0;inset-inline-start:0;
    width:34%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);
    animation:flowpulse 5.5s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes flowpulse{
    0%{transform:translateX(-100%);opacity:0}
    18%{opacity:1}
    82%{opacity:1}
    100%{transform:translateX(330%);opacity:0}
  }
  [dir="rtl"] .flowline::after{animation-name:flowpulse-rtl}
  @keyframes flowpulse-rtl{
    0%{transform:translateX(100%);opacity:0}
    18%{opacity:1}
    82%{opacity:1}
    100%{transform:translateX(-330%);opacity:0}
  }
}

/* ============================================================
   CYCLE — a loop, not a list with an end
   ============================================================ */
.cycle{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;background:var(--line);margin-block-start:44px;border:1px solid var(--line);
}
.sec.dark .cycle{background:var(--line-dark);border-color:var(--line-dark)}
.cycle-node{background:var(--warm);padding:26px 24px 28px;position:relative}
.sec.dark .cycle-node{background:var(--midnight)}
.sec.elevated .cycle-node{background:var(--warm-2)}
.cycle-node .icon{color:var(--blue);margin-block-end:16px}
.cycle-node h3{font-size:16px;font-weight:700;margin-block-end:7px}
.cycle-node p{font-size:14.2px;color:var(--ink-2);line-height:1.55}
.sec.dark .cycle-node p{color:var(--ink-inv-2)}
.cycle-node::after{
  content:'';position:absolute;inset-block-start:26px;inset-inline-end:-1px;
  width:1px;height:20px;background:var(--blue);
}
.cycle-node:last-child::after{display:none}
.cycle-loop{
  margin-block-start:18px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:10px;
}

/* ============================================================
   COMPARE — two labelled states, side by side.
   Not a drag slider: both states must be readable at once.
   ============================================================ */
.compare{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(18px,3vw,34px);margin-block-start:44px;
}
.compare-col{border:1px solid var(--line);background:#fff}
.sec.dark .compare-col{border-color:var(--line-dark);background:var(--midnight-2)}
.compare-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-block-end:1px solid var(--line);
}
.sec.dark .compare-head{border-block-end-color:var(--line-dark)}
.compare-head b{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.compare-col.before .compare-head b{color:var(--ink-2)}
.compare-col.after .compare-head b{color:var(--blue)}
.compare-list{list-style:none;padding:6px 18px 20px;margin:0}
.compare-list li{
  padding-block:12px;border-block-start:1px solid var(--line);font-size:15px;
  display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;color:var(--ink-2);
}
.sec.dark .compare-list li{border-block-start-color:var(--line-dark);color:var(--ink-inv-2)}
.compare-list li:first-child{border-block-start:0}
.compare-col.before .icon{color:#B08A3C}
.compare-col.after .icon{color:var(--blue)}

/* ============================================================
   DEVICE — e-commerce screen frames.
   Frames never mirror in RTL: a phone is a phone.
   ============================================================ */
.devices{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr) minmax(0,2.4fr);
  gap:clamp(14px,2.4vw,28px);align-items:end;margin-block-start:44px;
}
[dir="rtl"] .devices{direction:ltr}
[dir="rtl"] .devices figcaption{direction:rtl}
.device{margin:0}
.device .screen{
  border:1px solid var(--line);background:var(--warm-2);overflow:hidden;
  box-shadow:0 22px 48px -20px rgba(10,14,20,.34);
}
.sec.dark .device .screen{border-color:var(--line-dark);box-shadow:0 26px 60px -22px rgba(0,0,0,.7)}
.device.desktop .screen{aspect-ratio:16/10}
.device.tablet  .screen{aspect-ratio:3/4;border-radius:10px}
.device.phone   .screen{aspect-ratio:9/19;border-radius:18px}
.device .screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.device figcaption{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  margin-block-start:12px;
}
.sec.dark .device figcaption{color:var(--ink-inv-2)}
/* empty state: no screenshot supplied yet */
.device .screen.empty{
  display:grid;place-items:center;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,var(--warm-2) 0 10px,#EFE9DC 10px 20px);
}
.device .screen.empty span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   CALLOUT — a single emphasised statement
   ============================================================ */
.callout{
  margin-block-start:40px;padding:clamp(26px,3.4vw,42px);
  background:var(--midnight-2);color:var(--ink-inv);
  border-inline-start:1px solid var(--blue);
}
.sec:not(.dark) .callout{background:var(--midnight)}
.callout h3{
  font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:750;
  font-size:clamp(19px,2.3vw,28px);line-height:1.15;letter-spacing:-.015em;
  max-width:26ch;margin-block-end:14px;
}
.callout p{color:var(--ink-inv-2);font-size:15.8px}

/* ============================================================
   RELATED SERVICES
   ============================================================ */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-block-start:38px}
.related-card{
  background:var(--warm);padding:26px 24px 24px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:9px;transition:background .28s ease;
}
.sec.elevated .related-card{background:var(--warm-2)}
.related-card:hover{background:#fff}
.related-card .icon{color:var(--blue)}
.related-card h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.related-card p{font-size:14.5px;color:var(--ink-2);flex:1}
.related-card .go{font-size:13px;letter-spacing:.06em;color:var(--blue);margin-block-start:4px}
.related-card .go::after{content:' →'}
[dir="rtl"] .related-card .go::after{content:' ←'}

/* ============================================================
   FINAL CTA
   ============================================================ */
.endcta{background:var(--midnight);color:var(--ink-inv);padding-block:clamp(66px,8vw,116px);padding-inline:var(--pad-inline);position:relative;overflow:hidden}
.endcta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 130% at 78% 110%,rgba(46,107,255,.22),transparent 60%);
}
[dir="rtl"] .endcta::before{background:radial-gradient(64% 130% at 22% 110%,rgba(46,107,255,.22),transparent 60%)}
.endcta > *{position:relative}
.endcta-inner{max-width:1240px;margin-inline:auto}
.endcta h2{
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:750;
  font-size:clamp(28px,4.2vw,54px);line-height:1.04;letter-spacing:-.025em;
  max-width:17ch;text-wrap:balance;
}
.endcta p{color:var(--ink-inv-2);font-size:clamp(16px,1.6vw,18.5px);max-width:52ch;margin-block-start:18px}
.endcta .hero-ctas{margin-block-start:32px}

/* ============================================================
   FAQ — extends the existing .faq
   ============================================================ */
.faq summary:hover{color:var(--blue)}
.faq details p{max-width:var(--measure)}

/* ============================================================
   CONTACT FORM — real states
   ============================================================ */
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-block-start:34px}
.formgrid .field.full{grid-column:1/-1}
.field .hint{display:block;font-size:12.5px;color:var(--ink-inv-2);margin-block-start:6px;letter-spacing:0;text-transform:none}
.field .opt{opacity:.62;letter-spacing:.06em}
.field .req{color:var(--blue)}
.field input,.field select,.field textarea{transition:border-color .2s ease,box-shadow .2s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(242,239,233,.38)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--blue);outline:2px solid rgba(46,107,255,.42);outline-offset:1px;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(154,164,180,.62)}
/* error state — announced, not just coloured */
.field .err{display:none;font-size:13px;color:#FF8A7A;margin-block-start:7px;letter-spacing:0;text-transform:none}
.field.invalid .err{display:flex;align-items:center;gap:7px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF8A7A}
.field.invalid input:focus-visible,.field.invalid textarea:focus-visible{outline-color:rgba(255,138,122,.45)}
/* submit states */
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.is-loading{position:relative;color:transparent}
.btn.is-loading::after{
  content:'';position:absolute;inset:50% auto auto 50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.35);border-block-start-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation-duration:2.4s}}
/* success state */
.form-success{
  display:none;border:1px solid rgba(46,107,255,.5);background:rgba(46,107,255,.1);
  padding:26px 28px;margin-block-start:34px;
}
.form-success.show{display:block}
.form-success h3{font-size:18px;font-weight:700;margin-block-end:8px;color:var(--ink-inv)}
.form-success p{color:var(--ink-inv-2);font-size:15.5px}
.form-error{
  display:none;border:1px solid rgba(255,138,122,.5);background:rgba(255,138,122,.09);
  padding:16px 20px;margin-block-start:20px;color:#FFB5AA;font-size:14.5px;
}
.form-error.show{display:block}

/* helper list on contact page */
.helplist{list-style:none;padding:0;margin-block-start:18px}
.helplist li{
  padding-block:11px;border-block-start:1px solid var(--line-dark);
  font-size:15px;color:var(--ink-inv-2);display:grid;grid-template-columns:15px 1fr;gap:12px;align-items:baseline;
}
.helplist li:last-child{border-block-end:1px solid var(--line-dark)}
.helplist .icon{color:var(--blue)}

/* ============================================================
   ABOUT — timeline, values
   ============================================================ */
.since{
  display:flex;align-items:baseline;gap:clamp(14px,2.6vw,34px);flex-wrap:wrap;
  margin-block-start:44px;padding-block:34px;
  border-block:1px solid var(--line);
}
.sec.dark .since{border-block-color:var(--line-dark)}
.since .yr{
  font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:750;
  font-size:clamp(44px,7.5vw,104px);line-height:.9;letter-spacing:-.04em;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.since .rule{flex:1;min-width:60px;height:1px;background:var(--line);align-self:center}
.sec.dark .since .rule{background:var(--line-dark)}
.since p{font-size:15.5px;color:var(--ink-2);max-width:40ch}
.sec.dark .since p{color:var(--ink-inv-2)}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-block-start:44px}
.value{background:var(--warm);padding:28px 26px}
.sec.elevated .value{background:var(--warm-2)}
.sec.dark .value{background:var(--midnight)}
.value h3{font-size:17px;font-weight:700;margin-block-end:8px}
.value p{font-size:14.6px;color:var(--ink-2);line-height:1.58}
.sec.dark .value p{color:var(--ink-inv-2)}

/* ============================================================
   LEGAL — long-form reading
   ============================================================ */
.legal{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(26px,5vw,72px);align-items:start}
.legal-index{position:sticky;inset-block-start:96px}
.legal-index h2{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-block-end:14px;max-width:none}
.legal-index ol{list-style:none;padding:0;margin:0;counter-reset:li}
.legal-index li{counter-increment:li}
.legal-index a{
  display:grid;grid-template-columns:2.2ch 1fr;gap:10px;
  padding-block:7px;font-size:14px;color:var(--ink-2);text-decoration:none;line-height:1.4;
}
.legal-index a::before{content:counter(li,decimal-leading-zero);color:rgba(76,86,102,.55);font-variant-numeric:tabular-nums}
.legal-index a:hover{color:var(--blue)}
.legal-doc{max-width:74ch}
.legal-doc h2{
  font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.012em;
  margin-block:52px 14px;scroll-margin-block-start:96px;max-width:none;
}
.legal-doc > h2:first-child{margin-block-start:0}
.legal-doc h3{font-size:16.5px;font-weight:700;margin-block:26px 8px}
.legal-doc p{font-size:15.8px;color:var(--ink-2);margin-block-end:14px;max-width:none}
.legal-doc ul{margin-block:6px 18px;padding-inline-start:22px;color:var(--ink-2);font-size:15.6px}
.legal-doc li{margin-block-end:7px}
.legal-doc a{color:var(--blue)}
.legal-meta{
  font-size:13.5px;color:var(--ink-2);padding:16px 20px;
  background:var(--warm-2);border-inline-start:1px solid var(--blue);margin-block-end:34px;
}
/* unresolved configuration is impossible to miss */
.cfg{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.88em;
  background:rgba(176,138,60,.16);border-block-end:1px solid #B08A3C;
  padding:1px 5px;color:#8A6A24;white-space:nowrap;
}

/* ============================================================
   404
   ============================================================ */
.nf{min-height:66vh;display:grid;align-content:center}
.nf .code{
  font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:750;
  font-size:clamp(70px,14vw,180px);line-height:.86;letter-spacing:-.05em;
  color:var(--blue);font-variant-numeric:tabular-nums;
}

/* ============================================================
   ICONS — drawn, 1.5px stroke, currentColor
   ============================================================ */
.icon{width:1em;height:1em;font-size:19px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon.sm{font-size:15px}

/* ============================================================
   MOTION — one authored moment, from an already-visible default
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .settle > *{animation:settle .74s cubic-bezier(.16,1,.3,1) backwards}
  .settle > :nth-child(1){animation-delay:.02s}
  .settle > :nth-child(2){animation-delay:.09s}
  .settle > :nth-child(3){animation-delay:.16s}
  .settle > :nth-child(4){animation-delay:.23s}
  .settle > :nth-child(5){animation-delay:.30s}
  .settle > :nth-child(6){animation-delay:.37s}
  @keyframes settle{
    from{opacity:0;transform:translateY(13px);filter:blur(5px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .flowline{grid-auto-flow:row;grid-auto-columns:auto;border-block-start:0}
  .flow-step{border-inline:1px solid var(--line-dark);border-block-start:1px solid var(--line-dark)}
  .flow-step:last-child{border-block-end:1px solid var(--line-dark)}
  @media (prefers-reduced-motion:no-preference){.flowline::after{display:none}}
  .devices{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .device.desktop{grid-column:1/-1}
}
@media (max-width:880px){
  .split,.split.reverse{grid-template-columns:1fr;gap:26px}
  .split.reverse > :first-child,.split.reverse > :last-child{order:0}
  .matrix-group{grid-template-columns:1fr;gap:14px}
  .stack-row{grid-template-columns:auto 1fr;gap:12px 18px}
  .stack-row p{grid-column:2}
  .legal{grid-template-columns:1fr;gap:34px}
  .legal-index{position:static;border-block-end:1px solid var(--line);padding-block-end:22px}
  .legal-index ol{columns:2;column-gap:26px}
}
@media (max-width:640px){
  .formgrid{grid-template-columns:1fr}
  .legal-index ol{columns:1}
  .page-hero h1{max-width:none}
  .since{gap:14px}
  .devices{grid-template-columns:1fr}
}

/* ============================================================
   RTL — only what direction actually changes
   ============================================================ */
[dir="rtl"] .breadcrumbs li+li::before{content:'\\\\'}
[dir="rtl"] .icon.flip{transform:scaleX(-1)}
[dir="rtl"] .cycle-node::after{inset-inline-end:auto;inset-inline-start:-1px}
/* Hebrew reads better a touch larger with slightly looser leading */
[lang="he"] body,[lang="he"] .sec p,[lang="he"] .legal-doc p{line-height:1.75}
[lang="he"] .page-hero h1,[lang="he"] .sec h2,[lang="he"] .endcta h2{letter-spacing:0}
[lang="he"] .eyebrow,[lang="he"] .pills li,[lang="he"] .breadcrumbs{letter-spacing:.02em}
[lang="he"] .field label{letter-spacing:.02em}

/* ============================================================
   PRINT — legal pages get printed
   ============================================================ */
@media print{
  .site-header,.mobile-nav,.site-footer,.endcta,.legal-index,.skip-link{display:none}
  body{background:#fff;color:#000}
  .page-hero{background:#fff;color:#000;padding-block:0 24px}
  .page-hero::before,.page-hero::after{display:none}
  .legal{grid-template-columns:1fr}
  .legal-doc{max-width:none}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:.8em;color:#555}
}

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

/* ============================================================
   COBALT, GROUND-AWARE
   #2E6BFF is the brand cobalt and stays the fill colour for
   buttons (white on it measures 4.50:1). As *small text* it
   only reaches 3.5–3.9:1 on the warm grounds and 4.3:1 on
   midnight, so text and fine marks use a ground-appropriate
   sibling instead: measured 5.35–6.12:1.
   ============================================================ */
:root{
  --blue-ink:#1E4FCC;   /* cobalt for text on warm grounds  */
  --blue-lift:#5B8CFF;  /* cobalt for text on dark grounds  */
}

/* light grounds */
.eyebrow,
.stack-row .n,
.related-card .go,
.related-card .icon,
.cycle-loop,
.split-list .icon,
.compare-col.after .icon,
.legal-doc a,
.legal-index a:hover,
.faq summary::after,
.faq summary:hover,
.field .req,
.helplist .icon{color:var(--blue-ink)}
.matrix-items li::before{background:var(--blue-ink)}

/* dark grounds — these win by being more specific */
.sec.dark .eyebrow,
.sec.dark .stack-row .n,
.sec.dark .cycle-loop,
.sec.dark .split-list .icon,
.sec.dark .compare-col.after .icon,
.endcta .eyebrow,
.page-hero .eyebrow,
.callout .eyebrow{color:var(--blue-lift)}
.sec.dark .matrix-items li::before,
.callout .matrix-items li::before{background:var(--blue-lift)}
.cycle-node .icon{color:var(--blue-ink)}
.sec.dark .cycle-node .icon{color:var(--blue-lift)}
.sec.dark .legal-doc a{color:var(--blue-lift)}

/* ============================================================
   BREADCRUMB / EYEBROW SEPARATION
   The breadcrumb's current item and the eyebrow carry the same
   words by design (orientation vs. label). They need enough air
   to read as two layers rather than a stutter.
   ============================================================ */
.page-hero .breadcrumbs{margin-block-end:clamp(26px,3.4vw,44px)}
.page-hero .breadcrumbs+.eyebrow{margin-block-start:0}

/* ============================================================
   QA FIXES — each one traced to a measured defect
   ============================================================ */

/* A grid item's default min-width:auto refuses to shrink below its
   min-content, and the nowrap CONFIG marker made min-content wider than
   a 390px screen — pushing the whole legal column off-canvas. */
.legal > *{min-width:0}
.cfg{white-space:normal;overflow-wrap:anywhere}

/* The CONFIG marker measured 1.57:1. It has to be *conspicuous*, which
   means it also has to be readable. */
.cfg{background:rgba(176,138,60,.2);border-block-end-color:#7A5E14;color:#5E4708}

/* The required-field marker sits on the dark form ground. */
.sec.dark .field .req{color:var(--blue-lift)}

/* Language switcher was a 21px tap target on small screens. */
.lang a{padding-block:7px;display:inline-block}
@media (max-width:820px){ .lang a{padding-block:11px;padding-inline:4px} }

/* A backslash separator read as stray punctuation in Hebrew. The solidus
   is direction-neutral and is what RTL breadcrumbs conventionally use. */
[dir="rtl"] .breadcrumbs li+li::before{content:'/'}

/* Breadcrumb links were a 21px tap target; WCAG 2.5.8 asks for 24px. */
.breadcrumbs a,.breadcrumbs [aria-current]{display:inline-block;padding-block:5px}
.breadcrumbs li{align-items:baseline}

/* The contact email is a standalone action, not an inline link in a
   sentence, so it does not get WCAG 2.5.8's inline exemption. */
.helplist a{display:inline-block;padding-block:4px;min-height:24px}

/* ============================================================
   SERVICE HERO WITH ART

   The six service pages are the ones people land on from search, and
   they opened on a wall of type. `.has-art` turns the hero into two
   columns and gives the image the outer edge, so the reading column
   keeps its measure instead of being stretched to fill the width.

   The existing text-only hero is untouched: no `.hero-art`, no
   `.has-art`, nothing changes for About, Contact, Legal or 404.
   ============================================================ */
.page-hero.has-art > .hero-inner,
.page-hero.has-art > .hero-art{position:relative;z-index:1}

@media (min-width:1021px){
  .page-hero.has-art{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:clamp(32px,4.6vw,76px);align-items:center;
  }
  .page-hero.has-art .hero-inner{max-inline-size:none}
}

.hero-art{
  margin-block-start:clamp(30px,4vw,0px);
  border:1px solid var(--line-dark);overflow:hidden;
  background:var(--midnight-2);
  /* the image is atmosphere behind the words, not a competing subject */
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.hero-art picture,.hero-art img{display:block;inline-size:100%;block-size:auto}
.hero-art .img-pending{inline-size:100%}

@media (max-width:1020px){
  .hero-art{margin-block-start:30px}
}