/*
 * Amaan Area Pages — Production CSS v3
 * Concept: Amaan Protection Journey
 *
 * Loaded only on pages using template-area-page.php.
 * All content is editor-driven — CSS classes applied manually in WP editor.
 *
 * Brand palette ONLY:
 *   #0E1F4D  #1B2F6E  #F07D00  #F6F2EB  #EBF0F8  #FFFFFF  #25D366
 *
 * Table of contents:
 *   0.  Reset & base scope
 *   1.  Tokens
 *   2.  Container & layout utilities
 *   3.  Buttons  (amaan-btn — matches editor HTML)
 *   4.  Photo / image system
 *   5.  Hero — cinematic
 *   6.  Trust Proof Panel
 *   7.  Local Planning Board
 *   8.  Protection Modules
 *   9.  Field Photos Gallery
 *   10. Protection Journey (Process)
 *   11. Estimate Checklist
 *   12. FAQ
 *   13. Final CTA
 *   13b. Area Cluster Hub
 *   14. Section background wrappers
 *   15. Responsive — tablet ≤ 1024px
 *   16. Responsive — mobile ≤ 640px
 *   17. Reduced motion
 */


/* ============================================================
   0. RESET & BASE SCOPE
   ============================================================ */

.amaan-area *,
.amaan-area *::before,
.amaan-area *::after {
    box-sizing: border-box;
}

.amaan-area {
    direction: rtl;
    font-family: inherit;
    color: #0E1F4D;
    overflow-x: hidden;
}

.amaan-area img {
    max-width: 100%;
    height: auto;
    display: block;
}

.amaan-area ul,
.amaan-area ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amaan-area a {
    text-decoration: none;
}

/* Strip empty <p> tags that WP editor injects between block-level elements */
.amaan-area-hero__content > p:empty,
.amaan-area-hero__visual > p:empty,
.amaan-area-proof__item > p:empty,
.amaan-area-module > p:empty,
.amaan-area-journey__step > p:empty,
.amaan-area-estimate__panel > p:empty,
.amaan-area-final__inner > p:empty {
    display: none;
}


/* ============================================================
   1. TOKENS
   ============================================================ */

.amaan-area {
    --navy-deep : #0E1F4D;
    --navy      : #1B2F6E;
    --orange    : #F07D00;
    --ivory     : #F6F2EB;
    --blue-gray : #EBF0F8;
    --white     : #FFFFFF;
    --whatsapp  : #25D366;

    --text-on-dark    : rgba(255,255,255,0.88);
    --text-muted-dark : rgba(255,255,255,0.55);
    --text-body       : #1B2F6E;
    --text-muted      : rgba(27,47,110,0.58);
    --border-light    : rgba(27,47,110,0.09);
    --border-dark     : rgba(255,255,255,0.10);

    --sp-1 : 0.5rem;
    --sp-2 : 1rem;
    --sp-3 : 1.5rem;
    --sp-4 : 2rem;
    --sp-5 : 3rem;
    --sp-6 : 4.5rem;
    --sp-7 : 6rem;

    --r-sm   : 6px;
    --r-md   : 12px;
    --r-lg   : 20px;
    --r-xl   : 28px;
    --r-pill : 9999px;

    --sh-sm  : 0 2px 10px rgba(14,31,77,0.07);
    --sh-md  : 0 4px 24px rgba(14,31,77,0.12);
    --sh-lg  : 0 10px 48px rgba(14,31,77,0.20);
    --sh-hero: 0 16px 64px rgba(14,31,77,0.30);

    --ease   : cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast : 160ms;
    --t-base : 260ms;
}


/* ============================================================
   2. CONTAINER & LAYOUT UTILITIES
   ============================================================ */

.amaan-area-wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--sp-3);
}

.amaan-area-wrap--narrow {
    max-width: 860px;
}

/* Eyebrow label */
.amaan-area-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: var(--sp-2);
    margin-top: 0;
}

.amaan-area-eyebrow::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--orange);
    border-radius: var(--r-pill);
    flex-shrink: 0;
}

p.amaan-area-eyebrow {
    margin: 0 0 var(--sp-2);
}

.amaan-area-heading {
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy-deep);
    margin: 0 0 var(--sp-2);
}

.amaan-area-heading--light {
    color: var(--white);
}

.amaan-area-lead {
    font-size: clamp(0.93rem, 1.5vw, 1.025rem);
    line-height: 1.9;
    color: var(--text-muted);
    max-width: 62ch;
    margin-bottom: var(--sp-4);
    margin-top: 0;
}

p.amaan-area-lead {
    margin-top: 0;
}

.amaan-area-lead--light {
    color: var(--text-on-dark);
}


/* ============================================================
   3. BUTTONS
   Live page uses: amaan-btn amaan-btn--primary / --secondary
   ============================================================ */

.amaan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.875rem 2rem;
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--t-fast) var(--ease),
        border-color     var(--t-fast) var(--ease),
        box-shadow       var(--t-fast) var(--ease),
        transform        var(--t-fast) var(--ease),
        color            var(--t-fast) var(--ease);
    white-space: nowrap;
    text-decoration: none;
}

.amaan-btn:hover  { transform: translateY(-2px); }
.amaan-btn:active { transform: translateY(0); }
.amaan-btn:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
    transform: none;
}

/* Primary = WhatsApp green */
.amaan-btn--primary {
    background-color: var(--whatsapp);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(37,211,102,0.28);
}
.amaan-btn--primary:hover {
    background-color: #1fba58;
    box-shadow: 0 6px 28px rgba(37,211,102,0.38);
    color: var(--white);
}

