/* ═══════════════════════════════════════════════════════════════════════════
   Averya — role-based Hebrew typography

   Display:   Assistant
   Editorial: Noto Serif Hebrew
   Body:      IBM Plex Sans Hebrew
   UI:        Rubik
   Technical: JetBrains Mono

   This layer owns type roles only. The established gradient, marker, underline
   and scroll-linked paint treatments remain owned by the page-specific styles
   and motion scripts loaded before it.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Noto Serif Hebrew Averya";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-hebrew-variable-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Noto Serif Hebrew Averya";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-hebrew-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-body: "IBM Plex Sans Hebrew", "Heebo", system-ui, -apple-system, sans-serif;
  --font-display: "Assistant", "Heebo", sans-serif;
  --font-editorial: "Noto Serif Hebrew Averya", "Noto Serif Hebrew", Georgia, serif;
  --font-ui: "Rubik", "Assistant", "Heebo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --type-blue: #204fb9;
  --type-cyan: #08768a;
  --type-warm: #a94a28;
  --type-violet: #5e3a9d;
  --type-green: #087354;
  --type-accent: var(--type-blue);
}

body {
  font-family: var(--font-body);
  letter-spacing: -.012em;
  line-height: 1.7;
  font-optical-sizing: auto;
}

html[lang="en"] body { letter-spacing: -.006em; }

body :where(h1, h2, h3, h4) {
  font-synthesis: none;
  text-wrap: balance;
}

body :where(p, li) { text-wrap: pretty; }

/* UI has a compact, deliberate face; prose stays in IBM Plex. */
body :where(
  .nav-trigger,
  .nav-cta,
  .nav-burger,
  .nm-link-big,
  .nm-close,
  .btn,
  .faq-toggle,
  .form-label,
  .social-btn,
  .service-film-control,
  .pk-cat-head,
  .pk-pri button,
  .art-more
) {
  font-family: var(--font-ui);
}

body :where(
  .hero-eyebrow,
  .about-eyebrow,
  .process-intro-meta,
  .process-convergence-meta,
  .tl-kicker .lbl,
  .art-cat,
  .art-read,
  .artc-byline,
  .pk-crumb,
  .pk-hint
) {
  font-family: var(--font-ui);
  font-weight: 600;
}

html[dir="rtl"] body :where(
  .hero-eyebrow,
  .about-eyebrow,
  .process-intro-meta,
  .process-convergence-meta,
  .tl-kicker .lbl,
  .art-cat,
  .art-read,
  .artc-byline,
  .pk-crumb,
  .pk-hint
) {
  letter-spacing: -.004em;
  text-transform: none;
}

/* Main display register. Geometry remains owned by the original page CSS. */
body :where(
  .hero-title,
  .kinetic-title,
  .pkg-h2,
  .cs-head h2,
  .about-head h2,
  .faq-head h2,
  .process-intro-title,
  .process-convergence-caption,
  .tl-body h2,
  .artc-h1,
  .pk-spec-t,
  .pk-faq-t
) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.04em;
}

/* Editorial emphasis keeps Averya's existing gradient/highlighter treatment. */
.hero-title em,
.pkg-h2 em,
.cs-head h2 em,
.about-head h2 em,
.faq-head h2 em,
.artc-h1 em,
.kinetic-title em,
.kinetic-title em.em-marker,
.kinetic-title em.em-ink,
.kinetic-title em.em-underline {
  font-family: var(--font-editorial) !important;
  font-style: normal !important;
  font-weight: 640 !important;
  letter-spacing: -.045em;
}

/* One restrained colour register per approved homepage section. */
.plat-section { --type-accent: var(--type-cyan); }
.about-section { --type-accent: var(--type-blue); }
.faq-section { --type-accent: var(--type-violet); }

/* Service hub uses one distinctive editorial face without decorative paint. */
.deep-section .service-editorial-title,
.deep-section .service-editorial-title span,
.deep-section .service-editorial-title em {
  font-family: var(--font-editorial) !important;
  font-style: normal !important;
  font-weight: 640 !important;
  letter-spacing: -.047em;
}

