/* ==========================================================================
   Diaco — Premium Dark Liquid Glass system
   --------------------------------------------------------------------------
   Load order: tokens.css → blog.css → diaco-system.css (this file wins).

   Layer map
     01  Design tokens (v2 palette) + legacy remap (keeps the blog on-brand)
     02  Base / focus / sticky-header scroll offset
     03  Layout shell
     04  Glass system  — RESTRAINED: only .d-glass opts into backdrop-filter
     05  Buttons
     06  Section rhythm + section head
     07  Header (sticky, solidifies on scroll)
     08  Mobile drawer
     09  Hero
     10  Quick actions
     11  Services
     12  Process
     13  Why Diaco
     14  Bento
     15  Request form + every state
     16  FAQ accordion
     17  Final CTA
     18  Motion / reveal / reduced-motion / print
     19  Gold-foil text effect + brand logo
     20  Inner pages — page hero, breadcrumb, split, pillars, compare,
         channels, hours, social, 404
     21  Driver + blog pages
     22  Artwork · article view · listing views
     23  Comment section
     24  Footer

   Glass restraint rule (SKILL Rule 06): .d-glass is the ONLY class that sets
   backdrop-filter. Never add backdrop-filter elsewhere in this codebase.
   Blur budget is further cut to zero below 768px (see layer 04 mobile block).
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════ 01 · TOKENS ══ */

:root {
  /* --- brand surface ----------------------------------------------------- */
  --diaco-midnight: #071426;
  --diaco-deep-navy: #0B1F38;
  --diaco-blue-surface: #102B49;

  /* --- accent (matte gold — NEVER a background) ------------------------- */
  --diaco-muted-gold: #C3A66B;
  --diaco-soft-champagne: #D8C59B;

  /* --- ink --------------------------------------------------------------- */
  --diaco-white: #FFFFFF;
  --diaco-soft-white: #DCE5EF;
  --diaco-muted-text: #A9B8C9;

  /* --- glass ------------------------------------------------------------- */
  --diaco-glass-surface: rgba(255, 255, 255, 0.06);
  --diaco-glass-border: rgba(255, 255, 255, 0.12);
  --diaco-glass-highlight: rgba(255, 255, 255, 0.09);
  --diaco-glass-blur: 16px;

  /* --- semantic ---------------------------------------------------------- */
  --diaco-ok: #7FD6A0;
  --diaco-ok-bg: rgba(127, 214, 160, 0.10);
  --diaco-err: #FF9B9B;
  --diaco-err-bg: rgba(255, 155, 155, 0.10);
  --diaco-info: var(--diaco-muted-text);

  /* --- brand marks (social glyphs only — never a surface) --------------- */
  --diaco-brand-instagram: #D6249F;
  --diaco-brand-x: #FFFFFF;
  --diaco-brand-bale: #4CEBB4;

  /* --- spacing scale (4px base) ----------------------------------------- */
  --d-space-1: 0.25rem;
  --d-space-2: 0.5rem;
  --d-space-3: 0.75rem;
  --d-space-4: 1rem;
  --d-space-5: 1.5rem;
  --d-space-6: 2rem;
  --d-space-7: 3rem;
  --d-space-8: 4rem;
  --d-space-9: 6rem;

  /* --- radius ------------------------------------------------------------ */
  --d-radius-sm: 10px;
  --d-radius-md: 16px;   /* cards + buttons, per style dataset */
  --d-radius-lg: 24px;
  --d-radius-xl: 32px;
  --d-radius-pill: 999px;

  /* --- depth (soft, navy-tinted — never muddy black) ------------------- */
  --d-shadow-sm: 0 1px 2px rgba(4, 12, 26, 0.4);
  --d-shadow-md: 0 8px 24px rgba(4, 12, 26, 0.38);
  --d-shadow-lg: 0 18px 48px rgba(4, 12, 26, 0.46);
  --d-shadow-gold: 0 10px 30px rgba(195, 166, 107, 0.16);
  --d-ring: 0 0 0 2px var(--diaco-midnight), 0 0 0 4px var(--diaco-muted-gold);

  /* --- layout ------------------------------------------------------------ */
  --d-container: 76rem;
  --d-container-narrow: 46rem;
  --d-header-h: 68px;
  --d-section-gap: clamp(3.5rem, 8vw, 7rem);

  /* --- type -------------------------------------------------------------- */
  --d-font: "Vazirmatn", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --d-fs-h1: clamp(1.85rem, 1.15rem + 3.1vw, 3.4rem);
  --d-fs-h2: clamp(1.45rem, 1.05rem + 1.8vw, 2.3rem);
  --d-fs-h3: clamp(1.1rem, 0.98rem + 0.55vw, 1.35rem);
  --d-fs-body: 1rem;
  --d-fs-sm: 0.9rem;
  --d-fs-xs: 0.8rem;
  --d-lh: 1.9;          /* Persian needs more air than latin 1.5 */
  --d-lh-tight: 1.45;

  /* --- motion ------------------------------------------------------------ */
  --d-dur-fast: 160ms;
  --d-dur: 220ms;       /* 200–250ms band, per style dataset */
  --d-dur-slow: 380ms;
  --d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Legacy token remap — the blog + old widgets keep working on the new palette.
   --color-navy-950 → midnight, gold-500 → matte gold, ink → soft white. */
:root {
  --color-navy-950: var(--diaco-midnight);
  --color-navy-900: #091A30;
  --color-navy-800: var(--diaco-deep-navy);
  --color-navy-700: var(--diaco-blue-surface);
  --color-navy-600: #1B3A5F;
  --color-gold-300: #E4D3AC;
  --color-gold-400: var(--diaco-soft-champagne);
  --color-gold-500: var(--diaco-muted-gold);
  --color-gold-600: #A98F58;
  --color-ink: var(--diaco-soft-white);
  --color-ink-dim: var(--diaco-muted-text);
  --container: var(--d-container);
  --font-sans: var(--d-font);
}

/* ══════════════════════════════════════════════════════ 02 · BASE / A11Y ══ */

/* Self-contained box model. Relying on Elementor's reset left this system
   overflowing its own gutter wherever padding met width. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sticky header must never cover the focused element (WCAG 2.4.11 focus not obscured) */
  scroll-padding-top: calc(var(--d-header-h) + var(--d-space-5));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--d-font);
  line-height: var(--d-lh);
  color: var(--diaco-soft-white);
  background-color: var(--diaco-midnight);
  /* Ambient depth: two static radial washes only. No per-section full-screen blur. */
  background-image:
    radial-gradient(1200px 620px at 88% -12%, rgba(27, 58, 95, 0.55), transparent 62%),
    radial-gradient(1000px 520px at -6% 108%, rgba(11, 31, 56, 0.75), transparent 58%);
  background-attachment: fixed;
  overflow-x: hidden;   /* hard guard: never allow sideways scroll (Rule 07) */
}

/* Kill the phantom 10 000px scrollWidth caused by offscreen honeypots.
   The honeypot is still off-screen for bots, but no longer widens the box. */
html[dir="rtl"] input[type="text"][style*="-9999"],
html[dir="rtl"] input[type="text"][style*="-10000"] {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
}

:focus-visible {
  outline: 2px solid var(--diaco-muted-gold);
  outline-offset: 3px;
  border-radius: var(--d-radius-sm);
}

.d-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.d-skip-link {
  position: absolute;
  inset-block-start: var(--d-space-2);
  inset-inline-start: var(--d-space-2);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--diaco-muted-gold);
  color: var(--diaco-midnight);
  font-weight: 700;
  padding: var(--d-space-2) var(--d-space-4);
  border-radius: var(--d-radius-sm);
  transition: transform var(--d-dur) var(--d-ease);
}
.d-skip-link:focus {
  transform: translateY(0);
  color: var(--diaco-midnight);
}

/* ══════════════════════════════════════════════════════════ 03 · LAYOUT ══ */

.d-shell {
  width: 100%;
  max-width: var(--d-container);
  margin-inline: auto;
  padding-inline: var(--d-space-4);
}
@media (min-width: 768px) {
  .d-shell { padding-inline: var(--d-space-6); }
}
@media (min-width: 1200px) {
  .d-shell { padding-inline: var(--d-space-7); }
}

/* Sections already sit inside <main class="diaco-container">, which supplies the
   gutter. Adding a second one would double the inline padding. */
.diaco-container > .d-shell { padding-inline: 0; }

/* ════════════════════════════════════════════════════════════ 04 · GLASS ══ */

.d-glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(155deg, var(--diaco-glass-highlight), transparent 46%),
    var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--d-shadow-md);
  backdrop-filter: blur(var(--diaco-glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--diaco-glass-blur)) saturate(120%);
}

/* Hairline top highlight — the "liquid" read. Cheaper than a second layer. */
.d-glass::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 15%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
}

.d-glass--flat {              /* card variant: quieter, no big shadow */
  border-radius: var(--d-radius-md);
  box-shadow: var(--d-shadow-sm);
}

.d-glass--bare {              /* image overlay: text-safe without a panel */
  background: linear-gradient(200deg, rgba(7, 20, 38, 0.25), rgba(7, 20, 38, 0.86));
  border-color: transparent;
}

/* Glass budget: below 768px every glass panel falls back to a flat tint.
   Same hierarchy, near-zero compositing cost on phones. */
@media (max-width: 767px) {
  .d-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  }
  .d-glass::before { opacity: 0.5; }
}

@media (prefers-reduced-transparency: reduce) {
  .d-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--diaco-deep-navy);
  }
}

/* ══════════════════════════════════════════════════════════ 05 · BUTTONS ══ */

.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d-space-2);
  min-block-size: 48px;                 /* touch target ≥ 44px */
  padding: var(--d-space-3) var(--d-space-6);
  border: 1px solid transparent;
  border-radius: var(--d-radius-pill);
  font-family: inherit;
  font-size: var(--d-fs-sm);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--d-dur) var(--d-ease),
              box-shadow var(--d-dur) var(--d-ease),
              background-color var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              color var(--d-dur) var(--d-ease);
}

.d-btn--primary {
  background: linear-gradient(100deg, var(--diaco-soft-champagne), var(--diaco-muted-gold));
  color: var(--diaco-midnight);
  box-shadow: var(--d-shadow-gold);
}
.d-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(195, 166, 107, 0.26); color: var(--diaco-midnight); }
.d-btn--primary:active { transform: translateY(0); }

.d-btn--ghost {
  background: var(--diaco-glass-surface);
  border-color: var(--diaco-glass-border);
  color: var(--diaco-white);
}
.d-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--diaco-white);
}

.d-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--diaco-soft-champagne);
  padding-inline: var(--d-space-3);
}
.d-btn--quiet:hover { color: var(--diaco-white); background: var(--diaco-glass-surface); }