/* Secondary = ghost outline for dark backgrounds */
.amaan-btn--secondary {
    background-color: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.40);
}
.amaan-btn--secondary:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: var(--white);
    color: var(--white);
}

/* Explicit WA alias */
.amaan-btn--wa {
    background-color: var(--whatsapp);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(37,211,102,0.28);
}
.amaan-btn--wa:hover {
    background-color: #1fba58;
    color: var(--white);
}

/* Navy */
.amaan-btn--navy {
    background-color: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(27,47,110,0.24);
}
.amaan-btn--navy:hover {
    background-color: var(--navy-deep);
    color: var(--white);
}


/* ============================================================
   4. PHOTO / IMAGE SYSTEM
   ============================================================ */

.amaan-area-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--r-lg);
    background-color: var(--blue-gray);
    overflow: hidden;
}

div.amaan-area-photo img,
figure.amaan-area-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.amaan-area-photo--main {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-hero);
}

.amaan-area-photo--small {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

.amaan-area-photo--wide {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

.amaan-area-photo--portrait {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}


/* ============================================================
   5. HERO — CINEMATIC SPLIT
   Left: full-bleed image column, no padding.
   Right: content column with geometric CSS shapes behind text.
   Floating card overlaps the split line between both columns.
   No SVG. No external assets. Pure CSS geometry.
   ============================================================ */

.amaan-area-hero {
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: stretch;
}

/* ── Shell: full-width two-column split ── */
.amaan-area-hero__shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    margin-inline: 0;
    align-items: stretch;
}

/* ══════════════════════════════════
   VISUAL SIDE (image column)
   ══════════════════════════════════ */

.amaan-area-hero__visual {
    position: relative;
    overflow: hidden;
    min-height: 560px;
}

/* Main image fills the entire left column */
.amaan-area-hero__collage {
    position: absolute;
    inset: 0;
    display: block;
}

.amaan-area-hero__image-main {
    position: absolute;
    inset: 0;
    background-color: var(--navy);
}

.amaan-area-hero__image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Dark vignette on image — right edge fades to navy */
.amaan-area-hero__image-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 45%,
        rgba(14,31,77,0.65) 80%,
        var(--navy-deep) 100%
    );
    pointer-events: none;
}

/* Hide small images — full-bleed design uses only the main */
.amaan-area-hero__image-small {
    display: none;
}

/* Collage decorators removed in this layout */
.amaan-area-hero__collage::before,
.amaan-area-hero__collage::after {
    display: none;
}

/* ══════════════════════════════════
   CONTENT SIDE (text column)
   ══════════════════════════════════ */

.amaan-area-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-7) var(--sp-6) var(--sp-7) var(--sp-5);
    position: relative;
    z-index: 2;
    background-color: var(--navy-deep);
    overflow: hidden;
}

/* Large circle — top right geometric shape */
.amaan-area-hero__content::before {
    content: '';
    position: absolute;
    inset-inline-end: -100px;
    top: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(240,125,0,0.12);
    pointer-events: none;
}

/* Smaller filled circle — bottom left */
.amaan-area-hero__content::after {
    content: '';
    position: absolute;
    inset-inline-start: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(240,125,0,0.09) 0%,
        transparent 68%
    );
    pointer-events: none;
}

/* Badge */
.amaan-area-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: rgba(240,125,0,0.12);
    border: 1px solid rgba(240,125,0,0.26);
    color: var(--orange);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.38rem 1rem;
    border-radius: var(--r-pill);
    margin-bottom: var(--sp-3);
    position: relative;
    z-index: 1;
}

.amaan-area-hero__badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
    animation: badge-pulse 2.6s ease infinite;
    will-change: opacity;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}

.amaan-area-hero__title {
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.16;
    color: var(--white);
    margin: 0 0 var(--sp-3);
    position: relative;
    z-index: 1;
    max-width: 14ch;
}

.amaan-area-hero__title .accent {
    color: var(--orange);
    display: block;
}

.amaan-area-hero__subtitle {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    line-height: 1.88;
    color: rgba(255,255,255,0.72);
    margin: 0 0 var(--sp-4);
    max-width: 42ch;
    position: relative;
    z-index: 1;
}

.amaan-area-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════
   FLOATING TRUST CARD
   Sits on the boundary between image and content columns.
   ══════════════════════════════════ */

.amaan-area-hero__floating-card {
    position: absolute;
    /* Anchored to the LEFT edge of the content column,
       overlapping the image column */
    inset-inline-start: -32px;
    bottom: 60px;
    background-color: var(--white);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    box-shadow:
        0 8px 32px rgba(14,31,77,0.28),
        0 2px 8px  rgba(14,31,77,0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 190px;
    z-index: 20;
    border-inline-start: 3px solid var(--orange);
    /* Subtle entrance feel */
    transform: translateY(0);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.amaan-area-hero__floating-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 44px rgba(14,31,77,0.34),
        0 2px 8px  rgba(14,31,77,0.12);
}

/* Orange dot before label */
.amaan-area-hero__floating-card-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.amaan-area-hero__floating-card-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--orange);
    flex-shrink: 0;
}

.amaan-area-hero__floating-card-value {
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--navy-deep);
    line-height: 1.35;
    display: block;
}


/* ============================================================
   6. TRUST PROOF PANEL
   ============================================================ */

.amaan-area-proof {
    background-color: var(--navy-deep);
    padding-block: var(--sp-5);
    position: relative;
    z-index: 1;
}

