/* 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);
}

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;
}

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);
    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 Section */
.hero {
    /* Cinematic Multi-Stop Gradient + Blur */
    /* Stronger Gradient to hide pixelation of source image */
    background:
        linear-gradient(to bottom,
            rgba(16, 10, 6, 0.72) 0%,   /* Darker Top */
            rgba(16, 10, 6, 0.42) 45%,  /* Lighter centre so the building reads */
            rgba(16, 10, 6, 0.92) 100%  /* Very Dark Bottom */
        ),
        url('assets/projects/project-ab.webp');
    background-size: cover;
    background-position: center;
    /* backdrop-filter: blur(3px); REPLACED: Removed to prevent rendering artifacts */
    position: relative; /* For scroll hint positioning */
    padding-top: 165px; /* Clears the fixed header (~116px) + breathing room */
    padding-bottom: var(--spacing-2xl);
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 800px;
    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-lg); /* Increased spacing */
    line-height: 1.2;
    letter-spacing: -1px; /* Tighter letter spacing for premium look */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    margin-bottom: var(--spacing-2xl); /* Increased breathing room */
    font-weight: 300; /* Lighter weight */
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Increased vertical gap (approx 20px) */
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg); /* Space for trust signal */
}

/* 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;
}

.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: title + short subtitle underneath */
.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;
    max-width: 800px;
    margin: 0 auto;
}

/* Offerings & Values Items */
.offerings-item,
.features-item {
    background-color: var(--beige-light);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    border-right: 4px solid var(--accent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.item-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.item-content {
    flex-grow: 1;
}

.offerings-item:hover,
.features-item:hover {
    transform: translateX(-5px);
    box-shadow: var(--shadow-md);
}

.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-xl);
    border-radius: var(--radius-lg);
    border-right: 4px solid var(--accent);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    box-shadow: var(--shadow-sm);
}

.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-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.project-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    background-color: var(--beige-medium);
}

.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;
}

/* Available = brochure forest green on cream (8.84:1); sold = muted ink */
.unit-stat-available {
    background-color: var(--cream);
    color: var(--forest);
}

.unit-stat-sold {
    background-color: var(--beige-medium);
    color: var(--ink-700);
}

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

.unit-stat-total {
    background-color: var(--beige-medium);
    color: var(--ink-900);
}

/* "تبدأ من" line, for projects priced as a range rather than per unit */
.project-price-from {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-deep);
    margin-bottom: var(--spacing-sm);
}

/* ---- 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;
}

/* Price anchor in the collapsed summary — the figure a visitor sees
   before opening the table */
.summary-from {
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--accent-deep);
    white-space: nowrap;
}

/* 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 already supplies `gap`, so no extra margin needed */
.btn .icon {
    margin-left: 0;
    font-size: 1.1em;
}

/* 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: center; /* Center buttons */
}

.project-actions .btn {
    flex: 1 1 auto;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.project-actions .btn .icon {
    font-size: 1rem;
}

.total-units {
    text-align: center;
    background-color: var(--ink-900);
    border-bottom: 3px solid var(--accent);
    color: #fff;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 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: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

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

.contact-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brown-light);
}

.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-lg);
    overflow: hidden;
    /* Soft, luxurious shadow */
    box-shadow: 0 20px 40px -10px rgba(60, 47, 35, 0.15);
    /* Thick white frame (Matte effect) */
    border: 12px solid #fff;
    position: relative;
    z-index: 1; /* Ensure Leaflet controls stack correctly */
}

.contact-map::after {
    /* Delicate inner gold trim */
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid var(--brown-light);
    border-radius: calc(var(--radius-lg) - 8px);
    pointer-events: none;
    z-index: 10;
    opacity: 0.6;
}

/* 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. */
@media (max-width: 768px) {
    .nav-list {
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .hero {
        min-height: auto; /* Let content dictate height to avoid centering overlap */
        padding-top: 150px; /* Clears the ~96px mobile header */
        padding-bottom: var(--spacing-2xl);
        align-items: flex-start; /* Ensure content starts from the padded top, not vertically centered */
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
    
    .project-actions {
        justify-content: center;
    }

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

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

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

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

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

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

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

/* 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;
        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;
    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 {
        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;
    }
}