/* =========================================================
   ELESONE — Industrial-premium theme layer
   Loaded last (after base, seo-pages, lead-form). Visual only: colors, depth, motif,
   type scale and hover states, built on the palette tokens in base.css.

   Contents
   1. Type scale
   2. Signature motif: elevator guide rails
   3. Header (dark petrol glass) + contact dock
   4. Hero (dark, metallic) + image treatment
   5. Buttons & links (hover life)
   6. Content blocks: quick answer, tables, steps, FAQ
   7. Cards: hierarchy, depth, hover
   8. Dark surfaces: CTA band, consultation CTA, footer
   9. Lead form & dialogs
   10. Technical numerals (mono)
   11. Reduced motion
   ========================================================= */

/* ---------------------------------------------------------
   1. Type scale — clear, deliberate jumps (H1 ≫ H2 ≫ H3).
   No letter-spacing on Persian headings: it breaks cursive joins.
   --------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink-900); }
.page-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 4.2vw, 3.6rem);
  line-height: 1.22;
}
.content-section h2,
.section-head h2 {
  font-size: clamp(1.75rem, 2.7vw, 2.5rem);
  line-height: 1.3;
  color: var(--petrol-800);
}
.content-section h3 { font-size: 1.2rem; line-height: 1.5; }
.spec-heading { font-size: 1.3rem !important; color: var(--petrol-800); }
p { color: var(--text-secondary); }

/* ---------------------------------------------------------
   2. Signature motif — paired guide rails, like an elevator shaft seen face-on.
   Used on: hero, home form band, consultation CTAs, footer, and as the double-hairline
   section break. Low opacity, petrol-toned; never on cards or body copy.
   --------------------------------------------------------- */
.rails,
.page-hero::before,
.cta-band::before,
.consult-cta::before,
.site-footer::before {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 72px,
    var(--rail) 72px 73px,
    transparent 73px 81px,
    var(--rail) 81px 82px,
    transparent 82px 168px);
}
/* Section break: a double hairline instead of a single rule — two rails seen edge-on. */
.content-section + .content-section {
  border-top: 0;
  background-image:
    linear-gradient(var(--rail-line), var(--rail-line)),
    linear-gradient(var(--rail-line), var(--rail-line));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}
.content-section + .content-section { --rail-line: rgba(14, 58, 71, 0.14); }

/* ---------------------------------------------------------
   3. Header — dark petrol glass, still driven by --glass (0 → 1) from js/header.js.
   --------------------------------------------------------- */
.site-header { border-bottom-color: rgba(210, 171, 94, calc(0.10 + 0.18 * var(--glass))); }
.site-header::before {
  background: rgba(14, 58, 71, calc(0.78 + 0.17 * var(--glass)));
  box-shadow: 0 calc(12px * var(--glass)) calc(34px * var(--glass)) rgba(7, 20, 26, calc(0.28 * var(--glass)));
}
.site-logo span { color: var(--gold-500); } /* same gold as the logo icon */
.nav-burger span { background: var(--text-on-dark); }

@media (min-width: 901px) {
  .main-nav > ul > li > a,
  .main-nav > ul > li > button.nav-toggle { color: #CFDFE2; transition: color 0.15s ease; }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li:hover > button.nav-toggle,
  .main-nav > ul > li > button.nav-toggle:hover,
  .main-nav > ul > li.is-open > button.nav-toggle { color: #FFFFFF; }
  .main-nav > ul > li > a.is-active,
  .page-header .main-nav > ul > li > a.is-active,
  .main-nav > ul > li > button.nav-toggle.is-active,
  .main-nav > ul > li.has-parent-link:has(> button.nav-toggle.is-active) > a { color: var(--gold-500); }
  /* Active item gets a gold rail underneath. */
  .main-nav > ul > li > a { position: relative; }
  .main-nav > ul > li > a.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0.85rem;
    bottom: 0.45rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-500);
  }
  .has-dropdown .dropdown { border-color: var(--border); box-shadow: var(--shadow-lg); }
}
.dropdown li a.is-active { color: var(--petrol-700); }
.dropdown li a:hover { background: var(--petrol-050); }
/* Mobile off-canvas panel stays light: petrol text, gold only as a marker. */
@media (max-width: 900px) {
  .main-nav > ul > li > a.is-active,
  .main-nav > ul > li.is-open > button.nav-toggle,
  .main-nav > ul > li.is-open > a,
  .main-nav .dropdown li a.is-active { color: var(--petrol-700); }
  .main-nav > ul > li > a.is-active { box-shadow: inset -3px 0 0 var(--gold-500); padding-inline-start: 0.75rem; }
}

