/* =============================================
   PRAXIS ENGINEERING — MAIN STYLESHEET
   ============================================= */

/* --- Custom Properties --- */
:root {
    --primary:       #EB9B42;
    --primary-dark:  #d4882e;
    --secondary:     #212D3A;
    --secondary-mid: #2e3e52;
    --white:         #FFFFFF;
    --light-gray:    #D3D3D3;
    --mid-gray:      #A9A9A9;
    --dark-gray:     #555555;
    --black:         #000000;
    --off-white:     #F5F5F5;

    --heading-size:  clamp(28px, 3.5vw, 40px);
    --subhead-size:  clamp(20px, 2.2vw, 28px);
    --body-size:     clamp(15px, 1.2vw, 18px);
    --small-size:    clamp(13px, 1vw, 15px);

    --font-heading:  'Georgia', 'Times New Roman', serif;
    --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

    --container-max: 1200px;
    --container-pad: clamp(16px, 4vw, 48px);

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

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg:  0 20px 60px rgba(0,0,0,0.18);

    --transition: 0.3s ease;
    --transition-slow: 0.6s ease;

    --header-height: 80px;
}

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

html {
    scroll-behavior:       smooth;
    font-size:             16px;
    overflow-x:            clip;         /* must be on html AND body to block horizontal scroll on iOS — `clip` (not `hidden`) so html/body don't become scroll containers, which breaks position:sticky in Chrome/WebKit */
    overscroll-behavior-x: none;         /* kills horizontal rubber-band on Chrome/Android/Firefox */
    touch-action:          pan-y pinch-zoom; /* tells every touch browser: vertical scroll + pinch-zoom only — no horizontal swipe. Covers iOS Safari, Android Chrome, Samsung Internet, Firefox Mobile, all tablets */
}

body {
    font-family:           var(--font-body);
    font-size:             var(--body-size);
    color:                 var(--black);
    line-height:           1.7;
    background-color:      var(--white);
    overflow-x:            clip;
    overscroll-behavior-x: none;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }

ul { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Remove tap flash on iOS/Android; eliminate 300ms tap delay on touch devices */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--font-heading);
    font-weight:   700;
    line-height:   1.2;
    color:         var(--black);
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: var(--heading-size); }
h3 { font-size: var(--subhead-size); }
h4 { font-size: clamp(16px, 1.5vw, 20px); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Layout --- */
.container {
    width:      100%;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 var(--container-pad);
}

.section {
    padding: clamp(60px, 8vw, 120px) 0;
}

.section--dark {
    background-color: var(--secondary);
    color:            var(--white);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }

.section--gray {
    background-color: var(--off-white);
}

.section--primary {
    background-color: var(--primary);
    color:            var(--white);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 { color: var(--white); }

.section-header {
    margin-bottom: clamp(40px, 5vw, 72px);
    text-align:    center;
}

.section-header .eyebrow {
    display:        inline-block;
    font-size:      var(--small-size);
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  12px;
}

.section--dark .section-header .eyebrow { color: var(--primary); }

.section-header h2 { margin-bottom: 16px; }

.section-header p {
    font-size:  var(--body-size);
    max-width:  640px;
    margin:     0 auto;
    color:      var(--dark-gray);
}

.section--dark .section-header p { color: var(--mid-gray); }

.two-col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(40px, 6vw, 80px);
    align-items:           center;
}

.three-col {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(24px, 3vw, 40px);
}

.four-col {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(20px, 2.5vw, 32px);
}

/* --- Buttons --- */
.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        14px 32px;
    font-size:      var(--small-size);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  var(--radius-sm);
    transition:     all var(--transition);
    cursor:         pointer;
    border:         2px solid transparent;
    white-space:    nowrap;
}

.btn-primary {
    background-color: var(--primary);
    color:            var(--white);
    border-color:     var(--primary);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color:     var(--primary-dark);
    color:            var(--white);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    color:            var(--white);
    border-color:     var(--white);
}
.btn-outline:hover {
    background-color: var(--white);
    color:            var(--secondary);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow-md);
}

.btn-outline-dark {
    background-color: transparent;
    color:            var(--secondary);
    border-color:     var(--secondary);
}
.btn-outline-dark:hover {
    background-color: var(--secondary);
    color:            var(--white);
    transform:        translateY(-2px);
}

.btn-arrow::after {
    content: '→';
    transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* --- Header --- */
.site-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          1000;
    height:           var(--header-height);
    background-color: transparent;
    transition:       background-color var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
    background-color: var(--secondary);
    box-shadow:       var(--shadow-md);
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    gap:             24px;
}

/* Logo */
.site-logo, .footer-logo { display: flex; align-items: center; }

.header-logo-img {
    height:    52px;
    width:     auto;
    display:   block;
    transition: opacity var(--transition);
}

.header-logo-img:hover { opacity: 0.85; }

.footer-logo-img {
    height:  48px;
    width:   auto;
    display: block;
    opacity: 0.9;
    transition: opacity var(--transition);
}

.footer-logo-img:hover { opacity: 1; }

.logo-text {
    font-family:    var(--font-heading);
    font-size:      26px;
    font-weight:    700;
    letter-spacing: 0.06em;
    color:          var(--white);
    text-transform: uppercase;
}

.logo-text--light { color: var(--white); }

