/* DCON Construction - shared styles (loaded on every page).
   Page-specific styles live in home.css, about.css, services.css, clients.css, contact.css and team.css. */

/* ============================================
   1. GLOBAL STYLES AND CSS VARIABLES
   Colours, fonts, page width and spacing used on every page.
   Change a value here to re-theme the whole website.
============================================ */

:root {
    --brand-dark: #222226; /* primary brand colour */
    --brand-dark-hover: #121214; /* button hover */
    --brand-red: #c8161d; /* accent colour */
    --ivory: #f4f4f6; /* page background */
    --paper: #ffffff; /* card background */
    --stone: #6a6a72; /* secondary text */
    --charcoal: #242427; /* body text */
    --line: #dedee2; /* borders */
    --container: 1180px; /* maximum content width */
    --space-section: clamp(3rem, 8vw, 6rem); /* vertical space between sections */
    --radius: 4px;
    --header-height: 80px; /* sticky header height (logo + menu) */
    --ease: cubic-bezier(.4, 0, .2, 1); /* shared easing for menu and card transitions */
    --shadow: 0 10px 28px rgba(22, 22, 26, .14);
    --font-head: "Newsreader", Georgia, serif;
    --font-body: "Work Sans", system-ui, sans-serif;
}

/* ============================================
   2. RESET AND BASE STYLES
   Browser defaults, page background, images, links and focus outlines.
============================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font: 1.0625rem/1.7 var(--font-body);
    -webkit-font-smoothing: antialiased;
    color: var(--charcoal);
    background: var(--ivory);
}

img {
    max-width: 100%;
    display: block;
}

p {
    max-width: 62ch;
    margin: 0 0 1em;
}

a {
    color: var(--brand-dark);
    text-underline-offset: 3px;
}

/* Visible keyboard focus for accessibility */
:focus-visible {
    outline: 3px solid var(--brand-red);
    outline-offset: 3px;
}

/* ============================================
   3. TYPOGRAPHY
   Headings use the serif font, body text uses the sans-serif font.
============================================ */

h1,
h2,
h3 {
    font-family: var(--font-head);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--brand-dark);
    margin: 0 0 .5em;
}

h1 {
    font-size: clamp(2.3rem, 6vw, 4.6rem);
}

h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    margin-bottom: .6em;
}

h3 {
    font-size: 1.3rem;
}

/* Smaller h1 used on the privacy and terms pages */
.page-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.muted {
    color: var(--stone);
}

/* ============================================
   4. SHARED LAYOUT HELPERS
   Used by every page: content width, section spacing and grids.
============================================ */

/* .wrap centres the content and keeps it inside the page width */
.wrap {
    width: min(var(--container), 100% - 2.5rem);
    margin-inline: auto;
}

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

.section.tight {
    padding-top: 0;
}

/* section that follows a banner directly */
.section.dark {
    background: var(--brand-dark);
    color: var(--ivory);
}

.dark h2,
.dark h3 {
    color: var(--ivory);
}

.stone {
    background: #ededf0;
}

/* soft alternate background */
.more {
    margin-top: 2rem;
}

.two {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Text on one side, picture or logos on the other (home and About pages) */
.split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.split img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem;
}

/* ============================================
   5. BUTTONS
   Default button plus .ghost (outline) and .red (brand red) variants.
   Every button has a hover state, a pressed (:active) state and a visible keyboard focus ring.
============================================ */