.amaan-area-proof::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: var(--sp-3);
    height: 1px;
    background: linear-gradient(
        to left,
        transparent,
        rgba(255,255,255,0.08),
        transparent
    );
}

.amaan-area-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.amaan-area-proof__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background-color: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-inline-start: 3px solid rgba(240,125,0,0.55);
    transition: background-color var(--t-base) var(--ease);
}

.amaan-area-proof__item:hover {
    background-color: rgba(255,255,255,0.07);
}

.amaan-area-proof__number {
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(240,125,0,0.55);
    line-height: 1;
    display: block;
    margin-bottom: var(--sp-1);
    font-variant-numeric: tabular-nums;
}

.amaan-area-proof__item h2,
.amaan-area-proof__item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.amaan-area-proof__item p {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--text-muted-dark);
    margin: 0;
}


/* ============================================================
   7. LOCAL PLANNING BOARD
   Dark premium section — glassmorphism cards on navy background.
   No JS. All interaction via CSS :hover.
   ============================================================ */

/* Override section bg — planning uses navy-deep regardless of
   the amaan-area-section--ivory class on the element */
.amaan-area-planning.amaan-area-section--ivory,
.amaan-area-planning {
    background-color: var(--navy-deep);
    padding-block: var(--sp-6);
    position: relative;
    overflow: hidden;
}

/* Background dot-grid texture — pure CSS, no SVG */
.amaan-area-planning::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255,255,255,0.045) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Large ambient orange glow bottom-left */
.amaan-area-planning::after {
    content: '';
    position: absolute;
    inset-inline-start: -80px;
    bottom: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(
        circle,
        rgba(240,125,0,0.10) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
}

/* Force text colours on dark bg */
.amaan-area-planning .amaan-area-eyebrow {
    position: relative;
    z-index: 1;
}

.amaan-area-planning .amaan-area-heading {
    color: var(--white);
    position: relative;
    z-index: 1;
}

.amaan-area-planning .amaan-area-lead {
    color: var(--text-on-dark);
    position: relative;
    z-index: 1;
}

.amaan-area-planning__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: var(--sp-4);
    position: relative;
    z-index: 1;
}

/* Glass card */
.amaan-area-planning__item {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition:
        background-color  var(--t-base) var(--ease),
        border-color      var(--t-base) var(--ease),
        transform         var(--t-base) var(--ease),
        box-shadow        var(--t-base) var(--ease);
}

/* Large decorative circle in top-right corner of each card */
.amaan-area-planning__item::before {
    content: '';
    position: absolute;
    inset-inline-end: -28px;
    top: -28px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(240,125,0,0.14) 0%,
        transparent 70%
    );
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
    pointer-events: none;
}

/* Bottom accent line — appears on hover */
.amaan-area-planning__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(
        to left,
        transparent,
        var(--orange) 40%,
        var(--orange) 60%,
        transparent
    );
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
    border-radius: var(--r-pill);
}

.amaan-area-planning__item:hover {
    background-color: rgba(255,255,255,0.09);
    border-color: rgba(240,125,0,0.35);
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(14,31,77,0.40),
        0 0 0 1px rgba(240,125,0,0.18);
}

.amaan-area-planning__item:hover::before {
    transform: scale(1.6);
    opacity: 1.0;
}

.amaan-area-planning__item:hover::after {
    transform: scaleX(1);
}

/* Icon — large, styled, placed prominently */
.amaan-area-planning__icon {
    font-size: 1.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    background-color: rgba(240,125,0,0.14);
    border: 1px solid rgba(240,125,0,0.24);
    border-radius: var(--r-md);
    flex-shrink: 0;
    margin-bottom: var(--sp-3);
    transition:
        background-color var(--t-base) var(--ease),
        border-color     var(--t-base) var(--ease),
        transform        var(--t-base) var(--ease);
}

.amaan-area-planning__item:hover .amaan-area-planning__icon {
    background-color: rgba(240,125,0,0.25);
    border-color: rgba(240,125,0,0.50);
    transform: scale(1.08);
}

.amaan-area-planning__item h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.amaan-area-planning__item p {
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--text-muted-dark);
    margin: 0;
}


/* ============================================================
   8. PROTECTION MODULES
   ============================================================ */

.amaan-area-modules {
    padding-block: var(--sp-6);
}

.amaan-area-modules__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--sp-4);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.amaan-area-module {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--white);
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--t-fast) var(--ease);
    position: relative;
}

.amaan-area-module:last-child {
    border-bottom: none;
}

.amaan-area-module:hover {
    background-color: var(--blue-gray);
}

.amaan-area-module::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--orange);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--t-base) var(--ease);
}

.amaan-area-module:hover::before {
    transform: scaleY(1);
}

.amaan-area-module__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--blue-gray);
    color: var(--navy-deep);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    margin-inline: auto;
    transition:
        background-color var(--t-fast) var(--ease),
        color            var(--t-fast) var(--ease);
}

.amaan-area-module:hover .amaan-area-module__index {
    background-color: var(--orange);
    color: var(--white);
}

.amaan-area-module__content {
    min-width: 0;
}

.amaan-area-module__content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-deep);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

.amaan-area-module__content p {
    font-size: 0.875rem;
    line-height: 1.72;
    color: var(--text-muted);
    margin: 0;
    max-width: 60ch;
}