.logo-accent { color: var(--primary); font-size: 36px; line-height: 1; }

/* Nav */
.site-nav { display: flex; }

.nav-menu {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.nav-item { position: relative; }

.nav-link {
    display:        flex;
    align-items:    center;
    gap:            4px;
    padding:        8px 14px;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--white);
    border-radius:  var(--radius-sm);
    transition:     color var(--transition), background-color var(--transition);
}

.nav-link:hover,
.nav-item.current-menu-item > .nav-link { color: var(--primary); }

.dropdown-arrow {
    font-size:  9px;
    margin-top: 1px;
    transition: transform var(--transition);
}

.has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
    position:         absolute;
    top:              100%;
    left:             0;
    min-width:        220px;
    background-color: var(--secondary);
    border-top:       3px solid var(--primary);
    border-radius:    0 0 var(--radius-md) var(--radius-md);
    box-shadow:       var(--shadow-lg);
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(8px);
    transition:       opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index:          100;
}

.has-dropdown:hover .dropdown-menu {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.dropdown-menu .nav-item { width: 100%; }

.dropdown-menu .nav-link {
    padding:       12px 20px;
    border-radius: 0;
    font-size:     12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dropdown-menu .nav-item:last-child .nav-link { border-bottom: none; }
.dropdown-menu .nav-link:hover { background-color: rgba(235,155,66,0.12); color: var(--primary); }

/* Header CTA */
.header-cta { margin-left: 16px; padding: 10px 24px; font-size: 12px; }

/* Hamburger */
.mobile-nav-social { display: none; }

.nav-toggle {
    display:        none;
    flex-direction: column;
    justify-content: center;
    align-items:    center;
    gap:            5px;
    padding:        12px 10px; /* 44px+ tap target: 2px×3 lines + 5px×2 gaps + 24px padding = 44px */
    min-width:      44px;
    min-height:     44px;
}

.hamburger-line {
    display:          block;
    width:            24px;
    height:           2px;
    background-color: var(--white);
    border-radius:    2px;
    transition:       transform var(--transition), opacity var(--transition);
}

.nav-toggle.is-active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero Section (Scroll-Scrubbed Video) --- */
.hero-scroll-section {
    position: relative;
    height:   200vh;
}

.hero-sticky {
    position:   -webkit-sticky; /* iOS Safari < 13 */
    position:   sticky;
    top:        0;
    height:     100vh;
    height:     100dvh; /* dynamic viewport height — accounts for mobile browser chrome (Safari 15.4+, Chrome 108+) */
    width:      100%;
    overflow:   hidden;
}

.hero-video {
    position:                    absolute;
    top:  0; right:  0; bottom:  0; left:  0; /* inset fallback for iOS < 14.5 */
    inset:                       0;
    width:                       100%;
    height:                      100%;
    object-fit:                  cover;
    object-position:             center;
    -webkit-transform:           translateZ(0);
    transform:                   translateZ(0);
    -webkit-backface-visibility: hidden; /* Safari/iOS */
    backface-visibility:         hidden;
    will-change:                 transform;
    contain:                     strict;
}

.hero-overlay {
    position:   absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(33,45,58,0.55) 0%,
        rgba(33,45,58,0.3)  40%,
        rgba(33,45,58,0.7)  100%
    );
}

.hero-content {
    position:        absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         var(--container-pad);
    color:           var(--white);
    padding-top:     var(--header-height);
}

.hero-eyebrow {
    font-size:      clamp(11px, 1.2vw, 14px);
    font-weight:    700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  20px;
}

.hero-title {
    font-size:     clamp(44px, 7vw, 96px);
    font-weight:   700;
    line-height:   1.05;
    margin-bottom: 24px;
    color:         var(--white);
    text-shadow:   0 2px 20px rgba(0,0,0,0.3);
}

.hero-title span { color: var(--primary); }

.hero-subtitle {
    font-size:     clamp(16px, 1.8vw, 22px);
    line-height:   1.6;
    max-width:     600px;
    margin-bottom: 40px;
    color:         rgba(255,255,255,0.9);
}

.hero-cta-group {
    display:     flex;
    gap:         16px;
    flex-wrap:   wrap;
    justify-content: center;
}

.scroll-indicator {
    position:  absolute;
    bottom:    40px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    flex-direction: column;
    align-items: center;
    gap:       8px;
    color:     rgba(255,255,255,0.7);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator svg { width: 20px; height: 20px; }

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* --- Video Section (Autoplay background) --- */
.video-bg-section {
    position:   relative;
    overflow:   hidden;
    min-height: 70vh;
    display:    flex;
    align-items: center;
}

.video-bg {
    position:   absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.video-bg-overlay {
    position:   absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:      0;
    background: rgba(33,45,58,0.72);
}

.video-bg-content {
    position:   relative;
    z-index:    2;
    width:      100%;
    color:      var(--white);
    text-align: center;
    padding:    clamp(60px, 8vw, 120px) var(--container-pad);
}

.video-bg-content h2 { color: var(--white); margin-bottom: 20px; }
.video-bg-content p  { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 36px; }

/* --- Intro / About Teaser --- */
.intro-section .intro-text { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.7; }

.intro-section .established-badge {
    display:          inline-flex;
    align-items:      center;
    gap:              10px;
    padding:          10px 20px;
    background-color: var(--primary);
    color:            var(--white);
    border-radius:    var(--radius-sm);
    font-size:        13px;
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    margin-bottom:    32px;
}

/* --- Service Cards --- */
.service-card {
    background-color: var(--white);
    border:           1px solid var(--light-gray);
    border-radius:    var(--radius-md);
    padding:          clamp(32px, 4vw, 48px);
    transition:       transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    position:         relative;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
}

.service-card::before {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           3px;
    background-color: var(--primary);
    transform:        scaleX(0);
    transition:       transform var(--transition);
}

.service-card:hover {
    transform:   translateY(-6px);
    box-shadow:  var(--shadow-lg);
    border-color: var(--primary);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon {
    width:            64px;
    height:           64px;
    background-color: rgba(235,155,66,0.12);
    border-radius:    var(--radius-md);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-bottom:    24px;
    transition:       background-color var(--transition);
}

.service-card:hover .service-icon { background-color: var(--primary); }

.service-icon svg {
    width:  32px;
    height: 32px;
    color:  var(--primary);
    transition: color var(--transition);
}

.service-card:hover .service-icon svg { color: var(--white); }

.service-card h3 { margin-bottom: 12px; font-size: clamp(18px, 1.6vw, 22px); }

.service-card p {
    color:       var(--dark-gray);
    margin-bottom: 24px;
    flex:        1;
}

.service-card .card-link {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--primary);
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    transition:     gap var(--transition);
}

.service-card:hover .card-link { gap: 10px; }

/* --- Stats Section --- */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2px;
    background-color:      rgba(255,255,255,0.08);
}

.stat-item {
    text-align:      center;
    padding:         clamp(32px, 5vw, 56px) 24px;
    background-color: var(--secondary);
    transition:      background-color var(--transition);
}

.stat-item:hover { background-color: var(--secondary-mid); }

.stat-number {
    font-family:  var(--font-heading);
    font-size:    clamp(40px, 5vw, 64px);
    font-weight:  700;
    color:        var(--primary);
    line-height:  1;
    margin-bottom: 8px;
    display:      block;
}

.stat-label {
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--mid-gray);
}

/* --- Project Grid --- */
.projects-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(16px, 2vw, 28px);
}

