/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ------------------------------------------------------------------
       PALETTE — lifted directly from the Diva brochures.
       These hex values were read out of the PDF content streams, so they
       are the brand's own colours rather than an approximation:
         #000000 / #100A06 / #403B39  ink (most-used colour in both docs)
         #AF7C6C                      the accent, present in BOTH documents
         #C48068 #805B41 #997766      accent siblings
         #F4F1EB #DEC8B1 #F6E3CB      beige / sand / cream grounds
         #1C4420                      deep forest green jewel accent
       Only this block needs changing to reskin the site.
       ------------------------------------------------------------------ */

    /* Beige tones (page ground) — #F4F1EB is the brochure's own ground */
    --beige-light: #F4F1EB;
    --beige-medium: #E8DFD3;
    --beige-dark: #D4C4B0;
    --sand: #DEC8B1;
    --cream: #F6E3CB;

    /* Ink tones (brochure charcoals) */
    --ink-900: #100A06;
    --ink-800: #241F1C;
    --ink-700: #403B39;
    --ink-600: #5A5350;

    /* Brand accent */
    --accent: #AF7C6C;        /* decorative use: rules, large fills */
    --accent-warm: #C48068;
    --accent-deep: #805B41;   /* anything carrying text or meaning */

    /* Jewel green — used for the "available" state */
    --forest: #1C4420;

    /* Legacy aliases — kept so existing rules pick up the new scheme */
    --brown-light: var(--accent);
    --brown-medium: var(--ink-700);
    --brown-dark: var(--ink-800);
    --brown-darker: var(--ink-900);

    /* Text colors */
    --text-primary: #100A06;
    --text-secondary: #403B39;
    --text-light: #5A5350;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(16, 10, 6, 0.08);
    --shadow-md: 0 4px 12px rgba(16, 10, 6, 0.12);
    --shadow-lg: 0 8px 24px rgba(16, 10, 6, 0.16);

    /* ------------------------------------------------------------------
       FRAME (برواز) — every surface on the page is drawn as a framed panel
       rather than a floating drop-shadow. One border colour and one width,
       so cards, list items, the after-sales panel, contact tiles and the map
       all read as the same object at different sizes.
       ------------------------------------------------------------------ */
    --frame-width: 1px;
    --frame-color: var(--beige-dark);
    --frame-color-strong: var(--accent);
    --frame: var(--frame-width) solid var(--frame-color);
    /* The accent bar that starts each framed list item (RTL: on the right) */
    --frame-bar: 3px;

    /* ------------------------------------------------------------------
       ICON SCALE — icons are sized in em and inherit currentColor, so these
       set the font-size of the element that holds them. Three sizes only.
       ------------------------------------------------------------------ */
    --icon-sm: 1rem;      /* inside buttons and inline links */
    --icon-md: 1.375rem;  /* offerings / features tiles */
    --icon-lg: 1.75rem;   /* contact tiles */
    --icon-badge: 48px;   /* the round plate an --icon-md sits on */

    /* Fixed header height, reserved by the hero's top padding so the two can
       never disagree. Overridden in the mobile block. */
    --header-h: 116px;
}

html {
    scroll-behavior: smooth;
}

/* Icons: inline SVG referencing the sprite in index.html.
   Sized in `em` and filled with `currentColor` so they inherit font-size and
   colour from their parent exactly as the old icon font did. */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.125em;
    /* Without this an icon inherits the parent's 1.7 line-height and sits
       a couple of pixels low next to its label. */
    line-height: 1;
}

/* In a flex row the baseline nudge above is wrong — the flexbox already
   centres the icon, so it would push it off-centre instead. */
.btn .icon,
.item-icon .icon,
.unit-ask .icon,
.whatsapp-fab .icon,
.mobile-menu-toggle .icon {
    vertical-align: 0;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--beige-light);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
    direction: rtl;
    padding-top: 0; /* Removed fixed padding to allow hero to extend up */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Header */