.amaan-area-module__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--orange);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(240,125,0,0.28);
    border-radius: var(--r-sm);
    transition:
        background-color var(--t-fast) var(--ease),
        color            var(--t-fast) var(--ease),
        border-color     var(--t-fast) var(--ease);
}

.amaan-area-module__cta::after {
    content: '←';
    font-size: 0.85em;
    transition: transform var(--t-fast) var(--ease);
}

.amaan-area-module__cta:hover {
    background-color: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}

.amaan-area-module__cta:hover::after {
    transform: translateX(-3px);
}

.amaan-area-module__cta:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}


/* ============================================================
   9. FIELD PHOTOS GALLERY
   ============================================================ */

.amaan-area-gallery {
    padding-block: var(--sp-6);
}

.amaan-area-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.amaan-area-gallery__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
}

.amaan-area-gallery__item .amaan-area-photo {
    transition:
        transform  var(--t-base) var(--ease),
        box-shadow var(--t-base) var(--ease);
}

.amaan-area-gallery__item:hover .amaan-area-photo {
    transform: scale(1.02);
    box-shadow: var(--sh-lg);
}

.amaan-area-gallery__caption {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: var(--sp-1);
}


/* ============================================================
   10. PROTECTION JOURNEY
   Dark section. Horizontal timeline on desktop.
   Each step expands on hover — pure CSS, no JS.
   Counter-driven numbers — no dot element needed in HTML.
   ============================================================ */

.amaan-area-journey.amaan-area-section--ivory,
.amaan-area-journey {
    background-color: var(--navy-deep);
    padding-block: var(--sp-7) var(--sp-6);
    position: relative;
    overflow: hidden;
}

.amaan-area-journey .amaan-area-lead {
    color: rgba(255,255,255,0.68);
}

/* Dot-grid texture — same treatment as planning */
.amaan-area-journey::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255,255,255,0.04) 1px,
        transparent 1px
    );
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* Ambient orange glow — top right */
.amaan-area-journey::after {
    content: '';
    position: absolute;
    inset-inline-end: -100px;
    top: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(240,125,0,0.07) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

.amaan-area-journey .amaan-area-wrap {
    position: relative;
    z-index: 1;
}

.amaan-area-journey .amaan-area-eyebrow {
    color: var(--orange);
}

.amaan-area-journey .amaan-area-heading {
    color: var(--white);
    margin-bottom: var(--sp-5);
}

/* ── Steps container — horizontal flex ── */
.amaan-area-journey__steps {
    display: flex;
    flex-direction: row;
    gap: 0;
    counter-reset: journey-step;
    position: relative;
    align-items: stretch;
}

/* Horizontal track line behind all nodes */
.amaan-area-journey__steps::before {
    content: '';
    position: absolute;
    top: 28px;               /* vertically centred on the 56px circle */
    inset-inline: 28px;
    height: 2px;
    background: linear-gradient(
        to left,
        rgba(240,125,0,0.10),
        rgba(240,125,0,0.45) 30%,
        rgba(240,125,0,0.45) 70%,
        rgba(240,125,0,0.10)
    );
    z-index: 0;
    pointer-events: none;
}

/* ── Individual step ── */
.amaan-area-journey__step {
    counter-increment: journey-step;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 var(--sp-2) var(--sp-3);
    position: relative;
    z-index: 1;
    cursor: default;
    transition: flex var(--t-slow) var(--ease);
}

/* Expand hovered step */
.amaan-area-journey__step:hover {
    flex: 1.6;
}

/* ── Number node — CSS counter, no element needed ── */
.amaan-area-journey__step::before {
    content: counter(journey-step, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(240,125,0,0.15);
    border: 2px solid rgba(240,125,0,0.35);
    color: var(--orange);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-bottom: var(--sp-3);
    position: relative;
    z-index: 2;
    transition:
        background-color var(--t-base) var(--ease),
        border-color     var(--t-base) var(--ease),
        color            var(--t-base) var(--ease),
        box-shadow       var(--t-base) var(--ease),
        transform        var(--t-base) var(--ease);
    line-height: 1;
}

.amaan-area-journey__step:hover::before {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--white);
    box-shadow: 0 0 0 4px rgba(240,125,0,0.22), 0 4px 16px rgba(240,125,0,0.30);
    transform: scale(1.08);
}

/* Done step — muted node */
.amaan-area-journey__step--done::before {
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.30);
}

.amaan-area-journey__step--done:hover::before {
    background-color: var(--orange);
    border-color: var(--orange);
    color: var(--white);
    box-shadow: 0 0 0 4px rgba(240,125,0,0.22);
    transform: scale(1.08);
}

/* ── Content block ── */
.amaan-area-journey__step-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

/* Thin orange separator line above heading */
.amaan-area-journey__step-body::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--orange);
    border-radius: var(--r-pill);
    margin-bottom: var(--sp-2);
    opacity: 0.45;
    transition: width var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

.amaan-area-journey__step:hover .amaan-area-journey__step-body::before {
    width: 40px;
    opacity: 1;
}

.amaan-area-journey__step-body h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    margin: 0 0 0.5rem;
    line-height: 1.3;
    transition: color var(--t-base) var(--ease);
}

.amaan-area-journey__step:hover .amaan-area-journey__step-body h3 {
    color: var(--white);
}

.amaan-area-journey__step-body p {
    font-size: 0.85rem;
    line-height: 1.78;
    color: rgba(255,255,255,0);  /* hidden by default */
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition:
        max-height  var(--t-slow) var(--ease),
        color       var(--t-slow) var(--ease);
}