/* ── Real project cards ── */
.project-card {
    border-radius:    var(--radius-md);
    overflow:         hidden;
    background:       #7a8085;
    box-shadow:       0 2px 12px rgba(0,0,0,0.28);
    transition:       transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    display:          flex;
    flex-direction:   column;
    border:           1px solid rgba(255,255,255,0.06);
}

.project-card:hover {
    transform:    translateY(-6px);
    box-shadow:   0 12px 36px rgba(0,0,0,0.45);
    border-color: rgba(235,155,66,0.35);
}

.project-card-inner { display: flex; flex-direction: column; height: 100%; }

.project-card-img {
    position:    relative;
    padding-top: 75%; /* 4:3 ratio — fallback for browsers without aspect-ratio (iOS < 15) */
    height:      0;
    overflow:    hidden;
    background:  var(--secondary);
    flex-shrink: 0;
}

.project-card-img img {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    transition:      transform 0.6s ease;
    display:         block;
}

.project-card:hover .project-card-img img { transform: scale(1.04); }

.card-arrow {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    background:       rgba(33,45,58,0.6);
    color:            var(--white);
    width:            36px;
    height:           36px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    opacity:          0;
    transition:       opacity var(--transition), background var(--transition);
    z-index:                 2;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter:         blur(4px);
}

.card-arrow--prev { left: 10px; }
.card-arrow--next { right: 10px; }

.card-arrow:hover { background: rgba(235,155,66,0.8); }

.project-card-img:hover .card-arrow { opacity: 1; }

.project-photo-count {
    position:       absolute;
    bottom:         10px;
    right:          10px;
    background:     rgba(33,45,58,0.75);
    color:          var(--white);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.06em;
    padding:        4px 10px;
    border-radius:  20px;
    display:        flex;
    align-items:    center;
    gap:                     5px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter:         blur(4px);
}