.header {
    background-color: #fff;
    box-shadow: var(--shadow-sm);
    position: fixed; /* Changed from sticky to fixed to prevent scroll loop */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0; /* Reduced padding for cleaner, thinner header */
    transition: transform 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
}

.header.header-hidden {
    transform: translateY(-100%);
}

.header.header-scrolled {
    padding: 0;
    box-shadow: var(--shadow-md);
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);   /* Safari, incl. iOS */
    backdrop-filter: blur(10px);
}

.header.header-scrolled .logo-img {
    height: 64px; /* Shrinks on desktop */
}

@media (max-width: 768px) {
    .header.header-scrolled .logo-img {
        height: 56px; /* Shrinks significantly on mobile to save space */
    }
}

/* Desktop: conventional single row — logo one side, nav the other.
   Keeps the header compact (~116px) so the hero starts higher.
   The logo is centred on mobile instead (see the mobile block below). */
.header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    position: relative;
}

.logo {
    display: flex;
    justify-content: center;
}

.logo-link {
    display: block;
    line-height: 0;
}

.logo-img {
    height: 96px;
    width: auto;
    display: block;
    transition: transform 0.3s ease, height 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-list {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--accent-deep);
    background-color: var(--beige-medium);
    outline: none;
}

/* Keyboard users still get a visible ring; mouse clicks do not */
.nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Hero -------------------------------------------------------------
   The art is a real <img> inside .hero-media rather than a CSS background.
   That buys three things the background version could not have:
     * it can be preloaded and marked fetchpriority=high as the LCP element;
     * object-position crops it predictably at every aspect ratio;
     * it avoids the background-size:cover sizing bugs older iOS Safari has
       when the viewport resizes as the URL bar hides.
   ---------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;

    /* Reserve the fixed header rather than guessing a padding that has to be
       kept in sync with it by hand. */
    padding-top: calc(var(--header-h) + var(--spacing-xl));
    padding-bottom: var(--spacing-2xl);

    /* Height is driven by WIDTH, not by viewport height.
       object-fit: cover only crops on the axis where the box is
       proportionally smaller than the image. The render is 1.506:1, so a box
       taller than width/1.506 crops nothing vertically and the hero shows the
       full frame — all the empty sky and the whole dead asphalt foreground.
       That is exactly what a viewport-height hero did on tablet portrait:
       820x802 meant no vertical crop at all.
       Tying the height to vw keeps the box wider than 1.506:1 from about
       660px up, so the crop always lands on the building band. The floor
       keeps room for the headline; the ceiling stops a 4K screen giving over
       700px to a header image.
       Plain px first for anything without clamp(). */
    min-height: 440px;
    min-height: clamp(440px, 52vw, 700px);
}

.hero-media {
    position: absolute;
    /* Physical longhands first: `inset` is Safari 14.1+, and without this the
       hero art would collapse to zero height on older iOS. */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 0;
    background-color: var(--ink-900); /* shows while the image decodes */
}

.hero-image {
    position: relative;   /* lifts it above .hero-image-fill */
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 45% keeps the building on the horizon line and crops the empty asphalt
       from the bottom of the render first, at every screen ratio. */
    object-position: 50% 45%;
    display: block;
}

/* Only ever visible on narrow screens - see the media query below. */
.hero-image-fill {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    /* scale past the edges so the blur has pixels to sample and does not
       fade to transparent at the frame */
    transform: scale(1.2);
    filter: blur(26px) saturate(1.15);
    display: none;
}

/* Legibility wash. Lightest in the middle so the facade still reads behind
   the headline, darkest at the foot so the buttons keep their contrast.
   The middle stop is 0.50, not the 0.45 it started at: measured against the
   rendered pixels, 0.45 left the subtitle at 3.6:1 over the bright concrete,
   under the 4.5:1 AA needs for text below 24px. See the ≤600px override. */
