/* ==========================================================================
   Coastal Premier Properties — site stylesheet

   Design language is taken from contact/contact.html: deep blue bands with a
   gold rule, Playfair Display headings over Montserrat body text, and white
   cards that float over the band edge.

   Layer order is declared once, up front, so component styles never need
   specificity hacks to beat base styles.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* Opt-in hook for reduced-motion. Elements that animate declare their own
   reduced variant; everything else falls back to the initial value (none). */
@property --animation-reduced {
    syntax: "*";
    inherits: false;
    initial-value: none;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

@layer base {
    :root {
        /* --- Tier 1: literal values ------------------------------------- */
        --blue-90: #01276b;
        --blue-70: #023997;
        --blue-50: #2c5e8b;
        --blue-10: #dbe3f0;
        /* Three golds, because one cannot carry every job at WCAG AA:
           gold-40 lightens on hover, gold-50 is the brand fill (needs dark
           text on it), gold-60 is the only one dark enough to be readable
           as small text on a light background. */
        --gold-40: #dcae57;
        --gold-50: #c79438;
        --gold-60: #966c15;
        --gray-05: #f8f9fa;
        --gray-15: #e4e8ee;
        --gray-30: #c4cbd4;
        --gray-60: #5a6472;
        --gray-85: #333333;
        --ink-95: #111111;
        --white: #ffffff;
        --red-50: #b3261e;
        --red-05: #fdecea;
        --green-50: #1b6b3a;
        --green-05: #e7f4ec;

        /* --- Tier 2: semantic -------------------------------------------- */
        --color-primary: var(--blue-70);
        --color-primary-hover: var(--blue-90);
        --color-accent: var(--gold-50);
        --color-accent-hover: var(--gold-40);
        --color-accent-text: var(--gold-60);
        --color-text: var(--gray-85);
        --color-text-muted: var(--gray-60);
        --color-text-on-dark: var(--blue-10);
        --color-error: var(--red-50);
        --color-error-bg: var(--red-05);
        --color-success: var(--green-50);
        --color-success-bg: var(--green-05);

        --surface-page: var(--white);
        --surface-subtle: var(--gray-05);
        --surface-card: var(--white);
        --surface-inverse: var(--color-primary);

        --ui-border: var(--gray-30);
        --ui-border-subtle: var(--gray-15);
        --ui-focus-ring: 3px solid var(--color-primary);
        --ui-focus-offset: 2px;

        --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

        /* --- Tier 3: rhythm, shape and depth ----------------------------- */
        --content-max: 1200px;
        --gutter: clamp(1.25rem, 5vw, 4rem);
        --section-space: clamp(3rem, 8vw, 5.5rem);
        --flow-space: 1.25rem;

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;

        --shadow-sm: 0 1px 2px rgb(2 57 151 / 6%), 0 2px 8px rgb(2 57 151 / 6%);
        --shadow-md: 0 2px 4px rgb(2 57 151 / 6%), 0 6px 24px rgb(2 57 151 / 12%);
        --shadow-lg: 0 4px 8px rgb(2 57 151 / 8%), 0 16px 40px rgb(2 57 151 / 16%);

        --transition: 200ms ease;
        --transition-slow: 400ms cubic-bezier(0.165, 0.84, 0.44, 1);

        accent-color: var(--color-primary);
        color-scheme: light;
    }

    /* Reduced motion: neutralise the duration token rather than blanket-
       resetting every animation, which can make some of them more jarring. */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --transition: 0ms;
            --transition-slow: 0ms;
        }
    }
}

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
    /* box-sizing is the one universal reset worth keeping; living in the
       lowest layer means anything else can still override it. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :where(body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) {
        margin: 0;
    }

    :where(ul[role="list"], ol[role="list"]) {
        padding: 0;
        list-style: none;
    }

    :where(img, picture, svg, video) {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

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

    :where(h1, h2, h3, h4, button, label, .plan-stats) {
        text-wrap: balance;
    }

    :where(p, li, blockquote, figcaption) {
        text-wrap: pretty;
    }
}

/* ==========================================================================
   Base elements
   ========================================================================== */