.project-card-body {
    padding:        clamp(20px, 2.5vw, 28px);
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.project-card-category-badge {
    display:          inline-block;
    font-size:        10px;
    font-weight:      700;
    letter-spacing:   0.14em;
    text-transform:   uppercase;
    color:            var(--white);
    background-color: rgba(235,155,66,0.18);
    border:           1px solid rgba(235,155,66,0.45);
    border-radius:    20px;
    padding:          3px 10px;
    margin-bottom:    12px;
}

.project-card-title {
    font-size:     clamp(17px, 1.6vw, 22px);
    font-weight:   700;
    color:         var(--white);
    margin-bottom: 8px;
    line-height:   1.2;
}

.project-card-location {
    display:       flex;
    align-items:   center;
    gap:           5px;
    font-size:     13px;
    color:         rgba(255,255,255,0.55);
    margin-bottom: 12px;
}

.project-card-desc-wrap {
    position:      relative;
    overflow:      hidden;
    max-height:    72px;
    transition:    max-height 0.5s ease;
    margin-bottom: 8px;
}

.project-card-desc-wrap.expanded { max-height: 600px; }

.project-card-desc-wrap::after {
    content:    '';
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    height:     36px;
    background: linear-gradient(to bottom, transparent, #7a8085);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.project-card-desc-wrap.expanded::after { opacity: 0; }

.project-card-desc {
    font-size:   14px;
    line-height: 1.65;
    color:       rgba(255,255,255,0.65);
    margin:      0;
}

.project-card-meta {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding-top:    16px;
    border-top:     1px solid rgba(255,255,255,0.08);
    margin-bottom:  20px;
    margin-top:     auto;
}

.project-meta-label {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    margin-bottom:  2px;
}

.project-meta-value {
    font-size:   13px;
    color:       rgba(255,255,255,0.75);
    font-weight: 500;
}

.btn-view-gallery {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--primary);
    padding:         10px 20px;
    border:          2px solid rgba(235,155,66,0.45);
    border-radius:   var(--radius-sm);
    background:      rgba(235,155,66,0.08);
    transition:      background var(--transition), color var(--transition), border-color var(--transition);
    align-self:      flex-start;
}

.btn-view-gallery:hover {
    background:   var(--primary);
    color:        var(--white);
    border-color: var(--primary);
}

/* ── Homepage Category Cards ── */
.project-category-card {
    position:        relative;
    padding-top:     75%; /* 4:3 ratio — fallback for browsers without aspect-ratio (iOS < 15) */
    height:          0;
    overflow:        hidden;
    border-radius:   var(--radius-md);
    background:      var(--secondary);
    display:         block;
    text-decoration: none;
    box-shadow:      0 4px 16px rgba(0,0,0,0.3);
    transition:      transform 0.35s ease, box-shadow 0.35s ease;
}

.project-category-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.project-category-card-img {
    position:        absolute; /* needed for padding-top fallback */
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform 0.65s ease;
}

.project-category-card:hover .project-category-card-img { transform: scale(1.09); }

.project-category-card-placeholder {
    position:   absolute; /* needed for padding-top fallback */
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-mid) 100%);
}

.project-category-card-overlay {
    position:        absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:           0;
    background:      linear-gradient(to top,
                        rgba(15,22,31,0.96) 0%,
                        rgba(15,22,31,0.45) 55%,
                        rgba(15,22,31,0.1) 100%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         24px;
    transition:      background 0.35s ease;
}

.project-category-card:hover .project-category-card-overlay {
    background: linear-gradient(to top,
                    rgba(15,22,31,1) 0%,
                    rgba(15,22,31,0.7) 55%,
                    rgba(15,22,31,0.25) 100%);
}

.project-card-category {
    display:          inline-block;
    background-color: var(--primary);
    color:            var(--white);
    font-size:        10px;
    font-weight:      700;
    letter-spacing:   0.14em;
    text-transform:   uppercase;
    padding:          3px 8px;
    border-radius:    3px;
}

.project-category-card-title {
    font-size:   clamp(16px, 1.6vw, 22px);
    font-weight: 700;
    color:       var(--white);
    margin:      4px 0 6px;
    line-height: 1.2;
    transition:  transform 0.35s ease;
}

.project-category-card:hover .project-category-card-title {
    transform: translateY(-4px);
}

.project-category-card-count {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.6);
    transition:     color 0.35s ease;
}

.project-category-card:hover .project-category-card-count {
    color: var(--primary);
}

.project-category-card-cta {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-top:     10px;
    opacity:        0;
    transform:      translateY(8px);
    transition:     opacity 0.35s ease, transform 0.35s ease;
}

.project-category-card:hover .project-category-card-cta {
    opacity:   1;
    transform: translateY(0);
}

/* ── Placeholder cards ── */
.project-card--placeholder {
    min-height:  250px; /* fallback for browsers without aspect-ratio support */
    background:  linear-gradient(135deg, var(--secondary) 0%, var(--secondary-mid) 100%);
    box-shadow:  none;
}

.project-card--placeholder:hover { transform: none; box-shadow: none; }

.project-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         32px;
    text-align:      center;
}

.project-placeholder svg { width: 48px; height: 48px; color: rgba(235,155,66,0.4); margin-bottom: 16px; }
.project-placeholder h4  { color: var(--white); font-size: 16px; margin-bottom: 8px; }
.project-placeholder p   { color: var(--mid-gray); font-size: 13px; margin: 0; }

/* ── Lightbox ── */
.project-lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:    0;
    z-index:  9999;
    display:  flex;
    align-items:     center;
    justify-content: center;
}

.project-lightbox[hidden] { display: none; }

.lightbox-backdrop {
    position:   absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset:      0;
    background: rgba(10,14,18,0.92);
    cursor:     pointer;
}

.lightbox-inner {
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    width:           90vw;
    max-width:       1100px;
    max-height:      90vh;
}

.lightbox-img-wrap {
    width:      100%;
    height:     65vh;
    flex:       none;
    display:    flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.lightbox-img-wrap img {
    max-width:  100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    display:    block;
}

.lightbox-close {
    position:   absolute;
    top:        -48px;
    right:      0;
    color:      var(--white);
    opacity:    0.8;
    transition: opacity var(--transition);
}

.lightbox-close:hover { opacity: 1; }

.lightbox-prev,
.lightbox-next {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    color:            var(--white);
    background:       rgba(255,255,255,0.1);
    border-radius:    50%;
    width:            48px;
    height:           48px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:              background var(--transition);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter:         blur(4px);
}

.lightbox-prev { left: -64px; }
.lightbox-next { right: -64px; }
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(235,155,66,0.4); }