.hero-media::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    /* Above BOTH images. .hero-image carries z-index:1 so it sits over the
       blurred fill; without a z-index here the gradient would paint underneath
       the photo and darken nothing at all. */
    z-index: 2;
    background: linear-gradient(to bottom,
        rgba(16, 10, 6, 0.70) 0%,
        rgba(16, 10, 6, 0.50) 45%,
        rgba(16, 10, 6, 0.88) 100%);
}

/* Lift the text above .hero-media without needing a negative z-index */
.hero-container {
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 760px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Increased size dominance */
    font-weight: 700;
    color: #fff; /* Changed to white for contrast against dark bg */
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    letter-spacing: -1px; /* Tighter letter spacing for premium look */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    text-wrap: balance;   /* progressive: ignored where unsupported */
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--spacing-xl);
    font-weight: 300; /* Lighter weight */
    line-height: 1.6;
    max-width: 34ch;
    margin-inline: auto;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    text-wrap: balance;
}

.hero-ctas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* Buttons */

.btn {
    display: inline-flex; /* Better for centering icons */
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    gap: 10px; /* Space between icon and text */
}

/* Hero specific button styles */
.hero-ctas .btn {
    padding: 16px 32px; /* Generous padding (Luxury feel) */
    min-width: 200px; /* Wider buttons */
    font-weight: 700; /* Slightly bolder */
    font-size: 1.05rem;
}

/* The hero's primary CTA is WhatsApp, and every lead arrives through it — so
   it has to be the most prominent thing on the image. The default
   .btn-primary is ink (#403B39), which is nearly the colour of the darkened
   render behind it: it read as quieter than the outlined secondary next to
   it, inverting the intended hierarchy. Cream on ink reverses that, and at
   15.7:1 it is the highest-contrast element in the hero.
   Only inside .hero-ctas — on the white project cards the ink fill is
   correct and stays. */
.hero-ctas .btn-primary {
    background-color: var(--cream);
    border-color: var(--cream);
    color: var(--ink-900);
}

.hero-ctas .btn-primary:hover,
.hero-ctas .btn-primary:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--ink-900);
}

.btn-primary {
    background-color: var(--brown-medium);
    color: #fff;
    border-color: var(--brown-medium);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brown-dark);
    border-color: var(--brown-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Secondary Button (Outline/Ghost) */
/* Secondary Button (Outline/Ghost) */
.btn-secondary {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8); /* Slightly softer border */
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


.btn-outline {
    background-color: transparent;
    color: var(--brown-medium);
    border-color: var(--brown-medium);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.9rem;
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--brown-medium);
    color: #fff;
    outline: none;
}

.btn-outline:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sections */
section {
    padding: var(--spacing-2xl) 0;
}

/* Section headings. The subtitle line was removed from index.html to cut
   clutter — .section-subtitle below is kept so that restoring a `subtitle`
   key in data.js (and its <p>) styles correctly without further work. */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header-sub {
    /* parent .offerings-section / .features-section already supplies the top gap */
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--brown-darker);
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

.subsection-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 600;
    color: var(--brown-dark);
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

.section-subtitle {
    color: var(--text-light);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 300;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

/* Small blush rule under each section heading */
.section-header::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: var(--spacing-sm) auto 0;
    background-color: var(--accent);
    opacity: 0.7;
}