.d-btn[disabled],
.d-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.d-btn--block { inline-size: 100%; }
/* Compact, but never below the 44px WCAG 2.2 target size. */
/* 46px, not 44px: a control sitting exactly on the 44px accessibility
   minimum measures 43.99px under subpixel layout and fails the touch-target
   check intermittently. The 2px margin makes the result stable. */
.d-btn--sm { min-block-size: 46px; padding: var(--d-space-2) var(--d-space-4); font-size: var(--d-fs-xs); }

.d-btn__icon { flex: none; inline-size: 18px; block-size: 18px; }

/* Inline spinner for the loading state */
.d-btn__spinner {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid rgba(7, 20, 38, 0.28);
  border-block-start-color: var(--diaco-midnight);
  border-radius: 50%;
  animation: d-spin 700ms linear infinite;
}
@keyframes d-spin { to { transform: rotate(360deg); } }

/* Back-compat: the existing child-theme buttons inherit the new look */
.btn-gold {
  min-block-size: 48px;
  background: linear-gradient(100deg, var(--diaco-soft-champagne), var(--diaco-muted-gold));
  color: var(--diaco-midnight);
  box-shadow: var(--d-shadow-gold);
  transition: transform var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(195, 166, 107, 0.26); }
.btn-ghost { border-color: var(--diaco-glass-border); }

/* ═══════════════════════════════════════════════ 06 · SECTION RHYTHM ══ */

.d-section { padding-block: var(--d-space-7); }
@media (min-width: 900px) { .d-section { padding-block: var(--d-section-gap); } }

.d-section--tight { padding-block: var(--d-space-6); }

.d-head { max-inline-size: 46rem; margin-block-end: var(--d-space-6); }
.d-head--center { margin-inline: auto; text-align: center; }

.d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--d-space-2);
  margin: 0 0 var(--d-space-3);
  font-size: var(--d-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--diaco-muted-gold);
}
.d-eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--diaco-muted-gold));
}

.d-head--center .d-eyebrow::after {
  content: "";
  inline-size: 22px;
  block-size: 1px;
  background: linear-gradient(270deg, transparent, var(--diaco-muted-gold));
}

.d-title {
  margin: 0;
  font-size: var(--d-fs-h2);
  font-weight: 800;
  line-height: var(--d-lh-tight);
  color: var(--diaco-white);
  text-wrap: balance;
}

.d-lede {
  margin: var(--d-space-3) 0 0;
  max-inline-size: 40rem;
  font-size: var(--d-fs-body);
  color: var(--diaco-muted-text);
}
.d-head--center .d-lede { margin-inline: auto; }

/* Shared section wrappers emitted by the shortcodes */
.d-section__inner { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════ 07 · HEADER ══ */

.d-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  inline-size: 100%;
  max-inline-size: var(--d-container);
  margin-inline: auto;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              box-shadow var(--d-dur) var(--d-ease);
}

/* At the top of the page the bar is light and borderless (MASTER §01). */
.d-header__inner {
  display: flex;
  align-items: center;
  gap: var(--d-space-4);
  min-block-size: var(--d-header-h);
}

.d-header.is-stuck {
  background: rgba(7, 20, 38, 0.82);
  border-block-end-color: var(--diaco-glass-border);
  box-shadow: 0 10px 30px rgba(4, 12, 26, 0.32);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
@media (max-width: 767px) {
  .d-header.is-stuck { background: rgba(7, 20, 38, 0.95); backdrop-filter: none; }
}

.d-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--d-space-2);
  flex: none;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--diaco-white);
}
.d-brand:hover { color: var(--diaco-white); }
.d-brand__mark {
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--diaco-blue-surface), #0A1E36);
  border: 1px solid var(--diaco-glass-border);
  display: grid;
  place-items: center;
  color: var(--diaco-muted-gold);
}
.d-brand__mark svg { inline-size: 19px; block-size: 19px; }
.d-brand__text { display: inline-flex; flex-direction: column; line-height: 1.25; }
.d-brand__name { color: var(--diaco-soft-champagne); }
.d-brand__tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--diaco-muted-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 15ch;
}
/* Below ~380px the tagline costs more room than it earns. */
@media (max-width: 379px) { .d-brand__tag { display: none; } }

.d-nav { margin-inline-start: auto; }
.d-nav__list {
  display: flex;
  align-items: center;
  gap: var(--d-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.d-nav__list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--d-space-3);
  border-radius: var(--d-radius-sm);
  color: var(--diaco-soft-white);
  font-size: var(--d-fs-sm);
  font-weight: 500;
}
.d-nav__list a:hover { background: var(--diaco-glass-surface); color: var(--diaco-white); }
.d-nav__list a[aria-current="page"] { color: var(--diaco-soft-champagne); box-shadow: inset 0 -2px 0 var(--diaco-muted-gold); }

.d-header__actions { display: flex; align-items: center; gap: var(--d-space-2); flex: none; }
.d-header__phone {
  display: none;
  align-items: center;
  gap: var(--d-space-2);
  font-size: var(--d-fs-xs);
  color: var(--diaco-muted-text);
  white-space: nowrap;
}
.d-header__phone:hover { color: var(--diaco-soft-champagne); }
@media (min-width: 1180px) { .d-header__phone { display: inline-flex; } }

.d-burger {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border: 1px solid var(--diaco-glass-border);
  border-radius: var(--d-radius-sm);
  background: var(--diaco-glass-surface);
  color: var(--diaco-white);
  cursor: pointer;
}
.d-burger:hover { background: rgba(255, 255, 255, 0.12); }
.d-burger svg { inline-size: 22px; block-size: 22px; }
.d-burger .d-burger__close { display: none; }
.d-burger[aria-expanded="true"] .d-burger__open { display: none; }
.d-burger[aria-expanded="true"] .d-burger__close { display: block; }

@media (max-width: 1023px) {
  .d-nav { display: none; }
  .d-burger { display: inline-flex; }
  .d-header__actions .d-btn--primary { display: none; }
}

/* ═══════════════════════════════════════════════════════ 08 · DRAWER ══ */

.d-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(7, 20, 38, 0.97);
  padding: var(--d-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1024px) { .d-drawer { display: none !important; } }

.d-drawer[hidden] { display: none; }

.d-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--d-header-h);
}

.d-drawer__list { margin: var(--d-space-4) 0 0; padding: 0; list-style: none; }
.d-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 56px;
  padding-block: var(--d-space-3);
  border-block-end: 1px solid var(--diaco-glass-border);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--diaco-white);
}
.d-drawer__list a[aria-current="page"] { color: var(--diaco-soft-champagne); }
.d-drawer__list a::after {
  content: "‹";
  font-size: 1.2rem;
  color: var(--diaco-muted-text);
  transform: scaleX(-1);
}

.d-drawer__foot { margin-block-start: var(--d-space-5); display: grid; gap: var(--d-space-3); }

body.d-drawer-open { overflow: hidden; }

/* ═════════════════════════════════════════════════════════════ 09 · HERO ══ */

/* Full-bleed cinematic banner. The image is decorative atmosphere: every
   readable pixel sits on the scrim, never directly on the photo. */
.d-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6.5rem);
  margin-block-start: calc(var(--d-header-h) * -1);
  padding-block-start: calc(var(--d-header-h) + clamp(2.75rem, 7vw, 5.5rem));
}

.d-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(150deg, var(--diaco-blue-surface), var(--diaco-midnight));
}
.d-hero__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  display: block;
}

/* The scrim is the accessibility layer: it is what guarantees AA contrast for
   the headline regardless of what the photograph is doing behind it. */
.d-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to left,
      rgba(7, 20, 38, 0.97) 0%,
      rgba(7, 20, 38, 0.94) 28%,
      rgba(7, 20, 38, 0.80) 48%,
      rgba(7, 20, 38, 0.52) 68%,
      rgba(7, 20, 38, 0.30) 100%),
    linear-gradient(to top, var(--diaco-midnight) 0%, rgba(7, 20, 38, 0) 30%),
    linear-gradient(to bottom, rgba(7, 20, 38, 0.85) 0%, rgba(7, 20, 38, 0) 22%);
}

.d-hero__grid {
  display: grid;
  gap: var(--d-space-6);
  align-items: center;
}
/* Grid/flex children default to min-width:auto and will happily push past the
   track. Zeroing it is what keeps every layout on this page overflow-free. */
.d-hero__grid > *,
.d-grid-3 > *,
.d-process > *,
.d-why > *,
.d-bento > *,
.d-form-wrap > *,
.d-form-grid > *,
.d-quick > *,
.d-form-aside__list > * {
  min-inline-size: 0;
}
@media (min-width: 1024px) {
  .d-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--d-space-8); }
}

.d-hero__title {
  margin: 0;
  font-size: var(--d-fs-h1);
  font-weight: 800;
  line-height: 1.32;        /* Persian needs extra leading, even at display size */
  letter-spacing: -0.005em;
  color: var(--diaco-white);
  text-shadow: 0 2px 18px rgba(7, 20, 38, 0.55);
  text-wrap: balance;
}
.d-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--diaco-soft-champagne), var(--diaco-muted-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.d-hero__lede {
  margin: var(--d-space-4) 0 0;
  max-inline-size: 34rem;
  font-size: 1.03rem;
  color: var(--diaco-soft-white);
  text-shadow: 0 1px 12px rgba(7, 20, 38, 0.6);
}

.d-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-space-3);
  margin-block-start: var(--d-space-5);
}
.d-hero__cta .d-btn { flex: 1 1 12rem; }
@media (min-width: 560px) { .d-hero__cta .d-btn { flex: 0 0 auto; } }

.d-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-space-2) var(--d-space-4);
  margin: var(--d-space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--d-fs-xs);
  color: var(--diaco-soft-white);
  text-shadow: 0 1px 10px rgba(7, 20, 38, 0.7);
}
.d-hero__trust li { display: inline-flex; align-items: center; gap: var(--d-space-2); }
.d-hero__trust li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--diaco-muted-gold);
}