/* Reveal text on hover */
.amaan-area-journey__step:hover .amaan-area-journey__step-body p {
    color: var(--text-muted-dark);
    max-height: 10rem;
}

/* If dot element IS present (lab preview) — hide it */
.amaan-area-journey__step-dot {
    display: none;
}

/* ── TABLET: revert to vertical ── */
@media (max-width: 1024px) {
    .amaan-area-journey__steps {
        flex-direction: column;
        gap: 0;
    }

    .amaan-area-journey__steps::before {
        top: 28px;
        bottom: 0;
        inset-inline-start: 27px;
        inset-inline-end: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(
            to bottom,
            rgba(240,125,0,0.45),
            rgba(240,125,0,0.08)
        );
    }

    .amaan-area-journey__step {
        flex-direction: row;
        align-items: flex-start;
        flex: unset;
        gap: var(--sp-3);
        padding: 0 0 var(--sp-4);
        transition: none;
    }

    .amaan-area-journey__step:hover {
        flex: unset;
    }

    .amaan-area-journey__step:last-child {
        padding-bottom: 0;
    }

    .amaan-area-journey__step::before {
        width: 54px;
        height: 54px;
        flex-shrink: 0;
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .amaan-area-journey__step-body {
        padding-top: 0.5rem;
    }

    /* Always show text on tablet/mobile — no hover-reveal */
    .amaan-area-journey__step-body p {
        color: var(--text-muted-dark);
        max-height: none;
    }

    .amaan-area-journey__step:hover .amaan-area-journey__step-body p {
        color: var(--text-muted-dark);
        max-height: none;
    }

    .amaan-area-journey__step-body h3 {
        color: var(--white);
    }
}


/* ============================================================
   11. ESTIMATE CHECKLIST
   Live page: eyebrow + heading are inside amaan-area-estimate__panel
   ============================================================ */

.amaan-area-estimate {
    padding-block: var(--sp-6);
}

.amaan-area-estimate__panel {
    background-color: var(--blue-gray);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-light);
    padding: var(--sp-5);
    box-shadow: var(--sh-sm);
}

.amaan-area-estimate__panel .amaan-area-heading {
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
}

.amaan-area-estimate__checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    padding: 0;
    list-style: none;
}

.amaan-area-estimate__checklist li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy-deep);
    line-height: 1.5;
}

.amaan-area-estimate__checklist li::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background-color: var(--white);
    border: 2px solid rgba(240,125,0,0.40);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4L11 1' stroke='%23F07D00' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62%;
}

.amaan-area-estimate__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}

.amaan-area-estimate__cta p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

/* Button inside estimate cta override to not be full-width */
.amaan-area-estimate__cta .amaan-btn {
    width: auto;
}


/* ============================================================
   12. FAQ
   Live page: <details class="amaan-area-faq__item"> (no wrapper div)
   ============================================================ */

.amaan-area-faq {
    padding-block: var(--sp-6);
}

.amaan-area-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--sp-4);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: var(--sh-sm);
}

/* Pattern A: <details class="amaan-area-faq__item"> (live page) */
details.amaan-area-faq__item {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-light);
}

details.amaan-area-faq__item:last-child {
    border-bottom: none;
}

/* Pattern B: <div class="amaan-area-faq__item"><details> */
div.amaan-area-faq__item {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-light);
}

div.amaan-area-faq__item:last-child {
    border-bottom: none;
}

div.amaan-area-faq__item details {
    width: 100%;
}

.amaan-area-faq__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    font-size: 0.9688rem;
    font-weight: 600;
    color: var(--navy-deep);
    background-color: transparent;
    border-inline-start: 3px solid transparent;
    transition:
        color             var(--t-fast) var(--ease),
        border-color      var(--t-fast) var(--ease),
        background-color  var(--t-fast) var(--ease);
    -webkit-user-select: none;
    user-select: none;
}

.amaan-area-faq__question::-webkit-details-marker { display: none; }
.amaan-area-faq__question::marker { display: none; }

.amaan-area-faq__question:hover {
    color: var(--orange);
    border-inline-start-color: var(--orange);
    background-color: rgba(240,125,0,0.03);
}

details[open] > .amaan-area-faq__question {
    color: var(--orange);
    border-inline-start-color: var(--orange);
    background-color: rgba(240,125,0,0.04);
}

.amaan-area-faq__question::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-inline-end: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--t-base) var(--ease);
    opacity: 0.65;
}

details[open] > .amaan-area-faq__question::after {
    transform: rotate(-135deg) translateY(-2px);
}

.amaan-area-faq__answer {
    padding: 0 var(--sp-4) var(--sp-3);
    border-inline-start: 3px solid var(--orange);
    background-color: rgba(240,125,0,0.025);
}

.amaan-area-faq__answer p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--text-muted);
    margin: 0;
}


/* ============================================================
   13. FINAL CTA
   Full-width section. Image becomes background with overlay.
   Content centred. Animated CSS lines in background.
   Three interactive action elements: WA button, phone, ring.
   ============================================================ */

/* Override the section background class so image can show through */
.amaan-area-final.amaan-area-section--navy-deep,
.amaan-area-final {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 520px;
    /* navy fallback in case image fails to load */
    background-color: var(--navy-deep);
}

/* amaan-area-wrap inside final: must not clip the abs-positioned media */
.amaan-area-final > .amaan-area-wrap {
    position: relative;
    z-index: 10;
    padding-block: var(--sp-7);
    /* ensure wrap doesn't create a new stacking context that clips media */
    isolation: auto;
}