/* About Section */
.about {
    background-color: #fff;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-paragraph {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.offerings-section,
.features-section {
    margin-top: var(--spacing-xl);
}

.offerings-list,
.features-list {
    list-style: none;
    /* A grid, not a stack. Now that each item is a title plus one short line,
       full-width rows left most of an 800px band empty and made three tiles
       read as a long list rather than a set. auto-fit collapses this to one
       column on a phone with no extra breakpoint. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-sm);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* Offerings & Values Items */
.offerings-item,
.features-item {
    background-color: var(--beige-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: var(--frame);
    /* inset-inline-start = the right edge in RTL, and the left edge if this
       page is ever rendered LTR. The physical fallback first, because Safari
       below 14.1 drops the logical form and would lose the accent bar. */
    border-right: var(--frame-bar) solid var(--accent);
    border-inline-start: var(--frame-bar) solid var(--accent);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.item-icon {
    flex-shrink: 0;
    width: var(--icon-badge);
    height: var(--icon-badge);
    background-color: #fff;
    border: var(--frame);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
    font-size: var(--icon-md);
}

.item-content {
    flex-grow: 1;
    min-width: 0;   /* let long Arabic wrap instead of overflowing the frame */
}

.offerings-item:hover,
.features-item:hover {
    border-color: var(--frame-color-strong);
    box-shadow: var(--shadow-sm);
}

.offerings-item-title {
    font-weight: 600;
    color: var(--brown-dark);
    margin-bottom: var(--spacing-xs);
    font-size: 1.1rem;
}

.offerings-item-desc {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* After-Sales Section (prose, not bullets) */
.after-sales {
    background-color: var(--beige-light);
}

.after-sales-content {
    max-width: 820px;
    margin: 0 auto;
    background-color: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: var(--frame);
    border-right: var(--frame-bar) solid var(--accent);   /* RTL fallback */
    border-inline-start: var(--frame-bar) solid var(--accent);
}

.after-sales-paragraph {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.9;
}

.after-sales-paragraph + .after-sales-paragraph {
    margin-top: var(--spacing-md);
}

/* Projects Section */
.projects {
    background-color: var(--beige-medium);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.project-card {
    background-color: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--frame);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    border-color: var(--frame-color-strong);
    box-shadow: var(--shadow-md);
}

.project-image {
    width: 100%;
    /* Fixed height first so Safari < 15 still gets a sane card; aspect-ratio
       then takes over where supported and keeps both cards identical
       whatever the source render's proportions are. */
    height: 230px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: var(--beige-medium);
    border-bottom: var(--frame);
}

@supports (aspect-ratio: 1) {
    .project-image { height: auto; }
}

.project-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brown-darker);
    margin-bottom: var(--spacing-xs);
}

.project-units {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.unit-stat {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    line-height: 1.6;
}

/* Each chip is tinted with its OWN status colour rather than a neutral beige,
   so المتاح reads as green at a glance instead of needing to be read. The
   grounds are a tint of the status colour, the text is it at full strength.
   Measured text-on-chip contrast: available 8.54:1, sold 8.37:1,
   reserved 5.00:1 — all clear of the 4.5:1 AA threshold for normal text. */
.unit-stat-available {
    background-color: #D8E6D6;
    border: 1px solid #A8C4A5;
    color: var(--forest);
}

.unit-stat-sold {
    background-color: var(--beige-medium);
    border: 1px solid var(--beige-dark);
    color: var(--ink-700);
}

/* Ground lightened from #EFDCCB, which left accent-deep at 4.52:1 — passing,
   but with no margin at a 0.95rem label size. */
.unit-stat-reserved {
    background-color: #F5E8DC;
    border: 1px solid var(--sand);
    color: var(--accent-deep);
}

/* ---- Per-unit availability table -------------------------------------- */
.unit-table-wrap {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    background-color: var(--beige-light);
}

.unit-table-summary {
    cursor: pointer;
    padding: 10px var(--spacing-sm);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-800);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unit-table-summary::-webkit-details-marker {
    display: none;
}

/* Custom disclosure arrow that flips when open (RTL-aware) */
.unit-table-summary::before {
    content: '';
    width: 0;
    height: 0;
    border-block: 5px solid transparent;
    border-inline-end: 6px solid var(--accent);
    transition: transform 0.2s ease;
}

.unit-table-wrap[open] .unit-table-summary::before {
    transform: rotate(-90deg);
}

.unit-table-summary:hover {
    color: var(--accent-deep);
}

.unit-table-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* The table can be wider than a narrow card: scroll it, never the page */
.unit-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background-color: #fff;
}

.unit-table-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.unit-table th,
.unit-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--beige-medium);
    white-space: nowrap;
}

.unit-table thead th {
    background-color: var(--beige-medium);
    color: var(--ink-900);
    font-weight: 600;
    font-size: 0.82rem;
}

.unit-table tbody tr:last-child th,
.unit-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sold and reserved rows recede so available units read first */
.unit-row-sold {
    color: var(--text-light);
    background-color: var(--beige-light);
}

.unit-row-reserved {
    background-color: #fdf6ef;
}

.unit-row-available th,
.unit-row-available td {
    color: var(--ink-900);
    font-weight: 600;
}

.unit-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.unit-badge-sold {
    background-color: var(--beige-medium);
    color: var(--text-light);
}

.unit-badge-reserved {
    background-color: var(--sand);
    color: var(--accent-deep);
}

/* Shown in place of a price when prices are withheld */
.unit-badge-request {
    background-color: var(--cream);
    color: var(--forest);
}

/* Optional سعر المتر column — quieter than the headline price */
.unit-per-metre {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Per-unit enquiry link, one per available row */
.unit-ask-cell {
    width: 1%;           /* shrink to content */
    white-space: nowrap;
}

.unit-ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--ink-900);
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.unit-ask:hover,
.unit-ask:focus {
    background-color: var(--accent-deep);
    outline: none;
}

.unit-ask:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.unit-ask .icon {
    font-size: 0.95rem;
}

/* On narrow screens drop to the icon alone so the table stays readable */
@media (max-width: 560px) {
    .unit-ask-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .unit-ask {
        padding: 6px 9px;
    }
}

.unit-table-note {
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 8px var(--spacing-sm);
    line-height: 1.6;
}

.project-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
    flex-grow: 1;
}