/* Stats strip — narrow numbers, Persian digits stay upright */
.d-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--d-space-3);
  margin-block-start: var(--d-space-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 620px) { .d-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.d-stat {
  padding: var(--d-space-3) var(--d-space-4);
  border: 1px solid var(--diaco-glass-border);
  border-radius: var(--d-radius-md);
  background: rgba(7, 20, 38, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 767px) { .d-stat { backdrop-filter: none; background: rgba(7, 20, 38, 0.62); } }
.d-stat__value {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--diaco-soft-champagne);
}
.d-stat__label { display: block; margin-block-start: var(--d-space-1); font-size: var(--d-fs-xs); color: var(--diaco-soft-white); }

/* Hero aside — the tracking-code explainer, now a real panel rather than a
   caption floating on an image. */
.d-hero__aside { display: flex; flex-direction: column; gap: var(--d-space-4); }

.d-hero__badge {
  display: flex;
  align-items: flex-start;
  gap: var(--d-space-3);
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  background: rgba(7, 20, 38, 0.62);
  border: 1px solid var(--diaco-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--d-fs-sm);
  color: var(--diaco-soft-white);
  line-height: 1.8;
}
@media (max-width: 767px) { .d-hero__badge { backdrop-filter: none; background: rgba(7, 20, 38, 0.78); } }
.d-hero__badge svg { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 3px; color: var(--diaco-muted-gold); }
.d-hero__badge strong { display: block; color: var(--diaco-soft-champagne); font-weight: 700; }

/* The banner is 2.71:1. On a narrow screen `cover` would crop to a sliver, so
   the image is capped to a band and the copy continues on solid navy. */
@media (max-width: 767px) {
  .d-hero { margin-block-start: calc(var(--d-header-h) * -1); padding-block-start: calc(var(--d-header-h) + 2.5rem); }
  .d-hero__bg { inset-block-end: auto; block-size: 46vh; min-block-size: 240px; }
  .d-hero__bg img { object-position: 62% 50%; }
  .d-hero__scrim {
    background:
      linear-gradient(to top, var(--diaco-midnight) 0%, rgba(7, 20, 38, 0.93) 34%, rgba(7, 20, 38, 0.70) 62%, rgba(7, 20, 38, 0.55) 100%),
      linear-gradient(to bottom, rgba(7, 20, 38, 0.8) 0%, rgba(7, 20, 38, 0) 18%);
  }
}
@media (max-width: 420px) {
  .d-hero__bg { block-size: 38vh; min-block-size: 200px; }
}

/* ═════════════════════════════════════════════════ 10 · QUICK ACTIONS ══ */

.d-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--d-space-3);
}
@media (min-width: 480px) { .d-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .d-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.d-quick__item {
  display: flex;
  align-items: center;
  gap: var(--d-space-3);
  min-block-size: 74px;
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-white);
  font-size: var(--d-fs-sm);
  font-weight: 600;
  transition: transform var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              background-color var(--d-dur) var(--d-ease);
}
.d-quick__item:hover {
  transform: translateY(-3px);
  border-color: rgba(195, 166, 107, 0.45);
  background: rgba(255, 255, 255, 0.09);
  color: var(--diaco-white);
}
.d-quick__icon {
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(195, 166, 107, 0.13);
  color: var(--diaco-muted-gold);
}
.d-quick__icon svg { inline-size: 19px; block-size: 19px; }
.d-quick__text { display: flex; flex-direction: column; gap: 2px; }
.d-quick__hint { font-size: 0.72rem; font-weight: 400; color: var(--diaco-muted-text); }

/* ══════════════════════════════════════════════════════ 11 · SERVICES ══ */

.d-grid-3 {
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .d-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .d-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-card {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-3);
  padding: var(--d-space-5);
  border-radius: var(--d-radius-lg);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
  transition: transform var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              background-color var(--d-dur) var(--d-ease),
              box-shadow var(--d-dur) var(--d-ease);
}
.d-card:hover {
  transform: translateY(-4px);
  border-color: rgba(195, 166, 107, 0.42);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: var(--d-shadow-md);
}

.d-card__icon {
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(195, 166, 107, 0.2), rgba(195, 166, 107, 0.06));
  border: 1px solid rgba(195, 166, 107, 0.28);
  color: var(--diaco-soft-champagne);
}
.d-card__icon svg { inline-size: 22px; block-size: 22px; }

.d-card__kicker {
  margin: 0;
  font-size: var(--d-fs-xs);
  font-weight: 700;
  color: var(--diaco-muted-gold);
}
.d-card__title {
  margin: 0;
  font-size: var(--d-fs-h3);
  font-weight: 800;
  line-height: 1.55;
  color: var(--diaco-white);
}
.d-card__text { margin: 0; font-size: var(--d-fs-sm); color: var(--diaco-muted-text); flex: 1; }

.d-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--d-space-2); }
.d-card__list li {
  position: relative;
  padding-inline-start: var(--d-space-4);
  font-size: var(--d-fs-sm);
  color: var(--diaco-soft-white);
  line-height: 1.75;
}
.d-card__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.72em;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--diaco-muted-gold);
  opacity: 0.85;
}

.d-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--d-space-2);
  align-self: flex-start;
  min-block-size: 44px;
  font-size: var(--d-fs-sm);
  font-weight: 700;
  color: var(--diaco-soft-champagne);
}
.d-card__link::after {
  content: "←";
  transition: transform var(--d-dur) var(--d-ease);
}
.d-card:hover .d-card__link::after { transform: translateX(-4px); }

/* ═══════════════════════════════════════════════════════ 12 · PROCESS ══ */

/* An <ol> keeps its decimal marker unless it is cancelled. The step number is
   drawn by .d-step__node, so without this every step read as «1. 1». The
   semantics stay: the counter is what makes it an ordered list. */
.d-process {
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dstep;
}
@media (min-width: 640px)  { .d-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .d-process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--d-space-3); } }

/* The route line: one continuous hairline behind the nodes on wide screens */
.d-process::before {
  content: "";
  display: none;
  position: absolute;
  inset-block-start: 46px;
  inset-inline: 6%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(195, 166, 107, 0.4), transparent);
}
@media (min-width: 1024px) { .d-process { position: relative; } .d-process::before { display: block; } }

.d-step { position: relative; padding-block-start: var(--d-space-2); }

.d-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: var(--d-space-3);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--diaco-blue-surface), var(--diaco-midnight));
  border: 1px solid rgba(195, 166, 107, 0.42);
  color: var(--diaco-soft-champagne);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 0 0 6px rgba(7, 20, 38, 0.85);
}
.d-step__title {
  margin: 0 0 var(--d-space-2);
  font-size: var(--d-fs-h3);
  font-weight: 800;
  line-height: 1.55;
  color: var(--diaco-white);
}
.d-step__text { margin: 0; font-size: var(--d-fs-sm); color: var(--diaco-muted-text); }

/* ═════════════════════════════════════════════════════ 13 · WHY DIACO ══ */

.d-why { display: grid; gap: var(--d-space-4); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .d-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .d-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-why__item {
  display: flex;
  gap: var(--d-space-3);
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  border: 1px solid var(--diaco-glass-border);
  background: rgba(255, 255, 255, 0.03);
}
.d-why__check {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  margin-block-start: 2px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(127, 214, 160, 0.14);
  color: var(--diaco-ok);
}
.d-why__check svg { inline-size: 14px; block-size: 14px; }
.d-why__body h3 {
  margin: 0 0 var(--d-space-1);
  font-size: 1rem;
  font-weight: 700;
  color: var(--diaco-white);
}
.d-why__body p { margin: 0; font-size: var(--d-fs-sm); color: var(--diaco-muted-text); }

/* ══════════════════════════════════════════════════════════ 14 · BENTO ══ */

.d-bento {
  display: grid;
  gap: var(--d-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .d-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
  .d-bento__cell--tall { grid-row: span 2; }
  .d-bento__cell--wide { grid-column: span 2; }
}
@media (min-width: 1180px) {
  .d-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.d-bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--d-space-2);
  min-block-size: 200px;
  padding: var(--d-space-5);
  border-radius: var(--d-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 80% 8%, rgba(27, 58, 95, 0.7), transparent 60%),
    linear-gradient(155deg, var(--diaco-blue-surface), var(--diaco-midnight));
  border: 1px solid var(--diaco-glass-border);
  isolation: isolate;
}
.d-bento__cell--photo { background: var(--diaco-midnight); }

.d-bento__cell img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Type-safe scrim — required when text sits on a photo (Rule 06) */
.d-bento__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(7, 20, 38, 0.94) 12%, rgba(7, 20, 38, 0.55) 55%, rgba(7, 20, 38, 0.3));
}

.d-bento__kicker {
  margin: 0;
  font-size: var(--d-fs-xs);
  font-weight: 700;
  color: var(--diaco-muted-gold);
}
.d-bento__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--diaco-white);
  text-wrap: balance;
}
.d-bento__text { margin: 0; font-size: var(--d-fs-sm); color: var(--diaco-muted-text); }

.d-bento__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--d-space-2);
  align-self: flex-start;
  padding: var(--d-space-2) var(--d-space-3);
  border-radius: var(--d-radius-pill);
  background: rgba(195, 166, 107, 0.13);
  border: 1px solid rgba(195, 166, 107, 0.3);
  font-size: var(--d-fs-xs);
  color: var(--diaco-soft-champagne);
}

/* ══════════════════════════════════════════════════════ 15 · FORM ══ */

.d-form-wrap {
  display: grid;
  gap: var(--d-space-6);
  align-items: start;
}
@media (min-width: 1024px) { .d-form-wrap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--d-space-8); } }

.d-form-shell { padding: clamp(1.25rem, 3vw, 2rem); }

.d-form-shell__head { margin-block-end: var(--d-space-5); }
.d-form-shell__head h3 {
  margin: 0 0 var(--d-space-2);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--diaco-white);
}
.d-form-shell__head p { margin: 0; font-size: var(--d-fs-sm); color: var(--diaco-muted-text); }

.d-form-grid {
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .d-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-field--full { grid-column: 1 / -1; }

.d-field { display: flex; flex-direction: column; gap: var(--d-space-2); min-inline-size: 0; }

.d-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-2);
  font-size: var(--d-fs-xs);
  font-weight: 600;
  color: var(--diaco-soft-white);
}
.d-field__req { color: var(--diaco-muted-gold); }
.d-field__opt { color: var(--diaco-muted-text); font-weight: 400; }

.d-input {
  inline-size: 100%;
  min-block-size: 50px;
  padding: var(--d-space-3) var(--d-space-4);
  border-radius: var(--d-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-white);
  font-family: inherit;
  font-size: 1rem;          /* 16px prevents iOS zoom-on-focus */
  line-height: 1.6;
  transition: border-color var(--d-dur-fast) var(--d-ease),
              box-shadow var(--d-dur-fast) var(--d-ease),
              background-color var(--d-dur-fast) var(--d-ease);
  appearance: none;
}
.d-input::placeholder { color: rgba(169, 184, 201, 0.65); }
.d-input:hover { border-color: rgba(255, 255, 255, 0.2); }
.d-input:focus {
  outline: none;
  border-color: var(--diaco-muted-gold);
  box-shadow: 0 0 0 3px rgba(195, 166, 107, 0.22);
  background: rgba(255, 255, 255, 0.07);
}
/* LTR islands for phone / email / tracking codes inside an RTL form */
.d-input[dir="ltr"] { text-align: left; letter-spacing: 0.02em; }
.d-input:is(input, textarea) { font-variant-numeric: tabular-nums; }

