/* ==========================================================================
   Sefyan Moving — built stylesheet (Sprint 05P-01)
   GENERATED FILE — do not edit directly.
   Source: assets/css/main.css manifest + assets/css/src/*.css partials.
   Rebuild with: php bin/build-css.php
   ========================================================================== */

/* --- src/base/_tokens.css --- */
/* ==========================================================================
   CSS Custom Properties — Design Tokens
   SEFYAN DESIGN TOKENS V1 (Sprint 01 foundation reconstruction)
   Brand: سفيان لنقل وتغليف الأثاث
   Palette: Primary Dark + Primary Teal + Warm Accent + Warm Background

   NOTE: token *names* (--alhur-*) are intentionally retained from the Alhur
   fork to avoid rewriting every component CSS file that consumes them (see
   Sprint 01 report for the deferred namespace migration). Only VALUES were
   converted to the Sefyan V1 palette below. Where a token's original role
   didn't map 1:1 to the new 3-color brand palette, that is called out.
   ========================================================================== */

:root {
    /* ── Brand Primary — Primary Dark (#17333A) ── */
    --alhur-primary: #17333A;
    --alhur-primary-light: #1E6264;  /* = Sefyan "Primary Teal" */
    --alhur-primary-dark: #0E2024;   /* derived: darker shade of Primary Dark */

    /* ── Brand Secondary — now the Sefyan Accent (#D98B43) ── */
    --alhur-secondary: #D98B43;
    --alhur-secondary-light: #E3A872;
    --alhur-secondary-dark: #AE6F36;

    /* ── Accent / Background — Sefyan Warm Background (#F7F4EE) ── */
    --alhur-accent: #F7F4EE;
    --alhur-accent-warm: #EBE8E2;

    /* ── Surfaces ── */
    --alhur-surface: #FFFFFF;
    --alhur-surface-alt: #F7F4EE;

    /* ── Semantic ── */
    --alhur-whatsapp: #25D366;
    --alhur-danger: #B42318;
    --alhur-success: #16A34A;
    --alhur-warning: #D97706;

    /* ── Neutrals ── */
    --alhur-white: #FFFFFF;
    --alhur-gray-100: #F5F5F4;
    --alhur-gray-200: #E7E5E4;
    --alhur-gray-300: #D6D3D1;
    --alhur-gray-400: #A8A29E;
    --alhur-gray-500: #78716C;
    --alhur-gray-600: #57534E;
    --alhur-gray-700: #44403C;
    --alhur-gray-800: #292524;
    --alhur-gray-900: #1C1917;

    /* ── Backgrounds ── */
    --alhur-bg-primary: var(--alhur-accent);
    --alhur-bg-surface: var(--alhur-surface);
    --alhur-bg-dark: var(--alhur-primary);
    --alhur-bg-gold: var(--alhur-secondary);

    /* ── Text (Sefyan Text #20282C / Muted #6F7B7D) ── */
    --alhur-text-primary: #20282C;
    --alhur-text-secondary: #6F7B7D;
    --alhur-text-muted: var(--alhur-gray-500);
    --alhur-text-inverse: #FFFFFF;
    --alhur-text-gold: var(--alhur-secondary);

    /* ── Borders (Sefyan Border #DDDCD7) ── */
    --alhur-border: #DDDCD7;
    --alhur-border-light: #EEEEEB;

    /* ── Typography ── */
    --alhur-font-primary: 'Cairo', sans-serif;
    --alhur-font-secondary: 'Tajawal', sans-serif;

    --alhur-text-xs:   0.75rem;
    --alhur-text-sm:   0.875rem;
    --alhur-text-base: 1rem;
    --alhur-text-lg:   1.125rem;
    --alhur-text-xl:   1.25rem;
    --alhur-text-2xl:  1.5rem;
    --alhur-text-3xl:  1.875rem;
    --alhur-text-4xl:  2.25rem;
    --alhur-text-5xl:  3rem;
    --alhur-text-6xl:  3.75rem;

    /* ── Heading scale (Sprint 02) ──
       Dedicated semantic tokens for h1-h3 + body-lg, layered on top of the
       generic text-xs..6xl scale above (kept as-is since ~25 component
       files already depend on it for non-heading sizing). This is the
       "central type scale" components should reference for headings
       instead of hardcoding clamp()/px values inline. */
    --alhur-h1-size:        3.5rem;    /* 56px desktop — within 52-60px target */
    --alhur-h1-size-mobile: 2.5rem;    /* 40px mobile — within 36-42px target */
    --alhur-h2-size:        2.5rem;    /* 40px desktop — within 38-44px target */
    --alhur-h2-size-mobile: 2rem;      /* 32px mobile — within 30-34px target */
    --alhur-h3-size:        1.625rem;  /* 26px desktop — within 24-28px target */
    --alhur-h3-size-mobile: 1.375rem;  /* 22px mobile — within 21-24px target */
    --alhur-text-body-lg:   1.1875rem; /* 19px — "Body Large" 19-20px target */

    --alhur-leading-tight:   1.25;
    --alhur-leading-normal:  1.5;
    --alhur-leading-relaxed: 1.75;

    --alhur-font-regular:   400;
    --alhur-font-medium:    500;
    --alhur-font-semibold:  600;
    --alhur-font-bold:      700;
    --alhur-font-extrabold: 800;

    /* ── Spacing ── */
    --alhur-space-1:  0.25rem;
    --alhur-space-2:  0.5rem;
    --alhur-space-3:  0.75rem;
    --alhur-space-4:  1rem;
    --alhur-space-5:  1.25rem;
    --alhur-space-6:  1.5rem;
    --alhur-space-8:  2rem;
    --alhur-space-10: 2.5rem;
    --alhur-space-12: 3rem;
    --alhur-space-16: 4rem;
    --alhur-space-20: 5rem;
    --alhur-space-24: 6rem;
    --alhur-space-32: 8rem;

    /* ── Layout (Sefyan container ≈1240px) ── */
    --alhur-container-max:     1240px;
    --alhur-container-padding: var(--alhur-space-6);
    --alhur-section-py:        var(--alhur-space-20);
    --alhur-section-py-mobile: var(--alhur-space-12);

    /* ── Border Radius (md/lg/xl already land inside Sefyan's preferred
       8px–16px range: 0.5rem/0.75rem/1rem = 8/12/16px — unchanged) ── */
    --alhur-radius-sm:   0.25rem;
    --alhur-radius-md:   0.5rem;
    --alhur-radius-lg:   0.75rem;
    --alhur-radius-xl:   1rem;
    --alhur-radius-2xl:  1.5rem;
    --alhur-radius-full: 9999px;

    /* ── Plan Card (tint bases updated to Sefyan Accent rgb(217,139,67)) ── */
    --alhur-plan-card-bg:     rgba(255, 255, 255, 0.06);
    --alhur-plan-card-border: rgba(217, 139, 67, 0.3);
    --alhur-gold-tint-4:      rgba(217, 139, 67, 0.04);
    --alhur-navy-tint-3:      rgba(255, 255, 255, 0.03);

    /* ── Shadows (tint base updated to Sefyan Primary Dark rgb(23,51,58)) ── */
    --alhur-shadow-sm:     0 1px 2px rgba(23, 51, 58, 0.06);
    --alhur-shadow-md:     0 4px 6px -1px rgba(23, 51, 58, 0.08), 0 2px 4px rgba(23, 51, 58, 0.05);
    --alhur-shadow-lg:     0 10px 15px -3px rgba(23, 51, 58, 0.10), 0 4px 6px rgba(23, 51, 58, 0.05);
    --alhur-shadow-xl:     0 20px 25px -5px rgba(23, 51, 58, 0.12), 0 8px 10px rgba(23, 51, 58, 0.05);
    --alhur-shadow-sticky: 0 4px 12px rgba(23, 51, 58, 0.18);
    --alhur-shadow-gold:   0 4px 20px rgba(217, 139, 67, 0.25);

    /* ── Transitions ── */
    --alhur-transition-fast: 150ms ease;
    --alhur-transition-base: 250ms ease;
    --alhur-transition-slow: 350ms ease;

    /* ── Z-Index ── */
    --alhur-z-dropdown: 100;
    --alhur-z-sticky:   200;
    --alhur-z-overlay:  300;
    --alhur-z-modal:    400;
    --alhur-z-whatsapp: 500;

    /* ── Design System Extensions ──
       radius-card nudged from 18px to 16px to sit inside the Sefyan
       preferred 8–16px radius range. radius-button stays 999px (fully
       round pill buttons) — an intentional exception, not a card/box
       radius, so the 8–16px guidance doesn't apply to it. */
    --alhur-radius-card:     16px;
    --alhur-radius-button:   999px;
    --alhur-shadow-soft:     0 12px 32px rgba(23, 51, 58, 0.08);
    --alhur-shadow-hover:    0 18px 44px rgba(23, 51, 58, 0.12);
    --alhur-pattern-opacity: 0.045;

    /* ── Compatibility Aliases (Sprint 01) ──
       These 7 tokens were referenced by _about-page.css / _contact.css /
       _cards.css / _header.css but were never defined anywhere — the audit
       flagged them as broken (rendering as nothing, or falling back to
       stray Tailwind-ish colors hardcoded inline at the call site, e.g.
       `var(--alhur-secondary-600, #ea580c)`). Defined here as aliases into
       the real Sefyan token set rather than inventing new unrelated colors,
       so those pages render with brand-consistent values. The numeric
       "-100/-700/-900/-600" naming implies a Tailwind-style scale that was
       never actually built for --alhur-primary-light / --alhur-secondary;
       treat these as temporary bridges, not a real scale — a future sprint
       should either build a real tint/shade scale or update the 4 call
       sites to use existing tokens directly and delete these aliases. */
    --alhur-gray-50:            #FAFAF9;
    --alhur-space-7:            1.75rem;
    --alhur-text-accent:        var(--alhur-secondary);
    --alhur-primary-light-100:  #E8EBEB;
    --alhur-primary-light-700:  var(--alhur-primary);
    --alhur-primary-light-900:  var(--alhur-primary-dark);
    --alhur-secondary-600:      var(--alhur-secondary-dark);
}

/* --- src/base/_reset.css --- */
/* ==========================================================================
   Modern CSS Reset
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: var(--alhur-leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-weight: var(--alhur-font-bold);
    line-height: var(--alhur-leading-tight);
}

p {
    overflow-wrap: break-word;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Remove default fieldset styles */
fieldset {
    border: none;
}

/* Ensure hidden attribute works */
[hidden] {
    display: none !important;
}

/* --- src/base/_typography.css --- */
/* ==========================================================================
   Typography — Font Faces + Base Styles
   ========================================================================== */

/* ── Cairo (Arabic Primary) ── */
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo/Cairo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo/Cairo-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo/Cairo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo/Cairo-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Sprint 05P-01 §14: removed the Tajawal @font-face block (3 files,
   ~54 KB). Its only consumer was component-pain-points.php via
   --alhur-font-secondary, and that component was deleted in this same
   sprint (0 live callers, orphaned by the 05V-09 homepage rebuild) —
   Tajawal had zero remaining usages theme-wide. */

/* ── Base Typography ── */

body {
    font-family: var(--alhur-font-primary);
    font-size: var(--alhur-text-base);
    font-weight: var(--alhur-font-regular);
    line-height: var(--alhur-leading-relaxed);
    color: var(--alhur-text-primary);
    background-color: var(--alhur-bg-primary);
}

h1, .alhur-h1 {
    font-size: var(--alhur-h1-size);
    font-weight: var(--alhur-font-extrabold);
    line-height: var(--alhur-leading-tight);
}

h2, .alhur-h2 {
    font-size: var(--alhur-h2-size);
    font-weight: var(--alhur-font-bold);
    line-height: var(--alhur-leading-tight);
}

h3, .alhur-h3 {
    font-size: var(--alhur-h3-size);
    font-weight: var(--alhur-font-semibold);
    line-height: 1.35;
}

h4, .alhur-h4 {
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-semibold);
    line-height: 1.4;
}

h5, .alhur-h5 {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-medium);
}

h6, .alhur-h6 {
    font-size: var(--alhur-text-base);
    font-weight: var(--alhur-font-medium);
}

/* ── Mobile Typography Scale ── */
@media (max-width: 768px) {
    h1, .alhur-h1 { font-size: var(--alhur-h1-size-mobile); }
    h2, .alhur-h2 { font-size: var(--alhur-h2-size-mobile); }
    h3, .alhur-h3 { font-size: var(--alhur-h3-size-mobile); }
    h4, .alhur-h4 { font-size: var(--alhur-text-lg); }
}

/* ── Body Large — 19-20px, for hero subtitles / lead paragraphs ── */
.alhur-text-body-lg {
    font-size: var(--alhur-text-body-lg);
    line-height: var(--alhur-leading-relaxed);
}

/* ── Section headings ── */
.alhur-section-title {
    font-size: var(--alhur-text-4xl);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    margin-block-end: var(--alhur-space-3);
    text-align: center;
}

.alhur-section-subtitle {
    font-size: var(--alhur-text-lg);
    color: var(--alhur-text-secondary);
    text-align: center;
    margin-block-end: var(--alhur-space-12);
    max-width: 700px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .alhur-section-title { font-size: var(--alhur-text-2xl); }
    .alhur-section-subtitle { font-size: var(--alhur-text-base); }
}

/* ── Phone numbers (LTR inside RTL) ── */
.alhur-ltr-text {
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- src/base/_rtl.css --- */
/* ==========================================================================
   RTL-specific overrides
   Note: The base CSS uses logical properties throughout.
   This file handles edge cases where explicit RTL fixes are needed.
   ========================================================================== */

/* ── Directional icons — mirror arrows/chevrons ── */
[dir="rtl"] .alhur-icon--directional {
    transform: scaleX(-1);
}

/* ── Breadcrumb separator direction ── */
[dir="rtl"] .alhur-breadcrumbs__separator {
    transform: scaleX(-1);
}

/* ── Slider direction ── */
[dir="rtl"] .alhur-testimonials__slider {
    direction: rtl;
}

/* ── Process steps connector ── */
[dir="rtl"] .alhur-process-steps__connector {
    transform: scaleX(-1);
}

/* ── Form inputs that need LTR ── */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[dir="ltr"] {
    direction: ltr;
    text-align: start;
}

/* ── Pagination arrows swap ── */
[dir="rtl"] .nav-links .prev::before {
    content: '→';
}
[dir="rtl"] .nav-links .next::after {
    content: '←';
}

/* --- src/base/_utilities.css --- */
/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* ── Screen reader only ── */
.alhur-u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Container ── */
.alhur-container {
    width: 100%;
    max-width: var(--alhur-container-max);
    margin-inline: auto;
    padding-inline: var(--alhur-container-padding);
}

.alhur-container--narrow {
    max-width: 900px;
}

.alhur-container--wide {
    max-width: 1400px;
}

/* ── Text alignment ── */
.alhur-u-text-center { text-align: center; }
.alhur-u-text-start  { text-align: start; }
.alhur-u-text-end    { text-align: end; }

/* ── Flex utilities ── */
.alhur-u-flex        { display: flex; }
.alhur-u-flex-center { display: flex; align-items: center; justify-content: center; }
.alhur-u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.alhur-u-flex-wrap   { flex-wrap: wrap; }
.alhur-u-flex-col    { flex-direction: column; }
.alhur-u-gap-2       { gap: var(--alhur-space-2); }
.alhur-u-gap-4       { gap: var(--alhur-space-4); }
.alhur-u-gap-6       { gap: var(--alhur-space-6); }
.alhur-u-gap-8       { gap: var(--alhur-space-8); }

/* ── Spacing utilities ── */
.alhur-u-mb-0  { margin-block-end: 0; }
.alhur-u-mb-4  { margin-block-end: var(--alhur-space-4); }
.alhur-u-mb-8  { margin-block-end: var(--alhur-space-8); }
.alhur-u-mb-12 { margin-block-end: var(--alhur-space-12); }
.alhur-u-mb-16 { margin-block-end: var(--alhur-space-16); }

.alhur-u-mt-4  { margin-block-start: var(--alhur-space-4); }
.alhur-u-mt-8  { margin-block-start: var(--alhur-space-8); }

/* ── Display utilities ── */
.alhur-u-hidden { display: none; }

@media (max-width: 768px) {
    .alhur-u-hidden-mobile { display: none; }
}

@media (min-width: 769px) {
    .alhur-u-hidden-desktop { display: none; }
}

/* ── Admin-only empty-state notice ──
   Sprint 02: shown instead of a homepage section when its CPT data
   (projects, testimonials, locations, etc.) doesn't exist yet — visible
   only to logged-in editors (current_user_can check happens in PHP), so
   public visitors never see an empty section or a fabricated placeholder. */
.alhur-admin-empty-state {
    padding: var(--alhur-space-6);
    margin-block: var(--alhur-space-4);
    background: var(--alhur-accent-warm);
    border: 1px dashed var(--alhur-border);
    border-radius: var(--alhur-radius-lg);
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
    text-align: center;
}

/* --- src/layouts/_grid.css --- */
/* ==========================================================================
   Grid System + Section Layouts
   ========================================================================== */

/* ── Base grid ── */
.alhur-grid {
    display: grid;
    gap: var(--alhur-space-8);
}

.alhur-grid--2 { grid-template-columns: repeat(2, 1fr); }
.alhur-grid--3 { grid-template-columns: repeat(3, 1fr); }
.alhur-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .alhur-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .alhur-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .alhur-grid--2,
    .alhur-grid--3,
    .alhur-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ── Two-column layout (content + sidebar) ── */
.alhur-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--alhur-space-10);
}

@media (max-width: 1024px) {
    .alhur-layout-sidebar {
        grid-template-columns: 1fr;
    }
}

/* --- src/layouts/_sections.css --- */
/* ==========================================================================
   Section Spacing + Alternating Backgrounds
   ========================================================================== */

.alhur-section {
    padding-block: var(--alhur-section-py);
}

@media (max-width: 768px) {
    .alhur-section {
        padding-block: var(--alhur-section-py-mobile);
    }
}

/* ── Background variants ── */
.alhur-section--white     { background-color: var(--alhur-white); }
.alhur-section--light     { background-color: var(--alhur-accent); }

.alhur-section--dark {
    background-color: var(--alhur-bg-dark);
    color: var(--alhur-text-inverse);
}

.alhur-section--dark .alhur-section-title    { color: var(--alhur-text-inverse); }
.alhur-section--dark .alhur-section-subtitle { color: var(--alhur-gray-400); }

.alhur-section--blue {
    background-color: var(--alhur-primary);
    color: var(--alhur-text-inverse);
}

.alhur-section--blue .alhur-section-title    { color: var(--alhur-text-inverse); }
.alhur-section--blue .alhur-section-subtitle { color: rgba(255, 255, 255, 0.8); }

/* ── Section with background image ── */
.alhur-section--bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.alhur-section--bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75));
    z-index: 1;
}

.alhur-section--bg > * {
    position: relative;
    z-index: 2;
}

/* ── Dot-grid overlay utility (add alongside any section modifier) ── */
.alhur-section--grid-overlay {
    position: relative;
}

.alhur-section--grid-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.alhur-section--grid-overlay > * {
    position: relative;
    z-index: 1;
}

/* --- src/components/_buttons.css --- */
/* ==========================================================================
   Buttons — Premium CTA system
   Sefyan Design Tokens V1
   ========================================================================== */

/* ── Base ── */
.alhur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--alhur-space-2);
    padding: 0.7rem 1.5rem;
    font-family: var(--alhur-font-primary);
    font-size: var(--alhur-text-base);
    font-weight: var(--alhur-font-bold);
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--alhur-radius-lg);
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease,
                transform 220ms ease, box-shadow 220ms ease;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
}

.alhur-btn:focus-visible {
    outline: 3px solid var(--alhur-secondary);
    outline-offset: 3px;
}

.alhur-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ── Primary — Gold ── */
.alhur-btn--primary {
    background: var(--alhur-secondary);
    color: var(--alhur-primary);
    border-color: var(--alhur-secondary);
}
.alhur-btn--primary:hover,
.alhur-btn--primary:focus-visible {
    background: var(--alhur-secondary-dark);
    border-color: var(--alhur-secondary-dark);
    color: var(--alhur-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 139, 67, 0.38);
}

/* ── Secondary ── */
.alhur-btn--secondary {
    background: transparent;
    color: var(--alhur-primary);
    border-color: var(--alhur-primary);
}
.alhur-btn--secondary:hover,
.alhur-btn--secondary:focus-visible {
    background: var(--alhur-primary);
    color: var(--alhur-white);
    transform: translateY(-2px);
    box-shadow: var(--alhur-shadow-md);
}

/* ── Outline (gold border) ── */
.alhur-btn--outline {
    background: transparent;
    color: var(--alhur-secondary);
    border-color: var(--alhur-secondary);
}
.alhur-btn--outline:hover,
.alhur-btn--outline:focus-visible {
    background: var(--alhur-secondary);
    color: var(--alhur-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 139, 67, 0.3);
}

/* ── Outline Light — for dark backgrounds ── */
.alhur-btn--outline-light {
    background: transparent;
    color: var(--alhur-white);
    border-color: rgba(255, 255, 255, 0.55);
}
.alhur-btn--outline-light:hover,
.alhur-btn--outline-light:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--alhur-white);
    color: var(--alhur-white);
    transform: translateY(-2px);
}

/* ── Ghost ── */
.alhur-btn--ghost {
    background: transparent;
    color: var(--alhur-primary);
    border-color: transparent;
}
.alhur-btn--ghost:hover {
    background: var(--alhur-gray-100);
}

/* ── Dark (navy) ── */
.alhur-btn--dark {
    background: var(--alhur-primary);
    color: var(--alhur-white);
    border-color: var(--alhur-primary);
}
.alhur-btn--dark:hover,
.alhur-btn--dark:focus-visible {
    background: var(--alhur-primary-dark);
    border-color: var(--alhur-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--alhur-shadow-lg);
}

/* ── WhatsApp ── */
.alhur-btn--whatsapp {
    background: var(--alhur-whatsapp);
    color: var(--alhur-white);
    border-color: var(--alhur-whatsapp);
}
.alhur-btn--whatsapp:hover,
.alhur-btn--whatsapp:focus-visible {
    background: #1da851;
    border-color: #1da851;
    color: var(--alhur-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

/* ── White ── */
.alhur-btn--white {
    background: var(--alhur-white);
    color: var(--alhur-primary);
    border-color: var(--alhur-white);
}
.alhur-btn--white:hover,
.alhur-btn--white:focus-visible {
    background: var(--alhur-accent);
    transform: translateY(-2px);
    box-shadow: var(--alhur-shadow-lg);
}

/* ── Sizes ── */
.alhur-btn--sm {
    padding: 0.4rem 1rem;
    font-size: var(--alhur-text-sm);
    gap: var(--alhur-space-1);
}
.alhur-btn--sm svg { width: 15px; height: 15px; }

.alhur-btn--lg {
    padding: 0.9rem 2rem;
    font-size: var(--alhur-text-lg);
    gap: var(--alhur-space-3);
    border-radius: var(--alhur-radius-xl);
}
.alhur-btn--lg svg { width: 22px; height: 22px; }

/* ── Full width ── */
.alhur-btn--full {
    width: 100%;
    justify-content: center;
}

/* ── Group ── */
.alhur-btn-group {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-3);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .alhur-btn-group {
        flex-direction: column;
    }
    .alhur-btn-group .alhur-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-btn {
        transition: background 0ms, color 0ms, border-color 0ms;
    }
    .alhur-btn:hover,
    .alhur-btn:focus-visible {
        transform: none;
        box-shadow: none;
    }
}

/* --- src/components/_cards.css --- */
/* ==========================================================================
   Cards
   ========================================================================== */

.alhur-card {
    background-color: var(--alhur-white);
    border: 1px solid var(--alhur-gray-200);
    border-radius: var(--alhur-radius-lg);
    box-shadow: var(--alhur-shadow-md);
    overflow: hidden;
    transition: transform var(--alhur-transition-base), box-shadow var(--alhur-transition-base);
}

.alhur-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--alhur-shadow-lg);
}

/* ── Card image ── */
.alhur-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ── Card body ── */
.alhur-card__body {
    padding: var(--alhur-space-6);
}

/* ── Card icon circle ── */
.alhur-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--alhur-primary-light);
    border-radius: var(--alhur-radius-lg);
    margin-block-end: var(--alhur-space-4);
}

.alhur-card__icon svg {
    width: 32px;
    height: 32px;
    fill: var(--alhur-white);
}

/* ── Card title ── */
.alhur-card__title {
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-bold);
    margin-block-end: var(--alhur-space-2);
    color: var(--alhur-text-primary);
}

.alhur-card__title a {
    color: inherit;
    text-decoration: none;
}

.alhur-card__title a:hover {
    color: var(--alhur-text-accent);
}

/* ── Card text ── */
.alhur-card__text {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    margin-block-end: var(--alhur-space-4);
}

/* ── Card link ── */
.alhur-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-primary-light);
    transition: color var(--alhur-transition-fast);
}

.alhur-card__link:hover {
    color: var(--alhur-primary);
}

.alhur-card__link svg {
    width: 16px;
    height: 16px;
}

/* ── Card footer / meta row ── */
.alhur-card__meta {
    padding: var(--alhur-space-4) var(--alhur-space-6);
    border-block-start: 1px solid var(--alhur-gray-100);
    display: flex;
    align-items: center;
    gap: var(--alhur-space-4);
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
}

/* ── Variant: Elevated ── */
.alhur-card--elevated {
    border: none;
    box-shadow: var(--alhur-shadow-lg);
}

/* ── Variant: Dark ── */
.alhur-card--dark {
    background-color: var(--alhur-primary-light);
    border-color: var(--alhur-gray-700);
    color: var(--alhur-text-inverse);
}

.alhur-card--dark .alhur-card__title { color: var(--alhur-text-inverse); }
.alhur-card--dark .alhur-card__text  { color: var(--alhur-gray-400); }

/* ── Variant: Accent border ── */
.alhur-card--accent {
    border-color: var(--alhur-primary-light);
    border-width: 2px;
}

/* ── Variant: Horizontal ── */
.alhur-card--horizontal {
    display: grid;
    grid-template-columns: 200px 1fr;
}

@media (max-width: 640px) {
    .alhur-card--horizontal {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Service card
   ═══════════════════════════════════════════════════════════════════════════ */

.alhur-card--service {
    position: relative;
    overflow: hidden;
    border-radius: var(--alhur-radius-xl);
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color var(--alhur-transition-base);
}

/* Top accent gradient bar */
.alhur-card--service::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--alhur-secondary), var(--alhur-secondary-light));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--service:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(23, 51, 58, 0.12);
    border-color: rgba(217, 139, 67, 0.3);
}

.alhur-card--service:hover::before {
    transform: scaleX(1);
}

/* Service icon upgrade */
.alhur-card--service .alhur-card__icon {
    width: 68px;
    height: 68px;
    border-radius: var(--alhur-radius-full);
    background: linear-gradient(135deg, rgba(30, 98, 100, 0.08), rgba(30, 98, 100, 0.04));
    color: var(--alhur-primary-light);
    transition: background 400ms ease, color 400ms ease, transform 400ms ease;
}

.alhur-card--service .alhur-card__icon svg {
    fill: currentColor;
}

.alhur-card--service .alhur-card__icon-img {
    border-radius: var(--alhur-radius-full);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alhur-card--service:hover .alhur-card__icon {
    background: linear-gradient(135deg, var(--alhur-secondary), var(--alhur-secondary-light));
    color: var(--alhur-white);
    transform: scale(1.08);
}

/* Featured card (Sprint 02: first service — expected Furniture Moving) */
.alhur-card--service-featured {
    border-color: var(--alhur-secondary);
}

@media (min-width: 769px) {
    .alhur-grid--services .alhur-card--service-featured {
        grid-column: span 2;
    }
}

/* Service card link arrow animation */
.alhur-card--service .alhur-card__link svg {
    transition: transform 300ms ease;
}

.alhur-card--service:hover .alhur-card__link svg {
    transform: translateX(-4px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .alhur-card--service,
    .alhur-card--service::before,
    .alhur-card--service .alhur-card__icon,
    .alhur-card--service .alhur-card__link svg {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Variant: Location card
   ═══════════════════════════════════════════════════════════════════════════ */

.alhur-card--location {
    position: relative;
    border-radius: var(--alhur-radius-xl);
    overflow: hidden;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--location:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(23, 51, 58, 0.12);
}

/* Image container */
.alhur-card--location .alhur-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.alhur-card--location .alhur-card__image {
    transition: transform 600ms ease;
}

.alhur-card--location:hover .alhur-card__image {
    transform: scale(1.06);
}

/* Image gradient overlay */
.alhur-card--location .alhur-card__image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.5) 0%, transparent 60%);
    pointer-events: none;
}

/* City badge overlay */
.alhur-card--location__city-badge {
    position: absolute;
    inset-block-start: var(--alhur-space-3);
    inset-inline-end: var(--alhur-space-3);
    padding: var(--alhur-space-1) var(--alhur-space-3);
    background: linear-gradient(135deg, var(--alhur-secondary), #E3A872);
    color: var(--alhur-white);
    font-size: var(--alhur-text-xs);
    font-weight: var(--alhur-font-bold);
    border-radius: var(--alhur-radius-full);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Area tag pills */
.alhur-card--location__areas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-2);
    margin-block-end: var(--alhur-space-4);
}

.alhur-card--location__area-pill {
    padding: var(--alhur-space-1) var(--alhur-space-3);
    background: var(--alhur-accent);
    border-radius: var(--alhur-radius-full);
    font-size: var(--alhur-text-xs);
    color: var(--alhur-text-secondary);
    font-weight: var(--alhur-font-medium);
}

/* Location card link arrow */
.alhur-card--location .alhur-card__link svg {
    transition: transform 300ms ease;
}

.alhur-card--location:hover .alhur-card__link svg {
    transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .alhur-card--location,
    .alhur-card--location .alhur-card__image,
    .alhur-card--location .alhur-card__link svg {
        transition: none;
    }
}

/* --- src/components/_forms.css --- */
/* ==========================================================================
   Forms
   ========================================================================== */

/* ── Form group ── */
.alhur-form-group {
    margin-block-end: var(--alhur-space-6);
}

.alhur-form-group label {
    display: block;
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-text-primary);
    margin-block-end: var(--alhur-space-2);
}