/* Button icons — .btn supplies the gap, so no margin here. One size for
   every button on the page, hero included. */
.btn .icon {
    margin-left: 0;
    font-size: var(--icon-sm);
}

/* Labelled action buttons (icon + text) rather than icon-only circles */
.project-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: auto;
    justify-content: stretch;
}

.project-actions .btn {
    /* Equal widths, so the three buttons form one band rather than three
       differently-sized pills that shift as the labels change. */
    flex: 1 1 0;
    gap: var(--spacing-xs);
    padding: 10px 12px;
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: 0;
}

/* The single figure under the projects grid in 'total-units' mode.
   Renders nothing in the other modes. */
.projects-summary {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.projects-summary:empty {
    margin-top: 0;
}

.projects-total {
    display: inline-block;
    padding: 10px var(--spacing-lg);
    border: var(--frame);
    border-radius: 999px;
    background-color: #fff;
    color: var(--ink-900);
    font-size: 1.05rem;
    font-weight: 600;
}

/* Contact Section */
.contact {
    background-color: #fff;
}

.contact-content {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.contact-item {
    background-color: var(--beige-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border: var(--frame);
    /* Every tile matches the tallest in its row, so the four icons sit on one
       line however long the label under them wraps. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-xs);
}

.contact-icon {
    font-size: var(--icon-lg);
    color: var(--accent-deep);
    display: block;
    margin-inline: auto; /* the SVG is inline-size 1em, so centre it explicitly */
}

.contact-item:hover {
    border-color: var(--frame-color-strong);
    box-shadow: var(--shadow-sm);
}

.contact-item-link {
    color: var(--brown-medium);
    text-decoration: none;
    font-size: 1rem;
    display: block;
    transition: color 0.3s ease;
}

/* No boxy outline when a contact link is clicked/tapped */
.contact-item-link:hover,
.contact-item-link:focus {
    color: var(--accent-deep);
    text-decoration: underline;
    outline: none;
}

.contact-item-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.contact-map {
    margin-top: var(--spacing-xl);
    width: 100%;
    height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* The same برواز as the cards, just thicker: a white mount inside a
       hairline frame. */
    background-color: #fff;
    border: var(--frame);
    padding: 8px;
    position: relative;
    z-index: 1; /* Ensure Leaflet controls stack correctly */
}

.contact-map::after {
    /* Delicate inner trim, inset to sit on the white mount */
    content: '';
    position: absolute;
    top: 4px; right: 4px; bottom: 4px; left: 4px;
    inset: 4px;
    border: 1px solid var(--accent);
    border-radius: calc(var(--radius-md) - 4px);
    pointer-events: none;
    z-index: 10;
    opacity: 0.5;
}

/* Leaflet measures its container on init; without this the padding above
   would leave the tiles overflowing the white mount. */
.contact-map > .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius-md) - 8px);
}