.lightbox-counter {
    color:          rgba(255,255,255,0.6);
    font-size:      13px;
    margin-top:     12px;
    letter-spacing: 0.06em;
}

.lightbox-thumbs {
    display:    flex;
    gap:        8px;
    margin-top: 14px;
    flex-wrap:  wrap;
    justify-content: center;
}

.lightbox-thumb {
    width:         60px;
    height:        44px;
    object-fit:    cover;
    border-radius: 4px;
    cursor:        pointer;
    opacity:       0.55;
    border:        2px solid transparent;
    transition:    opacity var(--transition), border-color var(--transition);
}

.lightbox-thumb.active,
.lightbox-thumb:hover { opacity: 1; border-color: var(--primary); }

/* --- Team Cards --- */
.team-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(20px, 2.5vw, 32px);
}

.team-card {
    background-color: var(--white);
    border-radius:    var(--radius-md);
    overflow:         hidden;
    box-shadow:       var(--shadow-sm);
    transition:       transform var(--transition), box-shadow var(--transition);
}

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

.team-card-photo {
    position:         relative;
    padding-top:      133.333%; /* 3:4 ratio — fallback for browsers without aspect-ratio (iOS < 15) */
    height:           0;
    overflow:         hidden;
    background-color: var(--secondary);
}

.team-card-photo img {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    transition:      transform 0.6s ease;
}

.team-card:hover .team-card-photo img { transform: scale(1.04); }

.team-card-photo-placeholder {
    position:        absolute; /* needed for padding-top fallback */
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, var(--secondary) 0%, var(--secondary-mid) 100%);
}

.team-card-photo-placeholder svg { width: 64px; height: 64px; color: rgba(255,255,255,0.25); }

.team-card-info {
    padding:    20px;
}

.team-card-name {
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 4px;
    color:         var(--black);
}

.team-card-title {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  10px;
}

.team-card-dept {
    font-size:  13px;
    color:      var(--dark-gray);
    margin:     0;
}

/* Team Full Bio (Meet the Team page) */
.team-tier {
    margin-bottom: clamp(56px, 7vw, 88px);
}

.team-tier-heading {
    font-size:      clamp(18px, 1.8vw, 24px);
    font-weight:    700;
    color:          var(--black);
    text-align:     center;
    padding-bottom: 16px;
    margin-bottom:  clamp(28px, 3vw, 40px);
    border-bottom:  3px solid var(--primary);
}

.team-bio-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(24px, 3vw, 48px);
}

.team-bio-card {
    background-color: var(--white);
    border-radius:    var(--radius-md);
    overflow:         hidden;
    box-shadow:       var(--shadow-sm);
    transition:       box-shadow var(--transition);
}

.team-bio-card:hover { box-shadow: var(--shadow-md); }

.team-bio-photo {
    position:    relative;
    padding-top: 133.333%; /* 3:4 ratio — fallback for browsers without aspect-ratio (iOS < 15) */
    height:      0;
    overflow:    hidden;
    background:  var(--secondary);
}

.team-bio-photo img {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
}

.team-bio-content { padding: clamp(24px, 3vw, 36px); }

.team-bio-name {
    font-size:     clamp(18px, 1.8vw, 24px);
    margin-bottom: 4px;
}

.team-bio-role {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  16px;
}

.team-bio-dept-badge {
    display:          inline-block;
    padding:          4px 12px;
    background-color: rgba(235,155,66,0.12);
    color:            var(--primary);
    border-radius:    20px;
    font-size:        11px;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.08em;
    margin-bottom:    16px;
}

.team-bio-text {
    font-size:   var(--body-size);
    line-height: 1.75;
    color:       var(--dark-gray);
}

/* Read More / collapse */
.team-bio-text-wrap {
    position:   relative;
    overflow:   hidden;
    max-height: 96px; /* ~4 lines */
    transition: max-height 0.5s ease;
}

.team-bio-text-wrap.expanded {
    max-height: 2000px;
}

.team-bio-text-wrap::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     48px;
    background: linear-gradient(to bottom, transparent, var(--white));
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.team-bio-text-wrap.expanded::after {
    opacity: 0;
}

.read-more-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    margin-top:     12px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--primary);
    background:     none;
    border:         none;
    padding:        0;
    cursor:         pointer;
    transition:     color var(--transition);
}

.read-more-btn:hover { color: var(--primary-dark); }

.read-more-btn svg {
    width:      14px;
    height:     14px;
    transition: transform 0.3s ease;
}

.read-more-btn.expanded svg { transform: rotate(180deg); }

/* --- Service Detail Page --- */
.service-hero {
    padding:          clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
    background-color: var(--secondary);
    color:            var(--white);
    text-align:       center;
}

.service-hero .eyebrow {
    display:        block;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  16px;
}

.service-hero h1 { color: var(--white); margin-bottom: 20px; }
.service-hero p  { color: rgba(255,255,255,0.8); max-width: 680px; margin: 0 auto; font-size: clamp(16px, 1.5vw, 20px); }