/* ── Background image layer ── */
/* Media is a child of amaan-area-wrap > amaan-area-final__inner,
   but we pull it out of flow with position:absolute so it fills
   the section (nearest positioned ancestor = .amaan-area-final). */
.amaan-area-final__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* reset any flex sizing from parent */
    width: auto;
    height: auto;
    max-width: none;
    flex: none;
}

.amaan-area-final__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 0;
    box-shadow: none;
    /* override .amaan-area-photo--portrait aspect-ratio */
    aspect-ratio: unset;
    filter: saturate(0.55) brightness(0.45);
}

/* Multi-layer overlay on top of image */
.amaan-area-final__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* centre-to-edge vignette */
        radial-gradient(
            ellipse 90% 100% at 50% 50%,
            transparent 20%,
            rgba(14,31,77,0.55) 70%,
            rgba(14,31,77,0.85) 100%
        ),
        /* solid navy base */
        linear-gradient(
            160deg,
            rgba(14,31,77,0.80) 0%,
            rgba(27,47,110,0.60) 50%,
            rgba(14,31,77,0.88) 100%
        );
    z-index: 1;
}

/* ── Animated geometric lines ── */
/* Use a child element sized 200% so we can translate it
   instead of animating background-position (avoids Paint) */
.amaan-area-final__media::after {
    content: '';
    position: absolute;
    /* Start outside bounds so the translate loop is seamless */
    inset: -100px;
    z-index: 2;
    background-image:
        repeating-linear-gradient(
            -55deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,0.022) 40px,
            rgba(255,255,255,0.022) 41px
        );
    background-size: 82px 82px;
    animation: cta-lines-drift 14s linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes cta-lines-drift {
    from { transform: translate(0, 0);           }
    to   { transform: translate(82px, 82px);     }
}

/* Orange corner arc — top-left decorative */
.amaan-area-final::before {
    content: '';
    position: absolute;
    inset-inline-start: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(240,125,0,0.14);
    z-index: 3;
    pointer-events: none;
}

/* Second arc — bottom-right */
.amaan-area-final::after {
    content: '';
    position: absolute;
    inset-inline-end: -60px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(240,125,0,0.10);
    z-index: 3;
    pointer-events: none;
}

/* ── Inner wrapper — centred content (no grid — media is abs-positioned) ── */
.amaan-area-final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* reset any leftover grid or tablet overrides */
    grid-template-columns: unset;
}

/* ── Content block — centred ── */
.amaan-area-final__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.amaan-area-final__content .amaan-area-eyebrow {
    color: var(--orange);
    justify-content: center;
}

.amaan-area-final__content h2,
.amaan-area-final__content .amaan-area-heading,
.amaan-area-final__content .amaan-area-heading--light {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--sp-2);
    line-height: 1.18;
    text-shadow: 0 2px 20px rgba(14,31,77,0.40);
}

.amaan-area-final__content p:not(.amaan-area-eyebrow) {
    color: rgba(255,255,255,0.78);
}

.amaan-area-final__content .amaan-area-lead,
.amaan-area-final__content .amaan-area-lead--light {
    color: rgba(255,255,255,0.75);
    max-width: 52ch;
    text-align: center;
}

/* ── Actions row ── */
.amaan-area-final__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    width: 100%;
}

/* WP Classic Editor wraps <a> tags in <p> — neutralise it */
.amaan-area-final__actions > p {
    margin: 0;
    padding: 0;
    display: contents; /* dissolves the <p> from layout */
}

/* <br> tags injected by editor before/after link text — hide them */
.amaan-area-final__actions .amaan-btn br,
.amaan-area-final__actions .amaan-btn--primary br,
.amaan-area-final__tel br {
    display: none;
}

/* WA button — larger, prominent, with GPU-safe ripple ring */
.amaan-area-final__actions .amaan-btn--primary {
    padding: 1.05rem 2.5rem;
    font-size: 1.075rem;
    box-shadow: 0 6px 28px rgba(37,211,102,0.35);
    position: relative;
    z-index: 0;
}

/*
 * Ripple ring via ::before — only transform + opacity used in keyframes.
 * will-change on the pseudo-element itself creates its own composite layer,
 * so the browser never needs to Paint during animation.
 */
.amaan-area-final__actions .amaan-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(37,211,102,0.60);
    transform: scale(1);
    opacity: 1;
    will-change: transform, opacity;
    animation: wa-ring 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes wa-ring {
    0%   { transform: scale(1);    opacity: 0.60; }
    70%  { transform: scale(1.50); opacity: 0;    }
    100% { transform: scale(1.50); opacity: 0;    }
}

.amaan-area-final__actions .amaan-btn--primary:hover::before,
.amaan-area-final__actions .amaan-btn--primary:focus-visible::before {
    animation: none;
    opacity: 0;
}

.amaan-area-final__actions .amaan-btn--primary:hover {
    box-shadow: 0 8px 36px rgba(37,211,102,0.50);
}

/* Divider between button and tel */
.amaan-area-final__actions::after {
    content: 'أو';
    font-size: 0.75rem;
    color: rgba(255,255,255,0.30);
    letter-spacing: 0.08em;
    margin-block: calc(var(--sp-1) * -0.5);
}

/* Tel link — styled as a secondary chip */
.amaan-area-final__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-pill);
    transition:
        color            var(--t-fast) var(--ease),
        border-color     var(--t-fast) var(--ease),
        background-color var(--t-fast) var(--ease);
}

.amaan-area-final__tel::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
    opacity: 0.55;
}