select.d-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--diaco-muted-text) 50%),
                    linear-gradient(135deg, var(--diaco-muted-text) 50%, transparent 50%);
  background-position: left 18px top 50%, left 13px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: var(--d-space-4);
  padding-inline-end: 2.4rem;
}
select.d-input option { background: var(--diaco-deep-navy); color: var(--diaco-white); }

textarea.d-input { min-block-size: 116px; resize: vertical; line-height: 1.9; }

/* --- state 3: validation error (never colour-only: icon + text + aria) --- */
.d-field.is-invalid .d-input {
  border-color: var(--diaco-err);
  background: var(--diaco-err-bg);
}
.d-field.is-invalid .d-input:focus { box-shadow: 0 0 0 3px rgba(255, 155, 155, 0.24); }

.d-field__hint {
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--diaco-muted-text);
}

.d-field__error {
  display: none;
  align-items: center;
  gap: var(--d-space-2);
  font-size: var(--d-fs-xs);
  color: var(--diaco-err);
}
.d-field.is-invalid .d-field__error { display: flex; }
.d-field__error::before { content: "⚠"; font-size: 0.9em; line-height: 1; }

/* --- focusable error summary (UX dataset: High severity) --- */
.d-form-summary {
  display: none;
  margin-block-end: var(--d-space-4);
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  background: var(--diaco-err-bg);
  border: 1px solid rgba(255, 155, 155, 0.42);
}
.d-form-summary.is-visible { display: block; }
.d-form-summary h4 {
  margin: 0 0 var(--d-space-2);
  font-size: var(--d-fs-sm);
  font-weight: 800;
  color: var(--diaco-err);
}
.d-form-summary ul { margin: 0; padding-inline-start: var(--d-space-5); }
.d-form-summary li { font-size: var(--d-fs-xs); color: var(--diaco-white); }
.d-form-summary a { color: var(--diaco-err); text-decoration: underline; }

.d-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-3);
  margin-block-start: var(--d-space-5);
}
.d-form__actions .d-btn--primary { flex: 1 1 14rem; }
@media (min-width: 620px) { .d-form__actions .d-btn--primary { flex: 0 0 auto; } }

.d-form__privacy {
  margin: var(--d-space-4) 0 0;
  font-size: 0.76rem;
  line-height: 1.8;
  color: var(--diaco-muted-text);
}
.d-form__privacy a { color: var(--diaco-soft-champagne); }
/* This one IS a link inside a running sentence ("…استفاده می‌شود. جزئیات در
   سیاست حریم خصوصی آمده است"), which WCAG 2.2 SC 2.5.8 explicitly exempts
   from the 44px minimum — stretching a word in a paragraph to 44px tall would
   wreck the line rhythm to satisfy a rule that does not apply. */

/* --- tracking block --- */
.d-track__row { display: flex; flex-wrap: wrap; gap: var(--d-space-3); align-items: stretch; }
.d-track__row .d-input { flex: 1 1 14rem; }
.d-track__row .d-btn { flex: 0 0 auto; }
.d-track > .d-field__error { display: block; margin-block-start: var(--d-space-2); }

/* Honeypot — visually hidden but still bot-visible and screen-reader hidden */
.d-hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* The control inside must not keep its intrinsic width. An absolutely
   positioned <input> is sized by its own attributes, so without this it
   reported a 177px box offset outside the 1px clip — clipped away and
   unpaintable, but a stray box in the layout and a false overflow reading. */
.d-hp > * { inline-size: 100%; block-size: 1px; }

/* --- state 5/6/7: server banner (loading / error / retry) --- */
.d-form-status {
  display: none;
  margin-block-start: var(--d-space-4);
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  font-size: var(--d-fs-sm);
  line-height: 1.85;
  border: 1px solid transparent;
}
.d-form-status.is-visible { display: block; }
.d-form-status--info  { background: rgba(255,255,255,.05); border-color: var(--diaco-glass-border); color: var(--diaco-soft-white); }
.d-form-status--error { background: var(--diaco-err-bg); border-color: rgba(255,155,155,.42); color: #FFD4D4; }
.d-form-status--ok    { background: var(--diaco-ok-bg);  border-color: rgba(127,214,160,.42); color: #D3F2E1; }

/* --- state 5: success panel (only shown after a real server ack) --- */
.d-form-success { display: none; text-align: center; padding: var(--d-space-4) 0; }
.d-form-success.is-visible { display: block; }
.d-form-success__icon {
  inline-size: 58px;
  block-size: 58px;
  margin: 0 auto var(--d-space-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--diaco-ok-bg);
  border: 1px solid rgba(127, 214, 160, 0.45);
  color: var(--diaco-ok);
}
.d-form-success__icon svg { inline-size: 26px; block-size: 26px; }
.d-form-success h3 { margin: 0 0 var(--d-space-3); font-size: 1.3rem; font-weight: 800; color: var(--diaco-white); }
.d-form-success p { margin: 0 auto; max-inline-size: 34rem; color: var(--diaco-muted-text); }

.d-code {
  display: inline-block;
  margin-block: var(--d-space-4);
  padding: var(--d-space-3) var(--d-space-5);
  border-radius: var(--d-radius-md);
  background: rgba(195, 166, 107, 0.12);
  border: 1px solid rgba(195, 166, 107, 0.42);
  color: var(--diaco-soft-champagne);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  direction: ltr;
  unicode-bidi: isolate;
  user-select: all;
}

.d-form-actions-row { display: flex; flex-wrap: wrap; gap: var(--d-space-3); justify-content: center; margin-block-start: var(--d-space-4); }

/* Aside next to the form */
.d-form-aside__list { margin: 0 0 var(--d-space-5); padding: 0; list-style: none; display: grid; gap: var(--d-space-3); }
.d-form-aside__list li { display: flex; gap: var(--d-space-3); font-size: var(--d-fs-sm); color: var(--diaco-muted-text); }
.d-form-aside__list svg { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 4px; color: var(--diaco-muted-gold); }
.d-form-aside__list strong { display: block; color: var(--diaco-white); font-weight: 700; margin-block-end: 2px; }

.d-form-aside__contact { padding: var(--d-space-4); border-radius: var(--d-radius-md); background: rgba(255,255,255,.035); border: 1px solid var(--diaco-glass-border); font-size: var(--d-fs-sm); }
.d-form-aside__contact p { margin: 0 0 var(--d-space-2); color: var(--diaco-muted-text); }
/* Phone and e-mail here are standalone links, not words inside a sentence, so
   they get the WCAG 2.2 44px target rather than the inline-text exception. */
.d-form-aside__contact a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--d-space-2);
  border-radius: var(--d-radius-sm);
  color: var(--diaco-soft-champagne);
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
}
.d-form-aside__contact a:hover { background: var(--diaco-glass-surface); color: var(--diaco-white); }

/* ═══════════════════════════════════════════════════════ 16 · FAQ ══ */

.d-faq { display: grid; gap: var(--d-space-3); max-inline-size: 52rem; margin-inline: auto; }

.d-faq__item {
  border-radius: var(--d-radius-md);
  border: 1px solid var(--diaco-glass-border);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
  transition: border-color var(--d-dur) var(--d-ease), background-color var(--d-dur) var(--d-ease);
}
.d-faq__item:hover { border-color: rgba(255, 255, 255, 0.2); }
.d-faq__item.is-open { border-color: rgba(195, 166, 107, 0.4); background: rgba(255, 255, 255, 0.06); }

.d-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d-space-4);
  inline-size: 100%;
  min-block-size: 62px;
  padding: var(--d-space-4) var(--d-space-5);
  border: 0;
  background: transparent;
  color: var(--diaco-white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: start;
  cursor: pointer;
}
.d-faq__btn:hover { color: var(--diaco-soft-champagne); }

.d-faq__sign {
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-muted-gold);
  transition: transform var(--d-dur) var(--d-ease);
}
.d-faq__sign svg { inline-size: 14px; block-size: 14px; }
.d-faq__item.is-open .d-faq__sign { transform: rotate(180deg); }

/* grid-template-rows trick = animatable height without JS measurement */
.d-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-dur) var(--d-ease);
}
.d-faq__item.is-open .d-faq__panel { grid-template-rows: 1fr; }
.d-faq__panel > div { overflow: hidden; }
.d-faq__answer {
  margin: 0;
  padding: 0 var(--d-space-5) var(--d-space-5);
  font-size: var(--d-fs-sm);
  line-height: 2;
  color: var(--diaco-muted-text);
}

/* ═════════════════════════════════════════════════════ 17 · FINAL CTA ══ */