/* Contact dock — same petrol glass as the bar it hangs from. */
.contact-dock {
  border-color: rgba(234, 242, 243, 0.10);
  background: rgba(14, 58, 71, calc(0.80 + 0.15 * var(--glass)));
  box-shadow: 0 12px 30px rgba(7, 20, 26, calc(0.18 + 0.12 * var(--glass)));
}
.dock-btn { color: var(--text-on-dark); }
.dock-btn svg { color: var(--gold-500); }
.dock-btn:hover { background: rgba(234, 242, 243, 0.10); }
.dock-btn--wa:hover svg { color: #5FD08F; }
.dock-btn--consult { background: var(--gold-500); color: var(--text-on-gold); box-shadow: var(--shadow-gold); }
.dock-btn--consult svg { color: var(--text-on-gold); }
.dock-btn--consult:hover { background: var(--gold-600); transform: translateY(-1px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before, .contact-dock { background: rgba(14, 58, 71, 0.97) !important; }
}

/* ---------------------------------------------------------
   4. Hero — dark metallic petrol with the rail motif behind the copy.
   --------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(31, 107, 128, 0.55) 0%, transparent 55%),
    var(--grad-petrol);
  border-bottom: 1px solid rgba(210, 171, 94, 0.35);
  color: var(--text-on-dark);
}
.page-hero::before {
  --rail: var(--rail-line-on-dark);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
  mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
}
.page-hero h1 { color: #FFFFFF; }
.page-hero .lead { color: #C5D6D9; }
.page-hero .eyebrow { color: var(--gold-500); display: inline-flex; align-items: center; gap: 0.6rem; }
.page-hero .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--gold-500); border-radius: 2px; }
.page-hero figcaption { color: #8FAAB0; }
.page-hero .btn-outline { border-color: rgba(234, 242, 243, 0.35); color: var(--text-on-dark); }
.page-hero .btn-outline:hover { border-color: var(--text-on-dark); background: rgba(234, 242, 243, 0.08); }

/* Image treatment: petrol duotone-style overlay (CSS only, files untouched) + engineered frame. */
.page-hero figure { position: relative; }
.page-hero figure::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(280px, 32vw, 420px);
  border-radius: var(--radius-lg);
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(14, 58, 71, 0) 35%, rgba(14, 58, 71, 0.55) 100%),
    linear-gradient(rgba(21, 82, 100, 0.16), rgba(21, 82, 100, 0.16));
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(234, 242, 243, 0.10);
}
.page-hero img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(7, 20, 26, 0.4); }
@media (max-width: 900px) { .page-hero figure::after { height: 320px; } }
@media (max-width: 600px) { .page-hero figure::after { height: 260px; } }

.eyebrow { color: var(--petrol-700); }
.breadcrumb a:hover { color: var(--petrol-700); }

/* ---------------------------------------------------------
   5. Buttons & links — confident hover/focus, no scroll animation anywhere.
   --------------------------------------------------------- */