.btn {
    display: inline-block;
    min-height: 44px;
    padding: .8rem 1.5rem;
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
    border: 2px solid var(--brand-dark);
    border-radius: var(--radius);
    font: 600 .95rem var(--font-body);
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.btn:hover {
    background: var(--brand-dark-hover);
    border-color: var(--brand-dark-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* Pressed state: the button settles back down */
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn.ghost {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.btn.ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: currentColor;
}

/* Brand red button. White text on #c8161d has a contrast ratio of about 5.8:1 */
.btn.red {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.btn.red:hover {
    background: #a50f16;
    border-color: #a50f16;
}

.btn.red:active {
    background: #8c0c12;
    border-color: #8c0c12;
}

/* ============================================
   6. HEADER AND NAVIGATION
   Built by js/main.js into <div id="site-header"> on every page.
   Desktop: logo on the left, links and red button on the right.
   Tablet and phone (max-width 960px): hamburger button and a sliding panel (see section 13).
============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s var(--ease);
}

/* Subtle shadow once the page is scrolled (class added by js/main.js) */
.site-header.scrolled {
    box-shadow: 0 6px 20px rgba(22, 22, 26, .09);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

/* Logo: the official stacked logo, never stretched (width follows height) */
.brand {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    border-radius: var(--radius);
}

.brand img {
    height: 62px;
    width: auto;
    object-fit: contain;
    transition: transform .25s var(--ease);
}

.brand:hover img {
    transform: scale(1.03);
}

/* Hamburger button: only visible on tablets and phones (see section 13) */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.nav-toggle:hover {
    background: var(--ivory);
    border-color: var(--stone);
}

.nav-toggle:active {
    background: #e9e9ed;
}

/* The three bars; they turn into an X when the menu is open */
.nav-toggle .bar {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    background: var(--brand-dark);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}

.nav-toggle .bar:nth-child(1) { top: 14px; }
.nav-toggle .bar:nth-child(2) { top: 21px; }
.nav-toggle .bar:nth-child(3) { top: 28px; }

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

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

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

.nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .92rem;
}

/* Menu links: medium weight, small caps-style spacing, animated red underline */
.nav > li > a:not(.btn) {
    position: relative;
    display: block;
    padding: .65rem .8rem;
    color: var(--charcoal);
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    transition: color .2s var(--ease);
}

.nav > li > a:not(.btn)::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .3rem;
    height: 2px;
    background: var(--brand-red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease);
}

.nav > li > a:not(.btn):hover,
.nav > li:focus-within > a:not(.btn) {
    color: var(--brand-red);
}

.nav > li > a:not(.btn):hover::after,
.nav > li:focus-within > a:not(.btn)::after,
.nav > li > a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Current page: red text, full underline, slightly bolder */
.nav > li > a[aria-current="page"] {
    color: var(--brand-red);
    font-weight: 600;
}

/* Red call-to-action button on the right */
.nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: .7rem;
    padding: .55rem 1.2rem;
    font-size: .9rem;
    white-space: nowrap;
}

/* Small arrow after "Projects" shows that it opens a drop-down */
.has-sub > a::before {
    content: "";
    position: absolute;
    right: -.05rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s var(--ease);
}

.has-sub > a {
    padding-right: 1.3rem !important;
}

.has-sub:hover > a::before,
.has-sub:focus-within > a::before {
    transform: rotate(225deg) translate(-1px, -1px);
}

/* Projects drop-down (Ongoing and Completed): fades and slides in */
.has-sub {
    position: relative;
}

.sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--brand-red);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.has-sub:hover .sub,
.has-sub:focus-within .sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.sub a {
    display: block;
    padding: .65rem 1.1rem;
    color: var(--charcoal);
    font-weight: 500;
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
}

.sub a:hover {
    background: var(--ivory);
    color: var(--brand-red);
    padding-left: 1.35rem;
}

.sub a[aria-current="page"] {
    color: var(--brand-red);
    font-weight: 600;
}

/* ============================================
   7. HOMEPAGE HERO AND BACKGROUND VIDEO
   Only used on index.html.
   Layers from back to front: poster image, video, ONE light overlay (::before), text.
   The video file is assets/videos/hero-construction.mp4 (the poster shows until it plays).
============================================ */

/* The poster image is the fallback when the video file is missing or cannot play */
.hero {
    position: relative;
    isolation: isolate; /* keeps the video, overlay and text layers inside the hero */
    min-height: 82vh;
    display: grid;
    align-items: end;
    overflow: hidden;
    color: #fff;
    background: #26262a url("../assets/images/hero/hero-poster.jpg") center/cover;

    /* Two settings you can change without touching the rules below:
       --hero-video-position: which part of the video stays visible when its edges are cropped
                              (the building is usually on the right, so phones keep the right side in view)
       --hero-video-zoom:     1 = normal. Only raise it (e.g. 1.35) if black bars are part of the video FILE itself. */
    --hero-video-position: center center;
    --hero-video-zoom: 1;
}

/* Full-bleed background video:
   - absolute + inset 0 + 100% x 100% makes the video exactly as large as the hero (no side gaps)
   - object-fit: cover scales the footage up until it covers the whole box, without stretching it
   - max-width: none / margin: 0 stop any other rule from shrinking or shifting it
   Brightness and contrast lift keeps the building and the work on site clearly visible. */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: var(--hero-video-position);
    transform: scale(var(--hero-video-zoom));
    filter: brightness(1.15) contrast(1.08) saturate(1.05);
}