/* ── Input + Textarea + Select ── */
.alhur-input,
.alhur-textarea,
.alhur-select {
    width: 100%;
    min-height: 48px;
    padding: var(--alhur-space-3) var(--alhur-space-4);
    font-family: var(--alhur-font-primary);
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-primary);
    background-color: var(--alhur-white);
    border: 1.5px solid var(--alhur-gray-300);
    border-radius: var(--alhur-radius-md);
    transition: border-color var(--alhur-transition-fast), box-shadow var(--alhur-transition-fast);
    appearance: none;
}

.alhur-input:focus,
.alhur-textarea:focus,
.alhur-select:focus {
    outline: none;
    border-color: var(--alhur-primary-light);
    box-shadow: 0 0 0 3px rgba(30, 98, 100, 0.1);
}

.alhur-textarea {
    min-height: 120px;
    resize: vertical;
}

.alhur-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-inline-start: var(--alhur-space-4);
    padding-inline-end: var(--alhur-space-10);
}

/* Sprint 01 RTL fix: this override previously duplicated the LTR value
   (`left 12px center`) verbatim, which was a no-op — the dropdown arrow
   never actually mirrored in RTL. Corrected to `right` so it mirrors to
   the visually-correct side in an RTL layout. */
[dir="rtl"] .alhur-select {
    background-position: right 12px center;
}

/* ── Error state ── */
.alhur-input--error,
.alhur-textarea--error,
.alhur-select--error {
    border-color: #DC2626;
}

.alhur-input--error:focus,
.alhur-textarea--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.alhur-form-error {
    font-size: var(--alhur-text-sm);
    color: #DC2626;
    margin-block-start: var(--alhur-space-1);
}

/* ── Form row (two columns) ── */
.alhur-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--alhur-space-6);
}

@media (max-width: 640px) {
    .alhur-form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Checkbox + Radio ── */
.alhur-checkbox,
.alhur-radio {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-2);
    cursor: pointer;
    font-size: var(--alhur-text-sm);
}

.alhur-checkbox input,
.alhur-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--alhur-primary-light);
}

/* --- src/components/_section-header.css --- */
/* ==========================================================================
   Section Header — Premium reusable pattern
   Badge pill · Title with accent underline · Subtitle
   ========================================================================== */

.alhur-section-header {
    text-align: center;
    margin-block-end: var(--alhur-space-12);
    position: relative;
    z-index: 1;
}

/* ── Badge pill (above title) ── */
.alhur-section-header__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    padding: var(--alhur-space-2) var(--alhur-space-5);
    background: linear-gradient(135deg, var(--alhur-gold-tint-4), var(--alhur-gold-tint-4));
    border: 1px solid rgba(217, 139, 67, 0.25);
    border-radius: var(--alhur-radius-full);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-secondary);
    letter-spacing: 0.02em;
    margin-block-end: var(--alhur-space-4);
}

/* Badge on dark/blue backgrounds */
.alhur-section--dark .alhur-section-header__badge,
.alhur-section--blue .alhur-section-header__badge {
    background: linear-gradient(135deg, rgba(217, 139, 67, 0.22), rgba(217, 139, 67, 0.12));
    border-color: rgba(217, 139, 67, 0.4);
}

/* ── Title (Sprint 02: uses the central H2 heading scale — 38-44px desktop / 30-34px mobile) ── */
.alhur-section-header__title {
    font-size: clamp(var(--alhur-h2-size-mobile), 4vw, var(--alhur-h2-size));
    font-weight: var(--alhur-font-extrabold);
    color: var(--alhur-text-primary);
    line-height: var(--alhur-leading-tight);
    margin-block-end: var(--alhur-space-4);
    position: relative;
    display: inline-block;
    padding-block-end: var(--alhur-space-4);
}

.alhur-section-header__title::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: var(--alhur-radius-full);
    background: linear-gradient(90deg, var(--alhur-secondary), var(--alhur-secondary-light));
}

/* Title on dark/blue backgrounds */
.alhur-section--dark .alhur-section-header__title,
.alhur-section--blue .alhur-section-header__title {
    color: var(--alhur-text-inverse);
}

.alhur-section--dark .alhur-section-header__title::after,
.alhur-section--blue .alhur-section-header__title::after {
    background: linear-gradient(90deg, var(--alhur-secondary), var(--alhur-secondary-light));
}

/* ── Subtitle ── */
.alhur-section-header__subtitle {
    font-size: clamp(0.95rem, 1.5vw, var(--alhur-text-lg));
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    max-width: 600px;
    margin-inline: auto;
}

.alhur-section--dark .alhur-section-header__subtitle {
    color: var(--alhur-gray-400);
}

.alhur-section--blue .alhur-section-header__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .alhur-section-header {
        margin-block-end: var(--alhur-space-8);
    }

    .alhur-section-header__title::after {
        width: 48px;
        height: 3px;
    }
}

/* --- src/components/_header.css --- */
/* ==========================================================================
   Header — Premium Sticky Navigation
   Sefyan Design Tokens V1 | RTL-first
   ========================================================================== */

/* Sprint 02: removed the top info bar (.alhur-topbar*) entirely — brand
   direction calls for no clutter / no unnecessary top bar; that contact
   info now lives only in the footer. See header-main.php. */

/* ══════════════════════════════════════════════════════════════════════
   Main Header
   ══════════════════════════════════════════════════════════════════════ */
.alhur-header {
    background: var(--alhur-white);
    border-block-end: 1px solid var(--alhur-border-light);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--alhur-z-sticky);
    transition: box-shadow var(--alhur-transition-base), background var(--alhur-transition-base);
}

.alhur-header--scrolled {
    box-shadow: var(--alhur-shadow-sticky);
    border-block-end-color: transparent;
}

.alhur-header__inner {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-6);
    min-height: 82px;
}

/* ── Logo ── */
.alhur-header__logo {
    flex-shrink: 0;
}

.alhur-header__logo img,
.alhur-header__logo-img { height: clamp(52px, 4.5vw, 72px); width: auto; display: block; }

/* Sprint 05V-11 §8: the real logo replaces the old placeholder sizing
   above, which was tuned for the pre-05V-10C 96px header and would now
   overflow the 84px/72px bar. Logo adapts to the shell, not the reverse:
   generous clear space above/below at every state, never taller than the
   text wordmark it replaced. */
.sefyan-header__brand img.sefyan-header__logo-img {
    height: 34px !important;
    width: auto !important;
    max-width: none;
    display: block;
    transition: height var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease);
}

@media (min-width: 1025px) {
    .alhur-header--scrolled .sefyan-header__brand img.sefyan-header__logo-img { height: 28px !important; }
}

@media (max-width: 1024px) {
    .sefyan-header__brand img.sefyan-header__logo-img { height: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sefyan-header__logo-img { transition: none; }
}

.alhur-header__site-name {
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-extrabold);
    color: var(--alhur-primary);
    text-decoration: none;
    letter-spacing: -0.3px;
}

/* ── Navigation ── */
.alhur-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.alhur-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.alhur-nav li { position: relative; }

.alhur-nav a,
.alhur-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-1);
    padding: var(--alhur-space-2) var(--alhur-space-4);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-text-primary);
    text-decoration: none;
    border-radius: var(--alhur-radius-md);
    transition: color var(--alhur-transition-fast), background var(--alhur-transition-fast);
    white-space: nowrap;
}

.alhur-nav a:hover,
.alhur-nav .alhur-nav__link:hover,
.alhur-nav .current-menu-item > a,
.alhur-nav .alhur-nav__item--active > .alhur-nav__link {
    color: var(--alhur-secondary);
    background: rgba(217, 139, 67, 0.06);
}

/* ── Chevron ── */
.alhur-nav__chevron {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--alhur-space-1);
    transition: transform 200ms ease;
    pointer-events: none;
}

.alhur-nav__chevron svg { display: block; }

.alhur-nav__item--has-children:hover .alhur-nav__chevron,
.alhur-nav__item--has-children:focus-within .alhur-nav__chevron {
    transform: rotate(180deg);
}

/* ── Dropdown ── */
.alhur-nav .alhur-nav__submenu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 200px;
    background: var(--alhur-white);
    border: 1px solid var(--alhur-border);
    border-radius: var(--alhur-radius-lg);
    box-shadow: var(--alhur-shadow-lg);
    padding: var(--alhur-space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.alhur-nav li:hover > .alhur-nav__submenu,
.alhur-nav li:focus-within > .alhur-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.alhur-nav .alhur-nav__submenu a {
    padding: var(--alhur-space-2) var(--alhur-space-3);
    font-size: var(--alhur-text-sm);
    border-radius: var(--alhur-radius-md);
    display: block;
    width: 100%;
}

/* ── CTA Area ── */
.alhur-header__cta {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-3);
    flex-shrink: 0;
}

.alhur-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    color: var(--alhur-primary);
    text-decoration: none;
    font-weight: var(--alhur-font-bold);
    font-size: var(--alhur-text-sm);
    padding: var(--alhur-space-2) var(--alhur-space-3);
    border-radius: var(--alhur-radius-lg);
    border: 1.5px solid var(--alhur-border);
    transition: border-color var(--alhur-transition-fast), color var(--alhur-transition-fast),
                background var(--alhur-transition-fast);
    position: relative;
}

.alhur-header__phone:hover {
    border-color: var(--alhur-secondary);
    color: var(--alhur-secondary);
    background: rgba(217, 139, 67, 0.05);
}

.alhur-header__phone-icon {
    width: 16px;
    height: 16px;
    fill: var(--alhur-secondary);
    flex-shrink: 0;
}

/* Sprint 02: removed the pulsing phone-ring animation (.alhur-header__phone-ring)
   — an attention-grabbing gimmick that doesn't fit the "controlled care" /
   calm brand direction. The phone link itself is unchanged. */

/* ── Hamburger ── */
.alhur-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Sprint 05V-10C §12: 44px minimum touch target. */
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1.5px solid var(--alhur-border);
    border-radius: var(--alhur-radius-md);
    cursor: pointer;
    padding: 0;
    gap: 5px;
    transition: border-color var(--alhur-transition-fast), background var(--alhur-transition-fast);
    flex-shrink: 0;
}

.alhur-hamburger:hover {
    border-color: var(--alhur-secondary);
    background: rgba(217, 139, 67, 0.05);
}

.alhur-hamburger__line {
    position: relative;
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--alhur-primary);
    border-radius: 2px;
    transition: all 250ms ease;
}

.alhur-hamburger__line::before,
.alhur-hamburger__line::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 2px;
    transition: all 250ms ease;
}

.alhur-hamburger__line::before { transform: translateY(-5px); }
.alhur-hamburger__line::after  { transform: translateY(5px); }

.alhur-hamburger--open .alhur-hamburger__line    { background: transparent; }
.alhur-hamburger--open .alhur-hamburger__line::before { transform: rotate(45deg); background: var(--alhur-primary); }
.alhur-hamburger--open .alhur-hamburger__line::after  { transform: rotate(-45deg); background: var(--alhur-primary); }

/* ── Sticky CTA bar — the ONE persistent mobile action row: Call +
   WhatsApp, Planner deliberately out (§15-20 of Sprint 05V-10C). Rebuilt
   from scratch this sprint on its OWN button classes instead of reusing
   .sefyan-cta/.sefyan-cta--compact — that reuse was the actual root cause
   of the invisible WhatsApp icon (see the docblock in
   header-sticky-cta.php): a text-button's horizontal padding, applied to
   a fixed-width icon button, left ~4px of content space for a 20px icon.
   This bar owns its own compact scale end to end so that can't recur. ── */
.alhur-sticky-cta {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--alhur-surface);
    border-block-start: 1px solid var(--alhur-border);
    padding-block: 6px;
    padding-inline: var(--alhur-space-4);
    z-index: var(--alhur-z-sticky);
    transform: translateY(100%);
    transition: transform var(--sefyan-motion-standard, 350ms) var(--sefyan-ease-standard, ease),
                opacity var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease);
    box-shadow: 0 -4px 24px rgba(23, 51, 58, 0.12);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.alhur-sticky-cta--visible {
    transform: translateY(0);
}

/* §21: hidden (not removed — keeps layout stable, no reflow) once the
   footer scrolls into view. Toggled by main.js's shared motion observer. */
.alhur-sticky-cta--footer-guard {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}

.alhur-sticky-cta__inner {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
}

/* §16-18: ~60/40 width split (legibility of the two labels, not the
   strategic 40/35 priority — Call still reads as the stronger action via
   solid fill + larger label). §17: 48px fixed control height so the
   whole bar (48 + 6+6 padding + safe-area) stays well clear of "70px+". */
.alhur-sticky-cta__call,
.alhur-sticky-cta__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: var(--sefyan-radius-plane, 2px);
    white-space: nowrap;
}

.alhur-sticky-cta__call {
    flex: 3;
    background: var(--alhur-secondary, #D98B43);
    color: var(--alhur-white, #FFFFFF);
}
.alhur-sticky-cta__call:hover,
.alhur-sticky-cta__call:focus-visible { background: var(--alhur-secondary-dark, #AE6F36); }

.alhur-sticky-cta__whatsapp {
    flex: 2;
    background: transparent;
    color: var(--alhur-primary, #17333A);
    border: 1.5px solid var(--alhur-primary, #17333A);
}
.alhur-sticky-cta__whatsapp:hover,
.alhur-sticky-cta__whatsapp:focus-visible { background: rgba(23, 51, 58, 0.06); }

.alhur-sticky-cta__call:focus-visible,
.alhur-sticky-cta__whatsapp:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 2px;
}

/* §19-20: 20px, fully unconstrained — no inherited text-button padding
   left to compress it. fill="currentColor" (the WhatsApp glyph) inherits
   each button's own `color`, so it's dark-on-white in both buttons here
   at normal contrast. */
.alhur-sticky-cta__icon { width: 20px; height: 20px; flex-shrink: 0; }

@media (min-width: 1025px) {
    .alhur-sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .alhur-sticky-cta { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile overlay
   ══════════════════════════════════════════════════════════════════════ */
.alhur-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 32, 36, 0.65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: calc(var(--alhur-z-overlay) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.alhur-mobile-overlay--visible {
    opacity: 1;
    visibility: visible;
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile Menu
   ══════════════════════════════════════════════════════════════════════ */
.alhur-mobile-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(320px, 90vw);
    background: var(--alhur-white);
    z-index: var(--alhur-z-overlay);
    transform: translateX(100%);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(23, 51, 58, 0.18);
}

[dir="rtl"] .alhur-mobile-menu {
    transform: translateX(-100%);
    box-shadow: 8px 0 40px rgba(23, 51, 58, 0.18);
}

.alhur-mobile-menu--open,
[dir="rtl"] .alhur-mobile-menu--open {
    transform: translateX(0);
}

.alhur-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--alhur-space-5) var(--alhur-space-6);
    border-block-end: 1px solid var(--alhur-border-light);
    background: var(--alhur-primary);
}

.alhur-mobile-menu__site-name {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-extrabold);
    color: var(--alhur-white);
}

.alhur-mobile-menu__logo img,
.alhur-mobile-menu__logo-img {
    height: 42px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); /* invert to white on dark panel header */
}

.alhur-mobile-menu__logo a { display: block; }

.alhur-mobile-menu__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: var(--alhur-radius-full);
    cursor: pointer;
    color: var(--alhur-white);
    font-size: 1.4rem;
    line-height: 1;
    transition: background var(--alhur-transition-fast);
}

.alhur-mobile-menu__close:hover { background: rgba(255,255,255,0.2); }

.alhur-mobile-menu__nav {
    padding: var(--alhur-space-4) var(--alhur-space-4);
    flex: 1;
}

/* Safety: prevent desktop .alhur-nav flex styles from leaking into the mobile panel */
.alhur-mobile-menu__nav .alhur-nav {
    display: block;
    flex: unset;
    justify-content: unset;
}

.alhur-mobile-menu__nav ul,
.alhur-mobile-menu__nav .alhur-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.alhur-mobile-menu__nav li {
    border-block-end: 1px solid var(--alhur-border-light);
}

.alhur-mobile-menu__nav a {
    display: block;
    padding: var(--alhur-space-3) var(--alhur-space-2);
    color: var(--alhur-text-primary);
    text-decoration: none;
    font-weight: var(--alhur-font-semibold);
    font-size: var(--alhur-text-base);
    transition: color var(--alhur-transition-fast), padding var(--alhur-transition-fast);
}

.alhur-mobile-menu__nav a:hover { color: var(--alhur-secondary); padding-inline-start: var(--alhur-space-4); }

.alhur-mobile-menu__cta {
    padding: var(--alhur-space-5) var(--alhur-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-3);
    border-block-start: 1px solid var(--alhur-border-light);
    background: var(--alhur-accent);
}

/* ── Mobile Contact Info ── */
.alhur-mobile-menu__contact {
    padding: var(--alhur-space-4) var(--alhur-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-3);
    border-block-start: 1px solid var(--alhur-border-light);
    background: var(--alhur-gray-50, #f8fafc);
}

.alhur-mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-3);
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
}

.alhur-mobile-menu__contact-item a {
    color: var(--alhur-text-primary);
    text-decoration: none;
    font-weight: var(--alhur-font-semibold);
}

.alhur-mobile-menu__contact-item a:hover { color: var(--alhur-secondary); }

.alhur-mobile-menu__contact-item svg {
    width: 16px;
    height: 16px;
    fill: var(--alhur-secondary);
    flex-shrink: 0;
}

/* ── Mobile sub-menu accordion ── */
.alhur-mobile-menu__nav .alhur-nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-inline-start: 3px solid var(--alhur-secondary);
    border-radius: 0;
    padding: var(--alhur-space-1) 0;
    background: var(--alhur-gray-50, #f8fafc);
    display: none;
    flex-direction: column;
}

.alhur-mobile-menu__nav .alhur-nav__item--submenu-open > .alhur-nav__submenu {
    display: flex;
}

.alhur-mobile-menu__nav .alhur-nav__submenu a {
    padding: var(--alhur-space-2) var(--alhur-space-6);
    border-radius: 0;
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
    width: 100%;
    display: block;
}

.alhur-mobile-menu__nav .alhur-nav__submenu a:hover {
    color: var(--alhur-secondary);
    padding-inline-start: var(--alhur-space-8);
    background: transparent;
}

.alhur-mobile-menu__nav .alhur-nav__item--has-children > .alhur-nav__link {
    justify-content: space-between;
}

.alhur-mobile-menu__nav .alhur-nav__item--submenu-open > .alhur-nav__link .alhur-nav__chevron {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .alhur-nav { display: none; }
    .alhur-hamburger { display: flex; }
    .alhur-header__cta .alhur-btn { display: none; }
}

@media (max-width: 768px) {
    .alhur-header__inner { min-height: 66px; }
    .alhur-header__logo img,
    .alhur-header__logo-img { height: 50px; }

    /*
     * Sprint 05C-01.5: at narrow widths the text-fallback site name (no
     * custom logo image set) doesn't fit at --alhur-text-xl without
     * shrinking, but .alhur-header__logo has flex-shrink:0 (intentional
     * at desktop so an image logo never gets squeezed by the nav) —
     * confirmed via direct measurement that this pushed the header
     * ~92px past the viewport edge at 375px. Let the logo shrink like
     * its siblings below this breakpoint and cap the text-name width so
     * it wraps instead of forcing the header wider than the viewport.
     */
    .alhur-header__logo { flex-shrink: 1; min-width: 0; }
    .alhur-header__site-name {
        display: block;
        max-width: 100%;
        font-size: var(--alhur-text-base);
        white-space: normal;
        line-height: 1.2;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-header, .alhur-mobile-menu, .alhur-mobile-overlay,
    .alhur-sticky-cta { transition: none; }
}

/* --- src/components/_footer.css --- */
/* ==========================================================================
   Footer — Premium Design
   Sefyan Design Tokens V1
   ========================================================================== */

.alhur-footer {
    position: relative;
    background: linear-gradient(170deg, var(--alhur-primary) 0%, var(--alhur-primary-dark) 60%, var(--alhur-primary) 100%);
    color: var(--alhur-text-inverse);
    padding-block-start: var(--alhur-space-16);
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   Decorative Background Elements
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.alhur-footer__decor--circle-1 {
    width: 300px;
    height: 300px;
    border-radius: var(--alhur-radius-full);
    background: radial-gradient(circle, rgba(217, 139, 67, 0.1), transparent 70%);
    inset-block-start: -100px;
    inset-inline-end: -80px;
    animation: alhurFooterFloat 8s ease-in-out infinite;
}

.alhur-footer__decor--circle-2 {
    width: 200px;
    height: 200px;
    border-radius: var(--alhur-radius-full);
    background: radial-gradient(circle, rgba(28, 58, 94, 0.4), transparent 70%);
    inset-block-end: 60px;
    inset-inline-start: -60px;
    animation: alhurFooterFloat 10s ease-in-out infinite reverse;
}

.alhur-footer__decor--dots {
    width: 160px;
    height: 160px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    inset-block-start: 40%;
    inset-inline-end: 8%;
}

@keyframes alhurFooterFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}

/* ══════════════════════════════════════════════════════════════════════
   Footer CTA Mini Section
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__cta-mini {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alhur-space-8);
    padding: var(--alhur-space-8) var(--alhur-space-10);
    margin-block-end: var(--alhur-space-12);
    background: linear-gradient(135deg, rgba(217, 139, 67, 0.12) 0%, rgba(217, 139, 67, 0.04) 100%);
    border: 1px solid rgba(217, 139, 67, 0.2);
    border-radius: var(--alhur-radius-xl);
}

.alhur-footer__cta-mini-title {
    font-size: clamp(1.1rem, 2vw, var(--alhur-text-2xl));
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-white);
    margin-block-end: var(--alhur-space-2);
}

.alhur-footer__cta-mini-text {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-400);
}

.alhur-footer__cta-mini-actions {
    display: flex;
    gap: var(--alhur-space-3);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Footer Grid & Column Cards
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Sprint 02: up to 6 columns now (Brand/Services/Cairo/Giza/Information/
       Contact) — auto-fit wraps gracefully regardless of how many render. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--alhur-space-8);
    padding-block-end: var(--alhur-space-12);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.alhur-footer__col-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--alhur-radius-lg);
    padding: var(--alhur-space-6);
    transition: background-color var(--alhur-transition-base),
                border-color var(--alhur-transition-base);
}

.alhur-footer__col-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Column title ── */
.alhur-footer__col-title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-bold);
    margin-block-end: var(--alhur-space-6);
    color: var(--alhur-white);
    position: relative;
    padding-block-end: var(--alhur-space-3);
}

.alhur-footer__col-title::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, var(--alhur-secondary), #dbb04d);
    border-radius: var(--alhur-radius-full);
}

/* ── About column ── */
.alhur-footer__about {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-400);
    line-height: var(--alhur-leading-relaxed);
    margin-block-end: var(--alhur-space-6);
}

.alhur-footer__logo {
    margin-block-end: var(--alhur-space-4);
}

.alhur-footer__logo img {
    height: 40px;
    width: auto;
}

.alhur-footer__site-name {
    font-family: var(--alhur-font-primary);
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-white);
}

/* ── Links column ── */
.alhur-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-3);
}

.alhur-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-400);
    padding-inline-start: var(--alhur-space-3);
    position: relative;
    text-decoration: none;
    transition: color var(--alhur-transition-fast),
                padding-inline-start var(--alhur-transition-fast);
}

/* Gold bar indicator on hover */
.alhur-footer__link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 16px;
    background: var(--alhur-secondary);
    border-radius: var(--alhur-radius-full);
    transition: transform var(--alhur-transition-fast);
}

.alhur-footer__link:hover {
    color: var(--alhur-secondary);
    padding-inline-start: var(--alhur-space-4);
}

.alhur-footer__link:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* ══════════════════════════════════════════════════════════════════════
   Contact Column
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--alhur-space-3);
    margin-block-end: var(--alhur-space-4);
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-400);
}

.alhur-footer__contact-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--alhur-radius-md);
    background: rgba(23, 51, 58, 0.4);
    flex-shrink: 0;
    transition: background var(--alhur-transition-fast);
}

.alhur-footer__contact-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--alhur-secondary);
}

.alhur-footer__contact-icon--wa {
    background: rgba(37, 211, 102, 0.15);
}

.alhur-footer__contact-icon--wa svg {
    fill: var(--alhur-whatsapp);
}

.alhur-footer__contact-item:hover .alhur-footer__contact-icon {
    background: rgba(217, 139, 67, 0.2);
}

.alhur-footer__contact-item a {
    color: var(--alhur-gray-400);
    text-decoration: none;
    transition: color var(--alhur-transition-fast);
}

.alhur-footer__contact-item a:hover {
    color: var(--alhur-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   Social Links
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__social {
    display: flex;
    gap: var(--alhur-space-3);
    margin-block-start: var(--alhur-space-6);
}

.alhur-footer__social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--alhur-radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color var(--alhur-transition-fast),
                border-color var(--alhur-transition-fast),
                transform var(--alhur-transition-fast);
}

.alhur-footer__social-link:hover {
    transform: translateY(-3px);
}

.alhur-footer__social-link svg {
    width: 20px;
    height: 20px;
    fill: var(--alhur-white);
}

.alhur-footer__social-link--fb:hover {
    background: #1877F2;
    border-color: #1877F2;
}

.alhur-footer__social-link--ig:hover {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #dc2743;
}

.alhur-footer__social-link--tt:hover {
    background: #010101;
    border-color: #69C9D0;
}

/* ══════════════════════════════════════════════════════════════════════
   Bottom Bar
   ══════════════════════════════════════════════════════════════════════ */
.alhur-footer__bottom {
    position: relative;
    z-index: 1;
    padding-block: var(--alhur-space-6);
    text-align: center;
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-500);
}

/* Gradient top border */
.alhur-footer__bottom::before {
    content: '';
    position: absolute;
    inset-inline: 20%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(217, 139, 67, 0.3) 30%,
        rgba(217, 139, 67, 0.5) 50%,
        rgba(217, 139, 67, 0.3) 70%,
        transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* grid-template-columns intentionally not overridden here — the
       auto-fit/minmax(180px,1fr) rule above already reflows the column
       count responsively regardless of how many columns render. */
    .alhur-footer__cta-mini {
        flex-direction: column;
        text-align: center;
        padding: var(--alhur-space-6);
    }

    .alhur-footer__cta-mini-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {

    .alhur-footer__cta-mini-actions {
        flex-direction: column;
        width: 100%;
    }

    .alhur-footer__cta-mini-actions .alhur-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .alhur-footer__decor--circle-1,
    .alhur-footer__decor--circle-2 {
        animation: none;
    }
}

/* --- src/components/_hero.css --- */
/* ==========================================================================
   Hero Section — Split (homepage) + Inner-page static
   Sprint 01: removed the autoplay slider variant, particle canvas, and
   slide parallax background entirely — that variant was unreferenced by
   any template (the homepage uses the "split" variant below) and directly
   conflicted with the Sefyan brand direction (no sliders / no unnecessary
   animation). See Sprint 01 report §11.
   ========================================================================== */

/* ── Base (shared) ── */
.alhur-hero {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--alhur-primary);
    color: var(--alhur-text-inverse);
    overflow: hidden;
}

/* ── Static overlay (inner pages) ── */
.alhur-hero > .alhur-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 32, 36, 0.94), rgba(23, 51, 58, 0.75));
    z-index: 1;
}

.alhur-hero > .alhur-container {
    position: relative;
    z-index: 2;
}

/* ── Shared entrance animation (used by split variant below) ── */
@keyframes alhurSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes alhurFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero content typography (shared) ── */
.alhur-hero__eyebrow {
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    letter-spacing: 0.02em;
    color: var(--alhur-secondary);
    margin-block-end: var(--alhur-space-3);
}