.d-cta { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.d-cta::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(195, 166, 107, 0.16), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.d-cta > * { position: relative; z-index: 1; }
.d-cta__title {
  margin: 0 auto;
  max-inline-size: 30ch;
  font-size: var(--d-fs-h2);
  font-weight: 800;
  line-height: 1.45;
  color: var(--diaco-white);
  text-wrap: balance;
}
.d-cta__text { margin: var(--d-space-4) auto 0; max-inline-size: 44rem; color: var(--diaco-muted-text); }
.d-cta__actions { display: flex; flex-wrap: wrap; gap: var(--d-space-3); justify-content: center; margin-block-start: var(--d-space-5); }
.d-cta__actions .d-btn { min-inline-size: 12rem; }

/* ═══════════════════════════════════════════════════════════ 19 · FX FOIL ══ */
/* Pure-CSS "Gold-Foil" text: embossed metallic letters with a diagonal
   specular sweep. No JavaScript, no libraries, no dependencies.

   Markup:  <div class="fx-foil">LUXE</div>
   Any word works. For a per-letter stagger, wrap each letter in a span that
   carries an inline index:  <span style="--i:0">L</span> … and add
   .fx-foil--letters. NOTE: never do this with Persian/Arabic script — splitting
   connected letters breaks the joins and reads as broken typography. Foil a
   whole Persian word instead.

   Re-skinning: --ink / --ink-2 / --ink-3 plus any individual --foil-* stop.
   The defaults below reproduce the reference gradient exactly. */

/* Colour tokens — override to re-skin the effect:
   --ink    main text colour (defaults to currentColor)
   --ink-2  primary accent   --ink-3  secondary accent */
:root { --ink: currentColor; --ink-2: #FF4FD8; --ink-3: #4FF8FF; }

/* Gold-foil ramp. Declared as tokens so the palette can be re-skinned without
   touching the gradient definition; the values are the reference gold. */
:root {
  --foil-1: #7a4a08;
  --foil-2: #f2c15d;
  --foil-3: #fff4b8;
  --foil-4: #b87014;
  --foil-5: #f6d66d;
  --foil-6: #8e560b;
  --foil-7: #fff0a2;
  --foil-8: #c98218;
  --foil-glow: rgba(255, 244, 184, .45);
  --foil-shadow: rgba(0, 0, 0, .36);
}

/* 32 Gold-Foil — embossed metallic letters with a diagonal specular sweep */
.fx-foil {
  font: 600 36px/1.05 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: transparent;
  background:
    linear-gradient(108deg,
      var(--foil-1) 0%,
      var(--foil-2) 18%,
      var(--foil-3) 24%,
      var(--foil-4) 36%,
      var(--foil-5) 51%,
      var(--foil-6) 68%,
      var(--foil-7) 76%,
      var(--foil-8) 100%
    ) 0 0 / 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 1px 0 var(--foil-glow),
    0 9px 20px var(--foil-shadow);
  animation: fx-foil 3.1s ease-in-out infinite;
}
@keyframes fx-foil {
  0%, 100% { background-position: 115% 0; filter: saturate(1.05); }
  45%      { background-position: -35% 0; filter: saturate(1.35) brightness(1.12); }
}

/* Per-letter stagger, driven by the inline --i index. Latin display words only. */
.fx-foil--letters > * {
  display: inline-block;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Accent re-skin: the two brightest specular stops become the accent tokens. */
.fx-foil--accent {
  --foil-3: var(--ink-2);
  --foil-7: var(--ink-3);
}

/* Without background-clip:text the gradient has nothing to clip and the words
   would vanish. Fall back to flat --ink so the text always reads. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fx-foil {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    text-shadow: none;
    animation: none;
  }
}

/* Reduced motion: keep the gold, drop the movement. 38% lands mid-ramp on the
   brightest band so the static state still reads as foil, not as flat brown. */
@media (prefers-reduced-motion: reduce) {
  .fx-foil {
    animation: none;
    background-position: 38% 0;
    filter: saturate(1.15);
  }
  .fx-foil--letters > * { animation: none; }
}

/* ── Hero instance ──────────────────────────────────────────────────────────
   The component above is untouched; this only adapts the hero headline to the
   page type scale. Four deliberate deviations, each for a reason:

   1. Vazirmatn is added to the stack because JetBrains Mono has no Arabic
      glyphs — Persian text would otherwise fall back to a random system font.
      Latin characters inside the same headline still render in JetBrains Mono.
   2. letter-spacing is reset to 0. The component's .08em is for Latin display
      caps; on connected Persian script that same tracking tears the joins.
   3. font-weight 800 and a fluid size, so the foil matches the H1 scale and
      stays legible from 320px to 1440px.
   4. --foil-1 / -6 are lifted. MEASURED, not guessed: background-clip:text
      paints the gradient's darkest stops as glyph colour, and #7a4a08 reaches
      at most 2.81:1 even against pure black — so the reference ramp cannot pass
      WCAG large-text 3:1 on a dark page at all. Sampled against the actual
      banner under the real 0.94 scrim, foil-1 measured 2.14:1 and foil-6 2.66:1.
      Lifting those three stops puts every stop at 4.60:1 or better.
      Re-measure with: php _preview/measure-foil-contrast.php 0.94
      On a light background the unmodified component is fine, which is why it
      is scoped to the hero rather than changed globally. */
.d-hero__foil,
.d-pagefoil {
  --foil-1: #c07a16;
  --foil-4: #c98d20;
  --foil-6: #c57d17;

  display: inline-block;
  font-family: "JetBrains Mono", "Vazirmatn", "Noto Sans Arabic", monospace;
  font-weight: 800;
  font-size: clamp(1.35rem, 0.85rem + 2.3vw, 2.85rem);
  line-height: 1.45;
  letter-spacing: 0;
  /* No drop-shadow halo here on purpose: @keyframes fx-foil animates `filter`,
     which would replace any filter set on this element for the whole animation
     and then snap on under reduced motion. Legibility is carried by the measured
     contrast above and by the scrim, not by a filter that does not survive. */
}
/* On very wide screens a single huge word would dominate; cap its measure. */
@media (min-width: 1440px) {
  .d-hero__foil,
  .d-pagefoil { font-size: 2.95rem; }
}

/* ── Logo ────────────────────────────────────────────────────────────────────
   The gold mark ships transparent, so it sits straight on the navy without a
   plate. forced-color-adjust keeps the gold visible in forced-colours mode. */
.d-logo {
  display: block;
  inline-size: auto;
  block-size: 40px;
  object-fit: contain;
}
.d-logo--sm { block-size: 32px; }
.d-logo--lg { block-size: 76px; }

@media (forced-colors: active) {
  .d-logo { forced-color-adjust: none; }
}

.d-brand .d-logo { block-size: 38px; }
/* Height comes from .d-logo--lg above; this rule only owns the spacing. An
   earlier duplicate block-size here silently overrode the modifier. */
.d-footer__logo { margin-block-end: var(--d-space-3); }

@media (max-width: 379px) {
  .d-brand .d-logo { block-size: 32px; }
}

/* ══════════════════════════════════════════════════ 18 · MOTION / A11Y ══ */

/* Reveal: opt-in via [data-d-reveal], and ONLY hidden when JavaScript is
   confirmed running (.d-has-js is set by an inline script in wp_body_open).
   No JS → no class → nothing is ever hidden, so the page cannot render blank. */
.d-has-js [data-d-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-dur-slow) var(--d-ease), transform var(--d-dur-slow) var(--d-ease);
  transition-delay: var(--d-reveal-delay, 0ms);
}
.d-has-js [data-d-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .d-has-js [data-d-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .d-btn, .d-card, .d-quick__item, .d-faq__panel, .d-faq__sign, .d-header {
    transition: none !important;
  }
  .d-btn:hover, .d-card:hover, .d-quick__item:hover { transform: none; }
  .d-btn__spinner { animation-duration: 1.4s !important; }
}

@media print {
  .d-header, .d-drawer, .d-hero__bg, .d-form-shell { display: none !important; }
  body { background: #fff; color: #000; }
  .d-has-js [data-d-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════ 20 · INNER PAGES ══ */
/* Every page below the home page is built from the SAME tokens, glass surfaces
   and components as layers 01–19. Nothing here introduces a new colour, a new
   radius or a second font — an inner page must be recognisably the same site
   as the home page, only quieter.

   What this layer adds:
     .d-pagehero   page-level hero (quiet by design — see the note below)
     .d-crumb      breadcrumb, the one navigational element the home page lacks
     .d-split      copy + aside, the workhorse two-column layout
     .d-pillars    deep service cards with their own action row
     .d-compare    هوایی / زمینی decision table (real <table>, stacks on mobile)
     .d-channels   contact page: phone / e-mail / address
     .d-hours      opening-hours list
     .d-social     messenger + social row (verified URLs only)
     .d-notfound   404

   THE QUIET HERO IS A PERFORMANCE DECISION. The banner is the home page's
   single largest asset (133 KB WebP). Repeating it on five more pages would
   make it the second-largest byte on every inner-page view while saying
   nothing new. So .d-pagehero paints a designed gradient + a hairline route
   grid instead, and the full-bleed photograph stays the home page's signature. */

/* ---------------------------------------------------------------- shell -- */
.d-page { display: block; }

/* ---------------------------------------------------------------- crumb -- */
.d-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-2);
  margin: 0 0 var(--d-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--d-fs-xs);
  color: var(--diaco-muted-text);
}
.d-crumb li { display: inline-flex; align-items: center; gap: var(--d-space-2); }
.d-crumb li + li::before {
  content: "‹";
  color: rgba(169, 184, 201, 0.55);
  transform: scaleX(-1);
}
.d-crumb a {
  color: var(--diaco-muted-text);
  min-block-size: 32px;
  display: inline-flex;
  align-items: center;
}
.d-crumb a:hover { color: var(--diaco-soft-champagne); }
.d-crumb [aria-current="page"] { color: var(--diaco-soft-champagne); font-weight: 700; }

/* ------------------------------------------------------------ page hero -- */
.d-pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(var(--d-header-h) * -1);
  padding-block: calc(var(--d-header-h) + clamp(2rem, 4.5vw, 3.25rem)) clamp(2.25rem, 5vw, 4rem);
  background:
    radial-gradient(120% 110% at 86% -10%, rgba(27, 58, 95, 0.9), transparent 58%),
    linear-gradient(160deg, var(--diaco-blue-surface) 0%, var(--diaco-midnight) 68%);
  border-block-end: 1px solid var(--diaco-glass-border);
}
/* Hairline route grid — the same "logistics graph" idea as the banner, drawn
   in CSS so it costs no bytes. Masked so it fades out instead of tiling flat. */
.d-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(78% 68% at 72% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(78% 68% at 72% 0%, #000 0%, transparent 74%);
}
/* One gold hairline sweeping across the base of the hero. */
.d-pagehero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to left, transparent, rgba(195, 166, 107, 0.55), transparent);
  z-index: -1;
}

.d-pagehero__grid {
  display: grid;
  gap: var(--d-space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .d-pagehero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--d-space-8); }
}
/* Same overflow guard as .d-hero__grid — see layer 09. Grid and flex children
   default to min-width:auto and will happily push past the track. */
.d-pagehero__grid > *,
.d-split > *,
.d-pillars > *,
.d-channels > *,
.d-social > *,
.d-hours > * { min-inline-size: 0; }

.d-pagehero__title {
  margin: 0;
  font-size: var(--d-fs-h1);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: var(--diaco-white);
  text-wrap: balance;
}
.d-pagehero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--diaco-soft-champagne), var(--diaco-muted-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d-pagehero__lede {
  margin: var(--d-space-4) 0 0;
  max-inline-size: 36rem;
  font-size: 1.03rem;
  line-height: 1.95;
  color: var(--diaco-soft-white);
}
.d-pagehero__cta { display: flex; flex-wrap: wrap; gap: var(--d-space-3); margin-block-start: var(--d-space-5); }
.d-pagehero__cta .d-btn { flex: 1 1 12rem; }
@media (min-width: 560px) { .d-pagehero__cta .d-btn { flex: 0 0 auto; } }

.d-pagehero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-space-2) var(--d-space-4);
  margin: var(--d-space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--d-fs-xs);
  color: var(--diaco-soft-white);
}
.d-pagehero__trust li { display: inline-flex; align-items: center; gap: var(--d-space-2); }
.d-pagehero__trust li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--diaco-muted-gold);
}

/* The hero aside is a real panel rather than a caption on a photograph, so the
   scrim/contrast argument from layer 09 does not apply and the glass reads
   cleanly at full strength. */
.d-pagehero__aside { display: flex; flex-direction: column; gap: var(--d-space-4); }

/* Compact fact list inside the hero aside (services, b2b, contact). */
.d-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--d-space-3); }
.d-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--d-space-3);
  font-size: var(--d-fs-sm);
  line-height: 1.8;
  color: var(--diaco-muted-text);
}
.d-facts__icon {
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(195, 166, 107, 0.13);
  border: 1px solid rgba(195, 166, 107, 0.26);
  color: var(--diaco-soft-champagne);
}
.d-facts__icon svg { inline-size: 17px; block-size: 17px; }
.d-facts strong { display: block; color: var(--diaco-white); font-weight: 700; }