/* Leaflet Map Styling */
.leaflet-container {
    background-color: #ededed; /* Match Esri base color */
    font-family: 'Cairo', sans-serif;
}

/* Tile attribution is required by Esri's terms, so it stays visible - but
   toned down so it reads as a credit line rather than part of the design. */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.5;
    padding: 1px 6px;
    direction: ltr;
}

.leaflet-control-attribution a {
    color: var(--accent-deep);
    text-decoration: none;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    /* 
       Refined architectural look:
       - Cleaner grayscale with subtle warmth and brightness
    */
    filter: grayscale(100%) sepia(15%) contrast(1.05) brightness(1.02);
}

/* Map Overlay Message */
.map-overlay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1rem;
    pointer-events: none; /* Let clicks pass through */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    text-align: center;
    width: 80%;
    max-width: 300px;
}

/* Footer */
.footer {
    background-color: var(--brown-darker);
    color: #fff;
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer-text {
    margin-bottom: var(--spacing-xs);
    font-size: 0.95rem;
}

.footer-domain {
    color: var(--beige-medium);
    font-size: 0.9rem;
}

/* Responsive Design */
/* Note: .header-content and .logo-img for mobile are set in the
   "Mobile Navigation Layout" block further down — kept in one place there. */
/* Below this width the hero box is proportionally much taller than the
   render (1.506:1), so `cover` would crop away most of the facade's width.
   Show the whole image instead and let the blurred copy fill the rest. */
@media (max-width: 600px) {
    .hero-image {
        object-fit: contain;
        object-position: 50% 50%;
    }

    .hero-image-fill {
        display: block;
    }

    /* `contain` puts the brightest part of the facade directly behind the
       headline, and the subtitle drops to 16px here - normal text, so it needs
       the full 4.5:1. Measured on the rendered pixels: 0.50 gives 4.1:1,
       0.58 gives 5.6:1. Anything past ~0.62 starts hiding the building this
       breakpoint exists to reveal. */
    .hero-media::after {
        background: linear-gradient(to bottom,
            rgba(16, 10, 6, 0.74) 0%,
            rgba(16, 10, 6, 0.58) 45%,
            rgba(16, 10, 6, 0.90) 100%);
    }
}

@media (max-width: 768px) {
    /* The mobile header is shorter than the desktop one; the hero's top
       padding is derived from this, so the two cannot drift apart. */
    :root {
        --header-h: 96px;
    }

    .nav-list {
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: repeat(2, 1fr);
    }

    section {
        padding: var(--spacing-xl) 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero-title {
        font-size: 1.9rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Full-width stacked CTAs, but ONLY in the hero. The old rule was a bare
       `.btn { width: 100% }`, which also stacked the three project-card
       buttons and broke that row. */
    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn {
        width: 100%;
        min-width: 0;
    }

    /* Below ~380px three labelled buttons cannot share a row legibly */
    .project-actions {
        flex-wrap: wrap;
    }

    .project-actions .btn {
        flex: 1 1 calc(50% - var(--spacing-xs));
    }

    .contact-content {
        grid-template-columns: 1fr;
    }
}

/* Mobile Menu Toggle Button (Hidden on Desktop) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--brown-dark);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

/* Mobile Navigation Layout */
@media (max-width: 768px) {
    .header-content {
        /* Logo stays centred; the toggle floats beside it */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
        gap: 0;
        position: relative;
        min-height: 76px;
    }

    .logo-img {
        height: 76px;
    }

    .mobile-menu-toggle {
        display: block; /* Show hamburger on mobile */
        position: absolute;
        right: 0;                 /* RTL fallback for Safari < 14.1 */
        inset-inline-start: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav {
        position: fixed;
        top: 96px; /* Matches fixed header height */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 0;
        max-height: 0; /* Hidden by default */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        z-index: 999;
    }

    .nav.active {
        max-height: 300px; /* Expanded height */
        border-top: 1px solid var(--beige-medium);
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: var(--spacing-md);
        align-items: flex-start;
    }

    .nav-list li {
        width: 100%;
        border-bottom: 1px solid var(--beige-light);
    }

    .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: block;
        padding: var(--spacing-md) 0;
        width: 100%;
        text-align: right;
    }
}

/* Accessibility — keyboard-only ring (mouse clicks never trigger :focus-visible) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--brown-medium);
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Print Styles */
@media print {
    .header,
    .hero-ctas,
    .project-actions,
    .whatsapp-fab,
    .footer {
        display: none;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Sticky WhatsApp CTA
   Hidden until the user scrolls past the hero, so it never competes with the
   hero's own buttons. main.js adds .visible.
   To use WhatsApp's own green instead of brand ink, change background-color
   to #25D366. Ink is the default so it sits with the rest of the palette. */
.whatsapp-fab {
    position: fixed;
    left: 20px;               /* RTL fallback for Safari < 14.1 */
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 900;

    width: 56px;
    height: 56px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--ink-900);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(16, 10, 6, 0.35);
    text-decoration: none;

    /* hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
                background-color 0.25s ease;
}

.whatsapp-fab.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus {
    background-color: var(--accent-deep);
    outline: none;
}

.whatsapp-fab:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .whatsapp-fab {
        left: 16px;
        inset-inline-end: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

/* Respect a reduced-motion preference: appear, but do not slide or scale */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-fab {
        transition: opacity 0.01s linear, visibility 0.01s;
        transform: none;
    }
    .whatsapp-fab.visible {
        transform: none;
    }
}


/* =======================================================================
   CROSS-BROWSER / DEVICE COMPATIBILITY
   Chrome, Safari (incl. iOS), Edge and Firefox, desktop and mobile.
   Grouped here rather than scattered so it is obvious what is a
   compatibility concession and what is design.
   ======================================================================= */

/* iOS Safari inflates text in the "wrong" orientation unless told not to.
   -webkit- for Safari, unprefixed for everything else. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Stops iOS painting a grey rectangle over a tapped button or card. Focus
   rings are untouched, so keyboard users lose nothing. */
a,
button,
summary {
    -webkit-tap-highlight-color: rgba(175, 124, 108, 0.18);
}

/* Safari applies the UA's own font to form/controls; the page font should win. */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Long unbroken strings — an email address, a URL in a popup — must not push
   a framed panel wider than its column on a narrow phone. */
body {
    overflow-wrap: break-word;
}

/* Firefox draws its own marker on <summary> in addition to the custom arrow;
   Safari and Chrome use the ::-webkit- pseudo-element already handled above. */
.unit-table-summary {
    list-style: none;
}

.unit-table-summary::marker {
    content: '';
}

/* Belt and braces for the page-level guarantee that nothing scrolls
   sideways. Wide content scrolls inside its own container instead
   (.unit-table-scroll). */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Safari < 15.4 has no scroll-behavior, so main.js's scrollIntoView already
   carries the smooth scrolling; this just keeps the two consistent where it
   IS supported, and both are disabled below for reduced-motion users. */
@supports not (scroll-behavior: smooth) {
    html { scroll-behavior: auto; }
}

/* iOS Safari renders position:fixed elements above everything during
   momentum scrolling; keeping the FAB below the mobile nav panel stops it
   floating over an open menu. */
.whatsapp-fab { z-index: 900; }
.nav.active    { z-index: 999; }
.header        { z-index: 1000; }

/* -----------------------------------------------------------------------
   Reduced motion. The hero heading previously animated in over a full
   second with no exemption, which is exactly the case the media query
   exists for.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .project-card:hover,
    .offerings-item:hover,
    .features-item:hover,
    .contact-item:hover {
        transform: none;
    }
}

/* -----------------------------------------------------------------------
   Forced-colours / high-contrast (Edge and Windows Chrome). Borders carry
   the whole design now that the shadows are gone, so they must not vanish.
   ----------------------------------------------------------------------- */
@media (forced-colors: active) {
    .project-card,
    .offerings-item,
    .features-item,
    .contact-item,
    .after-sales-content,
    .contact-map {
        border: 1px solid CanvasText;
    }

    .icon {
        fill: CanvasText;
    }
}

/* -----------------------------------------------------------------------
   Very wide screens: stop the hero art and the grids stretching past the
   point where they still read as a composed layout.
   ----------------------------------------------------------------------- */
@media (min-width: 1600px) {
    /* .hero needs nothing here — clamp() already caps it at 700px. */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape phones: a viewport-height hero leaves no room for the headline. */
@media (max-height: 520px) and (orientation: landscape) {
    .hero {
        min-height: 0;
        padding-top: calc(var(--header-h) + var(--spacing-md));
        padding-bottom: var(--spacing-lg);
    }

    .hero-title {
        margin-bottom: var(--spacing-sm);
    }

    .hero-subtitle {
        margin-bottom: var(--spacing-md);
    }
}

/* =======================================================================
   OLDER SAFARI FALLBACKS
   Safari 14.1 (April 2021) shipped `inset`, `gap` in FLEXBOX, and the
   logical inset-*/border-* properties together, so `@supports not (inset: 0)`
   is a precise probe for "Safari older than that" without user-agent
   sniffing. Newer engines skip this whole block.

   The symptom this prevents: flexbox `gap` silently doing nothing, so every
   icon sits flush against its label and the three project buttons touch.
   ======================================================================= */
@supports not (inset: 0) {
    .btn .icon,
    .unit-ask .icon {
        margin-inline-end: var(--spacing-xs);
        margin-left: 8px;   /* physical fallback, RTL */
    }

    .hero-ctas .btn,
    .project-actions .btn {
        margin: 4px;
    }

    .nav-list li {
        margin-left: var(--spacing-md);
    }

    .project-units .unit-stat,
    .projects-summary-chips .unit-stat {
        margin-left: 6px;
        margin-bottom: 6px;
    }

    .offerings-item .item-icon,
    .features-item .item-icon {
        margin-left: var(--spacing-md);
    }

    .contact-icon {
        margin-bottom: var(--spacing-xs);
    }

    .offerings-list,
    .features-list,
    .contact-content,
    .projects-grid {
        /* grid-gap is the pre-standard name these engines do understand */
        grid-gap: var(--spacing-sm);
    }
}

/* :focus-visible is Safari 15.4+. Without a fallback, keyboard users on an
   older iPad get no focus ring at all — the rules above would simply not
   parse. `@supports not selector(...)` is itself Safari 14.1+, so anything
   older keeps the plain :focus ring, which is the safe direction to fail. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    summary:focus,
    .nav-link:focus,
    .contact-item-link:focus,
    .btn:focus {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }
}