.alhur-hero__title {
    font-size: clamp(2rem, 5vw, var(--alhur-text-6xl));
    font-weight: var(--alhur-font-extrabold);
    line-height: var(--alhur-leading-tight);
    margin-block-end: var(--alhur-space-6);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.alhur-hero__subtitle {
    font-size: clamp(1rem, 2.5vw, var(--alhur-text-xl));
    color: var(--alhur-gray-300);
    line-height: var(--alhur-leading-relaxed);
    margin-block-end: var(--alhur-space-8);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

/* ── CTA Buttons (shared) ── */
.alhur-hero__cta {
    display: flex;
    gap: var(--alhur-space-4);
    flex-wrap: wrap;
    margin-block-end: var(--alhur-space-10);
}

/* ── Trust text row (shared: split + inner pages) ── */
.alhur-hero__trust {
    display: flex;
    gap: var(--alhur-space-6);
    flex-wrap: wrap;
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-300);
}

.alhur-hero__trust-item {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-2);
}

.alhur-hero__trust-item::before {
    content: '✓';
    color: var(--alhur-secondary);
    font-weight: var(--alhur-font-bold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGE HERO (static)
   ═══════════════════════════════════════════════════════════════════════════ */

.alhur-hero--inner {
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

.alhur-hero--inner .alhur-hero__title {
    font-size: var(--alhur-text-4xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE (shared)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .alhur-hero__title {
        font-size: clamp(1.75rem, 7vw, var(--alhur-text-4xl));
    }

    .alhur-hero__subtitle {
        font-size: var(--alhur-text-base);
    }

    .alhur-hero__cta {
        flex-direction: column;
    }

    .alhur-hero__cta .alhur-btn {
        width: 100%;
    }

    .alhur-hero--inner {
        min-height: 250px;
    }

    .alhur-hero--inner .alhur-hero__title {
        font-size: var(--alhur-text-2xl);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT VARIANT (homepage)
   ═══════════════════════════════════════════════════════════════════════════ */

.alhur-hero--split {
    min-height: 680px;
    background: linear-gradient(
        135deg,
        var(--alhur-primary-dark) 0%,
        var(--alhur-primary)      60%,
        var(--alhur-primary-light) 100%
    );
    padding-block: var(--alhur-space-16);
    align-items: center;
    overflow: hidden;
}

.alhur-hero--split > .alhur-container {
    position: relative;
    z-index: 2;
}

.alhur-hero__split-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--alhur-space-12);
    align-items: center;
}

.alhur-hero__split-content {
    /* text column — inherits hero text styles */
}

/* ── Visual column: real image slot / neutral placeholder ── */
.alhur-hero__split-visual {
    display: flex;
    justify-content: flex-start;
}

[dir="rtl"] .alhur-hero__split-visual {
    justify-content: flex-end;
}

.alhur-hero__photo-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--alhur-radius-xl);
    overflow: hidden;
}

.alhur-hero__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alhur-hero__photo-frame--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--alhur-accent-warm);
    border: 1px dashed var(--alhur-border);
}

.alhur-hero__placeholder-icon {
    width: 64px;
    height: 64px;
    fill: var(--alhur-border);
}

/* Emotional promise line */
.alhur-hero__promise {
    font-size: var(--alhur-text-body-lg);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-secondary);
    margin-block-end: var(--alhur-space-6);
}

/* Microcopy under the CTA row */
.alhur-hero__microcopy {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-300);
    margin-block-start: var(--alhur-space-3);
}

/* Entrance animations for split content */
.alhur-hero--split .alhur-hero__title {
    animation: alhurSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 80ms;
}

.alhur-hero--split .alhur-hero__subtitle {
    animation: alhurSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 180ms;
}

.alhur-hero--split .alhur-hero__cta {
    animation: alhurSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 300ms;
}

.alhur-hero--split .alhur-hero__trust {
    animation: alhurSlideUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 420ms;
}

.alhur-hero--split .alhur-hero__split-visual {
    animation: alhurFadeIn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 300ms;
}

/* Responsive: stack on tablet — content first, visual second (DOM order) */
@media (max-width: 1024px) {
    .alhur-hero__split-grid {
        grid-template-columns: 1fr;
        gap: var(--alhur-space-8);
    }

    .alhur-hero--split {
        min-height: 0;
        padding-block: var(--alhur-space-12);
    }

    .alhur-hero__split-visual,
    [dir="rtl"] .alhur-hero__split-visual {
        justify-content: center;
    }

    .alhur-hero__photo-frame {
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 768px) {
    .alhur-hero--split {
        padding-block: var(--alhur-space-8);
    }

    .alhur-hero--split .alhur-hero__title {
        font-size: clamp(1.75rem, 7vw, var(--alhur-text-4xl));
    }

    .alhur-hero--split .alhur-hero__cta {
        flex-direction: column;
    }

    .alhur-hero--split .alhur-hero__cta .alhur-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .alhur-hero--split .alhur-hero__title,
    .alhur-hero--split .alhur-hero__subtitle,
    .alhur-hero--split .alhur-hero__cta,
    .alhur-hero--split .alhur-hero__trust,
    .alhur-hero--split .alhur-hero__split-visual {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* --- src/components/_protection-layers.css --- */
/* ==========================================================================
   Furniture Protection — accessible tabs by material category
   Sprint 01: canonical site-wide implementation — _why-us.css (the
   duplicate "why us" pillar-grid component) was retired. See Sprint 01
   report §10.
   Sprint 02: rebuilt from a 4-step process list into a WAI-ARIA tabs
   pattern organized by material category. See component-protection-layers.php
   and the tab-switching JS in main.js.
   ========================================================================== */

/* ── Header ── */
.alhur-protection__header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-block-end: var(--alhur-space-12);
}

.alhur-protection__badge {
    display: inline-block;
    padding: var(--alhur-space-1) var(--alhur-space-4);
    background: var(--alhur-gold-tint-4);
    border: 1px solid rgba(217, 139, 67, 0.28);
    border-radius: var(--alhur-radius-full);
    color: var(--alhur-secondary);
    font-size: var(--alhur-text-xs);
    font-weight: var(--alhur-font-semibold);
    margin-block-end: var(--alhur-space-4);
}

.alhur-protection__title {
    font-size: clamp(var(--alhur-h2-size-mobile), 4vw, var(--alhur-h2-size));
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    line-height: var(--alhur-leading-tight);
    margin-block-end: var(--alhur-space-4);
}

.alhur-protection__subtitle {
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
}

/* ── Tabs container ── */
.alhur-protection__tabs {
    max-width: 900px;
    margin-inline: auto;
}

.alhur-protection__tablist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--alhur-space-2);
    margin-block-end: var(--alhur-space-8);
}

.alhur-protection__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    padding: var(--alhur-space-3) var(--alhur-space-5);
    background: var(--alhur-surface);
    border: 1.5px solid var(--alhur-border);
    border-radius: var(--alhur-radius-full);
    color: var(--alhur-text-secondary);
    font-family: inherit;
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    cursor: pointer;
    transition: background var(--alhur-transition-fast), border-color var(--alhur-transition-fast), color var(--alhur-transition-fast);
}

.alhur-protection__tab-icon {
    display: flex;
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.alhur-protection__tab:hover {
    border-color: var(--alhur-secondary);
    color: var(--alhur-secondary);
}

.alhur-protection__tab--active {
    background: var(--alhur-secondary);
    border-color: var(--alhur-secondary);
    color: var(--alhur-white);
}

.alhur-protection__tab:focus-visible {
    outline: 3px solid rgba(217, 139, 67, 0.5);
    outline-offset: 2px;
}

/* ── Panels ── */
.alhur-protection__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--alhur-space-6);
    padding: var(--alhur-space-10);
    background: var(--alhur-surface);
    border: 1px solid var(--alhur-border);
    border-radius: var(--alhur-radius-2xl);
}

.alhur-protection__panel[hidden] {
    display: none;
}

.alhur-protection__panel-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: var(--alhur-radius-full);
    background: var(--alhur-accent);
}

.alhur-protection__panel-icon {
    width: 40px;
    height: 40px;
    fill: var(--alhur-secondary);
}

.alhur-protection__panel-text {
    font-size: var(--alhur-text-body-lg);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    max-width: 520px;
}

/* ── Bottom CTA ── */
.alhur-protection__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--alhur-space-4);
    margin-block-start: var(--alhur-space-12);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .alhur-protection__header {
        margin-block-end: var(--alhur-space-10);
    }

    .alhur-protection__tablist {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-block-end: var(--alhur-space-2);
    }

    .alhur-protection__tab {
        flex-shrink: 0;
    }

    .alhur-protection__panel {
        padding: var(--alhur-space-6);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .alhur-protection__tab {
        transition: none;
    }
}

/* --- src/components/_area-selector.css --- */
/* ==========================================================================
   Area Selector — بنخدم منطقتك؟
   Sefyan Design Tokens V1 | Homepage only
   Replaces component-coverage-areas on homepage. Inner pages keep coverage-areas.
   ========================================================================== */

/* ── Header ── */
.alhur-area-selector__header {
    text-align: center;
    max-width: 740px;
    margin-inline: auto;
    margin-block-end: var(--alhur-space-12);
}

.alhur-area-selector__badge {
    display: inline-block;
    padding: var(--alhur-space-1) var(--alhur-space-4);
    background: rgba(217, 139, 67, 0.10);
    border: 1px solid rgba(217, 139, 67, 0.28);
    border-radius: var(--alhur-radius-full);
    color: var(--alhur-secondary);
    font-size: var(--alhur-text-xs);
    font-weight: var(--alhur-font-semibold);
    margin-block-end: var(--alhur-space-4);
}

.alhur-area-selector__title {
    font-size: clamp(1.5rem, 3.5vw, var(--alhur-text-3xl));
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    line-height: var(--alhur-leading-tight);
    margin-block-end: var(--alhur-space-4);
}

.alhur-area-selector__subtitle {
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
}

/* ── Groups grid — 3 columns on desktop ── */
.alhur-area-selector__groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--alhur-space-6);
}

/* Sprint 02: homepage version has 2 hubs (Cairo/Giza) only */
.alhur-area-selector__groups--hubs {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-inline: auto;
}

/* ── Single group card ── */
.alhur-area-selector__group {
    background: var(--alhur-accent);
    border: 1px solid var(--alhur-border);
    border-block-start: 3px solid var(--alhur-secondary);
    border-radius: var(--alhur-radius-2xl);
    padding: var(--alhur-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-4);
}

/* ── Group title ── */
.alhur-area-selector__group-title {
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    line-height: var(--alhur-leading-tight);
    margin: 0;
}

/* ── Group subtitle line ── */
.alhur-area-selector__group-text {
    font-size: var(--alhur-text-xs);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    margin: 0;
}

/* ── Chips container ── */
.alhur-area-selector__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-2);
    margin-block-start: var(--alhur-space-1);
}

/* ── Area chip — real <a> link ── */
.alhur-area-selector__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--alhur-space-1) var(--alhur-space-4);
    background: var(--alhur-white);
    border: 1px solid var(--alhur-border);
    border-radius: var(--alhur-radius-full);
    color: var(--alhur-text-primary);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-medium);
    text-decoration: none;
    line-height: 1.6;
    white-space: nowrap;
    transition:
        border-color var(--alhur-transition-fast),
        background var(--alhur-transition-fast),
        color var(--alhur-transition-fast),
        box-shadow var(--alhur-transition-fast);
}

.alhur-area-selector__chip:hover {
    border-color: rgba(217, 139, 67, 0.55);
    background: rgba(217, 139, 67, 0.04);
    color: var(--alhur-secondary);
}

.alhur-area-selector__chip:focus-visible {
    outline: 2px solid var(--alhur-secondary);
    outline-offset: 2px;
    border-color: rgba(217, 139, 67, 0.55);
}

/* ── Footer row ── */
.alhur-area-selector__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--alhur-space-4);
    margin-block-start: var(--alhur-space-12);
    text-align: center;
}

.alhur-area-selector__note {
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-secondary);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .alhur-area-selector__groups {
        grid-template-columns: 1fr;
        gap: var(--alhur-space-5);
    }

    .alhur-area-selector__header {
        margin-block-end: var(--alhur-space-10);
    }
}

@media (max-width: 599px) {
    .alhur-area-selector__group {
        padding: var(--alhur-space-6);
        border-radius: var(--alhur-radius-xl);
    }

    .alhur-area-selector__chip {
        white-space: normal;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .alhur-area-selector__chip {
        transition: none;
    }
}

/* --- src/components/_process-steps.css --- */
/* ==========================================================================
   Process Steps — Premium connected timeline (6 steps)
   Sefyan Design Tokens V1
   ========================================================================== */

.alhur-process {
    position: relative;
    counter-reset: step;
}

/* ── Grid — 3 cols × 2 rows for 6 steps ── */
.alhur-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--alhur-space-6);
    position: relative;
}

/* ── Connecting line (desktop row 1) ── */
.alhur-process__grid::before {
    content: '';
    position: absolute;
    inset-block-start: 28px;
    inset-inline-start: calc(16.67% + 28px);
    inset-inline-end: calc(16.67% + 28px);
    height: 3px;
    background: linear-gradient(90deg,
        var(--alhur-border) 0%,
        var(--alhur-secondary) 50%,
        var(--alhur-border) 100%);
    z-index: 0;
    border-radius: var(--alhur-radius-full);
}

/* ── Step ── */
.alhur-process__step {
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ── Number circle ── */
.alhur-process__number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--alhur-secondary);
    color: var(--alhur-white);
    font-size: var(--alhur-text-xl);
    font-weight: var(--alhur-font-extrabold);
    border-radius: var(--alhur-radius-full);
    margin-inline: auto;
    margin-block-end: var(--alhur-space-5);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(217, 139, 67, 0.3);
    transition: transform var(--alhur-transition-base), box-shadow var(--alhur-transition-base);
}

/* Outer ring */
.alhur-process__number::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: var(--alhur-radius-full);
    border: 2px solid rgba(23, 51, 58, 0.15);
    transition: border-color var(--alhur-transition-base);
}

.alhur-process__step:hover .alhur-process__number {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(217, 139, 67, 0.4);
}

.alhur-process__step:hover .alhur-process__number::before {
    border-color: var(--alhur-secondary);
}

/* ── Content card ── */
.alhur-process__content {
    background: var(--alhur-white);
    border: 1px solid var(--alhur-border);
    border-radius: var(--alhur-radius-xl);
    padding: var(--alhur-space-5) var(--alhur-space-4);
    transition: transform var(--alhur-transition-base),
                box-shadow var(--alhur-transition-base),
                border-color var(--alhur-transition-base);
}

.alhur-process__step:hover .alhur-process__content {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(23, 51, 58, 0.08);
    border-color: rgba(217, 139, 67, 0.25);
}

/* ── Text ── */
.alhur-process__title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    margin-block-end: var(--alhur-space-2);
}

.alhur-process__desc {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .alhur-process__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alhur-process__grid::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .alhur-process__grid {
        grid-template-columns: 1fr;
        gap: var(--alhur-space-4);
        padding-inline-start: var(--alhur-space-10);
    }

    .alhur-process__grid::before {
        inset-inline-start: 24px;
        inset-inline-end: auto;
        inset-block-start: 28px;
        width: 3px;
        height: calc(100% - 56px);
        display: block;
    }

    .alhur-process__step {
        text-align: start;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--alhur-space-4);
        align-items: start;
    }

    .alhur-process__number {
        margin: 0;
        width: 48px;
        height: 48px;
        position: relative;
        inset-inline-start: calc(-1 * var(--alhur-space-10));
    }

    .alhur-process__content {
        padding: var(--alhur-space-4);
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-process__number,
    .alhur-process__number::before,
    .alhur-process__content {
        transition: none;
    }
}

/* --- src/components/_testimonials.css --- */
/* ==========================================================================
   Reviews — static grid (Sprint 02: replaced the horizontal slider)
   ========================================================================== */

/* ── Section ── */
.alhur-testimonials {
    position: relative;
    overflow: hidden;
}

/* ── Decorative ── */
.alhur-testimonials__decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.alhur-testimonials__decor--circle {
    width: 300px;
    height: 300px;
    border-radius: var(--alhur-radius-full);
    background: radial-gradient(circle, var(--alhur-primary-light), transparent 70%);
    opacity: 0.04;
    inset-block-end: -80px;
    inset-inline-end: -60px;
}

/* ── Grid ── */
.alhur-testimonials__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--alhur-space-6);
}

@media (max-width: 1024px) {
    .alhur-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .alhur-testimonials__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Testimonial card ── */
.alhur-testimonial-card {
    background: var(--alhur-white);
    border-radius: var(--alhur-radius-xl);
    padding: var(--alhur-space-8);
    box-shadow: var(--alhur-shadow-md);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--alhur-gray-200);
    overflow: hidden;
    transition: transform var(--alhur-transition-base),
                box-shadow var(--alhur-transition-base),
                border-color var(--alhur-transition-base);
}

/* Left accent border */
.alhur-testimonial-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--alhur-secondary), var(--alhur-secondary-light));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(23, 51, 58, 0.1);
    border-color: rgba(217, 139, 67, 0.3);
}

.alhur-testimonial-card:hover::before {
    transform: scaleY(1);
}

/* Decorative quote mark */
.alhur-testimonial-card__quote {
    position: absolute;
    inset-block-start: var(--alhur-space-4);
    inset-inline-end: var(--alhur-space-6);
    font-size: 5rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--alhur-gray-100);
    pointer-events: none;
    z-index: 0;
}

/* ── Stars ── */
.alhur-stars {
    display: flex;
    gap: 3px;
    margin-block-end: var(--alhur-space-4);
    position: relative;
    z-index: 1;
}

.alhur-stars__star {
    color: var(--alhur-gray-300);
    font-size: var(--alhur-text-xl);
}

.alhur-stars__star--filled {
    color: var(--alhur-secondary);
    text-shadow: 0 1px 4px rgba(217, 139, 67, 0.3);
}

/* ── Body ── */
.alhur-testimonial-card__body {
    font-size: var(--alhur-text-base);
    line-height: var(--alhur-leading-relaxed);
    color: var(--alhur-text-primary);
    margin-block-end: var(--alhur-space-6);
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

/* ── Footer / Author ── */
.alhur-testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-3);
    position: relative;
    z-index: 1;
}

.alhur-testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--alhur-radius-full);
    object-fit: cover;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image:
        linear-gradient(white, white),
        linear-gradient(135deg, var(--alhur-secondary), var(--alhur-secondary-light));
}

/* Avatar fallback with gradient */
.alhur-testimonial-card__avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: var(--alhur-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--alhur-font-bold);
    font-size: var(--alhur-text-lg);
    color: var(--alhur-white);
    background: linear-gradient(135deg, var(--alhur-primary), var(--alhur-primary-light));
    flex-shrink: 0;
}

.alhur-testimonial-card__name {
    font-weight: var(--alhur-font-bold);
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-primary);
}

.alhur-testimonial-card__location {
    font-size: var(--alhur-text-xs);
    color: var(--alhur-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .alhur-testimonial-card {
        padding: var(--alhur-space-6);
    }

    .alhur-testimonial-card__quote {
        font-size: 3.5rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-testimonial-card,
    .alhur-testimonial-card::before {
        transition: none;
    }
}

/* --- src/components/_faq-accordion.css --- */
/* ==========================================================================
   FAQ Accordion — Premium
   Sefyan Design Tokens V1
   ========================================================================== */

.alhur-faq__list {
    max-width: 800px;
    margin-inline: auto;
}

.alhur-faq__item {
    border-radius: var(--alhur-radius-lg);
    background: var(--alhur-white);
    margin-block-end: var(--alhur-space-3);
    box-shadow: 0 1px 3px rgba(23, 51, 58, 0.06);
    transition: box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.alhur-faq__item:hover {
    box-shadow: 0 4px 12px rgba(23, 51, 58, 0.1);
}

.alhur-faq__item--open {
    box-shadow: 0 6px 20px rgba(23, 51, 58, 0.1);
}

/* ── Question button ── */
.alhur-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--alhur-space-4);
    padding: var(--alhur-space-5) var(--alhur-space-6);
    background: none;
    border: none;
    cursor: pointer;
    text-align: start;
    font-family: var(--alhur-font-primary);
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-text-primary);
    transition: color var(--alhur-transition-base);
}

.alhur-faq__item--open .alhur-faq__question {
    color: var(--alhur-primary);
}

/* ── Number circle ── */
.alhur-faq__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--alhur-radius-full);
    background: linear-gradient(135deg, var(--alhur-primary), var(--alhur-primary-light));
    color: var(--alhur-white);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-bold);
    transition: background 350ms ease;
}

.alhur-faq__item--open .alhur-faq__number {
    background: linear-gradient(135deg, var(--alhur-secondary), #dbb04d);
}

.alhur-faq__question-text {
    flex: 1;
}

/* ── Toggle icon ── */
.alhur-faq__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
                color 350ms ease;
    color: var(--alhur-gray-400);
}

.alhur-faq__item--open .alhur-faq__icon {
    transform: rotate(45deg);
    color: var(--alhur-secondary);
}

/* ── Answer collapse ── */
.alhur-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-faq__answer-inner {
    padding-block-end: var(--alhur-space-6);
    padding-inline-start: calc(36px + var(--alhur-space-4) + var(--alhur-space-6));
    padding-inline-end: var(--alhur-space-6);
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .alhur-faq__question {
        padding: var(--alhur-space-4) var(--alhur-space-4);
        font-size: var(--alhur-text-base);
        gap: var(--alhur-space-3);
    }

    .alhur-faq__number {
        width: 30px;
        height: 30px;
        font-size: var(--alhur-text-xs);
    }

    .alhur-faq__answer-inner {
        padding-inline-start: calc(30px + var(--alhur-space-3) + var(--alhur-space-4));
        padding-inline-end: var(--alhur-space-4);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-faq__item,
    .alhur-faq__icon,
    .alhur-faq__answer,
    .alhur-faq__question,
    .alhur-faq__number {
        transition: none;
    }
}

/* --- src/components/_gallery-grid.css --- */
/* ==========================================================================
   Gallery Grid — Premium project gallery
   ========================================================================== */

/* ── Grid ── */
.alhur-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--alhur-space-4);
}

.alhur-gallery__item {
    position: relative;
    border-radius: var(--alhur-radius-xl);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
}

.alhur-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-gallery__item:hover img {
    transform: scale(1.08);
}

.alhur-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.1) 50%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 400ms ease;
}

.alhur-gallery__item:hover .alhur-gallery__overlay {
    opacity: 1;
}

.alhur-gallery__overlay svg {
    width: 36px;
    height: 36px;
    fill: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Project cards (in featured grid)
   ═══════════════════════════════════════════════════════════════════════════ */

.alhur-card--project {
    position: relative;
    border-radius: var(--alhur-radius-xl);
    overflow: hidden;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--project:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(23, 51, 58, 0.15);
}

/* Project image container */
.alhur-card--project .alhur-card__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.alhur-card--project .alhur-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--project:hover .alhur-card__image-wrap img {
    transform: scale(1.06);
}

/* Gradient overlay on project image */
.alhur-card--project .alhur-card__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(15, 23, 42, 0.75) 0%,
        rgba(15, 23, 42, 0.2) 40%,
        transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--alhur-space-5);
    opacity: 0;
    transition: opacity 400ms ease;
}

.alhur-card--project:hover .alhur-card__image-overlay {
    opacity: 1;
}

.alhur-card--project .alhur-card__image-overlay-title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-white);
    margin-block-end: var(--alhur-space-2);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.alhur-card--project .alhur-card__image-overlay-meta {
    display: flex;
    gap: var(--alhur-space-3);
    font-size: var(--alhur-text-xs);
    color: rgba(255, 255, 255, 0.8);
}

.alhur-card--project .alhur-card__image-overlay-meta span {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .alhur-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Always show overlay on mobile (no hover) */
    .alhur-card--project .alhur-card__image-overlay {
        opacity: 1;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-gallery__item img,
    .alhur-gallery__overlay,
    .alhur-card--project,
    .alhur-card--project .alhur-card__image-wrap img,
    .alhur-card--project .alhur-card__image-overlay {
        transition: none;
    }
}

/* --- src/components/_blog-card.css --- */
/* ==========================================================================
   Blog Post Card — Premium variant
   ========================================================================== */

.alhur-card--post {
    border-radius: var(--alhur-radius-xl);
    overflow: hidden;
    background: var(--alhur-white);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--post:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* ── Image wrap ── */
.alhur-card--post .alhur-card__image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.alhur-card--post .alhur-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alhur-card--post:hover .alhur-card__image-wrap img {
    transform: scale(1.06);
}

/* ── Category badge ── */
.alhur-card--post .alhur-card__category-badge {
    position: absolute;
    inset-block-start: var(--alhur-space-3);
    inset-inline-start: var(--alhur-space-3);
    background: linear-gradient(135deg, var(--alhur-secondary), var(--alhur-secondary));
    color: var(--alhur-white);
    font-size: var(--alhur-text-xs);
    font-weight: var(--alhur-font-bold);
    padding: var(--alhur-space-1) var(--alhur-space-3);
    border-radius: var(--alhur-radius-full);
    z-index: 1;
}

/* ── Card body ── */
.alhur-card--post .alhur-card__body {
    padding: var(--alhur-space-5) var(--alhur-space-5) var(--alhur-space-6);
}

/* ── Post meta (date) ── */
.alhur-card__post-meta {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-4);
    margin-block-end: var(--alhur-space-3);
    font-size: var(--alhur-text-xs);
    color: var(--alhur-text-muted);
}

.alhur-card__post-meta time {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-1);
}

.alhur-card__post-meta svg {
    color: var(--alhur-secondary);
    flex-shrink: 0;
}

/* ── Title ── */
.alhur-card--post .alhur-card__title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-bold);
    line-height: var(--alhur-leading-tight);
    margin-block-end: var(--alhur-space-3);
}

.alhur-card--post .alhur-card__title a {
    color: var(--alhur-text-primary);
    text-decoration: none;
    transition: color var(--alhur-transition-base);
}

.alhur-card--post .alhur-card__title a:hover {
    color: var(--alhur-primary-light);
}

/* ── Excerpt text ── */
.alhur-card--post .alhur-card__text {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
    line-height: var(--alhur-leading-relaxed);
    margin-block-end: var(--alhur-space-4);
}

/* ── Read more link ── */
.alhur-card--post .alhur-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--alhur-space-2);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-primary-light);
    text-decoration: none;
    transition: color var(--alhur-transition-base),
                gap var(--alhur-transition-base);
}

.alhur-card--post .alhur-card__link:hover {
    color: var(--alhur-secondary);
    gap: var(--alhur-space-3);
}

.alhur-card--post .alhur-card__link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--alhur-transition-base);
}

.alhur-card--post:hover .alhur-card__link svg {
    transform: translateX(-3px);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-card--post,
    .alhur-card--post .alhur-card__image-wrap img,
    .alhur-card--post .alhur-card__link,
    .alhur-card--post .alhur-card__link svg {
        transition: none;
    }
}

/* --- src/components/_cta-strip.css --- */
/* ==========================================================================
   CTA Strip — Premium call-to-action banner
   Sefyan Design Tokens V1
   ========================================================================== */

.alhur-cta-strip {
    position: relative;
    padding-block: var(--alhur-space-16);
    text-align: center;
    overflow: hidden;
}

/* Animated navy-gold gradient background (fallback when no SVG asset) */
.alhur-cta-strip--gradient {
    background: linear-gradient(135deg,
        var(--alhur-primary-dark) 0%,
        var(--alhur-primary) 30%,
        var(--alhur-primary-light) 60%,
        var(--alhur-primary) 100%);
    background-size: 300% 300%;
    animation: alhurCtaGradient 8s ease infinite;
}

/* Sprint 05V-02: removed .alhur-cta-strip--has-bg. It pointed at
   sections/alhur-cta-grid-bg.svg, which has never existed here, so the
   file_exists() guard in component-cta-strip.php always chose the gradient
   branch and this rule never applied. The Alhur grid background is not
   being recreated. */

@keyframes alhurCtaGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Decorative elements ── */
.alhur-cta-strip__decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.alhur-cta-strip__decor--circle-1 {
    width: 250px;
    height: 250px;
    border-radius: var(--alhur-radius-full);
    background: radial-gradient(circle, rgba(217, 139, 67, 0.15), transparent 70%);
    inset-block-start: -80px;
    inset-inline-end: -60px;
}

.alhur-cta-strip__decor--circle-2 {
    width: 180px;
    height: 180px;
    border-radius: var(--alhur-radius-full);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
    inset-block-end: -60px;
    inset-inline-start: -40px;
}

.alhur-cta-strip__decor--dots {
    width: 140px;
    height: 140px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    inset-block-start: 30px;
    inset-inline-start: 5%;
}

/* ── Content ── */
.alhur-cta-strip__inner {
    position: relative;
    z-index: 1;
}