.btn { border-radius: 10px; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.btn-primary { background: var(--gold-500); color: var(--text-on-gold); box-shadow: 0 2px 0 rgba(184, 134, 63, 0.35); }
.btn-primary:hover { background: var(--gold-600); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(184, 134, 63, 0.4); }
.btn-outline { border-color: var(--steel-200); color: var(--petrol-800); }
.btn-outline:hover { border-color: var(--petrol-700); background: var(--petrol-050); transform: translateY(-2px); }

/* Text links: petrol, with a gold underline that sweeps in from the reading start on hover. */
.text-link,
.comparison-table a,
.faq-answer a,
.nap-list a {
  color: var(--petrol-700);
  text-decoration: none;
  background-image:
    linear-gradient(var(--gold-500), var(--gold-500)),
    linear-gradient(rgba(21, 82, 100, 0.35), rgba(21, 82, 100, 0.35));
  background-size: 0 2px, 100% 1px;
  background-position: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.3s ease, color 0.15s ease;
}
.text-link:hover, .text-link:focus-visible,
.comparison-table a:hover, .faq-answer a:hover, .nap-list a:hover {
  color: var(--petrol-800);
  background-size: 100% 2px, 100% 1px;
}

/* ---------------------------------------------------------
   6. Content blocks
   --------------------------------------------------------- */
.section-alt { background: var(--petrol-050); }
.quick-answer {
  border-right: 3px solid var(--petrol-800);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--petrol-050);
  padding: 1.15rem 1.4rem;
}
.quick-answer strong { color: var(--ink-900); }
.next-step { border-right-color: var(--petrol-800); background: var(--petrol-050); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

.comparison-wrap { border-color: var(--border); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm); }
.comparison-table thead th { background: var(--petrol-800); color: var(--text-on-dark); border-bottom-color: var(--petrol-700); }
.comparison-table tbody th { background: var(--petrol-050); color: var(--petrol-800); }
.comparison-table tbody tr { transition: background-color 0.15s ease; }
.comparison-table tbody tr:hover td { background: rgba(234, 242, 243, 0.55); }
.spec-table thead tr + tr th { background: var(--petrol-700); color: #D7E5E8; }
.spec-table tbody tr:nth-child(even) td, .spec-table tbody tr:nth-child(even) th { background: #F1F6F6; }

.structure-figure, .nap-list > div { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.feature-list li::before { background: var(--petrol-700); box-shadow: 2px 2px 0 var(--gold-500); }

.steps-list li { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.steps-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.steps-list li::before { background: var(--grad-petrol-soft); color: var(--gold-500); box-shadow: 0 0 0 3px rgba(210, 171, 94, 0.25); }

.faq-list summary:hover, .faq-list details[open] > summary { color: var(--petrol-700); }
.faq-list details { transition: background-color 0.15s ease; }
.faq-list details[open] { background: linear-gradient(90deg, transparent, rgba(234, 242, 243, 0.6)); }

.related-links li::before { color: var(--gold-600); }

/* ---------------------------------------------------------
   7. Cards — hierarchy instead of identical tiles; petrol depth; lift on hover.
   --------------------------------------------------------- */
.card, .type-item, .home-link-grid a {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover, .home-link-grid a:hover {
  transform: translateY(-4px);
  border-color: rgba(21, 82, 100, 0.35);
  box-shadow: var(--shadow-lg);
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(7, 20, 26, 0.45), rgba(14, 58, 71, 0.08) 55%, transparent);
  transition: opacity 0.25s ease;
}
.card-media img { transition: transform 0.4s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card:hover .card-media::after { opacity: 0.55; }
/* Photo badges: one consistent dark pill + light text for both badges (status at the reading
   start, "temporary image" at the end, marked by a gold dot). Each is capped at half the frame
   so the two can never meet; the 4:3 .card-media frame keeps them at the same spot on every card. */
.card-badge,
.card-badge--placeholder {
  z-index: 1;
  top: 0.75rem;
  right: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(50% - 1rem);
  min-height: 26px;
  padding: 0.1rem 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(234, 242, 243, 0.14);
  border-radius: 999px;
  background: rgba(7, 20, 26, 0.84);
  color: var(--text-on-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.card-badge { inset-inline-start: 0.75rem; }
.card-badge--placeholder { inset-inline-start: auto; inset-inline-end: 0.75rem; }
.card-badge--placeholder::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }
/* Card caption colors are set together with the card's own background, so they stay readable
   whatever section (light or petrol) the card sits in. */
.card-body h3, .card-body h3 a { color: var(--ink-900); }
.card-body p { color: var(--text-secondary); }
.card-body h3 a:hover { color: var(--petrol-700); }
.card-body h3 a { transition: color 0.15s ease; }
.card-body h3 a:hover { color: var(--petrol-700); }

/* Active card (hover-follows): one card per [data-follow-active] grid wears the featured look —
   petrol body, light copy, gold edges — and js/card-follow.js moves it to whichever card the
   mouse enters or keyboard focus reaches; it stays put on mouseleave. Gradients can't
   transition, so the petrol body is a ::before layer that fades in; the gold edges are shadows
   with a constant layer count, and the link underline color is a registered property, so every
   part animates together on the outgoing and incoming card.
   Before the script runs (and without JS) the grid's first card is the active one. */
@property --tl-line { syntax: "<color>"; inherits: true; initial-value: rgba(21, 82, 100, 0.35); }
.text-link { background-image: linear-gradient(var(--gold-500), var(--gold-500)), linear-gradient(var(--tl-line), var(--tl-line)); }

.card {
  --card-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-sm), inset 0 3px 0 transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.3s var(--card-ease),
    border-color 0.3s var(--card-ease);
}
.card:hover { box-shadow: var(--shadow-lg), inset 0 3px 0 transparent; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-petrol);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--card-ease);
}
.card-body { background: transparent; box-shadow: inset 0 3px 0 transparent; transition: box-shadow 0.3s var(--card-ease); }
.card-body h3, .card-body h3 a, .card-body p { transition: color 0.3s var(--card-ease); }
.card .text-link { transition: background-size 0.3s ease, color 0.3s var(--card-ease), --tl-line 0.3s var(--card-ease); }

:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) {
  border-color: transparent;
  box-shadow: var(--shadow-md), inset 0 3px 0 var(--gold-500);
}
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child):hover {
  box-shadow: var(--shadow-lg), inset 0 3px 0 var(--gold-500);
}
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child)::before { opacity: 1; }
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) .card-body { box-shadow: inset 0 3px 0 var(--gold-500); }
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) .card-body h3,
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) .card-body h3 a { color: #FFFFFF; }
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) .card-body p { color: #C5D6D9; }
:is(.card--active, [data-follow-active]:not(.is-follow-ready) > .card:first-child) .text-link { color: var(--gold-500); --tl-line: rgba(210, 171, 94, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .card, .card::before, .card-body, .card-body h3, .card-body h3 a, .card-body p, .card .text-link { transition: none; }
}

/* Type items: secondary emphasis — a petrol rail on the reading edge that turns gold on hover. */
.type-item { position: relative; overflow: hidden; }
.type-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--petrol-050);
  transition: background-color 0.2s ease;
}
.type-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.type-item:hover::before { background: var(--gold-500); }
.type-item h3 { color: var(--petrol-800); }