.deep-section .service-editorial-title::after {
  content: "";
  display: block;
  inline-size: clamp(136px, 16vw, 220px);
  block-size: 4px;
  margin-block-start: clamp(15px, 1.7vw, 22px);
  margin-inline-start: 0;
  margin-inline-end: auto;
  border-radius: 999px;
  background: var(--pg, linear-gradient(90deg, #0e7490 0%, #2563eb 52%, #8b5cf6 100%));
}

#build { --type-accent: var(--type-blue); }
#growth { --type-accent: var(--type-warm); }
#systems { --type-accent: var(--type-violet); }
#secure { --type-accent: var(--type-green); }

.averya-bento .cap p,
.deep-lead,
.service-film-copy,
.service-film-caption {
  font-family: var(--font-body);
}

.pk-cat-t,
.pk-spec-t,
.pk-faq-t {
  font-family: var(--font-ui);
  font-weight: 700;
}

.pk-spec-t,
.pk-faq-t {
  color: var(--ink);
  color: color-mix(in srgb, var(--c, var(--type-blue)) 54%, var(--ink));
}

.pk-ib strong { font-family: var(--font-body); font-weight: 650; }
.pk-ib small, .pk-cat-d { font-family: var(--font-body); }

/* Process keeps its prism fill and scroll-linked blur/position animation. */
.process-intro-line--prism {
  font-family: var(--font-editorial) !important;
  font-weight: 630 !important;
  letter-spacing: -.05em;
}

.process-convergence-caption:nth-child(2) {
  font-family: var(--font-editorial);
  font-weight: 620;
  color: #d8e4ff;
}

.tl-body h2.kinetic-title em,
.tl-body h2 em {
  font-family: var(--font-editorial) !important;
  font-style: normal !important;
  font-weight: 640 !important;
}

.process-intro-lead,
.process-convergence-caption + p,
.tl-lead,
.tl-list li {
  font-family: var(--font-body);
}

/* Editorial moments on dark surfaces. */
.testimonial-quote,
.schedule-title {
  font-family: var(--font-editorial);
  font-weight: 610;
  letter-spacing: -.035em;
}

/* Card headings carry colour through type rather than more decorative chrome. */
.about-grid .about-card:nth-child(1) h3 { color: var(--type-blue); }
.about-grid .about-card:nth-child(2) h3 { color: var(--type-warm); }
.about-grid .about-card:nth-child(3) h3 { color: var(--type-green); }

.about-card h3 { font-family: var(--font-ui); font-weight: 700; }
.about-card p, .hero-lead, .hero-cover-sub, .about-head p, .cs-lead,
.faq-body-inner, .contact-promise p, .schedule-note {
  font-family: var(--font-body);
}

/* Blog hub + reading pages get a real editorial register. */
.art-title,
.artc-body h2,
.artc-pull,
.artc-foot-cta h2 {
  font-family: var(--font-editorial);
  font-weight: 650;
  letter-spacing: -.04em;
}

.art-title {
  color: #18243c;
  line-height: 1.28;
}

@media (hover: hover) {
  .art-card:hover .art-title,
  .art-feat:hover .art-title {
    color: var(--c, var(--type-blue));
  }
}

.artc-body h2 {
  color: #1d355f;
  line-height: 1.3;
}

.artc-body p,
.artc-body li,
.art-exc,
.artc-lead,
.artc-foot-cta p {
  font-family: var(--font-body);
}

.artc-body strong { color: #203b68; }

.artc-pull {
  color: #263f70;
  border-image: none;
  border-inline-start-color: var(--type-violet);
}

/* Hebrew labels must not inherit Latin all-caps tracking. */
html[dir="rtl"] .artc-next-t,
html[dir="rtl"] .schedule-partners .lbl,
html[dir="rtl"] .partner-badge {
  font-family: var(--font-ui);
  letter-spacing: -.004em;
  text-transform: none;
}

/* Forms and contact details remain calm and highly readable. */
.contact-form,
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-promise,
.contact-row {
  font-family: var(--font-body);
}

.contact-promise h2,
.contact-based-in h2 {
  font-family: var(--font-editorial);
  font-weight: 650;
  color: #1c3766;
}

/* The standalone 404 uses inline CSS; this late layer keeps it in-system. */
body .wrap h1 { font-family: var(--font-display); }
body .wrap p { font-family: var(--font-body); }
body .code { font-family: var(--font-ui); }

@media (max-width: 720px) {
  body { letter-spacing: -.01em; }

  .deep-section .service-editorial-title::after {
    inline-size: clamp(112px, 34vw, 160px);
    block-size: 3px;
    margin-block-start: 14px;
  }

  .hero-title em,
  .kinetic-title em,
  .pkg-h2 em,
  .process-intro-line--prism,
  .artc-h1 em {
    letter-spacing: -.04em;
  }

  .testimonial-quote,
  .schedule-title { line-height: 1.42; }
}

@media (prefers-contrast: more) {
  :root {
    --type-blue: #153d9b;
    --type-cyan: #075f70;
    --type-warm: #843719;
    --type-violet: #49307f;
    --type-green: #075c44;
  }

  .deep-section .service-editorial-title::after {
    background: currentColor;
  }
}

@media print {
  .process-intro-line--prism,
  .deep-section .service-editorial-title,
  .tl-body h2 em,
  .artc-h1 em {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  .deep-section .service-editorial-title::after {
    background: #000;
  }
}