.service-category {
    margin-bottom: clamp(48px, 6vw, 72px);
}

.service-category-title {
    font-size:        clamp(18px, 1.8vw, 22px);
    font-weight:      700;
    color:            var(--secondary);
    padding-bottom:   16px;
    margin-bottom:    24px;
    border-bottom:    3px solid var(--primary);
    letter-spacing:   0.05em;
    text-transform:   uppercase;
}

.service-list {
    list-style:  none;
    padding:     0;
    display:     grid;
    gap:         12px;
}

.service-list li {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    font-size:   var(--body-size);
    color:       var(--dark-gray);
    line-height: 1.5;
}

.service-list li::before {
    content:          '';
    display:          block;
    width:            8px;
    height:           8px;
    min-width:        8px;
    border-radius:    50%;
    background-color: var(--primary);
    margin-top:       8px;
}

/* --- Projects Page --- */
.projects-filter {
    display:         flex;
    gap:             12px;
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   clamp(40px, 5vw, 64px);
}

.filter-btn {
    padding:          10px 24px;
    font-size:        12px;
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    border-radius:    var(--radius-sm);
    border:           2px solid var(--light-gray);
    color:            var(--dark-gray);
    background:       var(--white);
    transition:       all var(--transition);
    cursor:           pointer;
}

.filter-btn:hover, .filter-btn.active {
    border-color:     var(--primary);
    color:            var(--primary);
    background-color: rgba(235,155,66,0.08);
}

/* --- Contact Form --- */
.contact-grid {
    display:               grid;
    grid-template-columns: 1fr 1.5fr;
    gap:                   clamp(48px, 6vw, 80px);
    align-items:           start;
}

.contact-info-card {
    background-color: var(--secondary);
    color:            var(--white);
    border-radius:    var(--radius-md);
    padding:          clamp(32px, 4vw, 48px);
}

.contact-info-card h3 { color: var(--white); margin-bottom: 24px; }

.contact-item {
    display:      flex;
    align-items:  flex-start;
    gap:          16px;
    margin-bottom: 24px;
}

.contact-item:last-child { margin-bottom: 0; }

.contact-item-icon {
    width:            44px;
    height:           44px;
    min-width:        44px;
    background-color: rgba(235,155,66,0.15);
    border-radius:    var(--radius-sm);
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.contact-item-icon svg { width: 20px; height: 20px; color: var(--primary); }

.contact-item-text h4 { color: var(--white); font-size: 14px; margin-bottom: 4px; }
.contact-item-text p, .contact-item-text a { color: var(--mid-gray); font-size: 14px; margin: 0; }
.contact-item-text a:hover { color: var(--primary); }

.contact-form-wrap {
    background-color: var(--white);
    border:           1px solid var(--light-gray);
    border-radius:    var(--radius-md);
    padding:          clamp(32px, 4vw, 48px);
    box-shadow:       var(--shadow-sm);
}

.contact-form-wrap h3 { margin-bottom: 28px; }

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display:        block;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--secondary);
    margin-bottom:  8px;
}

.form-control {
    display:          block;
    width:            100%;
    padding:          13px 16px;
    font-size:        var(--body-size);
    font-family:      var(--font-body);
    color:            var(--black);
    background-color: var(--white);
    border:           2px solid var(--light-gray);
    border-radius:    var(--radius-sm);
    transition:       border-color var(--transition), box-shadow var(--transition);
    outline:            none;
    -webkit-appearance: none; /* iOS Safari — remove native input styling */
    appearance:         none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(235,155,66,0.15);
}

textarea.form-control { resize: vertical; min-height: 140px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-message {
    padding:       16px 20px;
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-weight:   600;
    margin-top:    16px;
    display:       none;
}

.form-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block; }
.form-message.error   { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block; }

.form-note {
    font-size:  14px;
    color:      var(--dark-gray);
    margin:     8px 0 0;
}


/* The CRAFT shell paints its own dark body on the home page. */
body:has(#praxis-page) { background-color: var(--white); color: var(--black); }

/* --- Pay Invoice --- */
.invoice-hero {
    padding:    clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
    background: var(--secondary);
    text-align: center;
}

.invoice-hero h1    { color: var(--white); margin-bottom: 20px; }
.invoice-hero p     { color: rgba(255,255,255,0.8); max-width: 680px; margin: 0 auto; font-size: clamp(16px, 1.5vw, 20px); }

.invoice-notice {
    background-color: rgba(235,155,66,0.12);
    border-left:      4px solid var(--primary);
    border-radius:    var(--radius-sm);
    padding:          20px 24px;
    margin-bottom:    36px;
    font-size:        var(--body-size);
    color:            var(--dark-gray);
}

.coverage-pay-frame {
    width:         100%;
    min-height:    700px;
    border:        none;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-md);
    display:       block;
}

/* --- Privacy Policy --- */
.policy-hero {
    padding:    clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 80px);
    background: var(--secondary);
    text-align: center;
}

.policy-hero h1 { color: var(--white); margin-bottom: 16px; }
.policy-hero p  { color: var(--mid-gray); }

.policy-content {
    max-width:   800px;
    margin:      0 auto;
    font-size:   var(--body-size);
    line-height: 1.8;
}