.alhur-cta-strip__title {
    font-size: clamp(1.5rem, 3.5vw, var(--alhur-text-4xl));
    font-weight: var(--alhur-font-extrabold);
    margin-block-end: var(--alhur-space-4);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.alhur-cta-strip__text {
    font-size: clamp(0.95rem, 1.5vw, var(--alhur-text-lg));
    margin-block-end: var(--alhur-space-8);
    opacity: 0.9;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* ── Button group enhancements ── */
.alhur-cta-strip .alhur-btn-group {
    justify-content: center;
}

.alhur-cta-strip .alhur-btn {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform var(--alhur-transition-base),
                box-shadow var(--alhur-transition-base);
}

.alhur-cta-strip .alhur-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .alhur-cta-strip {
        padding-block: var(--alhur-space-12);
    }

    .alhur-cta-strip .alhur-btn-group {
        flex-direction: column;
        align-items: center;
        gap: var(--alhur-space-3);
    }

    .alhur-cta-strip .alhur-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-cta-strip--gradient {
        animation: none;
    }

    .alhur-cta-strip .alhur-btn {
        transition: none;
    }
}

/* --- src/components/_moving-cost.css --- */
/* ==========================================================================
   Moving Cost — pricing-logic explainer (factors → estimate)
   Sefyan Design Tokens V1
   ========================================================================== */

.alhur-moving-cost__diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--alhur-space-8);
    max-width: 1000px;
    margin-inline: auto;
    flex-wrap: wrap;
}

.alhur-moving-cost__factors {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: var(--alhur-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 280px;
}

.alhur-moving-cost__factor {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-2);
    padding: var(--alhur-space-3) var(--alhur-space-4);
    background: var(--alhur-accent);
    border: 1px solid var(--alhur-border);
    border-radius: var(--alhur-radius-lg);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-medium);
    color: var(--alhur-text-primary);
}

.alhur-moving-cost__factor-icon {
    display: flex;
    width: 20px;
    height: 20px;
    fill: var(--alhur-secondary);
    flex-shrink: 0;
}

.alhur-moving-cost__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--alhur-border);
    flex-shrink: 0;
}

.alhur-moving-cost__arrow svg {
    width: 32px;
    height: 32px;
}

[dir="rtl"] .alhur-moving-cost__arrow svg {
    transform: scaleX(-1);
}

.alhur-moving-cost__estimate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--alhur-space-6) var(--alhur-space-8);
    background: var(--alhur-primary);
    color: var(--alhur-text-inverse);
    border-radius: var(--alhur-radius-xl);
    font-weight: var(--alhur-font-bold);
    font-size: var(--alhur-text-lg);
    text-align: center;
    flex-shrink: 0;
    min-width: 200px;
}

@media (max-width: 900px) {
    .alhur-moving-cost__diagram {
        flex-direction: column;
    }

    .alhur-moving-cost__arrow svg {
        transform: rotate(90deg);
    }

    [dir="rtl"] .alhur-moving-cost__arrow svg {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    .alhur-moving-cost__factors {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- src/components/_breadcrumbs.css --- */
/* Breadcrumbs */
.alhur-breadcrumbs {
    padding-block: var(--alhur-space-4);
    font-size: var(--alhur-text-sm);
    color: var(--alhur-text-secondary);
}
.alhur-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-2);
    flex-wrap: wrap;
}
.alhur-breadcrumbs__link {
    color: var(--alhur-text-secondary);
    transition: color var(--alhur-transition-fast);
}
.alhur-breadcrumbs__link:hover { color: var(--alhur-primary-light); }
.alhur-breadcrumbs__separator {
    color: var(--alhur-gray-300);
    font-size: var(--alhur-text-xs);
}
.alhur-breadcrumbs__current {
    color: var(--alhur-text-primary);
    font-weight: var(--alhur-font-medium);
}

/* --- src/components/_visual-assets.css --- */
/* ==========================================================================
   Visual Assets — Image helpers, pattern utilities, branded icon sizing.
   Sefyan Design Tokens V1 | Most rules are inert until real brand image
   assets are dropped in (see file_exists() guards in the calling PHP).
   ========================================================================== */

/* ── Section grid overlay (CSS utility class) ── */
.alhur-section-grid {
    position: relative;
}
.alhur-section-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/patterns/alhur-pattern-grid.svg");
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: var(--alhur-pattern-opacity, 0.045);
    z-index: 0;
    pointer-events: none;
}

/* Sprint 05V-02: removed .alhur-watermark-light / .alhur-watermark-dark.
   Both pointed at brand/alhur-watermark-{light,dark}.svg, which have never
   existed in this repository, and neither class was applied by any PHP
   template — so the rules were inert and the URLs unresolvable. A Sefyan
   watermark, if ever wanted, belongs in the new visual system rather than
   as a recreated Alhur asset. */

/* Sprint 02: removed .alhur-hero--has-media / .alhur-hero__media* (was a
   full-bleed background-image treatment for the old hero). The hero's
   image slot is now an explicit visual column — see .alhur-hero__photo-frame
   in _hero.css. */

/* ── Pattern background helpers (activated by class in HTML) ── */
.alhur-bg-pattern-grid {
    background-image: url("../images/patterns/alhur-pattern-grid.svg");
    background-repeat: repeat;
    background-size: 40px 40px;
}
.alhur-bg-pattern-path {
    background-image: url("../images/patterns/alhur-pattern-path.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.alhur-bg-pattern-watermark {
    background-image: url("../images/patterns/alhur-pattern-watermark.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
}

/* ── Icon wrap: 64×64 container with 48px icon ── */
.alhur-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.alhur-icon-wrap__img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Sprint 05V-02: removed .alhur-need-selector__custom-icon along with
   component-need-selector.php (deleted — zero get_template_part callers). */

/* Sprint 02: removed .alhur-protection__custom-icon / __number-label —
   the numbered-layer markup they styled was replaced by the tabbed
   material-category interface (see _protection-layers.css). The
   icon-protection-*.svg custom asset files are now unused by this
   component. */

/* Sprint 01: removed .alhur-journey-visual-desktop / -mobile and
   .alhur-journey__path--svg — component-journey.php (the only consumer)
   was retired as a duplicate of component-process-steps.php; see Sprint 01
   report §10. This also removes the RTL bug the audit flagged in
   .alhur-journey__path--svg (physical top/left/right, no [dir="rtl"]
   mirror). */

/* ── Area Selector: main section visual ── */
.alhur-area-visual {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
    margin-block-end: var(--alhur-space-8);
}

/* ── Area Selector: small decorative abstract (legacy fallback) ── */
.alhur-area-selector__abstract {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-inline: auto;
    margin-block-end: var(--alhur-space-4);
    opacity: 0.85;
}

/* ── Testimonial: branded seal avatar ── */
.alhur-testimonial-card__avatar-seal {
    width: 48px;
    height: 48px;
    border-radius: var(--alhur-radius-full);
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Responsive images ── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .alhur-hero__media-img {
        animation: none;
        transition: none;
    }
}

/* --- src/components/_planner.css --- */
/* ==========================================================================
   Moving Planner — Sprint 03B
   Mobile-first. Logical properties only (no left/right/margin-left/etc.)
   so RTL/LTR both work without an _rtl.css override. Card-style options
   are native <input type="radio|checkbox"> + a styled sibling label face —
   never a clickable div (see assets/js/planner.js header comment).
   ========================================================================== */

.alhur-planner-page {
    padding-block: var(--alhur-space-12) var(--alhur-space-20);
}

.alhur-planner {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-8);
}

/* ── No-JS fallback panel (real <noscript>, never rendered when JS runs) ── */
.alhur-planner__noscript-panel {
    padding: var(--alhur-space-6);
    border: 1.5px solid var(--alhur-border);
    border-radius: var(--alhur-radius-lg);
    background: var(--alhur-surface-alt);
    margin-block-end: var(--alhur-space-8);
}

.alhur-planner__noscript-panel p {
    margin-block-end: var(--alhur-space-4);
}

.alhur-planner__noscript-preview {
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
}

/* ── Visually-hidden live region ── */
.alhur-planner__live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/* ── Error summary ── */
.alhur-planner__errors {
    padding: var(--alhur-space-4) var(--alhur-space-5);
    border: 1.5px solid var(--alhur-danger);
    border-radius: var(--alhur-radius-md);
    background: rgba( 180, 35, 24, 0.06 );
}

.alhur-planner__errors-heading {
    font-weight: var(--alhur-font-semibold);
    color: var(--alhur-danger);
    margin-block-end: var(--alhur-space-2);
}

.alhur-planner__errors ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-1);
}

.alhur-planner__errors a {
    color: var(--alhur-danger);
    text-decoration: underline;
    font-size: var(--alhur-text-sm);
}

/* ── Progress ── */
.alhur-planner__progress {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-2);
    list-style: none;
    padding: 0;
}

.alhur-planner__progress-item {
    display: flex;
    align-items: center;
    gap: var(--alhur-space-2);
    padding: var(--alhur-space-2) var(--alhur-space-3);
    border-radius: var(--alhur-radius-full);
    background: var(--alhur-surface-alt);
    color: var(--alhur-text-muted);
    font-size: var(--alhur-text-xs);
}

.alhur-planner__progress-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--alhur-radius-full);
    background: var(--alhur-white);
    border: 1.5px solid var(--alhur-border);
    font-weight: var(--alhur-font-semibold);
}

.alhur-planner__progress-item.is-active {
    background: var(--alhur-primary);
    color: var(--alhur-white);
}

.alhur-planner__progress-item.is-active .alhur-planner__progress-num {
    background: var(--alhur-white);
    color: var(--alhur-primary);
    border-color: var(--alhur-white);
}

.alhur-planner__progress-item.is-done .alhur-planner__progress-num {
    background: var(--alhur-primary-light);
    color: var(--alhur-white);
    border-color: var(--alhur-primary-light);
}

@media (max-width: 640px) {
    .alhur-planner__progress-label {
        display: none;
    }
}

/* ── Step ── */
.alhur-planner__step {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-6);
}

.alhur-planner__step-title {
    font-size: var(--alhur-h3-size-mobile);
}

@media (min-width: 768px) {
    .alhur-planner__step-title {
        font-size: var(--alhur-h3-size);
    }
}

.alhur-planner__step-title:focus-visible {
    outline: 2px solid var(--alhur-primary-light);
    outline-offset: 4px;
}

.alhur-planner__step-help,
.alhur-planner__field-help {
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
}

/* ── Fieldset / legend ── */
.alhur-planner__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.alhur-planner__legend {
    display: block;
    font-weight: var(--alhur-font-semibold);
    margin-block-end: var(--alhur-space-3);
    padding: 0;
}

/* ── Option cards (native input + styled sibling label) ── */
.alhur-planner__options {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: var(--alhur-space-3);
}

@media (min-width: 640px) {
    .alhur-planner__options {
        grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    }
}

.alhur-planner__option {
    position: relative;
    display: block;
    cursor: pointer;
}

.alhur-planner__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

.alhur-planner__option-face {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 56px;
    padding: var(--alhur-space-3) var(--alhur-space-4);
    border: 1.5px solid var(--alhur-border);
    border-radius: var(--alhur-radius-md);
    background: var(--alhur-white);
    transition: border-color var(--alhur-transition-fast), background var(--alhur-transition-fast);
}

.alhur-planner__option-label {
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-medium);
    color: var(--alhur-text-primary);
}

.alhur-planner__option-input:checked + .alhur-planner__option-face {
    border-color: var(--alhur-primary-light);
    background: rgba( 30, 98, 100, 0.08 );
}

.alhur-planner__option-input:checked + .alhur-planner__option-face .alhur-planner__option-label {
    color: var(--alhur-primary-light);
    font-weight: var(--alhur-font-semibold);
}

.alhur-planner__option-input:focus-visible + .alhur-planner__option-face {
    outline: 2px solid var(--alhur-primary-light);
    outline-offset: 2px;
}

.alhur-planner__option-input:disabled + .alhur-planner__option-face {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Field-level error state (cascades from the wrapper JS toggles) ── */
.alhur-planner__field--error .alhur-input,
.alhur-planner__field--error .alhur-select,
.alhur-planner__field--error .alhur-textarea,
.alhur-planner [aria-invalid="true"] {
    border-color: var(--alhur-danger);
}

/* ── Access step: origin/destination side-by-side on desktop ── */
.alhur-planner__side-group {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-4);
    padding: var(--alhur-space-5);
    border-radius: var(--alhur-radius-lg);
    background: var(--alhur-surface-alt);
}

.alhur-planner__side-title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-semibold);
}

/* ── Notices (same-location, out-of-area, no-whatsapp) ── */
.alhur-planner__notice {
    padding: var(--alhur-space-3) var(--alhur-space-4);
    border-radius: var(--alhur-radius-md);
    background: rgba( 217, 139, 67, 0.12 );
    color: var(--alhur-secondary-dark);
    font-size: var(--alhur-text-sm);
}

.alhur-planner__notice--area {
    background: rgba( 217, 139, 67, 0.14 );
}

/* ── Needs-assessment checkbox row ── */
.alhur-planner__needs-assessment {
    padding: var(--alhur-space-3) var(--alhur-space-4);
    border-radius: var(--alhur-radius-md);
    background: var(--alhur-surface-alt);
}

/* ── Step nav (Back / Next) — not sticky: avoids covering an open mobile
   keyboard on the text/phone/date steps. ── */
.alhur-planner__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--alhur-space-4);
    padding-block-start: var(--alhur-space-4);
    border-block-start: 1px solid var(--alhur-border-light);
}

.alhur-planner__nav:has( button:only-child ) {
    justify-content: flex-end;
}

/* ── Summary ── */
.alhur-planner__summary {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-6);
}

.alhur-planner__summary-title {
    font-size: var(--alhur-h3-size-mobile);
}

@media (min-width: 768px) {
    .alhur-planner__summary-title {
        font-size: var(--alhur-h3-size);
    }
}

.alhur-planner__summary-title:focus-visible {
    outline: 2px solid var(--alhur-primary-light);
    outline-offset: 4px;
}

.alhur-planner__summary-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--alhur-space-4);
}

@media (min-width: 768px) {
    .alhur-planner__summary-blocks {
        grid-template-columns: 1fr 1fr;
    }
}

.alhur-planner__summary-block {
    padding: var(--alhur-space-5);
    border: 1.5px solid var(--alhur-border);
    border-radius: var(--alhur-radius-lg);
    background: var(--alhur-white);
}

.alhur-planner__summary-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alhur-space-2);
    margin-block-end: var(--alhur-space-2);
}

.alhur-planner__summary-block-title {
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--alhur-text-secondary);
}

.alhur-planner__summary-edit-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--alhur-primary-light);
    font-size: var(--alhur-text-xs);
    text-decoration: underline;
    cursor: pointer;
}

.alhur-planner__summary-line {
    font-size: var(--alhur-text-base);
    color: var(--alhur-text-primary);
    line-height: var(--alhur-leading-relaxed);
}

.alhur-planner__summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-3);
}

/* ── Reduced motion: no step-change animation exists to begin with (a
   plain `hidden` toggle), so nothing needs to be disabled here — the
   only motion in this file is a decorative border/background transition
   on option-card selection, which is not load-bearing. ── */

/* --- src/components/_visual-system.css --- */
/* ==========================================================================
   SEFYAN VISUAL SYSTEM — Sprint 05V-02
   ==========================================================================

   New, additive visual primitives that begin separating Sefyan's composition
   from the inherited Alhur geometry documented in Sprint 05V-01.

   NAMING: these use the `sefyan-` prefix because they are genuinely new
   visual-system primitives, not renamed inherited architecture. Per Sprint
   05V-02 §21 the existing `alhur-*` functional namespace is deliberately
   left alone — visual divergence comes from composition, not renaming.

   ADDITIVE ONLY: nothing here overrides an existing `alhur-*` rule. Legacy
   templates are untouched until their own redesign sprint. Only templates
   that opt in (currently: the services archive) render these classes.
   ========================================================================== */