/* ---------------------------------------------------------------- split -- */
.d-split { display: grid; gap: var(--d-space-6); align-items: start; }
@media (min-width: 960px) {
  .d-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--d-space-8); }
  .d-split--aside { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .d-split--wide-aside { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* -------------------------------------------------------------- pillars -- */
.d-pillars { display: grid; gap: var(--d-space-4); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .d-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .d-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A .d-card with an icon plate, a scope note and its own action row. */
.d-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-3);
  padding: var(--d-space-5);
  border-radius: var(--d-radius-lg);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
  transition: transform var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              background-color var(--d-dur) var(--d-ease),
              box-shadow var(--d-dur) var(--d-ease);
}
.d-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(195, 166, 107, 0.42);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: var(--d-shadow-md);
}
.d-pillar__top { display: flex; align-items: center; gap: var(--d-space-3); }
.d-pillar__icon {
  flex: none;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(195, 166, 107, 0.2), rgba(195, 166, 107, 0.06));
  border: 1px solid rgba(195, 166, 107, 0.28);
  color: var(--diaco-soft-champagne);
}
.d-pillar__icon svg { inline-size: 22px; block-size: 22px; }
.d-pillar__kicker { margin: 0; font-size: var(--d-fs-xs); font-weight: 700; color: var(--diaco-muted-gold); }
.d-pillar__title { margin: 0; font-size: var(--d-fs-h3); font-weight: 800; line-height: 1.55; color: var(--diaco-white); }
.d-pillar__text { margin: 0; font-size: var(--d-fs-sm); line-height: 1.95; color: var(--diaco-muted-text); }
.d-pillar__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--d-space-2); }
.d-pillar__list li {
  position: relative;
  padding-inline-start: var(--d-space-4);
  font-size: var(--d-fs-sm);
  line-height: 1.85;
  color: var(--diaco-soft-white);
}
.d-pillar__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--diaco-muted-gold);
  opacity: 0.85;
}
/* Pushes the action row down so all three cards align on one line. */
.d-pillar__foot { margin-block-start: auto; padding-block-start: var(--d-space-2); }
.d-pillar__note {
  margin: 0;
  padding: var(--d-space-3);
  border-radius: var(--d-radius-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--diaco-glass-border);
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--diaco-muted-text);
}

/* -------------------------------------------------------------- compare -- */
.d-compare { min-inline-size: 0; }
.d-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.d-compare table { inline-size: 100%; border-collapse: collapse; font-size: var(--d-fs-sm); }
.d-compare caption {
  padding-block-end: var(--d-space-3);
  text-align: start;
  font-size: 0.78rem;
  color: var(--diaco-muted-text);
}
.d-compare th,
.d-compare td {
  padding: var(--d-space-4);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--diaco-glass-border);
  line-height: 1.85;
}
.d-compare thead th {
  font-size: 1rem;
  font-weight: 800;
  color: var(--diaco-white);
  border-block-end-color: rgba(195, 166, 107, 0.4);
  white-space: nowrap;
}
.d-compare tbody th { font-weight: 700; color: var(--diaco-soft-white); white-space: nowrap; }
.d-compare td { color: var(--diaco-muted-text); }
.d-compare tbody tr:last-child th,
.d-compare tbody tr:last-child td { border-block-end: 0; }

/* Below 760px a 3-column table either scrolls sideways or squeezes to
   unreadable widths. Stacking each row as its own labelled card is the honest
   option: identical semantics, no horizontal scroll on a phone. The caption is
   kept in flow because a <caption> that is display:none is lost to some screen
   readers when the rest of the table becomes blocks. */
@media (max-width: 759px) {
  .d-compare thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .d-compare table,
  .d-compare tbody,
  .d-compare tr,
  .d-compare td { display: block; }
  .d-compare tr {
    margin-block-end: var(--d-space-3);
    padding: var(--d-space-3) var(--d-space-4);
    border-radius: var(--d-radius-md);
    border: 1px solid var(--diaco-glass-border);
    background: rgba(255, 255, 255, 0.035);
  }
  .d-compare th,
  .d-compare td {
    padding: var(--d-space-2) 0;
    border-block-end: 0;
    display: flex;
    gap: var(--d-space-3);
    justify-content: space-between;
  }
  .d-compare tbody th { white-space: normal; }
  .d-compare td::before {
    content: attr(data-label);
    flex: none;
    font-weight: 700;
    color: var(--diaco-soft-champagne);
  }
}

/* ------------------------------------------------------------- channels -- */
.d-channels { display: grid; gap: var(--d-space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .d-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-channel {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-3);
  padding: var(--d-space-5);
  border-radius: var(--d-radius-lg);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
  transition: transform var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease);
}
.d-channel:hover { transform: translateY(-3px); border-color: rgba(195, 166, 107, 0.42); }
.d-channel__icon {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(195, 166, 107, 0.13);
  border: 1px solid rgba(195, 166, 107, 0.26);
  color: var(--diaco-soft-champagne);
}
.d-channel__icon svg { inline-size: 21px; block-size: 21px; }
.d-channel__label { margin: 0; font-size: var(--d-fs-xs); font-weight: 700; color: var(--diaco-muted-gold); }
.d-channel__value {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--diaco-white);
  overflow-wrap: anywhere;
}
/* The phone / e-mail / address link IS the call to action in this card, so it
   carries the 44px target instead of being treated as an inline text link. */
.d-channel__value a {
  display: inline-flex;
  align-items: center;
  /* 46px, not 44px: a target sitting exactly on the accessibility minimum
     measures 43.999px under subpixel layout and fails intermittently. */
  min-block-size: 46px;
  padding-inline: var(--d-space-2);
  margin-inline-start: calc(var(--d-space-2) * -1);
  border-radius: var(--d-radius-sm);
  color: var(--diaco-white);
}
.d-channel__value a:hover { background: var(--diaco-glass-surface); color: var(--diaco-soft-champagne); }
.d-channel__value [dir="ltr"] { display: inline-block; }
.d-channel__note { margin: 0; font-size: 0.8rem; line-height: 1.85; color: var(--diaco-muted-text); }
.d-channel__foot { margin-block-start: auto; padding-block-start: var(--d-space-2); }

/* ---------------------------------------------------------------- hours -- */
.d-hours { display: grid; gap: var(--d-space-5); align-items: start; }
@media (min-width: 760px) { .d-hours { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--d-space-7); } }
.d-hours__rows { margin: 0; display: grid; gap: var(--d-space-2); }
.d-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--d-space-4);
  padding-block: var(--d-space-3);
  border-block-end: 1px solid var(--diaco-glass-border);
  font-size: var(--d-fs-sm);
}
.d-hours__row:last-child { border-block-end: 0; }
.d-hours__row dt { color: var(--diaco-soft-white); font-weight: 600; }
.d-hours__row dd { margin: 0; color: var(--diaco-muted-text); }
/* "Out of hours" is a state, so it is marked — not left to be inferred. */
.d-hours__row[data-closed="true"] dd { color: var(--diaco-soft-champagne); }

/* --------------------------------------------------------------- social -- */
.d-social { display: flex; flex-wrap: wrap; gap: var(--d-space-3); }
.d-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--d-space-2);
  min-block-size: 46px;
  padding: var(--d-space-2) var(--d-space-4);
  border-radius: var(--d-radius-pill);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  font-size: var(--d-fs-sm);
  font-weight: 600;
  color: var(--diaco-soft-white);
  transition: transform var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              color var(--d-dur) var(--d-ease);
}
.d-social a:hover { transform: translateY(-2px); border-color: rgba(195, 166, 107, 0.45); color: var(--diaco-white); }
.d-social svg { inline-size: 20px; block-size: 20px; flex: none; }

/* ------------------------------------------------------------- notfound -- */
.d-notfound {
  display: grid;
  gap: var(--d-space-6);
  justify-items: center;
  text-align: center;
  padding-block: var(--d-space-8) var(--d-space-9);
}
.d-notfound__code {
  margin: 0;
  font-family: "JetBrains Mono", "Vazirmatn", monospace;
  font-size: clamp(4rem, 18vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(108deg, #c07a16, #f2c15d 22%, #fff4b8 30%, #c98d20 44%, #f6d66d 56%, #c57d17 72%, #fff0a2 80%, #c98218);
  -webkit-background-clip: text;
  background-clip: text;
}
.d-notfound__title { margin: 0; font-size: var(--d-fs-h2); font-weight: 800; color: var(--diaco-white); }
.d-notfound__text { margin: 0; max-inline-size: 40rem; color: var(--diaco-muted-text); }
.d-notfound__links { display: flex; flex-wrap: wrap; gap: var(--d-space-3); justify-content: center; }
/* The 404 carries artwork too — it is often the only thing the visitor sees
   of the site. Kept wide and short so the gold code still leads. */
.d-notfound__art {
  --d-ph-ratio: 21 / 9;
  inline-size: min(100%, 46rem);
  box-shadow: 0 24px 60px -28px rgb(8 20 43 / 85%);
}

/* ---------------------------------------------------- print / media prefs */
@media print {
  .d-pagehero, .d-crumb { display: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .d-pagehero { background: var(--diaco-deep-navy); }
}
/* ═════════════════════════════════════════════ 21 · DRIVER + BLOG PAGES ══ */
/* The driver-recruit page and the blog listing. Same tokens as every other
   layer: no new colours, no new radii, no new shadows — only new components. */

/* --- driver: the four fleet figures ------------------------------------ */
.d-facts-strip {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--d-space-3);
}
@media (min-width: 860px) { .d-facts-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.d-facts-strip__item {
  display: grid;
  gap: var(--d-space-1);
  padding: var(--d-space-4);
  text-align: center;
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
}
.d-facts-strip__value {
  font-size: var(--d-fs-h2);
  font-weight: 800;
  line-height: 1.1;
  color: var(--diaco-muted-gold);
}
.d-facts-strip__label { font-size: 0.9rem; color: var(--diaco-muted-text); }

/* The honesty note. Present because these four figures cannot be substantiated
   from anything on this site — see PAGES-REDESIGN.md. */
.d-facts-strip__note {
  margin: var(--d-space-4) 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--diaco-muted-text);
  text-align: center;
}

/* --- driver: vehicle classes ------------------------------------------- */
.d-vehicles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.d-vehicle {
  display: grid;
  gap: var(--d-space-2);
  align-content: start;
  padding: var(--d-space-5);
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
  transition: transform .28s var(--d-ease), border-color .28s var(--d-ease);
}
.d-vehicle:hover { transform: translateY(-3px); border-color: var(--diaco-muted-gold); }
.d-vehicle__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  color: var(--diaco-soft-champagne);
  background: linear-gradient(150deg, var(--diaco-blue-surface), var(--diaco-midnight));
  border: 1px solid rgba(195, 166, 107, 0.42);
}
.d-vehicle__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.d-vehicle__title { margin: 0; font-size: var(--d-fs-h3); color: var(--diaco-white); }
.d-vehicle__text { margin: 0; font-size: 0.92rem; line-height: 1.8; color: var(--diaco-muted-text); }

/* --- driver: document checklist ----------------------------------------- */
.d-req {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--d-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .d-req { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.d-req__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--d-space-3);
  align-items: start;
  padding: var(--d-space-4);
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
}
.d-req__check {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--d-radius-pill);
  color: var(--diaco-ok);
  background: var(--diaco-ok-bg);
}
.d-req__check svg { inline-size: 1rem; block-size: 1rem; }
.d-req__body { display: grid; gap: var(--d-space-1); }
.d-req__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--diaco-white); }
.d-req__text { margin: 0; font-size: 0.88rem; line-height: 1.7; color: var(--diaco-muted-text); }