.policy-content h2 {
    font-size:     clamp(20px, 2vw, 26px);
    margin-top:    48px;
    margin-bottom: 16px;
    color:         var(--secondary);
}

.policy-content h3 {
    font-size:     clamp(16px, 1.5vw, 20px);
    margin-top:    32px;
    margin-bottom: 12px;
    color:         var(--secondary);
}

.policy-content p { color: var(--dark-gray); margin-bottom: 16px; }

.policy-content ul {
    list-style:  disc;
    padding-left: 24px;
    margin-bottom: 16px;
}

.policy-content ul li { color: var(--dark-gray); margin-bottom: 8px; }

/* --- Page Hero (generic) --- */
.page-hero {
    padding:    clamp(100px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-mid) 100%);
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

.page-hero::before {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           4px;
    background:       var(--primary);
}

.page-hero .eyebrow {
    display:        block;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  16px;
}

.page-hero h1 { color: var(--white); margin-bottom: 20px; }
.page-hero p  { color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto; font-size: clamp(16px, 1.5vw, 20px); }

/* --- CTA Section --- */
.cta-section {
    padding:    clamp(60px, 8vw, 100px) 0;
    background: var(--primary);
    text-align: center;
}

.cta-section h2 { color: var(--white); margin-bottom: 16px; font-size: clamp(28px, 3vw, 40px); }
.cta-section p  { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 36px; font-size: clamp(15px, 1.3vw, 18px); }

.cta-btn-group {
    display:         flex;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
}

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

.btn-white:hover {
    background-color: var(--secondary);
    border-color:     var(--secondary);
    color:            var(--white);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow-md);
}

/* --- Footer --- */
.site-footer {
    background-color: var(--secondary);
    color:            var(--white);
}

.footer-top { padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px); }

.footer-grid {
    display:               grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap:                   clamp(32px, 4vw, 60px);
}

.footer-tagline {
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--primary);
    margin:         12px 0 16px;
}

.footer-description {
    font-size:   14px;
    line-height: 1.7;
    color:       var(--mid-gray);
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap:     12px;
}

.social-link {
    width:            40px;
    height:           40px;
    background-color: rgba(255,255,255,0.08);
    border-radius:    var(--radius-sm);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--mid-gray);
    transition:       background-color var(--transition), color var(--transition);
}

.social-link:hover { background-color: var(--primary); color: var(--white); }
.social-link svg   { width: 18px; height: 18px; }

.footer-heading {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  20px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }

.footer-links a {
    font-size:   14px;
    color:       var(--mid-gray);
    transition:  color var(--transition);
}
.footer-links a:hover { color: var(--primary); }

.footer-contact-info li {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   14px;
    color:       var(--mid-gray);
    margin-bottom: 10px;
}

.footer-contact-info svg { width: 16px; height: 16px; min-width: 16px; margin-top: 2px; color: var(--primary); }

.footer-bottom {
    border-top:  1px solid rgba(255,255,255,0.08);
    padding:     20px 0;
}

.footer-bottom-inner { text-align: center; }

.copyright {
    font-size: 13px;
    color:     var(--mid-gray);
    margin:    0;
}

.copyright a { color: var(--mid-gray); transition: color var(--transition); }
.copyright a:hover { color: var(--primary); }
.copyright a.macrae-credit { color: var(--white); }
.copyright a.macrae-credit:hover { color: var(--primary); }

/* --- About Page Layout --- */
.about-intro {
    font-size:   clamp(18px, 1.8vw, 22px);
    line-height: 1.8;
    color:       var(--dark-gray);
}

.offices-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(16px, 2vw, 24px);
}

.office-card {
    background-color: var(--secondary);
    color:            var(--white);
    border-radius:    var(--radius-md);
    padding:          clamp(24px, 3vw, 36px);
    text-align:       center;
    transition:       transform var(--transition), box-shadow var(--transition);
}

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

.office-icon {
    width:            56px;
    height:           56px;
    background-color: rgba(235,155,66,0.15);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin:           0 auto 16px;
}

.office-icon svg { width: 24px; height: 24px; color: var(--primary); }

.office-card h4    { color: var(--primary); font-size: 16px; margin-bottom: 6px; }
.office-card p     { color: var(--mid-gray); font-size: 13px; margin: 0; }