/* The ONLY overlay: a light gradient.
   Left side is darker behind the text, the right side is almost clear so the video shows.
   A very soft bottom fade keeps the buttons readable. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(22, 22, 26, .52) 0%, rgba(22, 22, 26, .3) 38%, rgba(22, 22, 26, .06) 68%, rgba(22, 22, 26, 0) 100%),
        linear-gradient(0deg, rgba(22, 22, 26, .26) 0%, rgba(22, 22, 26, 0) 40%);
}

/* z-index 2 keeps the text above the overlay */
.hero .wrap {
    position: relative;
    z-index: 2;
    padding: 4rem 0;
    animation: rise .9s ease both;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hero h1 {
    color: #fff;
    max-width: 17ch;
}

.hero p {
    font-size: 1.15rem;
    color: #f1f1f3;
}

/* Outline button on the video needs its own readable background */
.hero .btn.ghost {
    text-shadow: none;
    background: rgba(22, 22, 26, .25);
    border-color: #fff;
    color: #fff;
}

.hero .btn.ghost:hover {
    background: rgba(255, 255, 255, .92);
    border-color: #fff;
    color: var(--brand-dark);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   8. PAGE BANNER AND CLOSING CALL TO ACTION
   Shared: the dark banner at the top of every inner page
   and the Planning a project? band that js/main.js adds above the footer.
============================================ */

.page-hero {
    position: relative;
    color: #fff;
    padding: clamp(4rem, 10vw, 7rem) 0;
    background: #2a2a2e url("../assets/images/hero/hero-poster.jpg") center/cover;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 22, 26, .7);
}

.page-hero .wrap {
    position: relative;
}

.page-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.page-hero p {
    color: #ededf0;
    font-size: 1.1rem;
}

.cta-band {
    background: var(--brand-dark);
    color: var(--ivory);
    text-align: center;
}

.cta-band h2 {
    color: var(--ivory);
}

.cta-band p {
    margin-inline: auto;
}

.cta-band .cta-row {
    justify-content: center;
}

/* ============================================
   9. LEADERSHIP AND MERGER
   Shared by the home, About and Team pages.
   Leadership cards come from js/leadership.js, the logo card from js/merger.js.
============================================ */

.leader-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 360px));
    margin-top: 1.5rem;
}

.leader {
    padding: 1.8rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-red);
    border-radius: var(--radius);
}

.leader h3 {
    font-size: 1.5rem;
    margin-bottom: .2rem;
}

.leader .designation {
    margin: 0;
    color: var(--stone);
    font-weight: 600;
}

.leader img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* Merger section: Ravi Infrabuild merged into DCON Construction (DCON stays the dominant brand) */
.merger {
    background: var(--brand-dark);
    color: var(--ivory);
}

.merger h2 {
    color: var(--ivory);
}

.merger p {
    color: #e4e4e8;
}

.brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.brand-stack .brand-label {
    margin: 0;
    max-width: none;
    font: 600 .74rem var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone);
}

.brand-stack img {
    max-width: 100%;
}

/* The extra .brand-stack selector beats the general ".split img" rule above */
.brand-stack img.brand-legacy {
    box-shadow: none;
    border-radius: 0;
    width: 170px;
    height: auto;
    aspect-ratio: 5 / 1;
    opacity: .85;
}