/* --- driver: the grouped application form ------------------------------ */
/* A fieldset per group. The legend is the only visually distinct part, so the
   grouping reads without adding chrome around each block of inputs. */
.d-fieldset {
  margin: 0 0 var(--d-space-5);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.d-fieldset:last-of-type { margin-block-end: 0; }
.d-fieldset > legend {
  padding: 0 0 var(--d-space-3);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--diaco-muted-gold);
}
.d-fieldset > legend + .d-form-grid { margin-block-start: 0; }

/* --- driver: tracking --------------------------------------------------- */
.d-track { padding: var(--d-space-6) var(--d-space-5); }
.d-track__box {
  display: grid;
  gap: var(--d-space-3);
  margin-block-start: var(--d-space-5);
  justify-items: stretch;
}
@media (min-width: 560px) {
  .d-track__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .d-track__box .d-btn { align-self: start; min-block-size: 3rem; }
}
.d-track .d-form-status { margin-block-start: var(--d-space-4); text-align: center; }

/* --- blog: post cards --------------------------------------------------- */
.d-postgrid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .d-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .d-postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.d-postcard { display: flex; }
.d-postcard__link {
  display: grid;
  gap: var(--d-space-3);
  align-content: start;
  inline-size: 100%;
  padding: var(--d-space-5);
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform .28s var(--d-ease), border-color .28s var(--d-ease);
}
.d-postcard__link:hover { transform: translateY(-3px); border-color: var(--diaco-muted-gold); }
.d-postcard__link:focus-visible { outline: none; box-shadow: var(--d-ring); }

.d-postcard__thumb {
  display: block;
  border-radius: var(--d-radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--diaco-deep-navy);
}
.d-postcard__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.d-postcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-2);
  font-size: 0.8rem;
  color: var(--diaco-muted-text);
}
.d-chip {
  padding: 0.15rem 0.6rem;
  border-radius: var(--d-radius-pill);
  font-size: 0.75rem;
  color: var(--diaco-muted-gold);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
}

.d-postcard__title {
  font-size: var(--d-fs-h3);
  font-weight: 800;
  line-height: 1.55;
  color: var(--diaco-white);
}
.d-postcard__excerpt { font-size: 0.9rem; line-height: 1.85; color: var(--diaco-muted-text); }
.d-postcard__more {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--diaco-muted-gold);
}
.d-postcard__more::after { content: ' ←'; }

/* --- blog: the empty state (the live site has no posts today) ---------- */
.d-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--d-space-4);
  padding: var(--d-space-7) var(--d-space-5);
}
.d-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  color: var(--diaco-soft-champagne);
  background: linear-gradient(150deg, var(--diaco-blue-surface), var(--diaco-midnight));
  border: 1px solid rgba(195, 166, 107, 0.42);
}
.d-empty__icon svg { inline-size: 1.7rem; block-size: 1.7rem; }
.d-empty__title { margin: 0; font-size: var(--d-fs-h3); color: var(--diaco-white); }
.d-empty__text {
  margin: 0;
  max-inline-size: 34rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--diaco-muted-text);
}
.d-empty .diaco-search,
.d-empty form[role="search"] { inline-size: 100%; max-inline-size: 26rem; }

/* --- blog: pager ------------------------------------------------------- */
.d-pager { margin-block-start: var(--d-space-6); }
.d-pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--d-space-2);
}
.d-pager .page-numbers {
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--d-space-2);
  border-radius: var(--d-radius-sm);
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-muted-text);
  text-decoration: none;
}
.d-pager .page-numbers.current,
.d-pager .page-numbers:hover {
  color: var(--diaco-midnight);
  background: var(--diaco-muted-gold);
  border-color: var(--diaco-muted-gold);
}

/* --- reduced transparency: the strip has no glass to lose ------------- */
@media (prefers-reduced-transparency: reduce) {
  .d-facts-strip__item,
  .d-vehicle,
  .d-req__item { background: var(--diaco-deep-navy); }
}
/* ═══════════════════════════════════════ 22 · ARTWORK · ARTICLE · LISTING ══ */

/* --- the <figure> every placeholder and thumbnail renders inside ------- */
.d-ph {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--d-radius-lg);
  background: var(--diaco-deep-navy);
  border: 1px solid var(--diaco-glass-border);
}
/* The box gets its ratio from inline-size alone, so the height is known on
   first paint with no dependency on the image decoding. The <img> is then
   taken out of flow entirely. Forcing `block-size: 100%` on the img against an
   auto-height <picture> instead left the height to re-resolve once the
   intrinsic size arrived, which measured as real layout shift. */
.d-ph picture {
  display: block;
  position: relative;
  inline-size: 100%;
  aspect-ratio: var(--d-ph-ratio, 16 / 9);
}
.d-ph img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.d-ph__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--d-space-3) var(--d-space-4);
  font-size: var(--d-fs-sm);
  line-height: 1.6;
  color: var(--diaco-soft-champagne);
  /* The caption sits on artwork, so it needs its own scrim rather than
     relying on the image happening to be dark. */
  background: linear-gradient(
    to top,
    rgb(8 20 43 / 88%) 0%,
    rgb(8 20 43 / 55%) 62%,
    transparent 100%
  );
  backdrop-filter: blur(2px);
}

/* --- hero with artwork: copy left, image right ------------------------- */
.d-pagehero--art .d-pagehero__grid {
  align-items: center;
}
.d-pagehero__media {
  min-inline-size: 0;
}
.d-pagehero__media .d-ph {
  --d-ph-ratio: 16 / 9;
  box-shadow: 0 24px 60px -28px rgb(8 20 43 / 85%);
}

/* --- gallery ----------------------------------------------------------- */
.d-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--d-space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.d-gallery__cell {
  min-inline-size: 0;
}
.d-gallery__item {
  --d-ph-ratio: 4 / 3;
}
.d-gallery .d-ph__cap {
  font-size: var(--d-fs-xs);
  padding: var(--d-space-2) var(--d-space-3);
}

/* --- listing hero (search / archive / standalone page) ----------------- */
.d-listhero {
  padding-block: calc(var(--d-space-7) + 2rem) var(--d-space-7);
  background:
    radial-gradient(
      120% 90% at 82% 0%,
      rgb(20 58 107 / 42%) 0%,
      transparent 62%
    ),
    var(--diaco-midnight);
  border-block-end: 1px solid var(--diaco-glass-border);
}
.d-listhero .d-crumb {
  margin-block-end: var(--d-space-4);
}
.d-listhero .d-pagehero__title {
  margin-block-end: var(--d-space-3);
}

/* --- single article ---------------------------------------------------- */
.d-article__head {
  padding-block: calc(var(--d-space-7) + 2rem) var(--d-space-6);
  background:
    radial-gradient(
      110% 80% at 78% 0%,
      rgb(20 58 107 / 40%) 0%,
      transparent 60%
    ),
    var(--diaco-midnight);
  border-block-end: 1px solid var(--diaco-glass-border);
}
.d-article__title {
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.45;
  color: var(--diaco-white);
  margin-block: var(--d-space-2) var(--d-space-4);
}
.d-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-2);
  font-size: var(--d-fs-sm);
  color: var(--diaco-muted-text);
}
.d-article__fig,
.d-article__art {
  margin-block: var(--d-space-6);
}
.d-article__fig img,
.d-article__art img {
  display: block;
  inline-size: 100%;
  border-radius: var(--d-radius-lg);
}
.d-article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-2);
  margin-block-start: var(--d-space-6);
  font-size: var(--d-fs-sm);
}
.d-article__tags a {
  /* Anchors need a 44px touch target; padding alone gave 33px, which fails
     the audit and is genuinely hard to hit on a phone. */
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0 var(--d-space-4);
  border-radius: var(--d-radius-pill);
  border: 1px solid var(--diaco-glass-border);
  background: var(--diaco-glass-surface);
  color: var(--diaco-soft-champagne);
  text-decoration: none;
}
.d-article__author {
  display: flex;
  align-items: center;
  gap: var(--d-space-4);
  margin-block-start: var(--d-space-6);
  padding: var(--d-space-4) var(--d-space-5);
  border-radius: var(--d-radius-lg);
}
.d-article__author p {
  margin: 0;
  color: var(--diaco-muted-text);
  font-size: var(--d-fs-sm);
}
.d-article__authorname {
  margin: 0 0 0.25rem;
  font-size: var(--d-fs-body);
  color: var(--diaco-white);
}

/* --- long-form prose ---------------------------------------------------
 * Persian body copy needs a short measure: long lines make the eye lose the
 * line return, which is worse than any amount of extra whitespace. */
.d-prose {
  max-inline-size: 68ch;
  margin-inline: auto;
  padding-block: var(--d-space-7);
  color: var(--diaco-muted-text);
  font-size: var(--d-fs-body);
  line-height: 2.1;
}
.d-prose > * + * {
  margin-block-start: var(--d-space-4);
}
.d-prose h2,
.d-prose h3,
.d-prose h4 {
  color: var(--diaco-white);
  line-height: 1.6;
  margin-block-start: var(--d-space-6);
}
.d-prose h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}
.d-prose h3 {
  font-size: var(--d-fs-h3);
}
.d-prose a {
  color: var(--diaco-muted-gold);
  text-underline-offset: 0.25em;
}
.d-prose strong {
  color: var(--diaco-soft-champagne);
}
.d-prose ul,
.d-prose ol {
  padding-inline-start: 1.4em;
}
.d-prose li + li {
  margin-block-start: var(--d-space-2);
}
.d-prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--d-space-4);
  border-inline-start: 2px solid var(--diaco-muted-gold);
  color: var(--diaco-soft-champagne);
}
.d-prose img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--d-radius-md);
}
.d-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--d-fs-sm);
}
.d-prose th,
.d-prose td {
  padding: var(--d-space-2) var(--d-space-3);
  border: 1px solid var(--diaco-glass-border);
  text-align: start;
}
.d-prose th {
  background: var(--diaco-glass-surface);
  color: var(--diaco-white);
}
.d-prose code {
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--diaco-glass-surface);
  color: var(--diaco-soft-champagne);
  font-size: 0.92em;
}