/* --- Utilities --- */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-white   { color: var(--white); }
.mb-0 { margin-bottom: 0; }
.mt-auto { margin-top: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 1100px) {
    .four-col       { grid-template-columns: repeat(2, 1fr); }
    .team-grid      { grid-template-columns: repeat(3, 1fr); }
    .stats-grid     { grid-template-columns: repeat(2, 1fr); }
    .footer-grid    { grid-template-columns: 1fr 1fr; gap: 40px; }
    .offices-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .two-col        { grid-template-columns: 1fr; }
    .three-col      { grid-template-columns: 1fr; gap: 24px; }
    .contact-grid   { grid-template-columns: 1fr; }
    .team-bio-grid  { grid-template-columns: repeat(2, 1fr); }
    .projects-grid  { grid-template-columns: repeat(2, 1fr); }
    .form-row       { grid-template-columns: 1fr; }

    .site-nav, .header-cta { display: none; }
    .nav-toggle          { display: flex; }
    .mobile-nav-social   { display: none; }

    .site-nav.is-open {
        display:                    flex;
        position:                   fixed;
        top:                        var(--header-height);
        left:                       0;
        right:                      0;
        bottom:                     0;
        background-color:           var(--secondary);
        flex-direction:             column;
        padding:                    32px var(--container-pad);
        overflow-y:                 auto;
        -webkit-overflow-scrolling: touch;    /* momentum scroll on iOS */
        overscroll-behavior:        contain;  /* prevent page scroll bleed-through on Android */
        z-index:                    999;
        animation:                  navFadeIn 0.22s ease forwards;
    }

    @keyframes navFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .site-nav.is-open .nav-menu {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0;
        width:          100%;
    }

    .site-nav.is-open .nav-item { width: 100%; }

    .site-nav.is-open .nav-link {
        font-size:   16px;
        padding:     16px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        width:       100%;
    }

    /* Services label — non-clickable section header */
    .site-nav.is-open .dropdown-toggle {
        pointer-events: none;
        cursor:         default;
        color:          var(--mid-gray);
        font-size:      11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        padding-bottom: 8px;
        margin-top:     8px;
    }

    /* Hide the dropdown arrow on mobile */
    .site-nav.is-open .dropdown-arrow { display: none; }

    /* Always show sub-items, no indent toggle needed */
    .site-nav.is-open .dropdown-menu {
        position:     static;
        opacity:      1;
        visibility:   visible;
        transform:    none;
        box-shadow:   none;
        border:       none;
        background:   transparent;
        padding-left: 16px;
        display:      block !important;
    }

    .site-nav.is-open .dropdown-menu .nav-link {
        font-size: 15px;
        color:     var(--white);
    }

    .site-nav.is-open .header-cta-mobile {
        display:    inline-flex;
        margin-top: 24px;
    }

    .mobile-nav-social {
        display:         flex;
        gap:             32px;
        margin-top:      auto;
        padding-top:     40px;
        padding-bottom:  env(safe-area-inset-bottom, 24px);
        margin-bottom:   16px;
        border-top:      1px solid rgba(255,255,255,0.08);
    }

    .mobile-nav-social a {
        color:      var(--primary);
        transition: opacity var(--transition);
        display:    flex;
        align-items: center;
    }

    .mobile-nav-social a svg {
        width:  32px;
        height: 32px;
    }

    .mobile-nav-social a:hover { opacity: 0.75; }
}

@media (max-width: 640px) {
    .three-col      { grid-template-columns: 1fr; }
    .team-grid      { grid-template-columns: repeat(2, 1fr); }
    .team-bio-grid  { grid-template-columns: 1fr; }
    .projects-grid  { grid-template-columns: 1fr; }
    .stats-grid     { grid-template-columns: repeat(2, 1fr); }
    .four-col       { grid-template-columns: 1fr; }
    .footer-grid    { grid-template-columns: 1fr; }
    .offices-grid   { grid-template-columns: 1fr 1fr; }
    .hero-cta-group { flex-direction: column; align-items: center; }
    .cta-btn-group  { flex-direction: column; align-items: center; }

    /* Shrink header on phones so it doesn't crowd the viewport */
    :root { --header-height: 64px; }

    .site-header {
        /* Account for notch / status bar on iOS & Android */
        padding-top:      env(safe-area-inset-top, 0px);
        height:           calc(var(--header-height) + env(safe-area-inset-top, 0px));
        /* Always solid on mobile — no transparent phase */
        background-color: var(--secondary) !important;
        box-shadow:       var(--shadow-md);
    }

    .site-nav.is-open {
        top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    }

    .logo-img { max-height: 38px; }

    /* Hero — single viewport height on mobile */
    .hero-scroll-section { height: 100vh; height: 100dvh; }
    .hero-sticky         { position: relative; height: 100vh; height: 100dvh; }

    /* Hero video — show as autoplay loop */
    #hero-scrub-video { display: block; object-fit: cover; }

    /* Background section videos — hide on mobile */
    .video-bg-section .video-bg { display: none; }
    .video-bg-section            { background: var(--secondary); }

    /* Lightbox arrows tucked in on small screens */
    .lightbox-prev { left: -8px; }
    .lightbox-next { right: -8px; }
}

/* =============================================
   @supports: aspect-ratio (Chrome 88+, Firefox 89+, Safari 15+, iOS 15+)
   Overrides the padding-top fallback with the clean aspect-ratio property
   for any browser that supports it.
   ============================================= */
@supports (aspect-ratio: 1) {
    .project-card-img {
        aspect-ratio: 4/3;
        padding-top:  0;
        height:       auto;
    }
    .project-card-img img {
        position: static;
    }

    .project-category-card {
        aspect-ratio: 4/3;
        padding-top:  0;
        height:       auto;
    }
    .project-category-card-img,
    .project-category-card-placeholder {
        position: static;
    }

    .project-card--placeholder {
        aspect-ratio: 4/3;
        min-height:   0;
    }

    .team-card-photo {
        aspect-ratio: 3/4;
        padding-top:  0;
        height:       auto;
    }
    .team-card-photo img,
    .team-card-photo-placeholder {
        position: static;
    }

    .team-bio-photo {
        aspect-ratio: 3/4;
        padding-top:  0;
        height:       auto;
    }
    .team-bio-photo img {
        position: static;
    }
}