.brand-stack img.brand-primary {
    box-shadow: none;
    border-radius: 0;
    width: 230px;
    height: auto;
    aspect-ratio: 871 / 682; /* official DCON logo proportions */
    object-fit: contain;
}

/* Arrow between the two logos, drawn with CSS */
.merge-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #a50f16;
    font-size: .85rem;
    font-weight: 600;
}

.merge-arrow::before {
    content: "";
    order: 1;
    width: 2px;
    height: 30px;
    margin-top: .3rem;
    background: var(--brand-red);
}

.merge-arrow::after {
    content: "";
    order: 2;
    width: 11px;
    height: 11px;
    margin-top: -8px;
    border-right: 2px solid var(--brand-red);
    border-bottom: 2px solid var(--brand-red);
    transform: rotate(45deg);
}

/* ============================================
   10. PROJECT CARDS AND FILTERS
   Projects, Ongoing, Completed and Project Details pages (js/projects.js).
============================================ */

/* Search box and drop-downs above the project list */
.filters {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 2rem;
}

/* Responsive card grid: 3 columns on desktop, 2 on tablet, 1 on phones (see section 13) */
.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.card:hover {
    border-color: #c9c9d0;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.card:active {
    transform: translateY(-1px);
}

/* Fixed 4:3 picture frame: every card image has the same shape. Also clips the hover zoom */
.card .pic {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e9e9ed;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, center);
    transition: transform .5s var(--ease);
}

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

/* Portrait pictures and posters (set by js/projects.js): show the WHOLE picture, centred,
   on the neutral frame background. No zoom on hover so nothing gets cropped. */
.card img[data-fit="contain"],
.show-pic img[data-fit="contain"],
.detail-pic img[data-fit="contain"] {
    object-fit: contain;
}

.card:hover img[data-fit="contain"],
.show-card:hover img[data-fit="contain"] {
    transform: none;
}