@layer base {
    html {
        /* No sideways scroll on narrow screens, and anchor jumps clear the
           sticky header. */
        scroll-padding-block-start: 6rem;
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.6;
        color: var(--color-text);
        background: var(--surface-page);
        overflow-x: hidden;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-display);
        line-height: 1.2;
        color: var(--color-primary);
    }

    h1 {
        font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem);
    }

    h2 {
        font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
    }

    h3 {
        font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    }

    a {
        color: var(--color-primary);
        text-underline-offset: 0.15em;
    }

    /* One focus style for the whole site. Never removed, only replaced. */
    :focus-visible {
        outline: var(--ui-focus-ring);
        outline-offset: var(--ui-focus-offset);
        border-radius: var(--radius-sm);
    }

    /* Long unbreakable strings (URLs, emails) must not blow out a container. */
    p,
    li,
    dd,
    figcaption {
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

@layer layout {
    .container {
        max-inline-size: calc(var(--content-max) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .container--narrow {
        max-inline-size: calc(50rem + 2 * var(--gutter));
    }

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

    .section--subtle {
        background: var(--surface-subtle);
    }

    .section--inverse {
        background: var(--surface-inverse);
        color: var(--white);
    }

    /* Vertical rhythm without margin bookkeeping on every child. */
    .flow > * + * {
        margin-block-start: var(--flow-space);
    }

    .section-header {
        max-inline-size: 60ch;
        margin-inline: auto;
        margin-block-end: clamp(2rem, 5vw, 3.5rem);
        text-align: center;
    }

    .section-header > p {
        margin-block-start: 0.75rem;
        color: var(--color-text-muted);
        font-size: 1.05rem;
    }

    /* Gold underline used on the "Who We Are"-style centred headings. */
    .section-header--ruled h2 {
        padding-block-end: 1rem;
    }

    .section-header--ruled h2::after {
        content: "";
        display: block;
        inline-size: 5rem;
        block-size: 4px;
        margin: 1rem auto 0;
        border-radius: 2px;
        background: var(--color-accent);
    }

    /* Text beside media. Switches on the container's own width rather than the
       viewport's, so the same component works in a full-width band or a
       narrow column. Goes on the .container element. */
    .split {
        container-type: inline-size;
    }

    .split-inner {
        display: grid;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        align-items: center;
    }

    /* Centring only makes sense against media; two text columns should share
       a common top edge. */
    .split-inner:not(:has(img)) {
        align-items: start;
    }

    @container (inline-size > 48rem) {
        .split-inner {
            grid-template-columns: 1fr 1fr;
        }
    }

    .split-inner img {
        inline-size: 100%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}

/* ==========================================================================
   Components
   ========================================================================== */

@layer components {

    /* --- Skip link ------------------------------------------------------- */
    .skip-link {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 50%;
        z-index: 2000;
        translate: -50% -110%;
        padding: 0.75rem 1.25rem;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        background: var(--color-primary);
        color: var(--white);
        font-weight: 600;
        text-decoration: none;
        transition: translate var(--transition);
    }

    .skip-link:focus-visible {
        translate: -50% 0;
    }

    /* --- Header ---------------------------------------------------------- */

    /* The header arrives at runtime, so its wrapper carries both the reserved
       height (no layout jump on load) and the sticky positioning — a sticky
       element inside the wrapper could only stick within the wrapper's own
       height, which is to say not at all. */
    #header-include {
        position: sticky;
        inset-block-start: 0;
        z-index: 1000;
        min-block-size: 109px;
        background: var(--surface-page);
    }

    .site-header {
        /* Containing block for the absolutely positioned mobile drawer. */
        position: relative;
        background: var(--surface-page);
        box-shadow: var(--shadow-sm);
    }

    .top-bar {
        background: var(--color-primary);
        color: var(--white);
        text-align: center;
        padding: 0.5rem var(--gutter);
        font-size: 0.9rem;
        font-weight: 500;
    }

    .top-bar a {
        color: inherit;
        font-weight: 700;
        text-decoration: none;
    }

    .top-bar a:hover {
        text-decoration: underline;
    }

    .header-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        padding: 0.625rem var(--gutter);
        /* Reserve the track the out-of-flow logo occupies. */
        padding-inline-start: calc(var(--gutter) + 6rem);
        min-block-size: 4.375rem;
    }

    /* The logo hangs past the header's lower edge and over the band beneath
       it. Taking it out of flow is what makes that possible: its height no
       longer drives the header bar's, so it can grow without deepening the
       header or throwing off the reserved space above.

       The logo is square, so it is sized by height; anchoring to the bottom
       edge keeps the overhang constant whatever the header's height. */
    .brand {
        position: absolute;
        inset-block-end: -1.25rem;
        inset-inline-start: var(--gutter);
        z-index: 1;
    }

    .brand img {
        block-size: 5rem;
        inline-size: auto;
        /* drop-shadow, not box-shadow: the logo is a transparent PNG and the
           shadow should follow its silhouette, not a rectangle. */
        filter: drop-shadow(0 6px 14px rgb(0 0 0 / 28%));
    }

    /* Hamburger. Three bars that fold into an X via the aria-expanded state,
       so CSS reads the same source of truth the assistive tech does. */
    .menu-toggle {
        display: grid;
        gap: 5px;
        align-content: center;
        inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding: 0.5rem;
        margin-inline-end: -0.5rem;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle .bar {
        block-size: 3px;
        inline-size: 100%;
        border-radius: 3px;
        background: var(--color-primary);
        transition: translate var(--transition), rotate var(--transition), opacity var(--transition);
    }

    .menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
        translate: 0 8px;
        rotate: 45deg;
    }

    .menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
        translate: 0 -8px;
        rotate: -45deg;
    }

    /* Mobile drawer. The 0fr -> 1fr grid track animates to the menu's real
       height without hard-coding a max-height that content can outgrow. */
    .nav-container {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        /* Above the hanging logo, which would otherwise sit on top of the
           first link in the open drawer. */
        z-index: 2;
        display: grid;
        grid-template-rows: 0fr;
        background: var(--surface-page);
        border-block-start: 1px solid var(--ui-border-subtle);
        box-shadow: var(--shadow-md);
        visibility: hidden;
        transition: grid-template-rows var(--transition), visibility var(--transition);
    }

    .site-header:has(.menu-toggle[aria-expanded="true"]) .nav-container {
        grid-template-rows: 1fr;
        visibility: visible;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        min-block-size: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-links a {
        display: block;
        padding: 0.875rem var(--gutter);
        color: var(--color-primary);
        font-weight: 600;
        text-decoration: none;
        transition: background-color var(--transition), color var(--transition);
    }

    .nav-links a:hover {
        background: var(--surface-subtle);
        color: var(--color-accent-text);
    }

    .nav-links a[aria-current="page"] {
        color: var(--color-accent-text);
    }

    @media (min-width: 48rem) {
        #header-include {
            min-block-size: 119px;
        }

        .top-bar {
            text-align: end;
        }

        .menu-toggle {
            display: none;
        }

        .header-bar {
            padding-inline-start: calc(var(--gutter) + 9.5rem);
            min-block-size: 5rem;
        }

        .brand {
            inset-block-end: -3rem;
        }

        .brand img {
            block-size: 8rem;
        }

        .nav-container {
            position: static;
            display: block;
            border: none;
            box-shadow: none;
            visibility: visible;
            transition: none;
        }

        .nav-links {
            flex-direction: row;
            justify-content: flex-end;
            gap: 0.5rem;
            overflow: visible;
        }

        .nav-links a {
            padding: 0.625rem 0.875rem;
            border: 2px solid transparent;
            border-radius: var(--radius-md);
        }

        .nav-links a:hover,
        .nav-links a[aria-current="page"] {
            border-color: var(--color-accent);
        }
    }

    /* --- Buttons --------------------------------------------------------- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-block-size: 3.25rem;
        padding: 0.875rem 2rem;
        border: 2px solid transparent;
        border-radius: var(--radius-sm);
        background: var(--color-accent);
        /* Dark text on gold: white would only reach 2.7:1. */
        color: var(--ink-95);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--transition), color var(--transition);
    }

    .btn:hover:not(:disabled) {
        background: var(--color-accent-hover);
    }

    .btn--primary {
        background: var(--color-primary);
        color: var(--white);
    }

    .btn--primary:hover:not(:disabled) {
        background: var(--color-primary-hover);
    }

    .btn--outline {
        background: transparent;
        border-color: currentColor;
        color: var(--white);
    }

    .btn--outline:hover:not(:disabled) {
        background: var(--white);
        color: var(--color-primary);
    }

    .btn--block {
        inline-size: 100%;
    }

    .btn:disabled {
        opacity: 0.75;
        cursor: progress;
    }

    /* --- Heroes ---------------------------------------------------------- */

    /* Home page: photographic hero. */
    .hero {
        display: grid;
        align-content: end;
        justify-items: center;
        gap: 1.5rem;
        min-block-size: min(80dvh, 40rem);
        padding: var(--section-space) var(--gutter);
        text-align: center;
        color: var(--white);
        background:
            linear-gradient(rgb(0 0 0 / 15%), rgb(0 0 0 / 55%)),
            image-set(url("assets/Home-Page-1536x1025.jpg") 1x) center / cover no-repeat;
        border-block-end: 4px solid var(--color-accent);
    }

    .hero h1 {
        color: inherit;
        font-size: clamp(2rem, 1rem + 6vw, 3.5rem);
        text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
    }

    /* Interior pages: solid blue band with the gold rule, matching the
       contact page. */
    .page-hero {
        padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 4.5rem);
        text-align: center;
        color: var(--white);
        background: var(--color-primary);
        border-block-end: 4px solid var(--color-accent);
    }

    .page-hero h1 {
        color: inherit;
    }

    .page-hero p {
        max-inline-size: 60ch;
        margin-inline: auto;
        margin-block-start: 0.75rem;
        color: var(--color-text-on-dark);
        font-size: 1.05rem;
    }

    .page-hero .btn {
        margin-block-start: 1.75rem;
    }

    /* --- Card ------------------------------------------------------------ */

    /* One card component serves the models gallery, the services grid and the
       team grid. Variants only change what is genuinely different. */
    .card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--radius-lg);
        background: var(--surface-card);
        box-shadow: var(--shadow-sm);
        transition: translate var(--transition-slow), box-shadow var(--transition-slow);
    }

    .card:hover {
        translate: 0 -6px;
        box-shadow: var(--shadow-lg);
    }

    .card-media {
        aspect-ratio: 3 / 2;
        background: var(--gray-15);
    }

    .card-media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: scale var(--transition-slow);
    }

    .card:hover .card-media img {
        scale: 1.05;
    }

    .card--person .card-media {
        aspect-ratio: 4 / 5;
    }

    .card-body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.625rem;
        padding: 1.5rem;
        border-block-end: 4px solid transparent;
        transition: border-color var(--transition);
    }

    .card:hover .card-body {
        border-block-end-color: var(--color-accent);
    }

    .card-role {
        color: var(--color-accent-text);
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .card-body p {
        color: var(--color-text-muted);
        font-size: 0.95rem;
    }

    /* Push a trailing link to the bottom so cards in a row line up. */
    .card-body > .card-link {
        margin-block-start: auto;
        padding-block-start: 0.5rem;
    }

    .card-link {
        align-self: flex-start;
        color: var(--color-accent-text);
        font-weight: 700;
        text-decoration: none;
    }

    .card-link:hover {
        text-decoration: underline;
    }

    .plan-stats {
        color: var(--color-text-muted);
        font-size: 0.9rem;
    }

    /* --- Numbered process list ------------------------------------------- */
    .process-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
        gap: 1.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: step;
    }

    .process-list li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.875rem;
        align-items: start;
        font-weight: 600;
        counter-increment: step;
    }

    .process-list li::before {
        content: counter(step);
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: var(--radius-md);
        background: var(--color-accent);
        color: var(--blue-90);
        font-weight: 800;
    }

    /* --- Testimonials ---------------------------------------------------- */
    .testimonial {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 0;
        padding: 2rem 1.75rem;
        border-radius: var(--radius-lg);
        background: var(--surface-card);
        box-shadow: var(--shadow-sm);
    }

    .testimonial blockquote {
        flex-grow: 1;
        margin: 0;
        color: var(--color-text-muted);
        font-size: 1.05rem;
        font-style: italic;
    }

    .testimonial figcaption {
        color: var(--blue-50);
        font-weight: 700;
    }

    /* --- Call-to-action band --------------------------------------------- */
    .cta-band {
        padding: clamp(3.5rem, 9vw, 5.5rem) var(--gutter);
        text-align: center;
        color: var(--white);
        background:
            linear-gradient(rgb(2 57 151 / 85%), rgb(44 94 139 / 90%)),
            image-set(url("assets/services/Design-team-768x576.jpg") 1x) center / cover no-repeat;
    }

    /* Solid variant, used by the contact-cta partial that closes every page. */
    .cta-band--solid {
        background: var(--color-primary);
        border-block-end: 4px solid var(--color-accent);
    }

    .cta-band h2 {
        color: inherit;
    }

    .cta-band p {
        max-inline-size: 55ch;
        margin-inline: auto;
        margin-block-start: 0.75rem;
        color: var(--color-text-on-dark);
        font-size: 1.1rem;
    }

    .cta-band .phone {
        display: inline-block;
        margin-block-start: 1rem;
        color: var(--color-accent);
        font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem);
        font-weight: 700;
        text-decoration: none;
    }

    .cta-band .phone:hover {
        text-decoration: underline;
    }

    .cta-band .btn {
        margin-block-start: 0.5rem;
    }

    /* --- Footer ---------------------------------------------------------- */
    .site-footer {
        padding: clamp(2.5rem, 6vw, 3.5rem) var(--gutter) 1.5rem;
        background: var(--ink-95);
        color: #9aa3ad;
        font-size: 0.9rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
        gap: 2.5rem;
        max-inline-size: var(--content-max);
        margin-inline: auto;
        margin-block-end: 2.5rem;
    }

    .footer-col h2 {
        margin-block-end: 1rem;
        color: var(--white);
        font-family: var(--font-body);
        font-size: 1rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .footer-col ul {
        display: grid;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-col a {
        display: inline-block;
        padding-block: 0.375rem;
        color: inherit;
        text-decoration: none;
    }

    .footer-col a:hover {
        color: var(--color-accent);
        text-decoration: underline;
    }

    .footer-bottom {
        max-inline-size: var(--content-max);
        margin-inline: auto;
        padding-block-start: 1.25rem;
        border-block-start: 1px solid #333;
        text-align: center;
    }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .text-center {
        text-align: center;
    }
}

/* ==========================================================================
   Environment adjustments
   ========================================================================== */

@layer base {
    /* Coarse pointers get larger tap targets (WCAG 2.5.8). */
    @media (pointer: coarse) {
        .nav-links a {
            padding-block: 1rem;
        }
    }

    /* Windows High Contrast strips shadows and background images, so state
       that relied on them needs a border to survive. */
    @media (forced-colors: active) {
        .card,
        .testimonial {
            border: 1px solid CanvasText;
        }

        .btn {
            border-color: ButtonText;
        }

        .nav-links a[aria-current="page"] {
            outline: 2px solid Highlight;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation: var(--animation-reduced) !important;
        }

        html {
            scroll-behavior: auto;
        }
    }
}