/* --- card thumb fallback: artwork inside the existing postcard frame --- */
.d-postcard__ph {
  --d-ph-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  block-size: 100%;
}
.d-postcard__thumb {
  /* The card thumb is a fixed-height slot; the picture fills it without
     introducing a second source of height. */
  aspect-ratio: 3 / 2;
}

/* --- narrow viewports --------------------------------------------------- */
@media (max-width: 60rem) {
  .d-pagehero--art .d-pagehero__media {
    margin-block-start: var(--d-space-6);
  }
  .d-article__author {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--d-space-3);
  }
}
@media (max-width: 34rem) {
  .d-gallery {
    grid-template-columns: 1fr;
  }
  .d-prose {
    line-height: 1.95;
  }
}

/* --- reduced transparency: artwork captions keep their scrim ----------- */
@media (prefers-reduced-transparency: reduce) {
  .d-ph__cap {
    background: var(--diaco-midnight);
    backdrop-filter: none;
  }
}

/* --- comments -----------------------------------------------------------
 * The one part of the single-post view that was still on the Hello Elementor
 * defaults. Structure lives in comments.php (d-* classes); wp_list_comments()
 * emits its own class names, so those are targeted here instead.
 * ------------------------------------------------------------------------ */
.d-comments__inner {
  padding: var(--d-space-6);
  display: grid;
  gap: var(--d-space-5);
}

.d-comments__head { display: grid; gap: var(--d-space-2); }
.d-comments__head .d-lede { color: var(--diaco-muted-text); margin: 0; }

/* The <ol> must not show its marker; depth is carried by indentation. */
.d-comments__list,
.d-comments__list .children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--d-space-3);
}
.d-comments__list .children {
  margin-block-start: var(--d-space-3);
  padding-inline-start: var(--d-space-4);
  border-inline-start: 1px solid var(--diaco-glass-border);
}

.d-comments__list > li { display: grid; }

.d-comments__list .comment-body {
  display: grid;
  gap: var(--d-space-3);
  padding: var(--d-space-4) var(--d-space-5);
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  box-shadow: var(--d-shadow-sm);
}
.d-comments__list .bypostauthor > .comment-body {
  border-color: var(--diaco-muted-gold);
  background: var(--diaco-blue-surface);
}

.d-comments__list .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-space-2) var(--d-space-3);
}
.d-comments__list .comment-author { display: inline-flex; align-items: center; gap: var(--d-space-2); }
.d-comments__list .comment-author .avatar {
  border-radius: var(--d-radius-pill);
  border: 1px solid var(--diaco-glass-border);
}
.d-comments__list .fn {
  font-weight: 600;
  color: var(--diaco-white);
}
.d-comments__list .bypostauthor .fn::after {
  content: "· نویسنده";
  color: var(--diaco-muted-gold);
  font-size: var(--d-fs-xs);
}
.d-comments__list .comment-metadata { color: var(--diaco-muted-text); font-size: var(--d-fs-xs); }
.d-comments__list .comment-metadata a { color: inherit; text-decoration: none; }
.d-comments__list .comment-metadata a:hover { color: var(--diaco-white); }

.d-comments__list .comment-content { color: var(--diaco-white); line-height: var(--d-lh); }
.d-comments__list .comment-content p { margin-block: 0 var(--d-space-2); }
.d-comments__list .comment-content p:last-child { margin-block-end: 0; }

.d-comments__list .reply .comment-reply-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;          /* standalone control, not a word in a sentence */
  font-size: var(--d-fs-xs);
  color: var(--diaco-muted-gold);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--d-radius-pill);
  padding: var(--d-space-1) var(--d-space-4);
  transition: background var(--d-dur-fast) var(--d-ease), border-color var(--d-dur-fast) var(--d-ease);
}
.d-comments__list .reply .comment-reply-link:hover {
  border-color: var(--diaco-glass-border);
  background: var(--diaco-glass-surface);
}

/* Pingbacks read as comments otherwise; keep them quiet. */
.d-comments__list .pingback > .comment-body { box-shadow: none; opacity: .85; }

.d-comments__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--d-space-3);
}
.d-comments__nav .nav-previous,
.d-comments__nav .nav-next { font-size: var(--d-fs-sm); }
.d-comments__nav .nav-previous a,
.d-comments__nav .nav-next a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--d-space-3);
  border-radius: var(--d-radius-pill);
  color: var(--diaco-muted-gold);
  text-decoration: none;
  transition: background var(--d-dur-fast) var(--d-ease);
}
.d-comments__nav .nav-previous a:hover,
.d-comments__nav .nav-next a:hover { background: var(--diaco-glass-surface); }
.d-comments__nav .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.d-comments__closed {
  margin: 0;
  padding: var(--d-space-3) var(--d-space-4);
  border-radius: var(--d-radius-md);
  background: var(--diaco-blue-surface);
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-muted-text);
}

.d-comments__form { display: grid; gap: var(--d-space-4); }
.d-comments__form-title { margin: 0; font-size: var(--d-fs-h3); }
.d-comments__notes { margin: 0; color: var(--diaco-muted-text); font-size: var(--d-fs-xs); }
.d-comments__field { display: grid; gap: var(--d-space-1); margin: 0; }
.d-comments__label { color: var(--diaco-white); font-size: var(--d-fs-sm); }
.d-comments__req { color: var(--diaco-muted-gold); margin-inline-start: 2px; }
.d-comments__field--body textarea { resize: vertical; min-block-size: 9rem; }

/* WordPress nests author/email in a <p> of its own inside comment-form. */
.d-comments__form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--d-space-2);
  color: var(--diaco-muted-text);
  font-size: var(--d-fs-xs);
}
.d-comments__form .comment-form-cookies-consent label { display: inline-flex; align-items: center; gap: var(--d-space-2); }
.d-comments__form .comment-form-logged-in-as { color: var(--diaco-muted-text); font-size: var(--d-fs-xs); }
.d-comments__form .submit { justify-self: start; }
.d-comments__form p { margin: 0; }

@media (max-width: 767px) {
  .d-comments__inner { padding: var(--d-space-4); }
  .d-comments__list .children { padding-inline-start: var(--d-space-3); }
}

/* ═════════════════════════════════════════════════════════════ 24 · FOOTER ══ */
/* The last region still carried by blog.css alone. It rendered, but on legacy
   rems and its own `margin: 2rem auto`, which put the footer text column
   16–72px out from the page shell at every measured width (390/768/900/1200/
   1440). It also carried a six-rule inline <style> block in footer.php, the
   only surface in the theme styled from the template instead of the system.

   Alignment is now structural rather than tuned: the outer .diaco-footer is
   the container box and a .d-shell inside it supplies the gutter, so the
   footer's text lands on the page column by construction. Changing either
   breakpoint here alone WILL drift again — _preview/check-footer.js asserts
   the two columns agree at five widths so that cannot happen silently.

   No backdrop-filter here: .glass-card (tokens.css) already paints the glass
   and layer 04's restraint rule allows only .d-glass to. */

/* Container box — mirrors .diaco-container, so the panel lands on the column. */
.diaco-footer {
  margin: 0 auto;
  width: 100%;
  max-width: var(--d-container);
  padding: 0 var(--d-space-4);
  border-radius: 0;
}
@media (min-width: 768px) {
  .diaco-footer { padding-inline: 1.5rem; }
}

/* The glass panel. Inline padding comes from .d-shell; only the block rhythm
   and the radius are owned here. */
.diaco-footer__panel {
  padding-block: var(--d-space-6);
  margin-block: var(--d-space-8) 0;
  border-radius: var(--d-radius-lg);
}

.diaco-footer__grid {
  display: grid;
  gap: var(--d-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .diaco-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.diaco-footer h2 {
  margin: 0 0 var(--d-space-2);
  font-size: var(--d-fs-h3);
  font-weight: 800;
  line-height: var(--d-lh-tight);
}
.diaco-footer h3 {
  margin: 0 0 var(--d-space-3);
  font-size: var(--d-fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--diaco-soft-champagne);
}
.diaco-footer p,
.diaco-footer li {
  font-size: var(--d-fs-sm);
  line-height: var(--d-lh);
  color: var(--diaco-muted-text);
}
.diaco-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Footer nav is the one place on the site where the links are the whole
   surface, so they get the 44px target the comment thread was fixed to. */
.diaco-footer li + li { margin-top: var(--d-space-1); }
.diaco-footer li > a {
  display: inline-flex;
  align-items: center;
  /* Short Persian words (e.g. «بلاگ») measure ~34px on their own, which is
     past the WCAG 2.5.8 floor but below the 44px bar the rest of the theme
     holds. The min-inline-size costs nothing but trailing space. */
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline-end: var(--d-space-2);
  color: var(--diaco-muted-text);
  transition: color var(--d-dur) var(--d-ease);
}
.diaco-footer li > a:hover { color: var(--diaco-soft-champagne); }
.diaco-footer a:focus-visible { border-radius: var(--d-radius-sm); }

.diaco-footer__bottom {
  margin-top: var(--d-space-6);
  padding-top: var(--d-space-4);
  border-top: 1px solid var(--diaco-glass-border);
  text-align: center;
  font-size: var(--d-fs-xs);
  color: var(--diaco-muted-text);
}

/* --- social marks ------------------------------------------------------- */
.diaco-socials {
  display: flex;
  gap: var(--d-space-3);
  margin-top: var(--d-space-4);
}
.diaco-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--d-radius-md);
  background: var(--diaco-glass-surface);
  border: 1px solid var(--diaco-glass-border);
  color: var(--diaco-soft-white);
  transition: transform var(--d-dur) var(--d-ease),
              border-color var(--d-dur) var(--d-ease),
              box-shadow var(--d-dur) var(--d-ease);
}
.diaco-socials a:hover { transform: translateY(-3px); }
.diaco-socials svg { inline-size: 22px; block-size: 22px; display: block; }
.diaco-socials .soc-bale:hover {
  border-color: var(--diaco-brand-bale);
  box-shadow: 0 8px 22px var(--diaco-ok-bg);
}
.diaco-socials .soc-ig:hover {
  border-color: var(--diaco-brand-instagram);
  box-shadow: 0 8px 22px rgba(214, 36, 159, 0.35);
}
.diaco-socials .soc-x:hover {
  background: var(--diaco-brand-x);
  border-color: var(--diaco-brand-x);
  color: var(--diaco-midnight);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
  .diaco-footer__panel { padding-block: var(--d-space-5); margin-block-start: var(--d-space-6); }
}