:root {

    /* ── WIDTH SYSTEM (05V-02 §6) ──────────────────────────────────────────
       The inherited theme had exactly one content width (1240px) used 74
       times, plus 14 undocumented ad-hoc inner max-widths. These four named
       measures replace that improvisation. Sections choose a width
       deliberately; adjacent sections should rarely share one.            */
    --sefyan-w-prose:     640px;   /* long-form reading measure            */
    --sefyan-w-editorial: 760px;   /* editorial statements, openers        */
    --sefyan-w-wide:      960px;   /* wide content, asymmetric splits      */
    --sefyan-w-grid:     1240px;   /* full grid — matches legacy container */

    /* Gutter scales with viewport instead of being locked at 24px. */
    --sefyan-gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* ── SPACING SCALE (05V-02 §7) ─────────────────────────────────────────
       The inherited rhythm was a single 80px/48px value on ~85% of sections,
       which is why every page paced identically. Four expressive steps,
       fluid so mobile compresses without a breakpoint.                     */
    --sefyan-space-compact:   clamp(2rem,   4vw, 2.5rem);   /*  32 →  40 */
    --sefyan-space-standard:  clamp(3.5rem, 6vw, 4rem);     /*  56 →  64 */
    --sefyan-space-generous:  clamp(5.5rem, 9vw, 6.5rem);   /*  88 → 104 */
    --sefyan-space-display:   clamp(7.5rem, 12vw, 9rem);    /* 120 → 144 */

    /* ── TYPE TIERS (05V-02 §8) ────────────────────────────────────────────
       Font FAMILIES are deliberately unchanged (Cairo). What was missing is
       hierarchy: there was no display tier and no label tier, so everything
       sat between h2 and body. Line-heights stay generous — Arabic needs
       more leading than Latin at display sizes.                            */
    --sefyan-display-size:   clamp(2.5rem, 6.5vw, 5rem);
    /* Sprint 05V-08: was 1.15 despite this block's own comment above saying
       Arabic needs MORE leading at display sizes than Latin, not less. That
       mismatch was a real, reproducible bug wherever a display heading
       wrapped to 2+ lines in a narrow column — confirmed via
       Range.getClientRects() on live pages: 18-29px of actual glyph-ink
       overlap between adjacent lines (Cairo ExtraBold's ascender/descender
       profile needs more room than 1.15x). 1.35 clears it while staying
       tighter than body/lede leading, still reading as a display tier. */
    --sefyan-display-lh:     1.35;

    --sefyan-numeral-size:   clamp(3rem, 9vw, 7rem);
    --sefyan-numeral-lh:     0.9;

    --sefyan-label-size:     0.8125rem;   /* 13px */
    --sefyan-label-tracking: 0.12em;

    --sefyan-measure: 68ch;               /* prose line length            */

    /* ── SHAPE (05V-02 §9) ─────────────────────────────────────────────────
       Inherited shape was pill-and-rounded-card: radius-full (40 uses) plus
       16px (27) = 58% of all radii, identical to Alhur's dominant pair.
       Sefyan planes are effectively square; roundness is reserved for real
       chips.                                                               */
    --sefyan-radius-plane: 2px;
    --sefyan-radius-media: 0;
    --sefyan-radius-chip:  999px;         /* true tags/chips ONLY          */

    --sefyan-rule:        1px solid var(--alhur-border, #DDDCD7);
    --sefyan-rule-strong: 1px solid var(--alhur-primary, #17333A);

    /* ── MOTION (05V-10 §8) ────────────────────────────────────────────────
       One reusable timing/easing grammar instead of ad-hoc durations per
       component. Three durations only — fast for micro-interaction (arrow/
       icon shifts on hover), standard for reveals, slow for line-draw and
       image-mask reveals, which read as deliberate rather than instant. */
    --sefyan-motion-fast:     200ms;
    --sefyan-motion-standard: 420ms;
    --sefyan-motion-slow:     680ms;
    --sefyan-motion-step:     70ms;   /* per-item stagger delay increment */

    --sefyan-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);   /* decelerate — precise, not bouncy */
    --sefyan-ease-emphasis: cubic-bezier(0.65, 0, 0.35, 1);  /* accelerate/decelerate — directional */
}


/* ══════════════════════════════════════════════════════════════════════════
   1. WIDTH UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-measure-prose,
.sefyan-measure-editorial,
.sefyan-measure-wide,
.sefyan-measure-grid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--sefyan-gutter);
}

.sefyan-measure-prose     { max-width: calc(var(--sefyan-w-prose)     + (var(--sefyan-gutter) * 2)); }
.sefyan-measure-editorial { max-width: calc(var(--sefyan-w-editorial) + (var(--sefyan-gutter) * 2)); }
.sefyan-measure-wide      { max-width: calc(var(--sefyan-w-wide)      + (var(--sefyan-gutter) * 2)); }
.sefyan-measure-grid      { max-width: calc(var(--sefyan-w-grid)      + (var(--sefyan-gutter) * 2)); }

/* Full-bleed: escapes any measure without the negative-margin hack, so it
   stays correct in RTL where physical margins would mirror wrongly. */
.sefyan-bleed {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. SECTION RHYTHM
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-section              { padding-block: var(--sefyan-space-standard); }
.sefyan-section--compact     { padding-block: var(--sefyan-space-compact); }
.sefyan-section--generous    { padding-block: var(--sefyan-space-generous); }
.sefyan-section--display     { padding-block: var(--sefyan-space-display); }

/* Asymmetric openers: heavy above, light below, so an opener leads into
   content rather than sitting in its own equal box. */
.sefyan-section--opener {
    padding-block-start: var(--sefyan-space-generous);
    padding-block-end:   var(--sefyan-space-standard);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. TYPE TIERS
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-display {
    font-family: var(--alhur-font-primary);
    font-size: var(--sefyan-display-size);
    line-height: var(--sefyan-display-lh);
    font-weight: 800;
    letter-spacing: -0.01em;   /* very slight; Arabic must not be crowded */
    margin: 0;
    text-wrap: balance;
}

.sefyan-lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.8;
    max-width: var(--sefyan-measure);
    color: var(--alhur-text-secondary, #6F7B7D);
    margin: 0;
}

.sefyan-body {
    font-size: 1rem;
    line-height: 1.85;
    max-width: var(--sefyan-measure);
    margin: 0;
}

/* LABEL — small, letterspaced, uppercase for Latin only. Arabic is never
   uppercased (it has no case) and never letterspaced aggressively, which
   would break cursive joining. */
.sefyan-label {
    display: inline-block;
    font-size: var(--sefyan-label-size);
    font-weight: 600;
    line-height: 1.4;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin: 0;
}

.sefyan-label--latin {
    letter-spacing: var(--sefyan-label-tracking);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* NUMERAL — large structural index numbers (01/02/03). Latin digits, so
   letterspacing and tabular figures are safe here. */
.sefyan-numeral {
    display: block;
    font-size: var(--sefyan-numeral-size);
    line-height: var(--sefyan-numeral-lh);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--alhur-primary, #17333A);
    /* Latin numerals inside an RTL document: force LTR so "01" never
       reorders, without affecting the surrounding Arabic flow. */
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-numeral--ghost {
    color: transparent;
    -webkit-text-stroke: 1px var(--alhur-border, #DDDCD7);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. RULE / LINE / INDEX PRIMITIVES (05V-02 §10)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-rule {
    border: 0;
    border-block-start: var(--sefyan-rule);
    margin: 0;
    width: 100%;
}

.sefyan-rule--strong { border-block-start: var(--sefyan-rule-strong); }

/* Short leading rule used beside labels and numerals. Sized in ch so it
   scales with type rather than being a magic pixel value. */
.sefyan-rule--lead {
    display: inline-block;
    inline-size: 3ch;
    vertical-align: middle;
    border-block-start: var(--sefyan-rule-strong);
    margin-inline-end: 0.75ch;
}

/* Directional arrow. Uses a logical rotation so it points correctly in RTL
   (toward the reading direction's "forward"). */
.sefyan-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25em;
    block-size: 1.25em;
    flex-shrink: 0;
    transition: transform var(--alhur-transition-base, 250ms ease);
}
[dir="rtl"] .sefyan-arrow { transform: scaleX(-1); }


/* ══════════════════════════════════════════════════════════════════════════
   5. INTERACTION STATES (05V-02 §9)
   ══════════════════════════════════════════════════════════════════════════
   Deliberately NOT translateY + large soft shadow — that hover signature
   (0 16px 40px rgba(23,51,58,.12)) is the single most recognisable shared
   gesture with Alhur. Sefyan states use rule, colour and small directional
   motion instead.                                                          */

.sefyan-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--alhur-primary, #17333A);
    font-weight: 600;
    text-decoration: none;
    padding-block-end: 0.35rem;
    border-block-end: var(--sefyan-rule-strong);
    transition: color var(--alhur-transition-base, 250ms ease),
                border-color var(--alhur-transition-base, 250ms ease);
}

.sefyan-link:hover,
.sefyan-link:focus-visible {
    color: var(--alhur-secondary, #D98B43);
    border-block-end-color: var(--alhur-secondary, #D98B43);
}

/* Arrow advances toward the reading direction on hover. */
.sefyan-link:hover .sefyan-arrow,
.sefyan-link:focus-visible .sefyan-arrow { transform: translateX(0.3rem); }
[dir="rtl"] .sefyan-link:hover .sefyan-arrow,
[dir="rtl"] .sefyan-link:focus-visible .sefyan-arrow { transform: scaleX(-1) translateX(0.3rem); }

.sefyan-link:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 4px;
}

/* Plane — the non-card content surface. No shadow, no lift, minimal radius. */
.sefyan-plane {
    background: var(--alhur-white, #FFFFFF);
    border-radius: var(--sefyan-radius-plane);
    border: 0;
    box-shadow: none;
}

.sefyan-plane--ruled { border-block-start: var(--sefyan-rule); }


/* ══════════════════════════════════════════════════════════════════════════
   6. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sefyan-arrow,
    .sefyan-link { transition: none; }
    .sefyan-link:hover .sefyan-arrow,
    .sefyan-link:focus-visible .sefyan-arrow { transform: none; }
    [dir="rtl"] .sefyan-link:hover .sefyan-arrow,
    [dir="rtl"] .sefyan-link:focus-visible .sefyan-arrow { transform: scaleX(-1); }
}

/* --- src/components/_media.css --- */
/* ==========================================================================
   SEFYAN MEDIA — Sprint 05V-02 (§11–§13)
   ==========================================================================
   Aspect-ratio-locked media slots + the graphic fallback that stands in
   until real Sefyan photography exists.

   Deliberately square-cornered (--sefyan-radius-media: 0). Rounded image
   thumbnails inside bordered cards are the inherited Alhur signature; Sefyan
   images are edge-anchored planes.
   ========================================================================== */

.sefyan-media {
    position: relative;
    display: block;
    margin: 0;
    inline-size: 100%;
    overflow: hidden;
    border-radius: var(--sefyan-radius-media);
    background: var(--alhur-accent, #F7F4EE);
}

/* Ratio variants. aspect-ratio reserves layout space before load, which
   prevents CLS even when the real image arrives later. */
.sefyan-media--landscape-3-2  { aspect-ratio: 3 / 2; }
.sefyan-media--wide-16-9      { aspect-ratio: 16 / 9; }
.sefyan-media--portrait-4-5   { aspect-ratio: 4 / 5; }
.sefyan-media--vertical-9-16  { aspect-ratio: 9 / 16; }
.sefyan-media--panoramic-21-9 { aspect-ratio: 21 / 9; }
.sefyan-media--square-1-1     { aspect-ratio: 1 / 1; }

.sefyan-media__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}


/* ══════════════════════════════════════════════════════════════════════════
   GRAPHIC FALLBACK
   ══════════════════════════════════════════════════════════════════════════
   Petrol line-work on warm ivory, with a large ghosted index numeral. No
   photography, no iconographic clichés, no claims. Pure CSS + inline SVG so
   it costs zero extra network requests.                                     */

.sefyan-media__fallback {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--alhur-accent, #F7F4EE);
    color: var(--alhur-primary, #17333A);
    overflow: hidden;
}

/* A faint measure grid — reads as technical drafting paper rather than as a
   decorative texture. Built from gradients, so still no image request. */
.sefyan-media__fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,  var(--alhur-border, #DDDCD7) 1px, transparent 1px),
        linear-gradient(to bottom, var(--alhur-border, #DDDCD7) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.32;
    pointer-events: none;
}

.sefyan-media__motif {
    position: relative;
    z-index: 1;
    inline-size: min(62%, 240px);
    block-size: auto;
    color: var(--alhur-primary-light, #1E6264);
}

/* Large ghosted index numeral, anchored to the corner nearest the reading
   origin. Latin digits isolated so they never reorder inside RTL. */
.sefyan-media__fallback-index {
    position: absolute;
    z-index: 1;
    inset-block-end: 0.5rem;
    inset-inline-start: 1rem;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 0.85;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--alhur-secondary, #D98B43);
    opacity: 0.55;
    direction: ltr;
    unicode-bidi: isolate;
    pointer-events: none;
    user-select: none;
}

/* Per-motif accent so the four service slots are not merely the same frame
   with a different glyph — the amber weighting shifts too. */
.sefyan-media__fallback--lift .sefyan-media__motif     { color: var(--alhur-primary, #17333A); }
.sefyan-media__fallback--packing .sefyan-media__motif  { color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-media__fallback--assembly .sefyan-media__motif { color: var(--alhur-primary-light, #1E6264); }

.sefyan-media__fallback--moving::before   { background-size: 40px 40px; }
.sefyan-media__fallback--packing::before  { background-size: 20px 20px; opacity: 0.4; }
.sefyan-media__fallback--lift::before     { background-size: 32px 24px; }
.sefyan-media__fallback--assembly::before { background-size: 28px 28px; opacity: 0.26; }

/* --- src/components/_editorial-service-index.css --- */
/* ==========================================================================
   EDITORIAL SERVICE INDEX — Sprint 05V-02 (§14–§19)
   ==========================================================================
   Replaces the inherited 3-column service card grid on /services/.

   Why rows and not cards: with exactly four services, a repeat(3,1fr) grid
   produced an orphan in row two and gave every service the same small
   thumbnail-and-excerpt treatment. Full-width alternating rows give each
   service real presence and are structurally impossible to confuse with the
   Alhur services grid.

   RTL / a11y note: alternation is done with `order` on a 2-column grid, NOT
   with `direction` or `row-reverse` tricks. DOM order is always
   text-then-media, so the screen-reader and tab sequence stays correct
   regardless of which side the media lands on visually.
   ========================================================================== */

/* ── Opener ─────────────────────────────────────────────────────────────── */

.sefyan-archive-opener {
    background: var(--alhur-white, #FFFFFF);
}

.sefyan-archive-opener__label {
    display: flex;
    align-items: center;
    margin-block-end: var(--sefyan-space-compact);
}

.sefyan-archive-opener__title {
    margin-block-end: 1.25rem;
}

.sefyan-archive-opener__count {
    margin-block-start: var(--sefyan-space-compact);
    padding-block-start: 1rem;
    border-block-start: var(--sefyan-rule);
    max-width: none;
}


/* ── Index list ─────────────────────────────────────────────────────────── */

.sefyan-service-index {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sefyan-service-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sefyan-space-compact);
    padding-block: var(--sefyan-space-generous);
    border-block-start: var(--sefyan-rule);
    align-items: center;
}

/* The first row sits directly under the opener's own rule — avoid doubling. */
.sefyan-service-row:first-child { border-block-start: 0; }

.sefyan-service-row__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.sefyan-service-row__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.sefyan-service-row__num {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-service-row__title {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}

.sefyan-service-row__title a {
    color: inherit;
    text-decoration: none;
}

.sefyan-service-row__title a:hover,
.sefyan-service-row__title a:focus-visible {
    color: var(--alhur-primary-light, #1E6264);
}

.sefyan-service-row__title a:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 4px;
}

.sefyan-service-row__excerpt {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin: 0;
    max-width: 52ch;
}

.sefyan-service-row__media { min-width: 0; }


/* ── Desktop: two columns, alternating side ─────────────────────────────── */

@media (min-width: 860px) {
    .sefyan-service-row {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }

    /* Default: text leads, media follows. */
    .sefyan-service-row__text  { order: 1; }
    .sefyan-service-row__media { order: 2; }

    /* Even rows flip visually only — DOM order is unchanged. */
    .sefyan-service-row--flip .sefyan-service-row__text  { order: 2; }
    .sefyan-service-row--flip .sefyan-service-row__media { order: 1; }

    /* Give the vertical (lift) slot a narrower column so its 4:5 portrait
       does not tower over the row; the ratio still reads as "tall". */
    .sefyan-service-row--portrait { grid-template-columns: 1.25fr 0.75fr; }
    .sefyan-service-row--portrait.sefyan-service-row--flip {
        grid-template-columns: 0.75fr 1.25fr;
    }
}


/* ── Condensed variant (homepage) ───────────────────────────────────────
   A ruled index line rather than a media row. Keeps the homepage from
   reproducing the archive page, and avoids stacking five graphic fallbacks
   on one page while real photography is still outstanding. The whole line
   is one link — a single tab stop per service, not three.               */

.sefyan-service-row--condensed {
    display: block;
    padding-block: 0;
    border-block-start: var(--sefyan-rule);
    align-items: initial;
}

.sefyan-service-row--condensed:first-child { border-block-start: var(--sefyan-rule); }

.sefyan-service-row__condensed-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 1rem 1.5rem;
    padding-block: var(--sefyan-space-compact);
    text-decoration: none;
    color: inherit;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-service-row__condensed-link:hover,
.sefyan-service-row__condensed-link:focus-visible { color: var(--alhur-primary-light, #1E6264); }

.sefyan-service-row__condensed-link:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 3px;
}

.sefyan-service-row__condensed-body { display: block; min-width: 0; }

.sefyan-service-row__condensed-title {
    font-size: clamp(1.375rem, 3vw, 2.125rem);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.sefyan-service-row__condensed-excerpt {
    display: block;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    color: var(--alhur-text-secondary, #6F7B7D);
    max-width: 58ch;
}

.sefyan-service-row__condensed-arrow { opacity: 0.4; align-self: center; }
.sefyan-service-row__condensed-link:hover .sefyan-service-row__condensed-arrow,
.sefyan-service-row__condensed-link:focus-visible .sefyan-service-row__condensed-arrow {
    opacity: 1;
    transform: translateX(0.3rem);
}
[dir="rtl"] .sefyan-service-row__condensed-link:hover .sefyan-service-row__condensed-arrow,
[dir="rtl"] .sefyan-service-row__condensed-link:focus-visible .sefyan-service-row__condensed-arrow {
    transform: scaleX(-1) translateX(0.3rem);
}

@media (prefers-reduced-motion: reduce) {
    .sefyan-service-row__condensed-link,
    .sefyan-service-row__condensed-arrow { transition: none; }
    .sefyan-service-row__condensed-link:hover .sefyan-service-row__condensed-arrow,
    .sefyan-service-row__condensed-link:focus-visible .sefyan-service-row__condensed-arrow { transform: none; }
    [dir="rtl"] .sefyan-service-row__condensed-link:hover .sefyan-service-row__condensed-arrow,
    [dir="rtl"] .sefyan-service-row__condensed-link:focus-visible .sefyan-service-row__condensed-arrow { transform: scaleX(-1); }
}


/* ── Interlude ──────────────────────────────────────────────────────────── */

.sefyan-interlude {
    background: var(--alhur-primary, #17333A);
    color: var(--alhur-white, #FFFFFF);
    text-align: center;
}

.sefyan-interlude__statement {
    font-family: var(--alhur-font-primary);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    line-height: 1.5;
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}

.sefyan-interlude__rule {
    inline-size: 4ch;
    margin-inline: auto;
    margin-block-end: var(--sefyan-space-compact);
    border: 0;
    border-block-start: 1px solid var(--alhur-secondary, #D98B43);
}

/* --- src/components/_home.css --- */
/* ==========================================================================
   SEFYAN HOMEPAGE — Sprint 05V-03
   ==========================================================================
   Homepage-only compositions. Nothing here is shared with another template,
   so none of it can regress About, service singles, hubs or locations.

   Replaces, on the homepage only:
     component-hero (home-split)  → .sefyan-home-hero
     component-trust-bar (cards)  → .sefyan-trust-band
     component-planner-entry      → .sefyan-planner-entry
     component-pain-points        → .sefyan-factors
     component-services-grid      → .sefyan-service-index (shared w/ archive)
     component-area-selector      → .sefyan-areas
   Those components remain on disk, untouched, for their other callers.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   BUTTON — squared, not pill
   ══════════════════════════════════════════════════════════════════════════
   The inherited .alhur-btn uses radius-lg/999px; radius-full is the single
   most-used radius on both Sefyan and Alhur (Sprint 05V-01 §21). This is
   deliberately near-square so the primary action stops reading as the same
   pill.                                                                     */

.sefyan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: var(--alhur-secondary, #D98B43);
    color: var(--alhur-primary-dark, #0E2024);
    font-family: var(--alhur-font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    border-radius: var(--sefyan-radius-plane);
    cursor: pointer;
    transition: background-color var(--alhur-transition-base, 250ms ease),
                color var(--alhur-transition-base, 250ms ease);
}

.sefyan-cta:hover,
.sefyan-cta:focus-visible {
    background: var(--alhur-primary, #17333A);
    color: var(--alhur-white, #FFFFFF);
}

.sefyan-cta:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-home-hero { background: var(--alhur-white, #FFFFFF); }

.sefyan-home-hero__eyebrow {
    display: flex;
    align-items: center;
    margin-block-end: var(--sefyan-space-compact);
}

.sefyan-home-hero__title { margin-block-end: 1.5rem; }

.sefyan-home-hero__lede { margin-block-end: 1.5rem; }

.sefyan-home-hero__promise {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--alhur-primary-light, #1E6264);
    margin: 0 0 var(--sefyan-space-compact);
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--alhur-secondary, #D98B43);
}

.sefyan-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-block-end: 1rem;
}

.sefyan-home-hero__cta-icon { width: 18px; height: 18px; flex-shrink: 0; }

.sefyan-home-hero__microcopy { display: block; max-width: 52ch; }

/* Sprint 05V-10 §23: Planner's quiet guided link, sitting below the two
   real buttons — reads as the tertiary path, not a third button. */
.sefyan-home-hero__planner-link { margin-block-start: 1.25rem; }

/* Verified facts — a quiet ruled row, not stat cards. */
.sefyan-home-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: var(--sefyan-space-compact) 0 0;
    padding-block-start: 1.25rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-home-hero__fact > dt { margin-block-end: 0.25rem; }

.sefyan-home-hero__fact-value {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-primary, #17333A);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-home-hero__band { margin-block-start: var(--sefyan-space-standard); }

/* ══════════════════════════════════════════════════════════════════════════
   TRANSPORT MOMENT — new image section (Sprint 05V-10 §5/§6)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-transport-moment { padding-block: 0; }
.sefyan-transport-moment__frame { line-height: 0; }

@media (max-width: 700px) {
    /* Panoramic reads as a thin strip at phone width; a touch taller keeps
       the photograph legible without the section ballooning in height. */
    .sefyan-transport-moment .sefyan-media--panoramic-21-9 { aspect-ratio: 16 / 9; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROCESS DETAIL — Sprint 05V-10D §9-11
   ══════════════════════════════════════════════════════════════════════════
   The process -> care visual transition. 3:2 on desktop; §10 asks for a
   4:5-ish mobile crop that keeps both the action and the furniture rather
   than an awkward center-crop -- object-position favours the left/start
   side, where the movers are, rather than dead-center. */

.sefyan-process-detail { padding-block: 0 var(--sefyan-space-generous); }
.sefyan-process-detail__frame { line-height: 0; }
/* component-media.php's 'class' arg lands on the <figure> wrapper, not
   the <img> itself -- reach the real element via its own fixed class. */
.sefyan-process-detail__media .sefyan-media__img { object-position: 30% center; }

@media (max-width: 700px) {
    .sefyan-process-detail .sefyan-media--landscape-3-2 { aspect-ratio: 4 / 5; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DETAIL DUO — Sprint 05V-10D §12-15
   ══════════════════════════════════════════════════════════════════════════
   Two square images + a rule-based label, not cards -- no radius, no
   shadow, no boxed caption panel. Reuses Care's own "الونش"/"الفك
   والتركيب" labels immediately above it (§14), so this reads as one
   continuous idea rather than a new claim. */

.sefyan-detail-duo { padding-block: var(--sefyan-space-compact) var(--sefyan-space-generous); }

.sefyan-detail-duo__eyebrow { margin-block-end: 1.25rem; }

.sefyan-detail-duo__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    max-width: 640px;
}

.sefyan-detail-duo__item { margin: 0; }

.sefyan-detail-duo__label {
    margin-block-start: 0.85rem;
    padding-block-start: 0.65rem;
    border-block-start: var(--sefyan-rule);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--alhur-primary, #17333A);
}

/* Panoramic is right on desktop, far too letterboxed on a phone. */
@media (max-width: 700px) {
    .sefyan-home-hero__media { aspect-ratio: 4 / 3; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Sprint 05V-09: the "Why Sefyan" trust band and the single-CTA Planner
   entry (previously here) are retired — both are superseded by the Start
   Paths + Process Rail sections below (see front-page.php docblock for the
   full rationale). component-trust-bar.php's 'cards' variant and
   component-planner-entry.php remain unchanged on disk for any future
   caller; only their homepage-specific CSS is removed here, since it has
   zero other reference.
   ══════════════════════════════════════════════════════════════════════════ */


/* Sprint 05V-09's separate phone-utility line was folded into the hero's
   actual primary Call button in Sprint 05V-10 §23 — see
   component-home-hero.php. This CSS block is now orphaned by that same
   edit; removed rather than left as dead weight. */


/* ══════════════════════════════════════════════════════════════════════════
   START PATHS — the core conversion architecture (Sprint 05V-09 §7)
   ══════════════════════════════════════════════════════════════════════════
   Numbered editorial rows, not SaaS cards: a shared rule system, each row's
   own action pulled to the far edge so the three intents (guided/chat/call)
   read as distinct without three equal boxes.                              */

.sefyan-paths__label { display: block; margin-block-end: 1rem; color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-paths__title {
    margin: 0 0 var(--sefyan-space-standard);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.35;
    max-width: 20ch;
}

.sefyan-paths__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-paths__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem 1.75rem;
    padding-block: var(--sefyan-space-compact);
    border-block-end: var(--sefyan-rule);
}

.sefyan-paths__num {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-paths__heading { margin: 0 0 0.35rem; font-size: 1.1875rem; font-weight: 700; }
.sefyan-paths__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
    max-width: 46ch;
}

.sefyan-paths__action { flex-shrink: 0; white-space: nowrap; }

/* Sprint 05V-10 §24: Call (01) and WhatsApp (02) carry real buttons
   (solid/outlined via .sefyan-cta / .sefyan-cta--secondary); Planner (03)
   keeps the quieter .sefyan-link text treatment — the rows read
   hierarchically by weight, not just by position. */

@media (max-width: 640px) {
    .sefyan-paths__item {
        grid-template-columns: auto 1fr;
        grid-template-areas: "num heading" ". text" ". action";
    }
    .sefyan-paths__num { grid-area: num; }
    .sefyan-paths__body { grid-area: heading; display: contents; }
    .sefyan-paths__heading { grid-area: heading; }
    .sefyan-paths__text { grid-area: text; margin-block-start: 0.35rem; }
    .sefyan-paths__action { grid-area: action; margin-block-start: 0.85rem; justify-self: start; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PROCESS RAIL — homepage-exclusive (Sprint 05V-09 §9)
   ══════════════════════════════════════════════════════════════════════════
   A directional numbered rail, not the shared component's 3-col
   connected-timeline card grid. Vertical by default (mobile-first); the
   connecting rule runs along the block axis at every width, so "vertical
   rail preferred at mobile" is simply the only rail there is.             */

.sefyan-process-rail__title {
    margin: 0 0 var(--sefyan-space-standard);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.35;
    max-width: 26ch;
}

.sefyan-process-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    padding-inline-start: clamp(1.5rem, 3.5vw, 2.5rem);
    /* The numeral below is deliberately positioned into this padding gutter
       via a negative inset-inline-start on an absolutely-positioned child.
       At narrow widths that pushed real scrollable overflow (confirmed:
       scrollWidth 24px > clientWidth, exactly the padding value) rather than
       just sitting flush in the gutter as intended. Contained here, on this
       specific decorative gutter only -- not a body-level overflow mask. */
    overflow-x: clip;
}

.sefyan-process-rail__list::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 3px;
    inline-size: 1px;
    background: var(--alhur-border, #DDDCD7);
}

/* Sprint 05V-10 §9C/§10: line-draw motion on the rail itself. The generic
   [data-motion="line"] contract (_motion.css) transforms the host element;
   here the "line" is a ::before pseudo, so the reveal is redirected onto
   it instead of the <ol>, which must stay fully opaque/untransformed for
   its own [data-motion-item] children to stagger correctly. */
html.js-motion .sefyan-process-rail__list[data-motion="line"] {
    opacity: 1;
    transform: none;
}
html.js-motion .sefyan-process-rail__list[data-motion="line"]::before {
    transform: scaleY(0);
    transform-origin: block-start;
    transition: transform var(--sefyan-motion-slow) var(--sefyan-ease-emphasis);
}
html.js-motion .sefyan-process-rail__list[data-motion="line"].is-inview::before {
    transform: scaleY(1);
}

.sefyan-process-rail__item {
    position: relative;
    padding-block-end: var(--sefyan-space-standard);
}
.sefyan-process-rail__item:last-child { padding-block-end: 0; }

.sefyan-process-rail__num {
    position: absolute;
    inset-inline-start: calc(-1 * clamp(1.5rem, 3.5vw, 2.5rem));
    inset-block-start: 0.15rem;
    inline-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-process-rail__heading { margin: 0 0 0.5rem; font-size: 1.1875rem; font-weight: 700; }
.sefyan-process-rail__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--alhur-text-secondary, #6F7B7D);
    max-width: 52ch;
}

@media (min-width: 900px) {
    /* At wide viewports the rail turns horizontal, matching the brief's
       "connected by a directional rule" grammar without becoming a 3-col
       card grid — each stop is still a plain numbered block, not a panel. */
    .sefyan-process-rail__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 2rem;
        padding-inline-start: 0;
    }
    .sefyan-process-rail__list::before {
        inset-inline: 0;
        inset-block-start: -1.5rem;
        inset-block-end: auto;
        block-size: 1px;
        inline-size: auto;
    }
    html.js-motion .sefyan-process-rail__list[data-motion="line"]::before {
        transform: scaleX(0);
        transform-origin: inline-start;
    }
    html.js-motion .sefyan-process-rail__list[data-motion="line"].is-inview::before {
        transform: scaleX(1);
    }
    .sefyan-process-rail__item { padding-block-end: 0; padding-block-start: 1.75rem; }
    .sefyan-process-rail__num {
        position: static;
        display: block;
        margin-block-end: 0.85rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   CARE — image-led composition (Sprint 05V-09 §10)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-care { background: var(--alhur-accent, #F7F4EE); }

.sefyan-care__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.sefyan-care__media { margin: 0; }

.sefyan-care__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.3; }
.sefyan-care__lede { margin-block-end: var(--sefyan-space-standard); }

.sefyan-care__list { margin: 0; border-block-start: var(--sefyan-rule-strong); }

.sefyan-care__row {
    padding-block: 1.25rem;
    border-block-end: var(--sefyan-rule);
}

.sefyan-care__label { font-weight: 700; font-size: 1.0625rem; margin-block-end: 0.35rem; }
.sefyan-care__text { margin: 0; font-size: 0.9375rem; line-height: 1.75; color: var(--alhur-text-secondary, #6F7B7D); }

@media (min-width: 860px) {
    .sefyan-care__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   COST DECISION PREVIEW — compact (Sprint 05V-09 §11)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-cost-preview__title {
    margin: 0 0 var(--sefyan-space-standard);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
}

.sefyan-cost-preview__rail {
    list-style: none;
    margin: 0 0 var(--sefyan-space-standard);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-cost-preview__stop {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 1.1rem clamp(0.5rem, 1.5vw, 1rem) 1.1rem 0;
    border-block-end: var(--sefyan-rule);
}

.sefyan-cost-preview__num {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
    flex-shrink: 0;
}

.sefyan-cost-preview__label { font-size: 0.9375rem; font-weight: 600; }

@media (min-width: 700px) {
    .sefyan-cost-preview__rail { grid-template-columns: repeat(4, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════
   MID-PAGE CONTACT MOMENT (Sprint 05V-09 §14)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-contact-moment { background: var(--alhur-primary, #17333A); color: var(--alhur-white, #FFFFFF); text-align: center; }

.sefyan-contact-moment__title { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; }
.sefyan-contact-moment__text { margin-block: 1rem 2rem; margin-inline: auto; color: rgba(255, 255, 255, 0.75); }

.sefyan-contact-moment__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.sefyan-contact-moment__icon { width: 18px; height: 18px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   FINAL MULTI-PATH CLOSE — Sprint 05V-10 §26 redesign
   ══════════════════════════════════════════════════════════════════════════
   Extends .sefyan-close (the shared editorial-close shell, Sprint 05V-07)
   with the new Call 40% / WhatsApp 35% / Planner 25% hierarchy. Three
   visibly different weights, not three equal buttons: Call is the large
   solid zone, WhatsApp a proper but smaller outlined button beside it,
   Planner a quiet underlined text line below both — the same filled >
   outlined > text grammar used everywhere else this sprint (_shell.css §3). */

.sefyan-final-close__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-block-start: 2.25rem;
}

.sefyan-final-close__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.25rem;
}

/* Call — the 40% zone: larger than the standard .sefyan-cta so it visibly
   outweighs WhatsApp beside it, not just by color but by scale. */
.sefyan-final-close__call {
    padding: 1.15rem 2.5rem;
    font-size: 1.0625rem;
}

/* WhatsApp — 35%: a real secondary button (outlined, dark-surface variant
   from _shell.css §3), deliberately smaller than Call. */
.sefyan-final-close__whatsapp-btn { padding: 0.85rem 1.75rem; }

.sefyan-final-close__cta-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Planner — 25%: quiet underlined text, own row beneath both buttons. */
.sefyan-final-close__planner {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.sefyan-final-close__planner:hover,
.sefyan-final-close__planner:focus-visible { color: rgba(255, 255, 255, 0.9); }
.sefyan-final-close__planner:focus-visible {
    outline: 2px solid var(--alhur-secondary, #D98B43);
    outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════════
   FACTORS — "why details matter", numbered rows replacing 3 cards
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-factors__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 var(--sefyan-space-standard);
    max-width: 22ch;
}

.sefyan-factors__list { list-style: none; margin: 0; padding: 0; }

.sefyan-factors__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.5rem;
    align-items: start;
    padding-block: var(--sefyan-space-compact);
    border-block-start: var(--sefyan-rule);
}

.sefyan-factors__num {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-factors__heading {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

.sefyan-factors__text {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin: 0;
    max-width: 62ch;
}

@media (min-width: 860px) {
    .sefyan-factors__item { grid-template-columns: 6rem 1fr; gap: 2rem 3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SERVICES SECTION HEADING (rows themselves come from _editorial-service-index)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-home-services__heading {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 1.25rem;
    max-width: 26ch;
}

.sefyan-home-services__intro { margin-block-end: var(--sefyan-space-standard); }

.sefyan-home-services__more {
    margin-block-start: var(--sefyan-space-standard);
    padding-block-start: 1.5rem;
    border-block-start: var(--sefyan-rule);
}


/* ══════════════════════════════════════════════════════════════════════════
   AREAS — typographic geographic index, replaces the chip-cloud cards
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-areas { background: var(--alhur-accent, #F7F4EE); }

.sefyan-areas__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 1.25rem;
    max-width: 24ch;
}

.sefyan-areas__intro { margin-block-end: var(--sefyan-space-standard); }

.sefyan-areas__media { margin-block-end: var(--sefyan-space-standard); line-height: 0; }
@media (max-width: 700px) {
    .sefyan-areas__media .sefyan-media--panoramic-21-9 { aspect-ratio: 16 / 9; }
}

.sefyan-areas__hub { border-block-start: var(--sefyan-rule-strong); padding-block-start: 1.5rem; }
.sefyan-areas__hub + .sefyan-areas__hub { margin-block-start: var(--sefyan-space-standard); }

.sefyan-areas__hub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-block-end: 1.5rem;
}

.sefyan-areas__hub-title {
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    line-height: 1.1;
    font-weight: 800;
    margin: 0;
}

.sefyan-areas__hub-title a { color: inherit; text-decoration: none; }
.sefyan-areas__hub-title a:hover,
.sefyan-areas__hub-title a:focus-visible { color: var(--alhur-primary-light, #1E6264); }
.sefyan-areas__hub-title a:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 4px;
}

/* District index — a ruled list, not chips. */
.sefyan-areas__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.sefyan-areas__item { border-block-start: var(--sefyan-rule); }

.sefyan-areas__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.9rem;
    color: var(--alhur-text-primary, #20282C);
    text-decoration: none;
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: 600;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-areas__link:hover,
.sefyan-areas__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-areas__link:focus-visible {
    outline: 2px solid var(--alhur-primary-light, #1E6264);
    outline-offset: 2px;
}

.sefyan-areas__link .sefyan-arrow { opacity: 0.45; transition: opacity 250ms ease, transform 250ms ease; }
.sefyan-areas__link:hover .sefyan-arrow,
.sefyan-areas__link:focus-visible .sefyan-arrow { opacity: 1; transform: translateX(0.25rem); }
[dir="rtl"] .sefyan-areas__link:hover .sefyan-arrow,
[dir="rtl"] .sefyan-areas__link:focus-visible .sefyan-arrow { transform: scaleX(-1) translateX(0.25rem); }

.sefyan-areas__note { margin-block-start: var(--sefyan-space-standard); }

@media (min-width: 700px) {
    .sefyan-areas__list { grid-template-columns: repeat(2, 1fr); gap: 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sefyan-areas__link .sefyan-arrow,
    .sefyan-cta { transition: none; }
    .sefyan-areas__link:hover .sefyan-arrow,
    .sefyan-areas__link:focus-visible .sefyan-arrow { transform: none; }
    [dir="rtl"] .sefyan-areas__link:hover .sefyan-arrow,
    [dir="rtl"] .sefyan-areas__link:focus-visible .sefyan-arrow { transform: scaleX(-1); }
}

/* --- src/components/_service-families.css --- */
/* ==========================================================================
   SEFYAN SERVICE VISUAL FAMILIES — Sprint 05V-05
   ==========================================================================

   Four service singles, four structural signatures:

     .sefyan-service--moving-anatomy    horizontal · diagrammatic · wide
     .sefyan-service--packing-care      intimate   · tactile      · narrow
     .sefyan-service--lift-vertical     vertical   · ascending    · tall
     .sefyan-service--assembly-modular  modular    · technical    · gridded

   The divergence is carried by composition — dominant axis, measure, image
   ratio, and the treatment of the SAME published <dl>/<ul> markup inside each
   page's prose. Sprint 05V-01 proved that restyling one shared skeleton is
   what produced four identical pages in the first place; colour and copy were
   already different and it did not help.

   ADDITIVE: nothing here overrides an `alhur-*` rule. Only single-service
   templates render these classes, so the other 16 templates are untouched.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. SHARED HERO SCAFFOLD
   ══════════════════════════════════════════════════════════════════════════
   Only the pieces every family genuinely shares. Each family's own layout
   lives in its section below.                                               */

.sefyan-shero {
    display: block;
    position: relative;
}

.sefyan-shero__eyebrow {
    display: block;
    margin-block-end: 0.75rem;
    color: var(--alhur-secondary-dark, #AE6F36);
}

.sefyan-shero__title { margin: 0; }

.sefyan-shero__lede { margin-block-start: 1.25rem; }

.sefyan-shero__bleed {
    inline-size: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

/* Primary action. Square-cornered on purpose: the pill button is the single
   strongest shape signal shared with the inherited theme (05V-01 §21). */
.sefyan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 2rem;
    padding: 0.95rem 2rem;
    background: var(--alhur-secondary, #D98B43);
    color: var(--alhur-white, #FFFFFF);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 0;
    border-radius: var(--sefyan-radius-plane);
    transition: background-color var(--alhur-transition-base, 250ms ease);
}

.sefyan-cta:hover,
.sefyan-cta:focus-visible {
    background: var(--alhur-secondary-dark, #AE6F36);
    color: var(--alhur-white, #FFFFFF);
}

.sefyan-cta:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. SHARED PROSE BASE
   ══════════════════════════════════════════════════════════════════════════
   The base is intentionally plain. Each family then re-treats the SAME
   published <h2>/<ul>/<dl> markup differently — which is what makes the body
   of each page, not just its furniture, read as a different design.          */

.sefyan-prose { color: var(--alhur-text, #17333A); }

.sefyan-prose > * + * { margin-block-start: 1.5rem; }

.sefyan-prose h2 {
    margin-block-start: 3rem;
    margin-block-end: 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.4;
    font-weight: 700;
}

.sefyan-prose h2:first-child { margin-block-start: 0; }

.sefyan-prose p {
    font-size: 1.0625rem;
    line-height: 1.9;
    margin: 0;
}

.sefyan-prose a {
    color: var(--alhur-primary-light, #1E6264);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.sefyan-prose a:hover,
.sefyan-prose a:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-prose strong { font-weight: 700; }

.sefyan-prose ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sefyan-prose ul li {
    position: relative;
    padding-inline-start: 1.5rem;
    padding-block: 0.4rem;
    line-height: 1.8;
}

.sefyan-prose ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.15rem;
    inline-size: 0.75rem;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-prose dl { margin: 0; }
.sefyan-prose dt { font-weight: 700; }
.sefyan-prose dd { margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   3. MOVING — "MOVE ANATOMY"
   ══════════════════════════════════════════════════════════════════════════
   Dominant axis: HORIZONTAL. Wide bleeding image band, type overlapping it,
   and a factor index that runs across rather than down.                      */

.sefyan-service--moving-anatomy .sefyan-shero__media { --sefyan-hero-min: 42vh; }

.sefyan-service--moving-anatomy .sefyan-shero__overlap {
    position: relative;
    margin-block-start: -6rem;
}

.sefyan-service--moving-anatomy .sefyan-shero__plane {
    background: var(--alhur-white, #FFFFFF);
    padding: clamp(1.75rem, 4vw, 3rem);
    max-inline-size: min(100%, 46rem);
    border-radius: var(--sefyan-radius-plane);
}

/* Horizontal factor rail under the hero. */
.sefyan-shero__rail {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
    border-block-start: var(--sefyan-rule);
    padding-block-start: 1.25rem;
}

.sefyan-shero__rail-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-block: 0.5rem;
}

.sefyan-shero__rail-num {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-shero__rail-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* The anatomy itself: a connected horizontal index. */
.sefyan-anatomy__title {
    margin: 0.75rem 0 0;
    font-size: var(--sefyan-display-size);
    line-height: var(--sefyan-display-lh);
    font-weight: 800;
}

.sefyan-anatomy__lede { margin-block-start: 1.25rem; }

.sefyan-anatomy__list {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

/* Sprint 05V-10B §3: the connecting rule is now a ::before (was a plain
   border-block-start) so line-draw motion can animate it alone, without
   touching the visibility of the nodes/labels sitting on it — those
   stagger independently via their own data-motion-item. */
.sefyan-anatomy__list::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: var(--alhur-primary, #17333A);
}

html.js-motion .sefyan-anatomy__list[data-motion="line"] {
    opacity: 1;
    transform: none;
}
html.js-motion .sefyan-anatomy__list[data-motion="line"]::before {
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--sefyan-motion-slow) var(--sefyan-ease-emphasis);
}
html.js-motion .sefyan-anatomy__list[data-motion="line"].is-inview::before {
    transform: scaleX(1);
}

.sefyan-anatomy__part {
    position: relative;
    padding: 1.75rem clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
    padding-inline: 0 clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Connection node sitting on the shared rule — the "anatomy" gesture. */
.sefyan-anatomy__part::before {
    content: "";
    position: absolute;
    inset-block-start: -4.5px;
    inset-inline-start: 0;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--alhur-secondary, #D98B43);
}

.sefyan-anatomy__num {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin-block-end: 0.75rem;
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-anatomy__label {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

.sefyan-anatomy__note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-anatomy__transition { margin-block: clamp(2rem, 5vw, 4rem); }

/* Relationship rows — ruled, never carded. */
.sefyan-relations__title,
.sefyan-move-start__title,
.sefyan-elevation__title,
.sefyan-siblings__title,
.sefyan-areas-index__title {
    margin: 0 0 2rem;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1.35;
    font-weight: 700;
}

.sefyan-relations__list { margin: 0; }

.sefyan-relations__row {
    display: grid;
    grid-template-columns: minmax(9rem, 22%) 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: 1.5rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-relations__row:last-child { border-block-end: var(--sefyan-rule); }

.sefyan-relations__term {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.sefyan-relations__desc {
    margin: 0;
    line-height: 1.8;
    color: var(--alhur-text-secondary, #6F7B7D);
}

/* Moving's step sequence.
   Sprint 05V-06 §1 pacing review: this was previously a second four-across
   rail with large ghosted numerals — the same visual sentence the anatomy
   above already speaks, two sections apart. The CONTENT is different (what a
   move is made of vs how to start one) so neither was deleted; the step
   sequence is now deliberately quieter and denser so the anatomy stays the
   page's one diagrammatic moment. */
.sefyan-move-start__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(2rem, 5vw, 4rem);
}

.sefyan-move-start__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.9rem;
    align-items: baseline;
    padding-block: 0.9rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-move-start__num {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-move-start__label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.sefyan-move-start__note {
    grid-column: 2;
    margin: 0.15rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. PACKING — "CARE / MATERIAL DETAIL"
   ══════════════════════════════════════════════════════════════════════════
   Dominant axis: NONE — this page is about stillness. Narrowest measure,
   largest whitespace, smallest display type, one macro crop that occupies a
   minority of the width. No numerals anywhere: Packing is the only family
   with no numbering system at all, which is a strong blur-test signal.       */

.sefyan-shero__intimate {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: end;
    padding-block: clamp(3rem, 8vw, 7rem);
}

.sefyan-shero__macro { margin: 0; }

.sefyan-shero__intimate-text { padding-block-end: clamp(0.5rem, 3vw, 3rem); }

/* Notably smaller than Moving's / Lift's display tier. */
.sefyan-shero__title--quiet {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.3;
    font-weight: 700;
    max-inline-size: 18ch;
}

.sefyan-service--packing-care .sefyan-shero__lede {
    margin-block-start: 1.5rem;
    max-inline-size: 46ch;
}

.sefyan-service--packing-care .sefyan-link { margin-block-start: 2rem; }

.sefyan-care-scene__figure {
    margin: 0;
    inline-size: min(100%, 68%);
    margin-inline-start: auto;   /* offsets toward the reading edge in RTL */
}

.sefyan-care-scene__caption {
    display: block;
    margin-block-start: 1rem;
    max-inline-size: 44ch;
    line-height: 1.7;
}

/* Tactile list treatment — layered rules that read as stacked protection,
   echoing the material language without claiming any specific material. */
.sefyan-service--packing-care .sefyan-prose ul li::before {
    inline-size: 0.5rem;
    box-shadow: 0 4px 0 -3px var(--alhur-border, #DDDCD7),
                0 8px 0 -3px var(--alhur-border, #DDDCD7);
}

.sefyan-service--packing-care .sefyan-prose dl {
    display: grid;
    gap: 0;
    margin-block-start: 1.5rem;
}

.sefyan-service--packing-care .sefyan-prose dt {
    padding-block: 1rem 0.35rem;
    border-block-start: var(--sefyan-rule);
    font-size: 1rem;
}

.sefyan-service--packing-care .sefyan-prose dd {
    padding-block-end: 1rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. LIFT — "VERTICAL / ACCESS"
   ══════════════════════════════════════════════════════════════════════════
   Dominant axis: VERTICAL. The only hero taller than one viewport-third at
   desktop, the only page with a continuous elevation rule, and the only one
   whose images ascend along the inline axis as you scroll.                   */

.sefyan-shero__vertical {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.sefyan-shero__title--tall {
    max-inline-size: 14ch;   /* forces a taller, narrower title block */
}

.sefyan-shero__tall { margin: 0; }

/* Vertical rule with elevation marks, between text and image. */
.sefyan-shero__elevation {
    position: relative;
    align-self: stretch;
    inline-size: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 1rem;
}

.sefyan-shero__elevation-rule {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--alhur-border, #DDDCD7);
}

.sefyan-shero__elevation-mark {
    position: relative;
    inline-size: 100%;
    border-block-start: var(--sefyan-rule-strong);
    opacity: 0.55;
}

.sefyan-shero__elevation-mark:first-of-type { opacity: 1; }

/* Sprint 05V-10B §5: the generic [data-motion-item].is-inview rule
   (_motion.css) resolves to opacity:1 for every item, which would flatten
   these marks' intentional depth dimming (0.55 for all but the first).
   Higher-specificity override restores the real final-state opacity once
   revealed, instead of the generic default. */
html.js-motion .sefyan-shero__elevation-mark[data-motion-item].is-inview { opacity: 0.55; }
html.js-motion .sefyan-shero__elevation-mark:first-of-type[data-motion-item].is-inview { opacity: 1; }

/* The ascending image stack. */
.sefyan-elevation__stack {
    position: relative;
    margin-block-start: clamp(2rem, 5vw, 3.5rem);
    padding-inline-start: clamp(1.5rem, 4vw, 3rem);
}

.sefyan-elevation__rule {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    background: var(--alhur-primary, #17333A);
    opacity: 0.35;
}

.sefyan-elevation__step {
    position: relative;
    margin: 0;
    inline-size: min(100%, 40%);
}

/* Each step sits further along the inline axis AND overlaps upward, so the
   stack climbs. */
.sefyan-elevation__step--1 { margin-inline-start: 0; }

.sefyan-elevation__step--2 {
    margin-inline-start: 46%;
    margin-block-start: -14%;
    inline-size: min(100%, 36%);
}

/* Tick connecting each image back to the elevation rule. */
.sefyan-elevation__step::before {
    content: "";
    position: absolute;
    inset-block-start: 2.5rem;
    inset-inline-end: 100%;
    inline-size: clamp(1rem, 3vw, 2.5rem);
    border-block-start: var(--sefyan-rule-strong);
    opacity: 0.5;
}

.sefyan-elevation__caption {
    display: block;
    margin-block-start: 1rem;
    line-height: 1.7;
}

/* Lift's <dl> becomes the access-conditions rail: each term is a stop on a
   vertical line. This is the page's signature section and it is built from
   the published copy, not a second authored copy of it. */
.sefyan-service--lift-vertical .sefyan-prose dl {
    position: relative;
    margin-block-start: 1.75rem;
    padding-inline-start: 1.75rem;
}

.sefyan-service--lift-vertical .sefyan-prose dl::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    inline-size: 1px;
    background: var(--alhur-primary, #17333A);
    opacity: 0.3;
}

.sefyan-service--lift-vertical .sefyan-prose dt {
    position: relative;
    padding-block: 1rem 0.35rem;
    font-size: 1.0625rem;
}

.sefyan-service--lift-vertical .sefyan-prose dt::before {
    content: "";
    position: absolute;
    inset-block-start: 1.6rem;
    inset-inline-start: -1.75rem;
    inline-size: 1.1rem;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-service--lift-vertical .sefyan-prose dd {
    padding-block-end: 0.75rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. ASSEMBLY — "MODULAR / SEQUENCE"
   ══════════════════════════════════════════════════════════════════════════
   Dominant axis: GRID. Everything sits in visible modules with drawn joins.
   Square image ratio, tighter type, no cinematic bleed anywhere on the page —
   and no second photograph, which is itself part of the signature.           */

.sefyan-shero__modular {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;                                   /* the 1px IS the grid line */
    background: var(--alhur-border, #DDDCD7);
    border: 1px solid var(--alhur-border, #DDDCD7);
    margin-block: clamp(2rem, 5vw, 3.5rem);
}

.sefyan-shero__module {
    background: var(--alhur-white, #FFFFFF);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.sefyan-shero__module--text  { grid-column: span 3; }
.sefyan-shero__module--media { grid-column: span 3; padding: 0; margin: 0; }
.sefyan-shero__module--label { grid-column: span 2; display: flex; gap: 0.75rem; align-items: flex-start; }

.sefyan-shero__title--technical {
    font-size: clamp(1.625rem, 3vw, 2.5rem);
    line-height: 1.3;
    font-weight: 700;
}

.sefyan-shero__module-num {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-secondary, #D98B43);
    padding-block-start: 0.2rem;
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-shero__module-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.6;
}

/* Assembly's <dl> becomes the component-module grid — separable parts. */
.sefyan-service--assembly-modular .sefyan-prose dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--alhur-border, #DDDCD7);
    border: 1px solid var(--alhur-border, #DDDCD7);
    margin-block-start: 1.75rem;
}

.sefyan-service--assembly-modular .sefyan-prose dt {
    background: var(--alhur-white, #FFFFFF);
    padding: 1.1rem 1.25rem 0.35rem;
    font-size: 1rem;
}

.sefyan-service--assembly-modular .sefyan-prose dd {
    background: var(--alhur-white, #FFFFFF);
    padding: 0 1.25rem 1.25rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.75;
    font-size: 0.9375rem;
}

/* Lists read as an ordered component sequence rather than bullets. */
.sefyan-service--assembly-modular .sefyan-prose ul {
    counter-reset: sefyan-part;
    display: grid;
    gap: 0;
}

.sefyan-service--assembly-modular .sefyan-prose ul li {
    counter-increment: sefyan-part;
    padding-inline-start: 3rem;
    padding-block: 0.6rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-service--assembly-modular .sefyan-prose ul li::before {
    content: counter(sefyan-part, decimal-leading-zero);
    inset-block-start: 0.6rem;
    inline-size: auto;
    border: 0;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. SHARED INDEXES — related services + coverage areas
   ══════════════════════════════════════════════════════════════════════════
   One markup shape (a genuine shared index), re-weighted per family so it
   never becomes the thing that makes the four pages look alike.              */

.sefyan-siblings__list,
.sefyan-areas-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sefyan-siblings__item { border-block-start: var(--sefyan-rule); }
.sefyan-siblings__item:last-child { border-block-end: var(--sefyan-rule); }

.sefyan-siblings__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding-block: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-siblings__link:hover,
.sefyan-siblings__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-siblings__link:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}

.sefyan-siblings__num {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-text-secondary, #6F7B7D);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-siblings__name {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

.sefyan-siblings__text {
    display: block;
    margin-block-start: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-siblings__link:hover .sefyan-siblings__arrow { transform: translateX(0.3rem); }
[dir="rtl"] .sefyan-siblings__link:hover .sefyan-siblings__arrow { transform: scaleX(-1) translateX(0.3rem); }

/* Packing drops the index numerals entirely — no numbering anywhere on that
   page is part of its identity. */
.sefyan-service--packing-care .sefyan-siblings__num { display: none; }
.sefyan-service--packing-care .sefyan-siblings__link { grid-template-columns: 1fr auto; }

/* Coverage areas — typographic index, never location cards. */
.sefyan-areas-index__group {
    padding-block: 1.5rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-areas-index__gov {
    display: block;
    margin-block-end: 0.85rem;
    color: var(--alhur-secondary-dark, #AE6F36);
}

.sefyan-areas-index__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.sefyan-areas-index__item a {
    color: inherit;
    text-decoration: none;
    font-size: 1.0625rem;
    padding-block-end: 0.2rem;
    border-block-end: 1px solid transparent;
    transition: border-color var(--alhur-transition-base, 250ms ease),
                color var(--alhur-transition-base, 250ms ease);
}

.sefyan-areas-index__item a:hover,
.sefyan-areas-index__item a:focus-visible {
    color: var(--alhur-secondary-dark, #AE6F36);
    border-block-end-color: currentColor;
}

.sefyan-areas-index__item a:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}

/* NOTE (Sprint 05V-06 §1 pacing review): Lift previously stacked this index
   vertically "for consistency with the page axis". It cost 176px of scroll
   over the identical data on the other three pages and differentiated
   nothing — Lift's identity is already carried by its hero and its ascending
   image stack. Reverted to the shared wrapped index; decorative length is not
   an identity. */

/* Adjacent relationship surfaces (coverage areas + related services) read as
   one zone rather than two full-weight sections. Same content, same links,
   ~120px less dead space between them. */
.sefyan-areas-index + .sefyan-siblings { padding-block-start: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   8. RESPONSIVE — the four identities must survive the collapse (§19)
   ══════════════════════════════════════════════════════════════════════════
   At 375 every layout is one column, so column count cannot carry identity.
   What carries it instead: image RATIO (wide / portrait / tall / square),
   NUMBERING (present, absent, ascending, module-indexed), and RULE DIRECTION
   (horizontal / none / vertical / grid). All four survive to mobile.         */

@media (max-width: 1024px) {
    .sefyan-anatomy__list      { grid-template-columns: repeat(3, 1fr); }
    .sefyan-shero__modular     { grid-template-columns: repeat(4, 1fr); }
    .sefyan-shero__module--text,
    .sefyan-shero__module--media { grid-column: span 4; }
    .sefyan-shero__module--label { grid-column: span 2; }
}

@media (max-width: 860px) {
    /* MOVING keeps its horizontal band + horizontal rail. */
    .sefyan-service--moving-anatomy .sefyan-shero__overlap { margin-block-start: -3rem; }
    .sefyan-anatomy__list { grid-template-columns: repeat(2, 1fr); }

    /* PACKING keeps the macro crop and the narrow column, stacked. */
    .sefyan-shero__intimate {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 2rem;
    }
    .sefyan-shero__macro { inline-size: min(100%, 72%); }
    .sefyan-care-scene__figure { inline-size: 100%; }

    /* LIFT keeps the vertical rule and the ascending offset — the rail moves
       to the start edge and the image sits below, still tall, still stepped. */
    .sefyan-shero__vertical {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "elevation column"
            "elevation tall";
        align-items: start;
    }
    .sefyan-shero__column    { grid-area: column; }
    .sefyan-shero__elevation { grid-area: elevation; }
    .sefyan-shero__tall      { grid-area: tall; margin-block-start: 2rem; }

    .sefyan-elevation__step--1 { inline-size: min(100%, 72%); }
    .sefyan-elevation__step--2 {
        inline-size: min(100%, 64%);
        margin-inline-start: 34%;
        margin-block-start: -8%;
    }

    /* ASSEMBLY keeps its visible module grid, at two columns. */
    .sefyan-shero__modular       { grid-template-columns: repeat(2, 1fr); }
    .sefyan-shero__module--text,
    .sefyan-shero__module--media { grid-column: span 2; }
    .sefyan-shero__module--label { grid-column: span 1; }
    .sefyan-service--assembly-modular .sefyan-prose dl { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .sefyan-anatomy__list    { grid-template-columns: 1fr; }
    .sefyan-anatomy__part    { padding-block: 1.25rem 0; border-block-start: var(--sefyan-rule); }
    .sefyan-anatomy__part:first-child { border-block-start: 0; }
    .sefyan-move-start__list { grid-template-columns: 1fr; }

    .sefyan-relations__row   { grid-template-columns: 1fr; gap: 0.5rem; }

    .sefyan-siblings__link   { grid-template-columns: auto 1fr; }
    .sefyan-siblings__arrow  { display: none; }
    .sefyan-service--packing-care .sefyan-siblings__link { grid-template-columns: 1fr; }

    /* Lift: the elevation rail stays, narrowed. */
    .sefyan-shero__elevation { inline-size: 1.5rem; }
    .sefyan-elevation__step--1 { inline-size: 100%; }
    .sefyan-elevation__step--2 { inline-size: min(100%, 78%); margin-inline-start: 22%; margin-block-start: 1.5rem; }

    .sefyan-shero__module--label { grid-column: span 2; }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sefyan-cta,
    .sefyan-siblings__link,
    .sefyan-areas-index__item a { transition: none; }
    .sefyan-siblings__link:hover .sefyan-siblings__arrow { transform: none; }
    [dir="rtl"] .sefyan-siblings__link:hover .sefyan-siblings__arrow { transform: scaleX(-1); }
}

/* --- src/components/_geo-families.css --- */
/* ==========================================================================
   SEFYAN GEOGRAPHIC SYSTEM — Sprint 05V-06
   ==========================================================================

   Two governorate hubs + three location visual families:

     .sefyan-hub                       geographic editorial index (no photos)
     .sefyan-location--area-breadth    horizontal · spacious · extent rule
     .sefyan-location--access-vertical vertical   · threshold · entry markers
     .sefyan-location--route-connection movement  · nodes     · dotted spine

   WHY LAYOUT AND NOT PHOTOGRAPHY: Sefyan has no district photography and
   generating seven fake "district photographs" is forbidden. Identity is
   therefore carried by dominant axis, measure, rule direction and typography.
   Only the ACCESS family shows a photograph, on one of its two pages.

   CLAIM DISCIPLINE: every rule/node/marker below is decorative and paired
   with real text. "access-vertical" and "route-connection" name LAYOUTS, not
   districts — no CSS here renders a statement about a district's access or
   distance, because no such statement exists in the templates.

   ADDITIVE: nothing here overrides an `alhur-*` rule.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. GOVERNORATE HUB — geographic editorial index
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-hub-hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.sefyan-hub-hero__eyebrow {
    display: block;
    margin-block-end: 1rem;
    color: var(--alhur-secondary-dark, #AE6F36);
}

/* The largest type in the theme. A governorate hub should announce a place at
   a different scale than a district page announces itself. */
.sefyan-hub-hero__title {
    margin: 0;
    font-size: clamp(2.75rem, 8vw, 6rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.015em;
    max-inline-size: 16ch;
}

.sefyan-hub-hero__lede {
    margin-block-start: 1.75rem;
    max-inline-size: 58ch;
}

.sefyan-hub-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-block-start: 2.5rem;
    padding-block-start: 2rem;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-hub-hero__stat {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}

.sefyan-hub-hero__stat-num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-hub-hero__stat-label {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--alhur-text-secondary, #6F7B7D);
    max-inline-size: 22ch;
}

/* ── District index — the hub's signature, and what a location page lacks. */

.sefyan-districts__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 1.25rem;
    border-block-end: var(--sefyan-rule-strong);
}

.sefyan-districts__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1.35;
    font-weight: 700;
}

.sefyan-districts__count { color: var(--alhur-text-secondary, #6F7B7D); }

.sefyan-districts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sefyan-districts__item { border-block-end: var(--sefyan-rule); }

.sefyan-districts__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(1rem, 4vw, 2.5rem);
    align-items: center;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    text-decoration: none;
    color: inherit;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-districts__link:hover,
.sefyan-districts__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-districts__link:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}

.sefyan-districts__num {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: transparent;
    -webkit-text-stroke: 1px var(--alhur-secondary, #D98B43);
    direction: ltr;
    unicode-bidi: isolate;
}

/* District names sit at display weight — the index IS the page. */
.sefyan-districts__name {
    display: block;
    font-size: clamp(1.375rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
}

.sefyan-districts__text {
    display: block;
    margin-block-start: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--alhur-text-secondary, #6F7B7D);
    max-inline-size: 62ch;
}

.sefyan-districts__link:hover .sefyan-districts__arrow { transform: translateX(0.3rem); }
[dir="rtl"] .sefyan-districts__link:hover .sefyan-districts__arrow { transform: scaleX(-1) translateX(0.3rem); }


/* ══════════════════════════════════════════════════════════════════════════
   2. SHARED LOCATION PIECES
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-lhero__eyebrow {
    display: block;
    margin-block-end: 0.85rem;
    color: var(--alhur-secondary-dark, #AE6F36);
}

.sefyan-lhero__title { margin: 0; }
.sefyan-lhero__lede  { margin-block-start: 1.25rem; }
.sefyan-lhero__gov   { margin-block-start: 2rem; }

/* Service index on a location page. */
.sefyan-loc-services__title {
    margin: 0 0 1.75rem;
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    line-height: 1.35;
    font-weight: 700;
}

.sefyan-loc-services__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sefyan-loc-services__item { border-block-start: var(--sefyan-rule); }
.sefyan-loc-services__item:last-child { border-block-end: var(--sefyan-rule); }

.sefyan-loc-services__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding-block: 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-loc-services__link:hover,
.sefyan-loc-services__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-loc-services__link:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}

.sefyan-loc-services__num {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-text-secondary, #6F7B7D);
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-loc-services__name { font-size: 1.0625rem; font-weight: 600; }

.sefyan-loc-services__link:hover .sefyan-arrow { transform: translateX(0.3rem); }
[dir="rtl"] .sefyan-loc-services__link:hover .sefyan-arrow { transform: scaleX(-1) translateX(0.3rem); }

/* Governorate return block. */
.sefyan-loc-gov__link {
    display: block;
    padding-block: 1.75rem;
    border-block: var(--sefyan-rule-strong);
    text-decoration: none;
    color: inherit;
    transition: color var(--alhur-transition-base, 250ms ease);
}

.sefyan-loc-gov__link:hover,
.sefyan-loc-gov__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.sefyan-loc-gov__link:focus-visible {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 3px;
}

.sefyan-loc-gov__name {
    display: block;
    margin-block: 0.5rem 0.35rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
}

.sefyan-loc-gov__hint {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
}

/* Wide variant lays the governorate name against the hint horizontally. */
.sefyan-loc-gov--wide .sefyan-loc-gov__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "label name" ".     hint";
    gap: 0.35rem 2.5rem;
    align-items: baseline;
}
.sefyan-loc-gov--wide .sefyan-label { grid-area: label; }
.sefyan-loc-gov--wide .sefyan-loc-gov__name { grid-area: name; margin: 0; }
.sefyan-loc-gov--wide .sefyan-loc-gov__hint { grid-area: hint; }


/* ══════════════════════════════════════════════════════════════════════════
   3. AREA-BREADTH — horizontal extent
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-lhero__wide { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }

.sefyan-lhero__title--wide {
    max-inline-size: 22ch;   /* deliberately broad — the opposite of ACCESS */
}

.sefyan-lhero__lede--wide { max-inline-size: 70ch; }

/* Full-bleed extent rule with terminal caps. Survives the mobile collapse
   unchanged, which is how AREA keeps its identity at 375. */
.sefyan-lhero__extent {
    display: flex;
    align-items: center;
    inline-size: 100%;
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.sefyan-lhero__extent-rule {
    flex: 1;
    block-size: 1px;
    background: var(--alhur-primary, #17333A);
    opacity: 0.5;
}

.sefyan-lhero__extent-cap {
    inline-size: 1px;
    block-size: 1.25rem;
    background: var(--alhur-secondary, #D98B43);
}

.sefyan-lhero__wide-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block-end: clamp(1rem, 3vw, 2rem);
}

.sefyan-lhero__wide-foot .sefyan-cta,
.sefyan-lhero__wide-foot .sefyan-lhero__gov { margin-block-start: 0; }

/* Broad prose measure + horizontally-ruled headings. */
.sefyan-location--area-breadth .sefyan-prose h2 {
    padding-block-end: 0.6rem;
    border-block-end: var(--sefyan-rule);
}

.sefyan-location--area-breadth .sefyan-prose dl {
    display: grid;
    grid-template-columns: minmax(9rem, 24%) 1fr;
    gap: 0 clamp(1rem, 3vw, 2.5rem);
    margin-block-start: 1.5rem;
}

.sefyan-location--area-breadth .sefyan-prose dt {
    padding-block: 1rem 0.35rem;
    border-block-start: var(--sefyan-rule);
}

.sefyan-location--area-breadth .sefyan-prose dd {
    padding-block: 1rem 0.35rem;
    border-block-start: var(--sefyan-rule);
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. ACCESS-VERTICAL — threshold / entry
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-lhero__vertical {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.sefyan-lhero__threshold {
    position: relative;
    align-self: stretch;
    inline-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 1.5rem;
}

.sefyan-lhero__threshold-rule {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--alhur-border, #DDDCD7);
}

.sefyan-lhero__threshold-mark {
    position: relative;
    inline-size: 100%;
    border-block-start: var(--sefyan-rule-strong);
    opacity: 0.5;
}

.sefyan-lhero__threshold-mark:first-of-type { opacity: 1; }

/* ACCESS sits in a genuinely narrow grid column, so the shared display clamp
   (up to 5rem) overflowed a 42-character Arabic H1 into six lines. A smaller
   ceiling keeps the column tall and narrow — which is the point — while
   staying readable. It also becomes a family signal in its own right: AREA
   carries the largest type, ACCESS the most compressed, ROUTE the default. */
.sefyan-lhero__title--tall {
    max-inline-size: 16ch;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    /* Sprint 05V-08: 1.25 still clipped into the same glyph-ink-overlap bug
       fixed sitewide on --sefyan-display-lh (was 1.15) -- this local
       override needs the same correction, not just the token. */
    line-height: 1.4;
}

.sefyan-lhero__entry { margin: 0; }

.sefyan-lhero__entry--drawn {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: var(--alhur-accent, #F7F4EE);
    color: var(--alhur-primary-light, #1E6264);
}

.sefyan-lhero__entry--drawn svg { inline-size: 58%; block-size: auto; }

/* Content sits against a continuous threshold rule. */
.sefyan-loc-threshold {
    position: relative;
    padding-inline-start: clamp(1.25rem, 3vw, 2.25rem);
}

.sefyan-loc-threshold__rule {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    background: var(--alhur-primary, #17333A);
    opacity: 0.28;
}

/* Every heading gets an entry tick on the rule. */
.sefyan-location--access-vertical .sefyan-prose h2 {
    position: relative;
}

.sefyan-location--access-vertical .sefyan-prose h2::before {
    content: "";
    position: absolute;
    inset-block-start: 0.85em;
    inset-inline-end: calc(100% + clamp(1.25rem, 3vw, 2.25rem));
    inline-size: clamp(0.75rem, 2vw, 1.25rem);
    border-block-start: var(--sefyan-rule-strong);
}

/* The published <dl> becomes a stepped entry rail. */
.sefyan-location--access-vertical .sefyan-prose dl {
    margin-block-start: 1.5rem;
    border-inline-start: var(--sefyan-rule);
    padding-inline-start: 1.25rem;
}

.sefyan-location--access-vertical .sefyan-prose dt {
    padding-block: 0.9rem 0.3rem;
    font-size: 1.0625rem;
}

.sefyan-location--access-vertical .sefyan-prose dd {
    padding-block-end: 0.6rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. ROUTE-CONNECTION — origin → destination
   ══════════════════════════════════════════════════════════════════════════
   An editorial movement metaphor. No coordinates, no distance, no travel
   time — see the template docblocks.                                         */

.sefyan-lhero__route { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.sefyan-lhero__line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding-block: 1.5rem;
    border-block: var(--sefyan-rule);
}

.sefyan-lhero__node {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--alhur-primary, #17333A);
    flex-shrink: 0;
}

.sefyan-lhero__node--end {
    background: var(--alhur-secondary, #D98B43);
    border-color: var(--alhur-secondary, #D98B43);
}

.sefyan-lhero__node-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-lhero__node-label--end { color: var(--alhur-primary, #17333A); font-weight: 700; }

/* Dashed, because a solid line would read as a measured path. */
.sefyan-lhero__track {
    flex: 1;
    min-inline-size: 3rem;
    block-size: 0;
    border-block-start: 1px dashed var(--alhur-border, #DDDCD7);
}

/* Sprint 05V-10B §10: the track starts drawing slightly after the origin
   node/label have already appeared, so the sequence reads start -> line ->
   end rather than everything arriving at once. */
html.js-motion .sefyan-lhero__track[data-motion="line"] {
    transition-delay: calc(var(--sefyan-motion-step) * 2);
}

.sefyan-lhero__route-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-block-start: 1.5rem;
}

.sefyan-lhero__route-foot .sefyan-cta,
.sefyan-lhero__route-foot .sefyan-lhero__gov { margin-block-start: 0; }

/* Content on a dotted spine with a node at every heading. */
.sefyan-loc-route {
    position: relative;
    padding-inline-start: clamp(1.5rem, 3.5vw, 2.5rem);
}

.sefyan-loc-route__spine {
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 3px;
    inline-size: 0;
    border-inline-start: 1px dashed var(--alhur-border, #DDDCD7);
}

.sefyan-location--route-connection .sefyan-prose h2 { position: relative; }

.sefyan-location--route-connection .sefyan-prose h2::before {
    content: "";
    position: absolute;
    inset-block-start: 0.7em;
    inset-inline-end: calc(100% + clamp(1.5rem, 3.5vw, 2.5rem) - 7px);
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--alhur-white, #FFFFFF);
    border: 1.5px solid var(--alhur-secondary, #D98B43);
}

/* The published <dl> becomes a list of stops. */
.sefyan-location--route-connection .sefyan-prose dl { margin-block-start: 1.5rem; }

.sefyan-location--route-connection .sefyan-prose dt {
    position: relative;
    padding-block: 0.9rem 0.3rem;
    padding-inline-start: 1.25rem;
    font-size: 1.0625rem;
}

.sefyan-location--route-connection .sefyan-prose dt::before {
    content: "";
    position: absolute;
    inset-block-start: 1.45rem;
    inset-inline-start: 0;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--alhur-secondary, #D98B43);
}

.sefyan-location--route-connection .sefyan-prose dd {
    padding-inline-start: 1.25rem;
    padding-block-end: 0.6rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}

/* Route return leg — the governorate block gets its own track. */
.sefyan-loc-gov--route .sefyan-loc-gov__link {
    position: relative;
    padding-inline-start: 2rem;
}

.sefyan-loc-gov--route .sefyan-loc-gov__link::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 1.25rem;
    border-block-start: 1px dashed var(--alhur-secondary, #D98B43);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE — three identities must survive true 375 (§23)
   ══════════════════════════════════════════════════════════════════════════
   Column count cannot carry identity at 375 because everything is one column.
   What carries it: RULE DIRECTION (horizontal extent / vertical threshold /
   dotted route), NODE LANGUAGE (caps / ticks / dots) and TYPE SCALE.         */

@media (max-width: 860px) {
    /* ACCESS keeps its vertical rule at the start edge; the image drops below
       the text but stays portrait. */
    .sefyan-lhero__vertical {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "threshold column"
            "threshold entry";
        align-items: start;
    }
    .sefyan-lhero__threshold { grid-area: threshold; }
    .sefyan-lhero__column    { grid-area: column; }
    .sefyan-lhero__entry     { grid-area: entry; margin-block-start: 2rem; inline-size: min(100%, 74%); }

    /* AREA keeps the full-width extent rule and oversized type. */
    .sefyan-lhero__title--wide { max-inline-size: 100%; }

    .sefyan-location--area-breadth .sefyan-prose dl { grid-template-columns: 1fr; gap: 0; }
    .sefyan-location--area-breadth .sefyan-prose dd { border-block-start: 0; padding-block-start: 0; }

    /* Hub index rows drop the arrow but keep the numeral and display name. */
    .sefyan-districts__link { grid-template-columns: auto 1fr; }
    .sefyan-districts__arrow { display: none; }
}

@media (max-width: 560px) {
    .sefyan-hub-hero__title { max-inline-size: 100%; }
    .sefyan-hub-hero__meta  { gap: 1.5rem; }

    .sefyan-lhero__threshold { inline-size: 1.25rem; }

    /* ROUTE: the origin→destination line stacks but stays a line, keeping its
       node/track/node grammar rather than collapsing to plain text. */
    .sefyan-lhero__line { gap: 0.5rem; }
    .sefyan-lhero__track { min-inline-size: 1.5rem; }

    .sefyan-loc-services__link { grid-template-columns: auto 1fr; }
    .sefyan-loc-services__link .sefyan-arrow { display: none; }

    .sefyan-loc-gov--wide .sefyan-loc-gov__link {
        grid-template-columns: 1fr;
        grid-template-areas: "label" "name" "hint";
        gap: 0.35rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sefyan-districts__link,
    .sefyan-loc-services__link,
    .sefyan-loc-gov__link { transition: none; }

    .sefyan-districts__link:hover .sefyan-districts__arrow,
    .sefyan-loc-services__link:hover .sefyan-arrow { transform: none; }

    [dir="rtl"] .sefyan-districts__link:hover .sefyan-districts__arrow,
    [dir="rtl"] .sefyan-loc-services__link:hover .sefyan-arrow { transform: scaleX(-1); }
}

/* --- src/components/_shell.css --- */
/* ==========================================================================
   SEFYAN GLOBAL SHELL — Sprint 05V-07
   ==========================================================================

   Header, mobile menu, footer, breadcrumbs, and the CTA close — the frame
   around every page, redesigned so the site stops reading as a recolored
   Alhur theme before the visitor reaches any page-specific content.

   Loaded after _header.css / _footer.css / _breadcrumbs.css / _cta-strip.css
   in main.css, so these rules win the cascade without renaming a single
   `alhur-*` class those files (and planner.js, main.js) still depend on.
   Character: controlled care — calm, precise, editorial. Minimal rounding,
   no soft SaaS shadow, strong rules, clean planes (§17).
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. HEADER — asymmetric brand-first
   ══════════════════════════════════════════════════════════════════════════
   Deliberate new rhythm rather than the inherited 82px: 96px desktop, so the
   brand lockup has room to carry two weights of type, tightening at each
   breakpoint down to the proven 375px-safe geometry (§5).               */

.sefyan-header {
    /* position: sticky already set in _header.css §1 -- unchanged. */
    background: var(--alhur-white, #FFFFFF);
    border-block-end: var(--sefyan-rule);
    box-shadow: none;
}

.sefyan-header.alhur-header--scrolled {
    box-shadow: none;
    border-block-end-color: var(--alhur-primary, #17333A);
}

.sefyan-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: calc(1240px + (var(--sefyan-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--sefyan-gutter);
    /* Sprint 05V-10C §2-3: 96px measured too tall once scrolling past it
       repeatedly during normal use -- 84px keeps the same brand-first
       asymmetric composition (05V-07) with real presence at the top of
       the page while giving back real viewport on every other screen. */
    min-height: 84px;
    transition: min-height var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease);
}

/* Compact-on-scroll (§4-5): height only, on the existing scroll-toggled
   class (main.js already flips .alhur-header--scrolled at 32px scrollY --
   no second listener). Padding/height only, never nav visibility, never a
   DOM swap -- so there is nothing to reflow-jump except this one value,
   which is what the transition above smooths. */
@media (min-width: 1025px) {
    .alhur-header--scrolled .sefyan-header__inner { min-height: 64px; }

    /* min-height alone only floors the box -- the two-line brand lockup
       and nav link padding were the actual tallest content, holding the
       real height at ~72px regardless. Scaling those two down (the
       brief's own allowed levers, §4) closes most of the remaining gap
       to the 62-66px target without touching nav readability -- link
       text size is untouched, only its vertical padding. */
    .alhur-header--scrolled .sefyan-header__wordmark { font-size: 1.5rem; }
    .alhur-header--scrolled .sefyan-header__descriptor { font-size: 0.6875rem; margin-block-start: 0.05rem; }
    .alhur-header--scrolled .sefyan-header__nav .alhur-nav__link { padding-block: 0.4rem; }
    .alhur-header--scrolled .sefyan-header__wordmark,
    .alhur-header--scrolled .sefyan-header__descriptor,
    .alhur-header--scrolled .sefyan-header__nav .alhur-nav__link {
        transition: font-size var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease),
                    padding-block var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sefyan-header__inner { transition: none; }
}

/* ── Brand lockup: two weights, one block — the fix for the three-line
   wrap the plain site-name string produced at 375px. ── */
.sefyan-header__brand { flex-shrink: 0; }

.sefyan-header__wordmark-link {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
    color: var(--alhur-primary, #17333A);
}

.sefyan-header__wordmark {
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sefyan-header__descriptor {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin-block-start: 0.15rem;
}

/* ── Nav: pulled toward the brand, not centered across the full row. ── */
.sefyan-header__nav {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.sefyan-header__nav .alhur-nav__list {
    gap: 0.25rem;
}

.sefyan-header__nav .alhur-nav__link {
    border-radius: 0;
    padding-block: var(--alhur-space-2);
    position: relative;
}

/* Underline state instead of the inherited filled-pill hover/active — a
   rule gesture instead of a background fill (§17). */
.sefyan-header__nav .alhur-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0.9rem;
    inset-block-end: 0.35rem;
    block-size: 1.5px;
    background: var(--alhur-secondary, #D98B43);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--alhur-transition-fast, 180ms ease);
}

.sefyan-header__nav .alhur-nav__link:hover,
.sefyan-header__nav .alhur-nav__item--active > .alhur-nav__link {
    background: transparent;
    color: var(--alhur-primary, #17333A);
}

.sefyan-header__nav .alhur-nav__link:hover::after,
.sefyan-header__nav .alhur-nav__item--active > .alhur-nav__link::after {
    transform: scaleX(1);
}

/* ── CTA hierarchy (05V-10 §29): Call is the solid primary action now;
   Planner is the quieter guided alternative, .sefyan-link's existing text
   style — not a second button, so two header actions stay uncrowded. ── */
.sefyan-header__cta { gap: 1.5rem; }

.sefyan-header__phone-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke: currentColor;
}

.sefyan-header__planner {
    font-size: 0.9375rem;
    white-space: nowrap;
}

.sefyan-header__hamburger {
    border-radius: var(--sefyan-radius-plane);
}

@media (max-width: 1024px) {
    .sefyan-header__nav { display: none; }
    .sefyan-header__hamburger { display: flex; }

    /* Bug found during 05V-10C tablet QA: .alhur-u-hidden-mobile (the
       class already on the phone button + Planner link) only hides at
       ≤768px, so between 769-1024px the header CTA stayed fully visible
       -- 282px of it -- competing with the new left cluster for the same
       physical edge and pushing the cluster away from the true left, the
       opposite of §8's requirement. The sticky dock already covers quick
       contact at this range (§11: keep the header clean), so this
       container is hidden for the whole ≤1024px span, not just mobile. */
    .sefyan-header__cta { display: none; }

    /* Live feedback after 05V-11: the logo must read fully at the row's
       physical RIGHT at mobile/tablet, reversing 05V-10C §8-10's left
       cluster. With nav and CTA both hidden, brand + hamburger are the
       only two visible children of .sefyan-header__inner, in that DOM
       order (header-main.php) -- space-between sends the first (brand)
       to the row's start edge, physical right in this RTL document, and
       the second (hamburger) to the end edge, physical left. This is the
       same physical-right brand position desktop already uses. */
    .sefyan-header__inner { justify-content: space-between; }
    .sefyan-header__wordmark-link { text-align: start; }

    /* Tablet default (also the base this cascades down from for mobile,
       overridden further at ≤767px below). */
    .sefyan-header__inner { min-height: 70px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* §7: tablet compact-on-scroll, verified stable -- same mechanism as
       desktop, just a shallower target since 70px has less to give back. */
    .alhur-header--scrolled .sefyan-header__inner { min-height: 62px; }
}

@media (max-width: 767px) {
    /* §6: mobile stays ONE fixed height regardless of scroll position --
       no compact-on-scroll here. .alhur-header--scrolled still applies
       (border-color feedback from the existing rule above), just not a
       height change, per the brief's explicit "do not continuously
       shrink/grow the mobile header" instruction. */
    .sefyan-header__inner { min-height: 62px; gap: 1rem; }
    .sefyan-header__wordmark { font-size: 1.1875rem; }
    .sefyan-header__descriptor { display: none; }   /* one clear brand line at mobile (§9) */

    /* .sefyan-cta's unconditional `display: inline-flex` (§3, used sitewide)
       loads after _utilities.css and was winning the cascade over
       .alhur-u-hidden-mobile at equal specificity, silently reshowing the
       header CTA + phone at 375px. Restated here so mobile keeps exactly
       one obvious action: the sticky bottom bar (§9). */
    .sefyan-header__cta .alhur-u-hidden-mobile { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. MOBILE MENU — editorial list, not a card of pills
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-mobile-menu { box-shadow: none; border-inline-start: var(--sefyan-rule-strong); }
[dir="rtl"] .sefyan-mobile-menu { border-inline-start: 0; border-inline-end: var(--sefyan-rule-strong); }

.sefyan-mobile-menu__header {
    background: var(--alhur-white, #FFFFFF);
    border-block-end: var(--sefyan-rule);
    padding-block: 1.5rem;
}

.sefyan-mobile-menu__wordmark {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--alhur-primary, #17333A);
}

.sefyan-mobile-menu__close {
    background: transparent;
    border: var(--sefyan-rule);
    border-radius: var(--sefyan-radius-plane);
    color: var(--alhur-primary, #17333A);
    width: 38px;
    height: 38px;
}

.sefyan-mobile-menu__close svg { width: 18px; height: 18px; }
.sefyan-mobile-menu__close:hover { background: var(--alhur-accent, #F7F4EE); }

/* Large ruled rows instead of the inherited hover-padding-shift list. */
.sefyan-mobile-menu__nav { padding: 0.5rem clamp(1.25rem, 5vw, 2rem); }

.sefyan-mobile-menu__nav .alhur-mobile-nav__list li,
.sefyan-mobile-menu__nav .alhur-nav__list li { border-block-end: var(--sefyan-rule); }

.sefyan-mobile-menu__nav a {
    padding-block: 1.1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--alhur-primary, #17333A);
    transition: color var(--alhur-transition-fast, 180ms ease);
}

.sefyan-mobile-menu__nav a:hover { color: var(--alhur-secondary-dark, #AE6F36); padding-inline-start: 0; }

.sefyan-mobile-menu__cta {
    background: var(--alhur-white, #FFFFFF);
    border-block-start: var(--sefyan-rule-strong);
    padding: 1.5rem clamp(1.25rem, 5vw, 2rem);
}

.sefyan-mobile-menu__contact {
    background: var(--alhur-accent, #F7F4EE);
    border-block-start: 0;
    padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 1.75rem;
    gap: 0.85rem;
}

.sefyan-mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--alhur-text-secondary, #6F7B7D);
    text-decoration: none;
}

.sefyan-mobile-menu__contact-item svg { width: 15px; height: 15px; fill: var(--alhur-secondary, #D98B43); flex-shrink: 0; }
.sefyan-mobile-menu__contact-item:not(.sefyan-mobile-menu__contact-item--static):hover { color: var(--alhur-primary, #17333A); }


/* ══════════════════════════════════════════════════════════════════════════
   3. GLOBAL CTA BUTTON — the one strong primary action (§8, §17)
   ══════════════════════════════════════════════════════════════════════════
   Square-cornered, not a pill — the header/footer/CTA-close all point at
   the same visual action so "ابدأ تقييم نقلتك" reads as one consistent
   object sitewide rather than N differently-shaped buttons.               */

.sefyan-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    background: var(--alhur-secondary, #D98B43);
    color: var(--alhur-white, #FFFFFF);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 0;
    border-radius: var(--sefyan-radius-plane);
    transition: background-color var(--alhur-transition-base, 250ms ease);
}

.sefyan-cta:hover,
.sefyan-cta:focus-visible { background: var(--alhur-secondary-dark, #AE6F36); color: var(--alhur-white, #FFFFFF); }
.sefyan-cta:focus-visible { outline: 2px solid var(--alhur-primary, #17333A); outline-offset: 3px; }

.sefyan-cta--compact { padding: 0.7rem 1.375rem; font-size: 0.9375rem; }
.sefyan-cta--full { display: flex; width: 100%; }

/* Sprint 05V-10 §19: three-tier CTA hierarchy primitives — CALL (this,
   solid fill, most weight) / WHATSAPP (outlined, strong secondary) /
   PLANNER (.sefyan-link, quietest, text-only). Never three visually equal
   buttons: filled > outlined > text is the entire hierarchy, everywhere. */
.sefyan-cta--secondary {
    background: transparent;
    color: var(--alhur-primary, #17333A);
    border: 1.5px solid var(--alhur-primary, #17333A);
}

.sefyan-cta--secondary:hover,
.sefyan-cta--secondary:focus-visible {
    background: var(--alhur-primary, #17333A);
    color: var(--alhur-white, #FFFFFF);
}

.sefyan-cta--secondary:focus-visible { outline: 2px solid var(--alhur-secondary, #D98B43); outline-offset: 3px; }

/* On dark surfaces (final close, CTA strip, homepage contact moment) the
   outline needs to read against --alhur-primary background, not disappear
   into it. */
.sefyan-close .sefyan-cta--secondary,
.sefyan-final-close .sefyan-cta--secondary,
.sefyan-contact-moment .sefyan-cta--secondary {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--alhur-white, #FFFFFF);
}

.sefyan-close .sefyan-cta--secondary:hover,
.sefyan-close .sefyan-cta--secondary:focus-visible,
.sefyan-final-close .sefyan-cta--secondary:hover,
.sefyan-final-close .sefyan-cta--secondary:focus-visible,
.sefyan-contact-moment .sefyan-cta--secondary:hover,
.sefyan-contact-moment .sefyan-cta--secondary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--alhur-white, #FFFFFF);
}


/* ══════════════════════════════════════════════════════════════════════════
   4. CTA CLOSE — editorial, not a rounded gradient panel (§16)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-close {
    background: var(--alhur-primary, #17333A);
    color: var(--alhur-white, #FFFFFF);
}

.sefyan-close__inner { text-align: center; }

.sefyan-close__rule {
    display: block;
    inline-size: 3rem;
    block-size: 2px;
    background: var(--alhur-secondary, #D98B43);
    margin-inline: auto;
    margin-block-end: 1.75rem;
}

.sefyan-close__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.3;
}

.sefyan-close__text {
    margin-block-start: 1rem;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.75);
}

.sefyan-close__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-block-start: 2.25rem;
}

.sefyan-close .sefyan-cta:hover,
.sefyan-close .sefyan-cta:focus-visible { background: var(--alhur-secondary-dark, #AE6F36); }

/* Sprint 05V-10 §19/§31: the tertiary (3rd, text-link) tier in a
   contextual channel set — whichever channel that ends up being per
   template. Icon sizing shared by the primary/secondary buttons above it. */
.sefyan-close__tertiary { color: rgba(255, 255, 255, 0.85); }
.sefyan-close__tertiary:hover,
.sefyan-close__tertiary:focus-visible { color: var(--alhur-white, #FFFFFF); border-block-end-color: var(--alhur-white, #FFFFFF); }

.sefyan-close__cta-icon { width: 18px; height: 18px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   5. BREADCRUMBS — quiet orientation aid (§12)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-breadcrumbs {
    padding-block: 0.85rem;
    border-block-end: var(--sefyan-rule);
    background: var(--alhur-accent, #F7F4EE);
}

.sefyan-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sefyan-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.sefyan-breadcrumbs__link,
.sefyan-breadcrumbs__current {
    font-size: 0.8125rem;
    font-weight: 600;
}

.sefyan-breadcrumbs__link {
    color: var(--alhur-text-secondary, #6F7B7D);
    text-decoration: none;
}

.sefyan-breadcrumbs__link:hover,
.sefyan-breadcrumbs__link:focus-visible { color: var(--alhur-primary, #17333A); }

.sefyan-breadcrumbs__current { color: var(--alhur-primary, #17333A); }

.sefyan-breadcrumbs__sep {
    color: var(--alhur-border, #DDDCD7);
    font-size: 0.8125rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. FOOTER — asymmetric brand close (§13–14)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-footer {
    background: var(--alhur-primary, #17333A);
    color: rgba(255, 255, 255, 0.82);
}

.sefyan-footer .alhur-footer__decor { display: none; }   /* no soft decorative blur circles */

.sefyan-footer__close { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }

.sefyan-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-block-end: clamp(2.5rem, 6vw, 4rem);
    border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}

.sefyan-footer__wordmark {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--alhur-white, #FFFFFF);
    line-height: 1.15;
}

/* Sprint 05V-11 §10: the real dark-lockup logo replaces the text
   wordmark above (kept as a fallback in the template if the asset is
   ever missing). Sized by width, not a fixed height, so it reads
   naturally alongside the promise line below it rather than at an
   arbitrary logo height. */
.sefyan-footer__wordmark--logo { line-height: 0; }
.sefyan-footer__wordmark--logo img {
    width: clamp(180px, 20vw, 240px);
    height: auto;
}

.sefyan-footer__promise {
    margin-block-start: 0.85rem;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.72);
    max-inline-size: 26ch;
}

/* Sprint 05V-10 §30: Call (button) then WhatsApp/Planner (quiet stacked
   text links) — not three equal buttons in the footer close either. */
.sefyan-footer__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-block-start: 1.75rem;
}

.sefyan-footer__cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.sefyan-footer__cta-icon { width: 16px; height: 16px; flex-shrink: 0; }

.sefyan-footer__link-action {
    color: var(--alhur-text-secondary, #6F7B7D);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: color var(--alhur-transition-fast, 180ms ease), border-color var(--alhur-transition-fast, 180ms ease);
}

.sefyan-footer__link-action:hover,
.sefyan-footer__link-action:focus-visible {
    color: var(--alhur-primary, #17333A);
    border-block-end-color: var(--alhur-primary, #17333A);
}

.sefyan-footer__social { margin-block-start: 2rem; gap: 0.75rem; }

.alhur-footer__social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.alhur-footer__social-link svg { fill: var(--alhur-white, #FFFFFF); }
.alhur-footer__social-link:hover { background: var(--alhur-secondary, #D98B43); }

.sefyan-footer__index {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.sefyan-footer__col-label {
    color: rgba(255, 255, 255, 0.5);
    margin-block-end: 1.25rem;
}

.sefyan-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sefyan-footer__links a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--alhur-transition-fast, 180ms ease);
}

.sefyan-footer__links a:hover,
.sefyan-footer__links a:focus-visible { color: var(--alhur-secondary, #D98B43); }

.sefyan-footer__links-more { color: var(--alhur-secondary, #D98B43) !important; font-weight: 600; }

.sefyan-footer__static { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.55); }

.sefyan-footer__bottom {
    padding-block: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 860px) {
    .sefyan-footer__grid { grid-template-columns: 1fr; }
    .sefyan-footer__index { grid-template-columns: repeat(2, 1fr); }
    .sefyan-footer__promise { max-inline-size: 100%; }
}

@media (max-width: 480px) {
    .sefyan-footer__index { grid-template-columns: 1fr; gap: 2rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sefyan-header__nav .alhur-nav__link::after,
    .sefyan-cta,
    .sefyan-footer__links a { transition: none; }
}

/* --- src/components/_planner-v2.css --- */
/* ==========================================================================
   SEFYAN PLANNER — PRODUCT EXPERIENCE — Sprint 05V-07
   ==========================================================================

   Presentation-only pass over the Moving Planner (§19–§29). Every field
   name, fieldset/legend, validation rule, conditional-group id, and the
   summary/WhatsApp model in assets/js/planner.js is untouched — this file
   restyles the same DOM the JS already reads (option-face as the input's
   nextElementSibling, [data-field], [data-conditional], etc.).

   Loaded after _planner.css, so these rules win the cascade without
   renaming a single class planner.js depends on.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. OPENER (§21)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-planner-opener {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
}

.sefyan-planner-opener__label { display: block; margin-block-end: 1rem; color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-planner-opener__title { margin: 0; }
.sefyan-planner-opener__note { margin-block-start: 1.25rem; }


/* ══════════════════════════════════════════════════════════════════════════
   2. PROGRESS — "STEP XX / YY" + rail (§22)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-planner-progress { margin-block-end: 0.5rem; }

.sefyan-planner-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.75rem;
}

.sefyan-planner-progress__position {
    color: var(--alhur-secondary-dark, #AE6F36);
    margin: 0;
}

#sefyan-planner-step-current {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-planner-progress__label {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--alhur-primary, #17333A);
}

.sefyan-planner-progress__rail {
    position: relative;
    block-size: 3px;
    background: var(--alhur-border, #DDDCD7);
    border-radius: 0;
    overflow: hidden;
}

.sefyan-planner-progress__rail-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--alhur-secondary, #D98B43);
    /* Sprint 05V-10B §13: retuned to the shared motion tokens (was a
       hardcoded 300ms ease) -- presentational only, planner.js's
       updateProgress() still just sets this element's width, no logic
       touched. */
    transition: inline-size var(--sefyan-motion-standard, 420ms) var(--sefyan-ease-standard, ease);
}

/* The itemized step list becomes a visually-hidden but still-real list —
   assistive tech gets the full step names; sighted users get the quiet
   position readout + rail above instead of a row of numbered pills. */
#sefyan-planner-step-list {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sefyan-planner-progress__rail-fill { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   3. QUESTIONS — large, editorial (§23)
   ══════════════════════════════════════════════════════════════════════════ */

.alhur-planner__step-title {
    font-size: clamp(1.625rem, 4vw, 2.5rem) !important;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}

.alhur-planner__legend {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--alhur-primary, #17333A);
    margin-block-end: 1rem;
}

.alhur-planner__step-help,
.alhur-planner__field-help {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.alhur-planner__step { gap: 2rem; }


/* ══════════════════════════════════════════════════════════════════════════
   4. OPTION CONTROLS — editorial tiles, not browser inputs (§24)
   ══════════════════════════════════════════════════════════════════════════
   Markup is unchanged: <label class="alhur-planner__option"><input class=
   "alhur-planner__option-input"><span class="alhur-planner__option-face">.
   planner.js reads input.nextElementSibling as the face — never reordered.  */

.alhur-planner__options { gap: 0.75rem; }

.alhur-planner__option-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    min-height: 3.25rem;
    padding-block: 0.9rem;
    padding-inline-start: 2.75rem;
    padding-inline-end: 1.1rem;
    border: 1.5px solid var(--alhur-border, #DDDCD7);
    border-radius: var(--sefyan-radius-plane);
    background: var(--alhur-white, #FFFFFF);
    box-shadow: none;
}

/* Radio/checkbox indicator, drawn rather than relying on native chrome. */
.alhur-planner__option-face::before {
    content: "";
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border: 1.5px solid var(--alhur-border, #DDDCD7);
    border-radius: 50%;
    background: var(--alhur-white, #FFFFFF);
    /* Sprint 05V-10B §13: retuned to the shared fast token (was hardcoded
       150ms ease) -- purely presentational, the option's real checked
       state is still driven by the underlying radio/checkbox input. */
    transition: border-color var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease),
                background-color var(--sefyan-motion-fast, 200ms) var(--sefyan-ease-standard, ease);
}

/* Checkbox-driven fields (services step, special_items) get a square
   indicator instead of a circle, so the control shape itself communicates
   single vs multi-select. */
.alhur-planner__options--checkbox .alhur-planner__option-face::before,
.alhur-planner__options:has(input[type="checkbox"]) .alhur-planner__option-face::before {
    border-radius: 3px;
}

.alhur-planner__option-input:checked + .alhur-planner__option-face {
    border-color: var(--alhur-primary, #17333A);
    background: var(--alhur-accent, #F7F4EE);
}

.alhur-planner__option-input:checked + .alhur-planner__option-face::before {
    border-color: var(--alhur-primary, #17333A);
    background: var(--alhur-primary, #17333A);
    box-shadow: inset 0 0 0 3px var(--alhur-white, #FFFFFF);
}

.alhur-planner__option-input:checked + .alhur-planner__option-face .alhur-planner__option-label {
    color: var(--alhur-primary, #17333A);
    font-weight: 700;
}

.alhur-planner__option-face:hover { border-color: var(--alhur-text-secondary, #6F7B7D); }

.alhur-planner__option-input:focus-visible + .alhur-planner__option-face {
    outline: 2px solid var(--alhur-primary, #17333A);
    outline-offset: 2px;
    border-color: var(--alhur-primary, #17333A);
}

.alhur-planner__option-input:disabled + .alhur-planner__option-face {
    opacity: 0.45;
}

.alhur-planner__option-label { font-size: 0.9375rem; }

/* Error state: a rule instead of a red border-only signal (never color alone
   — the field error paragraph beneath already carries the text). */
.alhur-planner__field--error .alhur-planner__fieldset .alhur-planner__legend {
    border-inline-start: 3px solid var(--alhur-danger, #B42318);
    padding-inline-start: 0.6rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. STEP NAV + NOTICES
   ══════════════════════════════════════════════════════════════════════════ */

.alhur-planner__nav .alhur-btn--primary,
.alhur-planner__nav .alhur-btn--outline { border-radius: var(--sefyan-radius-plane); }

.alhur-planner__notice,
.alhur-planner__needs-assessment,
.alhur-planner__side-group {
    border-radius: var(--sefyan-radius-plane);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. SUMMARY — "ملخص نقلة سفيان" as a move brief (§27–28)
   ══════════════════════════════════════════════════════════════════════════
   Structure planner.js builds is unchanged: .alhur-planner__summary-block >
   .alhur-planner__summary-block-head > (h3.alhur-planner__summary-block-title
   + button.alhur-planner__summary-edit-link) + p.alhur-planner__summary-line
   repeated. Restyled as document sections: label-weight titles, a rule per
   section, values as a plain reading list rather than a bordered card grid. */

.alhur-planner__summary { gap: 0; }

.alhur-planner__summary-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800;
    margin: 0;
}

/* Document header: a small label above the title + a strong rule below,
   naming this as a generated brief rather than a form confirmation screen. */
.alhur-planner__summary::before {
    content: "";
    display: block;
}

.sefyan-summary-label {
    display: block;
    margin-block-end: 0.75rem;
    color: var(--alhur-secondary-dark, #AE6F36);
}

.sefyan-summary-rule {
    display: block;
    margin-block: 1.75rem 2rem;
    border: 0;
    border-block-start: var(--sefyan-rule-strong);
}

.alhur-planner__summary-blocks {
    display: block;
    gap: 0;
}

.alhur-planner__summary-block {
    padding-block: 1.5rem;
    border: 0;
    border-block-end: var(--sefyan-rule);
    border-radius: 0;
    background: transparent;
}

.alhur-planner__summary-block:first-child { padding-block-start: 0; }

.alhur-planner__summary-block-head { margin-block-end: 0.6rem; }

.alhur-planner__summary-block-title {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: none;   /* Arabic has no case; drop the inherited uppercase */
    color: var(--alhur-text-secondary, #6F7B7D);
}

.alhur-planner__summary-edit-link {
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--alhur-primary-light, #1E6264);
    border-block-end: 1px solid currentColor;
    padding-block-end: 0.1rem;
}

.alhur-planner__summary-edit-link:hover,
.alhur-planner__summary-edit-link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }

.alhur-planner__summary-line {
    font-size: 1.0625rem;
    line-height: 1.9;
}

.alhur-planner__summary-actions {
    margin-block-start: 2.25rem;
    gap: 1rem;
}

.alhur-planner__summary-actions .alhur-btn { border-radius: var(--sefyan-radius-plane); }

@media (min-width: 768px) {
    /* Two reading columns instead of a card grid — still a document, just a
       wider one, not N boxes of equal visual weight. */
    .alhur-planner__summary-blocks {
        columns: 2;
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
    .alhur-planner__summary-block {
        break-inside: avoid;
    }
}

/* --- src/components/_support-pages.css --- */
/* ==========================================================================
   SEFYAN SUPPORT PAGES — Sprint 05V-08
   ==========================================================================
   Moving Cost, About, Contact, and the shared empty-state pattern used by
   Moving Guide / Our Work. Additive; no `alhur-*` rule is overridden.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   1. SHARED — prose base reused across all three (same pattern as the
   service/location families' .sefyan-prose scope)
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-cost .sefyan-prose,
.sefyan-about .sefyan-prose { color: var(--alhur-text, #17333A); }

.sefyan-cost .sefyan-prose > * + *,
.sefyan-about .sefyan-prose > * + * { margin-block-start: 1.5rem; }

.sefyan-cost .sefyan-prose h2,
.sefyan-about .sefyan-prose h2 {
    margin-block-start: 3rem;
    margin-block-end: 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.4;
    font-weight: 700;
}
.sefyan-cost .sefyan-prose h2:first-child,
.sefyan-about .sefyan-prose h2:first-child { margin-block-start: 0; }

.sefyan-cost .sefyan-prose p,
.sefyan-about .sefyan-prose p { font-size: 1.0625rem; line-height: 1.9; margin: 0; }

.sefyan-cost .sefyan-prose a,
.sefyan-about .sefyan-prose a {
    color: var(--alhur-primary-light, #1E6264);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.sefyan-cost .sefyan-prose strong,
.sefyan-about .sefyan-prose strong { font-weight: 700; }

.sefyan-cost .sefyan-prose ul { list-style: none; padding: 0; margin: 0; }
.sefyan-cost .sefyan-prose ul li {
    position: relative;
    padding-inline-start: 1.5rem;
    padding-block: 0.4rem;
    line-height: 1.8;
}
.sefyan-cost .sefyan-prose ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.15rem;
    inline-size: 0.75rem;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-cost .sefyan-prose dl {
    display: grid;
    grid-template-columns: minmax(9rem, 26%) 1fr;
    gap: 0 clamp(1rem, 3vw, 2.5rem);
    margin-block-start: 1.5rem;
}
.sefyan-cost .sefyan-prose dt {
    padding-block: 1rem 0.35rem;
    border-block-start: var(--sefyan-rule);
    font-weight: 700;
}
.sefyan-cost .sefyan-prose dd {
    padding-block: 1rem 0.35rem;
    border-block-start: var(--sefyan-rule);
    color: var(--alhur-text-secondary, #6F7B7D);
    line-height: 1.8;
}

@media (max-width: 640px) {
    .sefyan-cost .sefyan-prose dl { grid-template-columns: 1fr; gap: 0; }
    .sefyan-cost .sefyan-prose dd { border-block-start: 0; padding-block-start: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. MOVING COST — decision page
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-cost-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem); }
.sefyan-cost-hero__label { display: block; margin-block-end: 1rem; color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-cost-hero__title { margin: 0; }
.sefyan-cost-hero__lede { margin-block-start: 1.25rem; }

/* Factor matrix: a connected numbered rail, not a card grid. */
.sefyan-cost-matrix__title {
    margin: 0 0 2.5rem;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.35;
}

.sefyan-cost-matrix__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-cost-matrix__stop {
    position: relative;
    padding: 1.75rem clamp(0.75rem, 1.5vw, 1.25rem) 0 0;
}

.sefyan-cost-matrix__stop::before {
    content: "";
    position: absolute;
    inset-block-start: -4.5px;
    inset-inline-start: 0;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--alhur-secondary, #D98B43);
}

.sefyan-cost-matrix__num {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin-block-end: 0.75rem;
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-cost-matrix__label {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.sefyan-cost-matrix__note {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-cost-prose { padding-block: clamp(2rem, 5vw, 3.5rem); }

.sefyan-cost-transition { background: var(--alhur-accent, #F7F4EE); }
.sefyan-cost-transition__inner { text-align: center; }
.sefyan-cost-transition__title { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; }
.sefyan-cost-transition__text { margin-block: 1rem 2rem; margin-inline: auto; }

@media (max-width: 860px) {
    .sefyan-cost-matrix__rail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    /* §8: vertical factor path at mobile — large numbers + rules, not a
       compressed multi-column matrix. */
    .sefyan-cost-matrix__rail {
        grid-template-columns: 1fr;
        border-block-start: 0;
    }
    .sefyan-cost-matrix__stop {
        padding: 1.5rem 0 0;
        border-block-start: var(--sefyan-rule-strong);
    }
    .sefyan-cost-matrix__stop::before { display: none; }
    .sefyan-cost-matrix__num { font-size: 1.5rem; margin-block-end: 0.5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   3. ABOUT — brand / method page
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-about-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem); }
.sefyan-about-hero__label { display: block; margin-block-end: 1rem; color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-about-hero__title { margin: 0; }
.sefyan-about-hero__lede { margin-block-start: 1.25rem; }

.sefyan-about-hero__stat {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: var(--sefyan-rule);
}
.sefyan-about-hero__stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--alhur-secondary, #D98B43);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
.sefyan-about-hero__stat-label { font-size: 0.9375rem; color: var(--alhur-text-secondary, #6F7B7D); }

.sefyan-about-method__title {
    margin: 0 0 2.5rem;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
}

.sefyan-about-method__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-about-method__item { padding-block-start: 1.75rem; }

.sefyan-about-method__num {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--alhur-text-secondary, #6F7B7D);
    margin-block-end: 0.75rem;
    direction: ltr;
    unicode-bidi: isolate;
}

.sefyan-about-method__heading { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; }
.sefyan-about-method__text { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--alhur-text-secondary, #6F7B7D); }

/* Service claims — a quiet ruled row, not the inherited icon-badge grid. */
.sefyan-about-claims__list {
    list-style: none;
    margin: 0;
    padding: 1.75rem 0;
    border-block: var(--sefyan-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    justify-content: center;
}
.sefyan-about-claims__item {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-about-links__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    justify-content: center;
}

@media (max-width: 768px) {
    .sefyan-about-method__list { grid-template-columns: 1fr; gap: 1.75rem; }
    .sefyan-about-method__item { border-block-start: var(--sefyan-rule); padding-block-start: 1.25rem; }
    .sefyan-about-method__item:first-child { border-block-start: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. CONTACT — decision contact page
   ══════════════════════════════════════════════════════════════════════════ */

.sefyan-contact-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem); }
.sefyan-contact-hero__label { display: block; margin-block-end: 1rem; color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-contact-hero__title { margin: 0; }
.sefyan-contact-hero__lede { margin-block-start: 1.25rem; margin-block-end: 2rem; }

.sefyan-contact-channels__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sefyan-contact-channels__item { border-block-start: var(--sefyan-rule); }

.sefyan-contact-channels__link,
.sefyan-contact-channels__item--static {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
    text-decoration: none;
    color: inherit;
}

.sefyan-contact-channels__link:hover,
.sefyan-contact-channels__link:focus-visible { color: var(--alhur-secondary-dark, #AE6F36); }
.sefyan-contact-channels__link:focus-visible { outline: 2px solid var(--alhur-primary, #17333A); outline-offset: 3px; }

.sefyan-contact-channels__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--alhur-text-secondary, #6F7B7D);
}

.sefyan-contact-channels__value { font-size: 1.125rem; font-weight: 700; }

.sefyan-contact-prep__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 700;
}

.sefyan-contact-prep__list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.sefyan-contact-prep__list li {
    position: relative;
    padding-inline-start: 1.5rem;
    padding-block: 0.5rem;
    border-block-start: var(--sefyan-rule);
    font-size: 1.0625rem;
}
.sefyan-contact-prep__list li:first-child { border-block-start: 0; }
.sefyan-contact-prep__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.15rem;
    inline-size: 0.75rem;
    border-block-start: var(--sefyan-rule-strong);
}

.sefyan-contact-areas__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .sefyan-contact-channels__list { grid-template-columns: 1fr; }
    .sefyan-contact-channels__link,
    .sefyan-contact-channels__item--static { padding-inline-end: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. EMPTY STATE — Moving Guide / Our Work (§18-19)
   ══════════════════════════════════════════════════════════════════════════
   Deliberately spare: names the section, says nothing is published yet
   without implying an error, and offers the one real next action. */

.sefyan-empty-state {
    max-width: 480px;
    margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 5rem);
    text-align: center;
}

.sefyan-empty-state__text {
    margin: 0.75rem 0 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--alhur-text-secondary, #6F7B7D);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sefyan-contact-channels__link { transition: none; }
}

/* --- src/components/_motion.css --- */
/* ==========================================================================
   SEFYAN MOTION SYSTEM — Sprint 05V-10

   One reusable motion grammar, driven by a single IntersectionObserver in
   main.js (see "Sefyan Motion System" block there) rather than a bespoke
   scroll handler per component. Motion communicates precision/sequence/
   direction — small logical-axis translation and reveal, never bounce,
   pulse-loops or SaaS-style flourish.

   PROGRESSIVE ENHANCEMENT (§12): every rule in this file that hides content
   is scoped under html.js-motion, a class main.js adds to <html> only once
   it has confirmed IntersectionObserver exists and prefers-reduced-motion
   is NOT set. Without that class — JS blocked, JS failed, older browser —
   every [data-motion] element simply renders in its normal, final,
   fully-visible state. Motion is enhancement; it is never a content-
   visibility dependency.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   A. EDITORIAL REVEAL — opacity + small logical-axis translate
   ══════════════════════════════════════════════════════════════════════════ */

html.js-motion [data-motion="reveal"] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--sefyan-motion-standard) var(--sefyan-ease-standard),
                transform var(--sefyan-motion-standard) var(--sefyan-ease-standard);
}

html.js-motion [data-motion="reveal"].is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* Directional variants — services rows alternate the axis they arrive from
   so the index reads as paced rather than one repeated fade-up (§10). */
html.js-motion [data-motion="reveal"][data-motion-dir="start"] { transform: translateX(-14px); }
html.js-motion [data-motion="reveal"][data-motion-dir="end"]   { transform: translateX(14px); }
[dir="rtl"] html.js-motion [data-motion="reveal"][data-motion-dir="start"] { transform: translateX(14px); }
[dir="rtl"] html.js-motion [data-motion="reveal"][data-motion-dir="end"]   { transform: translateX(-14px); }
html.js-motion [data-motion="reveal"][data-motion-dir="start"].is-inview,
html.js-motion [data-motion="reveal"][data-motion-dir="end"].is-inview { transform: translateX(0); }


/* ══════════════════════════════════════════════════════════════════════════
   B. IMAGE REVEAL — clip reveal, logical-axis
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Sprint 05V-10D critical fix: clip-path was originally applied directly
 * to the OBSERVED [data-motion="image-reveal"] element itself. In this
 * engine, IntersectionObserver factors an element's own clip-path into
 * its intersection geometry — a self-referential deadlock: the "not yet
 * revealed" state (clipped to 0% visible height) reports
 * intersectionRatio: 0 regardless of real scroll position, so the
 * observer that's supposed to reveal it can never fire. Confirmed live
 * with a throwaway observer (isIntersecting/ratio both stuck at 0 despite
 * the element sitting fully inside the viewport; removing clip-path made
 * the same observer immediately report ratio: 1). This silently affected
 * every image-reveal image already shipped in 05V-10/05V-10B, not just
 * this sprint's three new ones — reproduced on the Care section image
 * too. Fixed by moving the clip to the descendant <img> instead of the
 * observed element: the figure carrying data-motion stays fully unclipped
 * (normal, correct intersection geometry), only its image child is
 * visually clipped/revealed.
 */
html.js-motion [data-motion="image-reveal"] img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--sefyan-motion-slow) var(--sefyan-ease-standard);
}

html.js-motion [data-motion="image-reveal"].is-inview img {
    clip-path: inset(0 0 0% 0);
}


/* ══════════════════════════════════════════════════════════════════════════
   C. LINE DRAW — process / cost / route / index connective lines
   ══════════════════════════════════════════════════════════════════════════
   Applies to a line-shaped element itself (an <hr>-like span or a rail's
   ::before). data-motion-axis picks the growth axis; default is inline
   (horizontal), matching the reading direction so it always grows "forward"
   rather than mirroring incorrectly in RTL. */

html.js-motion [data-motion="line"] {
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--sefyan-motion-slow) var(--sefyan-ease-emphasis);
}

html.js-motion [data-motion="line"][data-motion-axis="block"] {
    transform: scaleY(0);
    transform-origin: block-start;
}

html.js-motion [data-motion="line"].is-inview {
    transform: scaleX(1);
}

html.js-motion [data-motion="line"][data-motion-axis="block"].is-inview {
    transform: scaleY(1);
}


/* ══════════════════════════════════════════════════════════════════════════
   D. INDEX STAGGER — service rows, Start Paths, location/district indexes
   ══════════════════════════════════════════════════════════════════════════
   The parent carries data-motion="stagger" and is what the observer
   watches; main.js assigns each [data-motion-item] child an incremental
   transition-delay (var(--sefyan-motion-step) * index) before adding
   .is-inview, so items arrive in a paced sequence rather than at once. */

html.js-motion [data-motion-item] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--sefyan-motion-standard) var(--sefyan-ease-standard),
                transform var(--sefyan-motion-standard) var(--sefyan-ease-standard);
}

html.js-motion [data-motion-item].is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* Sprint 05V-10B §6: fallback for stagger parents whose items come from
   the_content() (real post HTML — Assembly's module <dl>/sequence <ul>),
   so PHP has no per-item hook to mark data-motion-item on. main.js falls
   back to the parent's own direct children when none are explicitly
   marked; this generic rule gives those children the same hidden/reveal
   treatment without needing template-level markup. :not([data-motion])
   so a child that manages its own separate motion state isn't double-
   hidden by this broader selector. */
html.js-motion [data-motion="stagger"] > *:not([data-motion]):not([data-motion-item]) {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--sefyan-motion-standard) var(--sefyan-ease-standard),
                transform var(--sefyan-motion-standard) var(--sefyan-ease-standard);
}

html.js-motion [data-motion="stagger"] > *:not([data-motion]):not([data-motion-item]).is-inview {
    opacity: 1;
    transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════════════════
   E. CTA MICRO-MOTION — one-shot emphasis, not a loop
   ══════════════════════════════════════════════════════════════════════════
   Call gets a single subtle ring sweep the first time it enters view, then
   sits static — never a repeating pulse. animation-fill-mode: forwards
   holds the end state; the animation itself only ever plays once because
   main.js unobserves the element immediately after adding .is-inview. */

@keyframes sefyan-cta-ring {
    0%   { box-shadow: 0 0 0 0 rgba(217, 139, 67, 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(217, 139, 67, 0); }
}

html.js-motion [data-motion="cta-emphasis"] {
    animation: none;
}

html.js-motion [data-motion="cta-emphasis"].is-inview {
    animation: sefyan-cta-ring var(--sefyan-motion-slow) var(--sefyan-ease-standard) 1;
    animation-fill-mode: forwards;
}

/* Arrow/icon shift on hover — WhatsApp secondary + Planner text link already
   move .sefyan-arrow via _visual-system.css §4; this extends the same
   grammar to any icon marked data-motion-icon inside a CTA. */
[data-motion-icon] {
    transition: transform var(--sefyan-motion-fast) var(--sefyan-ease-standard);
}
a:hover [data-motion-icon],
a:focus-visible [data-motion-icon] {
    transform: translateX(0.25rem);
}
[dir="rtl"] a:hover [data-motion-icon],
[dir="rtl"] a:focus-visible [data-motion-icon] { transform: translateX(-0.25rem); }


/* ══════════════════════════════════════════════════════════════════════════
   F. ACCORDION — timing alignment only (structure/logic untouched)
   ══════════════════════════════════════════════════════════════════════════
   component-faq-accordion.php's open/close JS and ARIA are unchanged; this
   only retunes the existing max-height transition to the shared token so
   FAQ motion reads as part of the same system instead of a slightly
   different, unrelated speed. */

.alhur-faq__answer {
    transition-duration: var(--sefyan-motion-standard);
    transition-timing-function: var(--sefyan-ease-standard);
}

.alhur-faq__icon {
    transition: transform var(--sefyan-motion-fast) var(--sefyan-ease-standard);
}


/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION (§13, non-negotiable)
   ══════════════════════════════════════════════════════════════════════════
   Belt-and-braces: main.js never adds html.js-motion at all when
   prefers-reduced-motion: reduce matches, so none of the rules above should
   ever engage — but this block guarantees the same fully-visible, static
   result even if a stylesheet is cached from before a preference change or
   JS runs in an unexpected order. */

@media (prefers-reduced-motion: reduce) {
    [data-motion],
    [data-motion-item],
    [data-motion="line"],
    [data-motion="image-reveal"],
    [data-motion="image-reveal"] img {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    [data-motion-icon] { transition: none; }
    a:hover [data-motion-icon],
    a:focus-visible [data-motion-icon] { transform: none; }

    .alhur-faq__answer,
    .alhur-faq__icon { transition-duration: 1ms; }
}

/* --- src/pages/_about-page.css --- */
/* ============================================================
   About Page – Premium Styles

   Sprint 01 RTL note: inline-axis positioning (left/right on decorative
   ::before/::after elements and badges) was converted to logical
   inset-inline-start/end so it mirrors correctly under [dir="rtl"] — this
   page previously had none. margin-bottom/margin-top/padding-top/
   padding-bottom are intentionally left physical: they're block-axis
   (vertical) properties, which don't change with text direction, so
   converting them would add noise with no behavioral difference.
   ============================================================ */

/* ── About Intro ────────────────────────────────────────────── */
.alhur-about-intro {
    position: relative;
    overflow: hidden;
}

.alhur-about-intro__decor--circle {
    position: absolute;
    width: 300px;
    height: 300px;
    top: -60px;
    inset-inline-start: -80px; /* Sprint 01 RTL fix: was `right`, a physical value with no mirror */
    border-radius: 50%;
    background: radial-gradient(circle, var(--alhur-primary-light-100) 0%, transparent 70%);
    opacity: 0.3;
    pointer-events: none;
}

.alhur-about-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--alhur-space-10);
    align-items: center;
}

.alhur-about-intro__heading {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--alhur-primary);
    line-height: 1.35;
    margin: var(--alhur-space-4) 0 var(--alhur-space-5);
}

.alhur-about-intro__content.alhur-prose {
    font-size: var(--alhur-text-base);
    color: var(--alhur-gray-600);
    line-height: 1.85;
}

/* Image frame with accent */
.alhur-about-intro__img-frame {
    position: relative;
    border-radius: var(--alhur-radius-xl);
    overflow: visible;
}

.alhur-about-intro__img-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    inset-inline-start: -10px; /* Sprint 01 RTL fix: was `right`, a physical value with no mirror */
    width: 100%;
    height: 100%;
    border-radius: var(--alhur-radius-xl);
    border: 3px solid var(--alhur-secondary);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.alhur-about-intro__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--alhur-radius-xl);
    object-fit: cover;
    position: relative;
    z-index: 1;
    box-shadow: var(--alhur-shadow-lg);
}

/* Experience badge floating over image */
.alhur-about-intro__badge {
    position: absolute;
    bottom: -16px;
    inset-inline-end: 24px; /* Sprint 01 RTL fix: was `left`, a physical value with no mirror */
    z-index: 2;
    background: linear-gradient(135deg, var(--alhur-secondary), var(--alhur-secondary-600));
    color: #fff;
    border-radius: var(--alhur-radius-lg);
    padding: var(--alhur-space-3) var(--alhur-space-5);
    text-align: center;
    box-shadow: var(--alhur-shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.alhur-about-intro__badge-num {
    font-size: var(--alhur-text-2xl);
    font-weight: 900;
    line-height: 1;
}

.alhur-about-intro__badge-label {
    font-size: var(--alhur-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Mission & Vision ───────────────────────────────────────── */
.alhur-about-mv__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--alhur-space-6);
}

.alhur-about-mv__card {
    background: #fff;
    border-radius: var(--alhur-radius-xl);
    padding: var(--alhur-space-8);
    border: 1px solid var(--alhur-gray-200);
    box-shadow: var(--alhur-shadow-sm);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alhur-about-mv__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--alhur-shadow-lg);
}

.alhur-about-mv__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--alhur-primary-light), var(--alhur-primary-light-700));
    color: #fff;
    margin-block-end: var(--alhur-space-4);
}

.alhur-about-mv__icon svg {
    width: 26px;
    height: 26px;
}

.alhur-about-mv__title {
    font-size: var(--alhur-text-xl);
    font-weight: 700;
    color: var(--alhur-primary);
    margin: 0 0 var(--alhur-space-3);
}

.alhur-about-mv__card p {
    color: var(--alhur-gray-600);
    line-height: 1.8;
    margin: 0;
}

/* ── Core Values ────────────────────────────────────────────── */
.alhur-about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--alhur-space-5);
    margin-top: var(--alhur-space-8);
}

.alhur-about-values__item {
    text-align: center;
    padding: var(--alhur-space-6) var(--alhur-space-4);
    border-radius: var(--alhur-radius-xl);
    background: var(--alhur-accent);
    border: 1px solid var(--alhur-gray-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alhur-about-values__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--alhur-shadow-md);
}

.alhur-about-values__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--alhur-radius-md);
    background: linear-gradient(135deg, var(--alhur-secondary), var(--alhur-secondary-600));
    color: #fff;
    margin-block-end: var(--alhur-space-4);
}

.alhur-about-values__icon svg {
    width: 22px;
    height: 22px;
}

.alhur-about-values__item h4 {
    font-size: var(--alhur-text-base);
    font-weight: 700;
    color: var(--alhur-primary);
    margin: 0 0 var(--alhur-space-2);
}

.alhur-about-values__item p {
    font-size: var(--alhur-text-sm);
    color: var(--alhur-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .alhur-about-intro__grid {
        grid-template-columns: 1fr;
        gap: var(--alhur-space-8);
    }

    .alhur-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .alhur-about-mv__grid {
        grid-template-columns: 1fr;
    }

    .alhur-about-values__grid {
        grid-template-columns: 1fr;
    }

    .alhur-about-intro__img-frame::before {
        display: none;
    }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .alhur-about-mv__card,
    .alhur-about-values__item {
        transition: none;
    }
}

/* --- src/pages/_blog-page.css --- */
/* ==========================================================================
   Blog Page — Main blog listing layout (home.php)
   ========================================================================== */

.alhur-blog-page__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--alhur-space-12);
    align-items: start;
}

@media (max-width: 992px) {
    .alhur-blog-page__layout {
        grid-template-columns: 1fr;
    }
}

/* ── Category filters ── */
.alhur-blog-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-3);
    margin-block-end: var(--alhur-space-8);
}

.alhur-blog-page__filter {
    display: inline-flex;
    align-items: center;
    padding: var(--alhur-space-2) var(--alhur-space-5);
    border-radius: var(--alhur-radius-full);
    background: var(--alhur-surface-alt);
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    text-decoration: none;
    transition: background var(--alhur-transition-base), color var(--alhur-transition-base);
}

.alhur-blog-page__filter:hover {
    background: var(--alhur-gray-200);
}

.alhur-blog-page__filter--active {
    background: var(--alhur-primary);
    color: var(--alhur-white);
}

.alhur-blog-page__filter--active:hover {
    background: var(--alhur-primary-light);
}

/* ── Sidebar ── */
.alhur-blog-page__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-8);
}

.alhur-blog-page__widget {
    background: var(--alhur-surface-alt);
    border-radius: var(--alhur-radius-xl);
    padding: var(--alhur-space-6);
}

.alhur-blog-page__widget-title {
    font-size: var(--alhur-text-lg);
    font-weight: var(--alhur-font-bold);
    color: var(--alhur-text-primary);
    margin-block-end: var(--alhur-space-4);
}

.alhur-blog-page__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--alhur-space-2);
}

.alhur-blog-page__cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--alhur-space-2) 0;
    color: var(--alhur-text-secondary);
    text-decoration: none;
    font-size: var(--alhur-text-sm);
    border-bottom: 1px solid var(--alhur-border-light);
    transition: color var(--alhur-transition-base);
}

.alhur-blog-page__cat-list li:last-child a {
    border-bottom: none;
}

.alhur-blog-page__cat-list a:hover {
    color: var(--alhur-primary-light);
}

.alhur-blog-page__cat-count {
    color: var(--alhur-text-muted);
    font-size: var(--alhur-text-xs);
}

.alhur-blog-page__widget--cta {
    background: var(--alhur-primary);
    color: var(--alhur-white);
}

.alhur-blog-page__widget--cta .alhur-blog-page__widget-title {
    color: var(--alhur-white);
}

.alhur-blog-page__widget--cta p {
    font-size: var(--alhur-text-sm);
    color: rgba(255, 255, 255, 0.75);
    margin-block-end: var(--alhur-space-5);
}

.alhur-blog-page__widget--cta .alhur-btn {
    width: 100%;
    justify-content: center;
}

.alhur-blog-page__widget--cta .alhur-btn + .alhur-btn {
    margin-block-start: var(--alhur-space-3);
}

.alhur-btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ── Pagination ── */
.alhur-blog-page .pagination,
.alhur-blog-page .navigation.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alhur-space-2);
    justify-content: center;
    margin-block-start: var(--alhur-space-12);
}

.alhur-blog-page .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--alhur-space-3);
    border-radius: var(--alhur-radius-md);
    background: var(--alhur-surface-alt);
    color: var(--alhur-text-secondary);
    font-size: var(--alhur-text-sm);
    font-weight: var(--alhur-font-semibold);
    text-decoration: none;
    transition: background var(--alhur-transition-base), color var(--alhur-transition-base);
}

.alhur-blog-page .page-numbers:hover {
    background: var(--alhur-gray-200);
}

.alhur-blog-page .page-numbers.current {
    background: var(--alhur-primary);
    color: var(--alhur-white);
}

.alhur-blog-page .page-numbers.dots {
    background: transparent;
}