.home-link-grid a { position: relative; }
.home-link-grid strong { color: var(--petrol-800); transition: color 0.15s ease; }
.home-link-grid a::after {
  content: "";
  position: absolute;
  inset-inline: 1rem;
  bottom: 0;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.home-link-grid a:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   8. Dark surfaces — metallic petrol gradients with the rail motif.
   --------------------------------------------------------- */
.cta-band,
.consult-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-petrol);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-lg);
}
.cta-band { border-radius: 16px; border-top: 3px solid var(--gold-500); }
.cta-band::before,
.consult-cta::before {
  --rail: var(--rail-line-on-dark);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%);
  mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.cta-band h2 { color: #FFFFFF; }
.cta-band__points li { color: #D7E5E8; }

/* The consultation CTA is the page's primary call to action: gold edge, light copy. */
.next-step.consult-cta {
  border-right: 3px solid var(--gold-500);
  border-radius: 0 16px 16px 0;
  background: var(--grad-petrol);
  padding: 1.6rem 1.75rem;
}
.consult-cta p { color: #C5D6D9; }
.consult-cta .consult-cta__title { color: #FFFFFF; font-size: 1.25rem; }

.site-footer {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--petrol-800) 0%, var(--ink-900) 70%);
  border-top: 1px solid rgba(210, 171, 94, 0.35);
}
.site-footer::before {
  --rail: var(--rail-line-on-dark);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
}
.site-footer a { transition: color 0.15s ease; }
.footer-bottom { border-top-color: rgba(234, 242, 243, 0.08); }

/* ---------------------------------------------------------
   9. Lead form & dialogs — recolored only; behavior untouched.
   --------------------------------------------------------- */
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form select, .lead-form textarea { border-color: var(--steel-200); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--petrol-700); box-shadow: 0 0 0 3px rgba(21, 82, 100, 0.18); }
.lead-chip span { border-color: var(--steel-200); }
.lead-chip:hover span { border-color: var(--petrol-700); }
.lead-chip input:checked + span { border-color: var(--petrol-800); background: var(--petrol-050); color: var(--petrol-800); box-shadow: inset 0 0 0 1px var(--petrol-800), inset 0 -3px 0 var(--gold-500); }
.lead-form-section .lead-form,
.cta-band--form .lead-form { border-color: var(--border); border-radius: 16px; box-shadow: var(--shadow-md); }
.cta-band--form .lead-form { box-shadow: 0 24px 60px rgba(7, 20, 26, 0.45); }
.lead-dialog::backdrop { background: rgba(7, 20, 26, 0.55); }
.lead-dialog__panel { box-shadow: 0 30px 80px rgba(7, 20, 26, 0.38); border-top: 3px solid var(--gold-500); }
.lead-dialog .eyebrow { color: var(--petrol-700); }
.lead-dialog__close { background: var(--petrol-050); color: var(--petrol-800); }
.lead-dialog__close:hover { background: #D6E5E7; }
.lead-dialog__icon { background: var(--petrol-050); color: var(--petrol-700); }
.lead-dialog__head h2 { color: var(--petrol-800); }

/* ---------------------------------------------------------
   10. Technical numerals — monospace, in small doses: spec-table column keys,
   phone numbers. Persian digits fall back to Vazirmatn with tabular figures.
   --------------------------------------------------------- */
.spec-table thead tr + tr th,
.spec-table td,
.dock-number,
.nap-list a[dir="ltr"],
.footer-contact a[dir="ltr"],
.tel-link bdi {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.spec-table td { color: var(--ink-900); font-weight: 600; }
.spec-table thead small { font-family: var(--font-sans); color: #B8CCD0; }

/* ---------------------------------------------------------
   11. Reduced motion — keep colors, drop movement.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .type-item, .home-link-grid a, .steps-list li, .card-media img, .text-link, .home-link-grid a::after { transition: none; }
  .btn:hover, .card:hover, .type-item:hover, .home-link-grid a:hover, .steps-list li:hover, .dock-btn--consult:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
}

/* ---------------------------------------------------------
   12. Hero under the glass header — on pages whose first section is the hero, the hero slides
   up beneath the sticky header so the bar's transparent state sits over matching petrol
   (instead of turning grey over sand) and becomes frosted as content scrolls under it.
   --header-total is published by js/header.js; the values below are the no-JS fallback.
   --------------------------------------------------------- */
:root { --header-total: var(--header-h); }
.page-main:has(> section.page-hero:first-of-type) { margin-top: calc(-1 * var(--header-total)); }
.page-main:has(> section.page-hero:first-of-type) > section.page-hero:first-of-type {
  padding-top: calc(var(--header-total) + clamp(2.5rem, 5vw, 4.5rem));
}
@media (min-width: 901px) {
  /* Leave room for the contact tab hanging below the bar. */
  .page-main:has(> section.page-hero:first-of-type) > section.page-hero:first-of-type {
    padding-top: calc(var(--header-total) + 3.25rem + clamp(1.5rem, 3vw, 3rem));
  }
}

/* ---------------------------------------------------------
   12b. Home hero (index.php) — centered, full-bleed photo behind the copy.
   The photo is a real <img> (LCP element) filling the section; a petrol overlay keeps
   white text above WCAG AA on every part of it. The section fills the viewport below the
   header (it slides under the glass header, see 12); desktop also clears the contact tab.
   --------------------------------------------------------- */
.page-main:has(> section.page-hero:first-of-type) > section.page-hero.home-hero:first-of-type {
  display: flex;
  align-items: center;
  min-height: 100svh; /* = header height + calc(100svh - header height) of visible hero */
  padding-top: calc(var(--header-total) + 1.5rem);
  padding-bottom: 2.5rem;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(7, 20, 26, 0.30) 0%, transparent 100%),
    linear-gradient(180deg, rgba(14, 58, 71, 0.78) 0%, rgba(11, 45, 56, 0.82) 55%, rgba(7, 20, 26, 0.90) 100%);
}
.page-hero img.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% 50%; /* keeps the glass elevator cabin in frame on narrow screens */
  border-radius: 0;
  box-shadow: none;
}
.page-hero .container.home-hero__inner {
  display: flex;
  gap: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero h1.home-hero__title {
  max-width: none;
  margin: 0;
  color: #FFFFFF;
  font-size: inherit;
  line-height: 1.2;
}
.home-hero__brand {
  display: block;
  font-size: clamp(3.2rem, 1.2rem + 9vw, 8.5rem);
  font-weight: 800;
  /* fonts/Vazir.ttf ships a single (regular) weight, so 800 is not rendered; a thin stroke gives
     the brand line its bold weight without touching the font setup of the rest of the site. */
  -webkit-text-stroke: 0.028em currentColor;
  line-height: 1.05;
  letter-spacing: 0.06em; /* Latin brand only — never on Persian text */
  white-space: nowrap;
  padding-inline-start: 0.06em; /* balances the trailing tracking so the word is optically centered */
}
.home-hero__subtitle {
  display: block;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  color: #D5E3E6;
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.6;
}
.page-hero .hero-actions.home-hero__actions {
  order: 0; /* the generic mobile hero rule moves the copy column first; here the buttons stay under the H1 */
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 901px) {
  /* Leave room for the contact tab hanging below the header bar. */
  .page-main:has(> section.page-hero:first-of-type) > section.page-hero.home-hero:first-of-type {
    padding-top: calc(var(--header-total) + 3.25rem + 1.5rem);
  }
}
@media (max-width: 600px) {
  .page-hero .hero-actions.home-hero__actions { width: 100%; max-width: 300px; }
}

/* ---------------------------------------------------------
   13. Service icons (sprite: includes/service-icons.php)
   Tile 46px, icon 26px, 1.75 stroke: petrol line + gold accent. Hover is the only motion.
   --------------------------------------------------------- */
.service-icon-tile {
  --si-accent: var(--gold-600);
  --si-bg: var(--petrol-050);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--petrol-050);
  color: var(--petrol-800);
  box-shadow: inset 0 0 0 1px rgba(21, 82, 100, 0.10);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.service-icon { display: block; width: 26px; height: 26px; overflow: visible; }

/* Homepage service cards: icon beside the title; same card size and 3-column grid as before. */
.home-link-grid--services a {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 0.85rem;
  row-gap: 0.3rem;
  align-content: start;
}
.home-link-grid--services .service-icon-tile { grid-row: 1 / span 2; }
.home-link-grid--services a strong { align-self: center; }
.home-link-grid--services a:hover .service-icon-tile {
  --si-accent: var(--gold-500);
  --si-bg: var(--petrol-800);
  background: var(--petrol-800);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Service pages: the page's own icon heads its top highlight-card row. */
.service-icon-tile--heading { display: grid; margin-bottom: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .service-icon-tile { transition: none; }
  .home-link-grid--services a:hover .service-icon-tile { transform: none; }
}