.amaan-area-final__tel:hover,
.amaan-area-final__tel:focus-visible {
    color: var(--white);
    border-color: rgba(255,255,255,0.40);
    background-color: rgba(255,255,255,0.07);
}


/* ============================================================
   13b. AREA CLUSTER HUB
   Hub page: list of child/nearby area cards.
   Live HTML structure (editor-generated):
     <section class="amaan-area-section amaan-area-section--white amaan-area-cluster">
       <div class="amaan-area-wrap">
         <p class="amaan-area-eyebrow">...</p>
         <h2 class="amaan-area-heading">...</h2>
         <p class="amaan-area-lead">...</p>
         <div class="amaan-area-cluster__grid">
           <article class="amaan-area-cluster__card amaan-area-cluster__card--live">
             <span class="amaan-area-cluster__meta">منطقة رئيسية</span>
             <h3 class="amaan-area-cluster__title">...</h3>
             <p class="amaan-area-cluster__text">...</p>
             <p><a class="amaan-area-cluster__link" href="..."><br/>نص<br/></a></p>
           </article>
         </div>
       </div>
     </section>
   ============================================================ */

/* ── Section shell — works on both --white and --ivory ── */
.amaan-area-cluster {
    padding-block: var(--sp-7);
    position: relative;
    overflow: hidden;
}

/* Override white bg with navy-deep for strong visual separation */
.amaan-area-cluster.amaan-area-section--white,
.amaan-area-cluster.amaan-area-section--ivory,
.amaan-area-cluster {
    background-color: var(--navy-deep);
}

/* Dot-grid texture */
.amaan-area-cluster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255,255,255,0.04) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Orange radial glow — top-start corner */
.amaan-area-cluster::after {
    content: '';
    position: absolute;
    inset-inline-start: -120px;
    top: -80px;
    width: 480px;
    height: 480px;
    background: radial-gradient(
        circle,
        rgba(240,125,0,0.09) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
}

.amaan-area-cluster > .amaan-area-wrap {
    position: relative;
    z-index: 1;
}

/* Section header text — force light on dark bg */
.amaan-area-cluster .amaan-area-heading {
    color: var(--white);
}

.amaan-area-cluster .amaan-area-lead,
.amaan-area-cluster > .amaan-area-wrap > p:not(.amaan-area-eyebrow) {
    color: rgba(255,255,255,0.68);
    max-width: 60ch;
}

/* ── Grid — 3 columns on desktop ── */
.amaan-area-cluster__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* ── Card base ── */
.amaan-area-cluster__card {
    position: relative;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
    transition:
        background-color var(--t-base) var(--ease),
        border-color     var(--t-base) var(--ease),
        transform        var(--t-base) var(--ease);
}

/* Bottom orange bar — slides in on hover */
.amaan-area-cluster__card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to left, var(--orange), rgba(240,125,0,0.3));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--t-slow) var(--ease);
}

/* ── Live card ── */
.amaan-area-cluster__card--live {
    cursor: default;
}

.amaan-area-cluster__card--live:hover {
    background-color: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.20);
    transform: translateY(-3px);
}

.amaan-area-cluster__card--live:hover::after {
    transform: scaleX(1);
}

/* ── Disabled card ── */
.amaan-area-cluster__card--disabled {
    background-color: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.06);
    cursor: default;
}

.amaan-area-cluster__card--disabled::after {
    display: none;
}

/* ── Meta badge — sits at top of card, first child ── */
.amaan-area-cluster__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 0.25rem;
}

/* Dot before meta */
.amaan-area-cluster__meta::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--orange);
    flex-shrink: 0;
}

.amaan-area-cluster__card--disabled .amaan-area-cluster__meta {
    color: rgba(255,255,255,0.30);
}

.amaan-area-cluster__card--disabled .amaan-area-cluster__meta::before {
    background-color: rgba(255,255,255,0.30);
}

/* ── Area name ── */
.amaan-area-cluster__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin: 0;
}

.amaan-area-cluster__card--disabled .amaan-area-cluster__title {
    color: rgba(255,255,255,0.45);
}

/* ── Description ── */
.amaan-area-cluster__text {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.58);
    margin: 0;
    flex: 1;
}

.amaan-area-cluster__card--disabled .amaan-area-cluster__text {
    color: rgba(255,255,255,0.30);
}

/* ── WA Link — <a> inside <p> from editor ── */

/* Strip the wrapping <p> from layout */
.amaan-area-cluster__card > p:has(> .amaan-area-cluster__link),
.amaan-area-cluster__card > p:last-child:has(a) {
    margin: 0;
    padding: 0;
    display: contents;
}

/* Fallback for browsers without :has() — simple margin reset */
.amaan-area-cluster__card > p {
    margin-block: 0;
}

.amaan-area-cluster__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(240,125,0,0.35);
    border-radius: var(--r-pill);
    margin-top: 0.5rem;
    align-self: flex-start;
    transition:
        color            var(--t-fast) var(--ease),
        background-color var(--t-fast) var(--ease),
        border-color     var(--t-fast) var(--ease);
}

/* WA icon dot */
.amaan-area-cluster__link::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--whatsapp);
    flex-shrink: 0;
}

.amaan-area-cluster__link:hover,
.amaan-area-cluster__link:focus-visible {
    color: var(--white);
    background-color: var(--orange);
    border-color: var(--orange);
}

/* Hide <br> injected by editor inside the link */
.amaan-area-cluster__link br {
    display: none;
}