/* Shown by js/projects.js when an image file cannot be loaded (instead of the alt text) */
.img-missing {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: .35rem;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(135deg, #ececef, #e0e0e5);
    color: var(--stone);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.img-missing::before {
    content: "";
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border: 2px solid #b4b4bc;
    border-radius: var(--radius);
    background: linear-gradient(135deg, transparent 55%, #b4b4bc 56%);
}

/* Project details page: one large picture in a fixed 16:9 frame (same cover / contain logic as the cards) */
.detail-pic {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 560px;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: #e9e9ed;
}

.detail-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--img-pos, center);
}

.card .body {
    flex: 1; /* body fills the card so cards in one row have equal height */
    padding: 1.2rem 1.3rem 1.5rem;
}

.card h3 {
    margin: .7rem 0 .25rem;
    font-size: 1.3rem;
    transition: color .2s var(--ease);
}

.card:hover h3 {
    color: var(--brand-red);
}

.card .body p {
    margin-bottom: .5rem;
    font-size: .98rem;
}

.card .body p.muted {
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Status and category labels */
.tag {
    display: inline-block;
    margin-right: .3rem;
    padding: .15rem .6rem;
    border: 1px solid var(--brand-red);
    border-radius: 2px;
    color: #a50f16;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* "No projects match" message */
.empty {
    grid-column: 1 / -1;
    padding: 2rem;
    border: 1px dashed var(--stone);
    border-radius: var(--radius);
}

/* ============================================
   11. FORMS
   Enquiry form on contact.html (js/contact-form.js).
   The control styles are shared with the project filters.
============================================ */

.filters input,
.filters select,
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: .7rem;
    border: 1px solid #b4b4bc;
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.filters input:focus,
.filters select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(200, 22, 29, .25);
}

.field {
    margin-bottom: 1rem;
}

.field label {
    display: block;
    margin-bottom: .3rem;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.field textarea {
    resize: vertical;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: #9b2c2c;
}

.error {
    color: #9b2c2c;
    font-size: .88rem;
    min-height: 1.2em;
}

/* reserves space so the form does not jump */
.form-status {
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--line);
    background: var(--paper);
}

/* Spam trap: hidden from people, bots tend to fill it in */
.hp {
    position: absolute;
    left: -9999px;
}

/* ============================================
   12. FOOTER
   Built by js/main.js into <div id="site-footer"> on every page.
============================================ */

.site-footer {
    background: var(--charcoal);
    color: #dcdce0;
    padding: 3rem 0 1.5rem;
}

.site-footer a {
    color: #dcdce0;
    transition: color .2s var(--ease);
}

.site-footer a:hover {
    color: #fff;
}

/* Official logo on a white plate so its charcoal and grey parts stay clearly visible */
.site-footer .footer-logo {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: .9rem 1.2rem;
    background: #fff;
    border-radius: var(--radius);
    line-height: 0;
}

.site-footer .footer-logo img {
    height: 118px;
    width: auto;
    object-fit: contain;
}

.site-footer .two {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
}

.site-footer h3 {
    margin-top: 1.2rem;
    color: #fff;
    font-size: 1.05rem;
}

.site-footer .two>div>h3:first-child {
    margin-top: 0;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin-bottom: .3rem;
}

.footer-note {
    margin-top: .8rem;
    font-size: .92rem;
    color: #b4b4ba;
}

.legal {
    border-top: 1px solid #555;
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: .88rem;
}

/* ============================================
   13. RESPONSIVE STYLES
   Tablet and phone rules for the shared styles above.
   Page-specific files (home.css, team.css, ...) keep their own responsive rules at the bottom.
============================================ */

/* Tablets and below: hamburger button, sliding menu panel, project grid with 2 columns */
@media (max-width: 960px) {
    :root {
        --header-height: 72px;
    }

    .brand img {
        height: 52px;
    }

    .nav-toggle {
        display: block;
    }

    /* The menu panel hangs under the header. Closed = invisible and not clickable. */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        padding: .5rem 1.25rem 1.5rem;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 28px rgba(22, 22, 26, .12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    }

    /* class added by js/main.js */
    .nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    /* Big, easy-to-tap rows */
    .nav > li > a:not(.btn) {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: .5rem .25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
    }

    /* On phones the current page is marked with a red bar on the left instead of an underline */
    .nav > li > a:not(.btn)::after,
    .has-sub > a::before {
        display: none;
    }

    .nav > li > a[aria-current="page"] {
        padding-left: .8rem;
        box-shadow: inset 3px 0 0 var(--brand-red);
    }

    .has-sub > a {
        padding-right: .25rem !important;
    }

    /* Drop-down items are always listed under "Projects" */
    .sub {
        position: static;
        min-width: 0;
        padding: 0 0 0 1rem;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .sub a {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: .4rem .25rem;
        font-size: .95rem;
        border-bottom: 1px solid var(--line);
    }

    .sub a:hover {
        padding-left: .25rem;
    }

    .nav .btn {
        width: 100%;
        margin: 1.2rem 0 0;
        min-height: 48px;
    }

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

@media (max-width: 900px) {
    .split {
        grid-template-columns: 1fr;
    }
}

/* Large phones: single-column grids and footer */
@media (max-width: 700px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .site-footer .two {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Portrait screens crop the sides of the video, so keep the right side (the building) in view */
    .hero {
        --hero-video-position: 68% center;
    }

    /* On narrow screens the text covers the whole video, so the overlay is a soft even tint
       that is a little stronger at the bottom where the text sits */
    .hero::before {
        background: linear-gradient(0deg, rgba(22, 22, 26, .62) 0%, rgba(22, 22, 26, .38) 45%, rgba(22, 22, 26, .14) 100%);
    }
}

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

/* Small phones: smaller logo, full-width hero buttons */
@media (max-width: 480px) {
    .brand img {
        height: 46px;
    }

    .site-footer .footer-logo img {
        height: 96px;
    }

    .cta-row .btn {
        width: 100%;
        text-align: center;
    }
}

/* Visitors who prefer less motion get no animations */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after,
    .hero .wrap {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto;
    }
}