/* Focus ring */
.amaan-area-cluster__link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}


/* ============================================================
   14. SECTION BACKGROUND WRAPPERS
   ============================================================ */

.amaan-area-section {
    position: relative;
}

.amaan-area-section--white     { background-color: var(--white);     }
.amaan-area-section--ivory     { background-color: var(--ivory);     }
.amaan-area-section--blue-gray { background-color: var(--blue-gray); }
.amaan-area-section--navy      { background-color: var(--navy);      }
.amaan-area-section--navy-deep { background-color: var(--navy-deep); }


/* ============================================================
   15. RESPONSIVE — TABLET ≤ 1024px
   ============================================================ */

@media (max-width: 1024px) {

    /* Hero: stack vertically on tablet */
    .amaan-area-hero {
        min-height: 0;
        flex-direction: column;
    }

    .amaan-area-hero__shell {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Image on top */
    .amaan-area-hero__visual {
        order: -1;
        min-height: 320px;
        position: relative;
    }

    .amaan-area-hero__collage {
        position: absolute;
        inset: 0;
    }

    /* On tablet the vignette goes bottom not right */
    .amaan-area-hero__image-main::after {
        background: linear-gradient(
            to bottom,
            transparent 50%,
            rgba(14,31,77,0.75) 85%,
            var(--navy-deep) 100%
        );
    }

    /* Content below image */
    .amaan-area-hero__content {
        padding: var(--sp-5) var(--sp-3) var(--sp-5);
    }

    .amaan-area-hero__title {
        max-width: 100%;
    }

    /* Float card: static row inside content on tablet */
    .amaan-area-hero__floating-card {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-2);
        min-width: unset;
        width: fit-content;
        margin-bottom: var(--sp-3);
        order: -1;
    }

    .amaan-area-proof__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }

    .amaan-area-planning__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Cluster: 2 cols on tablet */
    .amaan-area-cluster__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .amaan-area-module {
        grid-template-columns: 64px 1fr;
    }

    .amaan-area-module__cta {
        display: none;
    }

    .amaan-area-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .amaan-area-estimate__panel {
        padding: var(--sp-4);
    }

    .amaan-area-final__inner {
        /* inner is flex-column — no grid overrides needed */
        gap: 0;
    }

    /* media stays position:absolute at all sizes — no max-width constraint */
}


/* ============================================================
   16. RESPONSIVE — MOBILE ≤ 640px
   ============================================================ */

@media (max-width: 640px) {

    .amaan-area-hero,
    .amaan-area-proof,
    .amaan-area-planning,
    .amaan-area-cluster,
    .amaan-area-modules,
    .amaan-area-gallery,
    .amaan-area-journey,
    .amaan-area-estimate,
    .amaan-area-faq,
    .amaan-area-final {
        padding-block: var(--sp-5);
    }

    /* Cluster: 1 col on mobile */
    .amaan-area-cluster__grid {
        grid-template-columns: 1fr;
    }

    /* No lift on touch */
    .amaan-area-cluster__card--live:hover {
        transform: none;
    }

    .amaan-area-hero__visual {
        min-height: 260px;
    }

    .amaan-area-hero__content {
        padding: var(--sp-4) var(--sp-2) var(--sp-4);
    }

    .amaan-area-hero__title {
        font-size: clamp(1.75rem, 7.5vw, 2.2rem);
        max-width: 100%;
    }

    .amaan-area-hero__subtitle {
        max-width: 100%;
    }

    .amaan-area-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .amaan-btn {
        width: 100%;
        justify-content: center;
    }

    /* Restore auto width for estimate CTA */
    .amaan-area-estimate__cta .amaan-btn {
        width: 100%;
    }

    .amaan-area-planning__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .amaan-area-planning__item {
        padding: var(--sp-2);
    }

    .amaan-area-module {
        grid-template-columns: 48px 1fr;
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
    }

    .amaan-area-module__index {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.95rem;
    }

    .amaan-area-gallery__grid {
        grid-template-columns: 1fr;
    }

    .amaan-area-estimate__checklist {
        grid-template-columns: 1fr;
    }

    .amaan-area-estimate__panel {
        padding: var(--sp-3);
        border-radius: var(--r-lg);
    }

    .amaan-area-faq__question {
        padding: var(--sp-2) var(--sp-3);
        font-size: 0.9375rem;
    }

    .amaan-area-faq__answer {
        padding: 0 var(--sp-3) var(--sp-2);
    }

    .amaan-area-final__inner {
        gap: 0;
    }

    /* On mobile, image stays as abs background — darken it more for legibility */
    .amaan-area-final__media img {
        filter: saturate(0.4) brightness(0.35);
    }

    .amaan-area-final__actions {
        flex-direction: column;
        width: 100%;
    }

    .amaan-area-photo--main {
        border-radius: var(--r-lg);
    }

    .amaan-area-photo--portrait {
        aspect-ratio: 4 / 3;
    }
}


/* ============================================================
   17. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .amaan-area-hero__badge::before {
        animation: none;
    }

    .amaan-btn,
    .amaan-area-planning__item,
    .amaan-area-module,
    .amaan-area-module::before,
    .amaan-area-module__index,
    .amaan-area-module__cta,
    .amaan-area-gallery__item .amaan-area-photo,
    .amaan-area-faq__question,
    .amaan-area-faq__question::after {
        transition: none;
    }

    .amaan-btn:hover,
    .amaan-area-planning__item:hover,
    .amaan-area-gallery__item:hover .amaan-area-photo {
        transform: none;
    }
}