/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --color-transdev-red: #FF0000;
    --color-btn-red: #D90000;
    --color-black: #1E1E1E;
    --color-sand: #ED936D;
    --color-orange: #EA5045;
    --color-green: #2ECC71;
    --color-maroon: #920024;
    --color-purple: #392150;
    --color-blue: #0077A3;
    --color-teal: #36A5AC;
    --color-white: #FFFFFF;
    --color-grey: #818181;
    --color-placeholder: #BFBFBF;

    /* Typography — large screen (Figma) */
    --font-family: 'Ubuntu', sans-serif;
    --font-page-title-size: 40px;
    --font-page-title-weight: 700;
    --font-page-title-line: 1.2;
    --font-h1-size: 32px;
    --font-h1-weight: 700;
    --font-h1-line: 1.2;
    --font-h2-size: 24px;
    --font-h2-weight: 700;
    --font-h2-line: 1.2;
    --font-h3-size: 20px;
    --font-h3-weight: 700;
    --font-h3-line: 1.3;
    --font-h4-size: 18px;
    --font-h4-weight: 700;
    --font-h4-line: 1.3;
    --font-body-size: 16px;
    --font-body-weight: 400;
    --font-body-line: 1.5;
    --font-body-link-size: 16px;
    --font-body-link-weight: 400;
    --font-body-bold-size: 16px;
    --font-body-bold-weight: 700;
    --font-body-bold-line: 1.5;
    --font-medium-weight: 500;
    --font-caption-size: 14px;
    --font-stat-size: 48px;

    /* Border radius */
    --radius-input: 4px;

    /* Spacing scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    /* Content 2 column layout */
    --content-margin-inline: 160px;
    --content-gutter: 16px;
}

/* Spacer utility — responsive vertical gaps between sections */
.spacer {
    width: 100%;
    display: block;
}

/* Desktop spacer heights (Figma scale) */
.spacer--3xl { height: 120px; }             /* 3XL 120px */
.spacer--xxl { height: var(--space-20); }   /* XXL 80px */
.spacer--xl  { height: var(--space-16); }   /* XL 64px */
.spacer--l   { height: var(--space-12); }   /* L 48px */
.spacer--m   { height: var(--space-8); }    /* M 32px */
.spacer--s   { height: var(--space-6); }    /* S 24px */
.spacer--xs  { height: var(--space-4); }    /* XS 16px */
.spacer--xxs { height: var(--space-4); }    /* XXS 16px (desktop) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tailwind-style spacing utilities — base 4px, up to 48px */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-7 { margin-top: 28px; }
.mt-8 { margin-top: 32px; }
.mt-9 { margin-top: 36px; }
.mt-10 { margin-top: 40px; }
.mt-11 { margin-top: 44px; }
.mt-12 { margin-top: 48px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }
.pt-7 { padding-top: 28px; }
.pt-8 { padding-top: 32px; }
.pt-9 { padding-top: 36px; }
.pt-10 { padding-top: 40px; }
.pt-11 { padding-top: 44px; }
.pt-12 { padding-top: 48px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-7 { margin-bottom: 28px; }
.mb-8 { margin-bottom: 32px; }
.mb-9 { margin-bottom: 36px; }
.mb-10 { margin-bottom: 40px; }
.mb-11 { margin-bottom: 44px; }
.mb-12 { margin-bottom: 48px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-5 { margin-left: 20px; }
.ml-6 { margin-left: 24px; }
.ml-7 { margin-left: 28px; }
.ml-8 { margin-left: 32px; }
.ml-9 { margin-left: 36px; }
.ml-10 { margin-left: 40px; }
.ml-11 { margin-left: 44px; }
.ml-12 { margin-left: 48px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mr-5 { margin-right: 20px; }
.mr-6 { margin-right: 24px; }
.mr-7 { margin-right: 28px; }
.mr-8 { margin-right: 32px; }
.mr-9 { margin-right: 36px; }
.mr-10 { margin-right: 40px; }
.mr-11 { margin-right: 44px; }
.mr-12 { margin-right: 48px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }
.pb-6 { padding-bottom: 24px; }
.pb-7 { padding-bottom: 28px; }
.pb-8 { padding-bottom: 32px; }
.pb-9 { padding-bottom: 36px; }
.pb-10 { padding-bottom: 40px; }
.pb-11 { padding-bottom: 44px; }
.pb-12 { padding-bottom: 48px; }

.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pl-5 { padding-left: 20px; }
.pl-6 { padding-left: 24px; }
.pl-7 { padding-left: 28px; }
.pl-8 { padding-left: 32px; }
.pl-9 { padding-left: 36px; }
.pl-10 { padding-left: 40px; }
.pl-11 { padding-left: 44px; }
.pl-12 { padding-left: 48px; }

.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }
.pr-5 { padding-right: 20px; }
.pr-6 { padding-right: 24px; }
.pr-7 { padding-right: 28px; }
.pr-8 { padding-right: 32px; }
.pr-9 { padding-right: 36px; }
.pr-10 { padding-right: 40px; }
.pr-11 { padding-right: 44px; }
.pr-12 { padding-right: 48px; }

body {
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line);
    color: var(--color-black);
    overflow-x: hidden;
    background: var(--color-white);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Typography — Base H1–H4 (design system defaults) */
h1 {
    font-size: var(--font-h1-size);
    font-weight: var(--font-h1-weight);
    line-height: var(--font-h1-line);
}

h2 {
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    line-height: var(--font-h2-line);
}

h3 {
    font-size: var(--font-h3-size);
    font-weight: var(--font-h3-weight);
    line-height: var(--font-h3-line);
}

h4 {
    font-size: var(--font-h4-size);
    font-weight: var(--font-h4-weight);
    line-height: var(--font-h4-line);
}

/* Typography — Base paragraph (design system defaults) */
p {
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line);
}

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

/* Typography — Body Inline Text Link (underline, use within text blocks) */
.hero-text a,
.section-header a,
.about-text a {
    font-size: var(--font-body-link-size);
    font-weight: var(--font-body-link-weight);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Typography — Body (Bold) */
.hero-text strong,
.section-header strong,
.about-text strong {
    font-weight: var(--font-body-bold-weight);
}

/* Typography — Page Title (parent + tag) */
.page-title h1 {
    font-size: var(--font-page-title-size);
    font-weight: var(--font-page-title-weight);
    line-height: var(--font-page-title-line);
}

/* Typography — H1 to H4 (parent + tag, Bricks compatible) */
.heading-h1 h1 {
    font-size: var(--font-h1-size);
    font-weight: var(--font-h1-weight);
    line-height: var(--font-h1-line);
}

.heading-h2 h2 {
    font-size: var(--font-h2-size);
    font-weight: var(--font-h2-weight);
    line-height: var(--font-h2-line);
}

.heading-h3 h3 {
    font-size: var(--font-h3-size);
    font-weight: var(--font-h3-weight);
    line-height: var(--font-h3-line);
}

.heading-h4 h4 {
    font-size: var(--font-h4-size);
    font-weight: var(--font-h4-weight);
    line-height: var(--font-h4-line);
}

/* Typography — Paragraph (parent + tag, Bricks compatible) */
.text-body p {
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line);
    margin: 0 0 var(--space-4);
}

.text-body p:last-child {
    margin-bottom: 0;
}

/* Header - Glass effect */
.header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 48px var(--space-12) var(--space-10);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--space-3);
    padding: 0 var(--space-6) 0 var(--space-4);
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    transition: background 0.6s ease;
    cursor: pointer;
}

.header:hover {
    background: #1E1E1E;
}

/* Header - Dark variant (default) */
.header-wrap .nav a {
    color: var(--color-white);
}

.header-wrap .nav a::after {
    background: var(--color-white);
}

/* Header - Light variant (white background) */
.header-wrap.header-light .header {
    background: var(--color-white);
}

.header-wrap.header-light .header:hover {
    background: var(--color-white);
}

.header-wrap.header-light .logo .logo-default {
    display: none;
}

.header-wrap.header-light .logo .logo-hover {
    opacity: 1;
    position: static;
}

.header-wrap.header-light .logo:hover .logo-hover {
    opacity: 1;
}

.header-wrap.header-light .nav a {
    color: var(--color-black);
}

.header-wrap.header-light .nav a::after {
    background: var(--color-black);
}

.header-wrap.header-light .search-toggle img,
.header-wrap.header-light .menu-toggle .menu-icon {
    filter: brightness(0);
}

.header-wrap.header-light .search-toggle:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%) hue-rotate(0deg) brightness(103%) contrast(101%);
}

.header-wrap.header-light .menu-toggle .menu-close-icon {
    filter: brightness(0);
}

.header-wrap.header-light .btn-primary.btn-cta {
    background: var(--color-btn-red);
    color: var(--color-white);
}

.header-wrap.header-light .btn-primary .btn-icon,
.header-wrap.header-light .btn-primary.btn-cta .btn-icon {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.header-wrap.header-light .btn-primary:hover .btn-icon,
.header-wrap.header-light .btn-primary.btn-cta:hover .btn-icon {
    filter: brightness(0) invert(1);
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    position: relative;
}

.logo-img {
    height: 34px;
    width: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.logo:hover .logo-default {
    opacity: 0;
}

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

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-left: auto;
}

.nav a {
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    position: relative;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.nav a:hover::after {
    opacity: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    padding-left: var(--space-10);
}

.search-container {
    display: flex;
    align-items: center;
    position: relative;
}

.search-toggle {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-toggle img {
    width: 40px;
    height: 40px;
    transition: filter 0.2s ease;
}

.search-toggle:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%) hue-rotate(0deg) brightness(103%) contrast(101%);
}

.att-search-form {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--radius-input);
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.4s ease, opacity 0.3s ease;
    position: absolute;
    right: 0;
    height: 40px;
}

.search-container.active .search-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.search-container.active .att-search-form {
    max-width: 280px;
    opacity: 1;
    position: relative;
}

.att-search-input {
    width: 100%;
    min-width: 200px;
    height: 40px;
    padding: 0 var(--space-4) 0 var(--space-4);
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    color: var(--color-black);
    outline: none;
}

.att-search-input::placeholder {
    color: var(--color-placeholder);
    font-weight: var(--font-body-weight);
    font-size: var(--font-body-size);
}

.att-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.att-search-submit {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.att-search-submit img {
    width: 40px;
    height: 40px;
    filter: brightness(0);
}

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.menu-toggle img {
    width: 40px;
    height: 40px;
}

.menu-close-icon {
    display: none;
}

.btn-primary {
    background: var(--color-btn-red);
    color: var(--color-white);
    border: none;
    padding: 0 var(--space-6);
    height: 60px;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--space-2);
    flex-shrink: 0;
    transition: background 0.5s ease;
}

.btn-primary:hover {
    background: #1E1E1E;
}

.btn-primary:disabled {
    background: #BFBFBF;
    cursor: not-allowed;
}

.btn-primary .btn-icon {
    width: 40px;
    height: 40px;
}

.btn-primary.btn-icon-left {
    padding: 0 24px 0 8px;
}

.btn-primary.btn-icon-both {
    padding: 0 24px;
}

.btn-outline-white .btn-icon {
    width: 40px;
    height: 40px;
}

.btn-primary.btn-cta,
.btn-secondary.btn-cta {
    padding-left: 24px;
    padding-right: 12px;
    height: 66px;
}

.btn-secondary {
    background: #FFFFFF;
    color: #1E1E1E;
    border: none;
    padding: 0 var(--space-6);
    height: 60px;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--space-2);
    flex-shrink: 0;
    transition: background 0.5s ease, color 0.5s ease;
}

.btn-secondary:hover {
    background: #1E1E1E;
    color: var(--color-white);
}

.btn-secondary .btn-icon,
.btn-secondary img {
    filter: brightness(0);
}

.btn-secondary:hover .btn-icon,
.btn-secondary:hover img {
    filter: brightness(0) invert(1);
}

.btn-secondary .btn-icon {
    width: 40px;
    height: 40px;
}

.btn-secondary.btn-icon-left {
    padding: 0 24px 0 8px;
}

.btn-secondary.btn-icon-both {
    padding: 0 24px;
}

/* Hero Section */
.hero {
    position: relative;
    height: calc(100vh + 158px);
    overflow: hidden;
}

.hero--100vh {
    height: 100vh;
}

.hero-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hero-feature-block {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 200px;
    display: flex;
    align-items: center;
    background: rgba(30, 30, 30, 0.7);
    padding: 0 var(--space-12);
}

.hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
    width: 100%;
    margin: 0 auto;
}

.hero-heading {
    flex-shrink: 0;
}

.hero h1 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.hero-underline {
    width: 88px;
    height: 8px;
    background: var(--color-white);
    margin-bottom: var(--space-4);
}

.hero-text {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.hero-text p {
    color: var(--color-white);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-outline-white {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: 0 12px 0 24px;
    height: 60px;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--space-2);
    transition: background 0.5s ease, border-color 0.5s ease;
}

.btn-outline-white:hover {
    background: var(--color-btn-red);
    border-color: var(--color-btn-red);
}

.btn-outline-white.btn-full-width {
    width: 100%;
    justify-content: space-between;
}

.btn-outline-white.btn-icon-left {
    padding: 0 24px 0 8px;
}

.btn-outline-white.btn-icon-both {
    padding: 0 24px;
}

.btn-outline-black {
    background: none;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    padding: 0 12px 0 24px;
    height: 60px;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--space-2);
    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.btn-outline-black:hover {
    background: var(--color-btn-red);
    color: var(--color-white);
    border-color: var(--color-btn-red);
}

.btn-outline-black .btn-icon {
    width: 40px;
    height: 40px;
}

.btn-outline-black .btn-icon,
.btn-outline-black img {
    filter: brightness(0);
}

.btn-outline-black:hover .btn-icon,
.btn-outline-black:hover img {
    filter: brightness(0) invert(1);
}

/* btn-outline-black: left icon 8px left / both icons 24px */
.btn-outline-black.btn-icon-left {
    padding: 0 24px 0 8px;
}

.btn-outline-black.btn-icon-both {
    padding: 0 24px;
}



.section-two-col {
    background: var(--color-white);
    padding-inline: var(--content-margin-inline);
}

.section-header {
    margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
    .section-header {
        margin-bottom: var(--space-4);
    }
}

.section-header h1 {
    color: var(--color-black);
    margin-bottom: var(--space-4);
}

.section-header p {
    font-size: var(--font-body-size);
    color: var(--color-black);
    max-width: 600px;
}

.two-col-content {
    display: flex;
    gap: var(--content-gutter);
    align-items: flex-start;
}

.content-left {
    flex: 1;
}

.content-right {
    flex: 1;
}

/* Reusable tab component — use in any section */
.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.tab-btn {
    padding: 10px 20px;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-caption-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 24px;
    cursor: pointer;
}

.tab-btn:hover,
.tab-btn.active {
    background: var(--color-btn-red);
    color: var(--color-white);
    border-color: var(--color-btn-red);
}

.tab-btn:disabled {
    background: #BFBFBF;
    color: var(--color-white);
    border-color: #BFBFBF;
    cursor: not-allowed;
}

.tab-btn:disabled:hover {
    background: #BFBFBF;
    color: var(--color-white);
    border-color: #BFBFBF;
}

/* Section-specific: Our Businesses tab list */
.two-col-content .tab-list {
    margin-bottom: var(--space-10);
}

@media (max-width: 1024px) {
    .two-col-content .tab-list {
        margin-bottom: 0;
    }
}

.map-container {
    position: relative;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

.map-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.70);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-radius: 0 0 var(--space-2) var(--space-2);
}

.map-card h3 {
    color: var(--color-white);
    font-size: var(--font-h3-size);
    font-weight: var(--font-h3-weight);
    line-height: var(--font-h3-line);
    margin-bottom: var(--space-2);
}

.map-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-body-size);
    margin-bottom: var(--space-4);
}

.btn-card {
    background: transparent;
    color: var(--color-white);
    border: none;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

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

/* Map card CTA — white/outlined style per design */
/* About Us — uses section-two-col (160px padding, 16px gutter) */
.section-about {
    background: var(--color-white);
}

.section-about .section-header {
    margin-bottom: var(--space-8);
}

.section-about .two-col-content {
    align-items: stretch;
    margin-bottom: var(--space-8);
}

.section-about .about-cta {
    display: flex;
    justify-content: flex-start;
}

.section-about .about-cta .btn-outline-black {
    width: 180px;
    justify-content: space-between;
}

.about-text p {
    font-size: var(--font-body-size);
    color: var(--color-black);
    line-height: var(--font-body-line);
    margin-bottom: var(--space-4);
}

.about-text p:last-of-type {
    margin-bottom: 0;
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.btn-outline-dark:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Stats grid — layout by item count: 1 full, 2 50/50, 3 row1 50/50 + row2 full, 4 2x2 */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gutter);
}

/* 1 item: full width, full height stretch */
.section-about .content-right {
    display: flex;
}

.section-about .content-right .stats-grid {
    flex: 1;
    min-height: 0;
}

.stats-grid:has(.stat-card:only-child) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 3 items: 3rd spans full width */
.stats-grid .stat-card:nth-child(3):last-child {
    grid-column: 1 / -1;
}

.stat-card {
    background: var(--color-black);
    padding: 24px;
    /* min-height: 200px; */
    color: var(--color-white);
    border-radius: var(--space-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.stat-card--light {
    background: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-black);
}

.stat-card--red {
    background: var(--color-btn-red);
    color: var(--color-white);
}

/* Stat card content: small (optional) | big | small */
.stat-card__label-top {
    display: block;
    font-size: var(--font-caption-size);
    font-weight: var(--font-body-weight);
    line-height: 100%;
    margin-bottom: var(--space-1);
}

.stat-card__value {
    display: block;
    font-size: var(--font-stat-size);
    font-weight: var(--font-medium-weight);
    line-height: 100%;
    margin-bottom: var(--space-1);
}

.stat-card__label-bottom {
    display: block;
    font-size: var(--font-caption-size);
    font-weight: var(--font-body-weight);
    line-height: 100%;
}

/* Backward compatibility: 2-span structure without classes */
.stat-card span:first-child:not(.stat-card__label-top) {
    display: block;
    font-size: var(--font-stat-size);
    font-weight: var(--font-medium-weight);
    line-height: 100%;
    margin-bottom: var(--space-1);
}

.stat-card span:last-child:not(.stat-card__value) {
    font-size: var(--font-caption-size);
    font-weight: var(--font-body-weight);
    line-height: 100%;
}

.btn-outline-red {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-family);
    font-size: var(--font-body-size);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
}

.btn-outline-red:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-outline-red .btn-icon,
.btn-outline-red img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

/* Careers call-out section — Content 2 column layout */
.careers-callout {
    display: flex;
    width: 100%;
    min-height: 400px;
    padding-left: var(--content-margin-inline);
    padding-right: var(--content-margin-inline);
    gap: var(--content-gutter);
}

.careers-callout-content {
    flex: 1 50%;
    min-width: 0;
    background: var(--color-btn-red);
    padding: var(--space-12) var(--space-10);
    border-radius: var(--space-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-6);
}

.careers-callout-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex-shrink: 0;
}

.careers-callout-heading h1 {
    color: var(--color-white);
    margin: 0;
}

.careers-callout-text p {
    color: var(--color-white);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-bold-weight);
    line-height: var(--font-body-line);
    margin: 0;
}

.btn-careers {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    cursor: pointer;
}

.btn-careers:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.btn-careers:hover .btn-icon {
    filter: brightness(0) invert(1);
}

.careers-callout-images {
    flex: 1 50%;
    min-width: 0;
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-4);
}

.careers-callout-images .careers-callout-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--space-2);
}

/* 1 image: single image fills the area */
.careers-callout-images .careers-callout-img:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* 2+ images: first image is main (left, full height) */
.careers-callout-images .careers-callout-img:first-child:not(:only-child) {
    grid-column: 1;
    grid-row: 1 / -1;
}

/* 2 images: second image takes right column full height */
.careers-callout-images .careers-callout-img:nth-child(2):nth-last-child(1) {
    grid-column: 2;
    grid-row: 1 / -1;
}

/* 3 images: second = top right, third = bottom right */
.careers-callout-images .careers-callout-img:nth-child(2):nth-last-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.careers-callout-images .careers-callout-img:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

@media (max-width: 1024px) {
    .careers-callout {
        flex-direction: column-reverse;
        min-height: auto;
        /* padding-left: var(--space-6); */
        /* padding-right: var(--space-6); */
        gap: var(--space-4);
    }

    .careers-callout-content {
        flex: none;
        min-width: auto;
        min-height: 360px;
        padding: var(--space-10) var(--space-6);
    }

    .careers-callout-images {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .careers-callout {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .careers-callout-content {
        padding: var(--space-8) var(--space-6);
    }
}

/* Footer */
.footer-wrapper {
    background: var(--color-black);
    border-radius: var(--space-2);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-12) var(--space-12) 0;
}

.footer-logo-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.footer-logo {
    display: inline-block;
}

.footer-logo .logo-img {
    /* height: 28px; */
    width: auto;
}

.footer-logo-wrap p {
    font-size: var(--font-caption-size);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    margin: 0;
}

.social-icons {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.social-icons a {
    display: block;
    line-height: 0;
}

.social-icons img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.acknowledgement {
    position: relative;
    margin: var(--space-10) var(--space-12) 0;
    border-radius: var(--space-2);
    overflow: hidden;
}

.acknowledgement-art {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: height 0.4s ease;
}

.acknowledgement.expanded .acknowledgement-art {
    height: 575px;
}

.acknowledgement-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4) var(--space-8) var(--space-4);
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0 0 var(--space-2) var(--space-2);
    transition: background 0.6s ease;
}

.acknowledgement-bar:hover {
    background: #1E1E1E;
}

.acknowledgement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.acknowledgement-bar .acknowledgement-header p {
    color: var(--color-white);
    font-size: var(--font-h4-size);
    font-weight: var(--font-medium-weight);
    margin: 0;
}

.acknowledgement-body {
    display: none;
    padding-top: var(--space-4);
}

.acknowledgement.expanded .acknowledgement-body {
    display: block;
}

.acknowledgement-bar .acknowledgement-body p {
    color: var(--color-white);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: var(--font-body-line);
    margin: 0 0 var(--space-4);
}

.acknowledgement-bar .acknowledgement-body p:last-child {
    margin-bottom: 0;
}

.acknowledgement-bar .ack-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.acknowledgement-bar .ack-chevron img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.acknowledgement-bar .ack-chevron:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%) hue-rotate(0deg) brightness(103%) contrast(101%);
    transform: rotate(-90deg);
}

.acknowledgement.expanded .acknowledgement-bar .ack-chevron img {
    transform: rotate(-90deg);
}

.footer {
    padding: var(--space-10) var(--space-12) var(--space-12);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: var(--space-15);
    padding-inline: var(--space-4);
}

.footer-col-group {
    display: flex;
    gap: var(--space-15);
}

.footer-col h3 {
    color: var(--color-white);
    margin-bottom: var(--space-5);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    /* margin-bottom: var(--space-8); */
    padding: var(--space-3) 0;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-body-size);
    position: relative;
}

.footer-col a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.footer-col a:hover {
    color: var(--color-white);
}

.footer-col a:hover::after {
    opacity: 1;
}

/* Icons — parent + tag (Bricks compatible) */
.btn-card span::after {
    content: '+';
}

.btn-outline-dark span::after,
.btn-outline-red span::after,
.btn-outline-black span::after {
    content: '→';
}

/* Mobile Menu Overlay (≤1024px) */
.mobile-menu-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 114px; /* Start from bottom of header (48px padding + 66px header) */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    overflow-y: auto;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-panel {
    position: absolute;
    top: 0;
    left: var(--space-12);
    right: var(--space-12);
    background: rgba(30, 30, 30, 0.70);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0 0 var(--space-3) var(--space-3);
    padding: var(--space-2) 16px var(--space-6);
    transform: translateY(-100%);
    transition: transform 0.35s ease;
}

.mobile-menu-overlay.is-open .mobile-menu-panel {
    transform: translateY(0);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.mobile-menu-overlay.is-closing .mobile-menu-nav {
    opacity: 0;
}

.mobile-menu-link {
    color: var(--color-white);
    font-size: var(--font-body-size);
    font-weight: 500;
    display: flex;
    align-items: center;
    /* gap: var(--space-1); */
    /* padding: var(--space-3) 0; */
}

.mobile-menu-link .btn-icon {
    width: 40px;
    height: 40px;
}

.mobile-menu-cta {
    font-weight: 500;
    padding-bottom: var(--space-6);
}

/* Light header: mobile menu matches white theme */
.header-wrap.header-light ~ .mobile-menu-overlay .mobile-menu-panel {
    background: var(--color-white);
}

.header-wrap.header-light ~ .mobile-menu-overlay .mobile-menu-link {
    color: var(--color-black);
}

.header-wrap.header-light ~ .mobile-menu-overlay .mobile-menu-link .btn-icon {
    filter: brightness(0);
}

@media (max-width: 1024px) {
    .nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
        position: relative;
    }

    .menu-toggle .menu-icon {
        display: block;
    }

    .menu-toggle .menu-close-icon {
        display: none;
    }

    body.menu-open .menu-toggle .menu-icon {
        display: none;
    }

    body.menu-open .menu-toggle .menu-close-icon {
        display: block;
        position: absolute;
    }

    body.menu-open .header {
        border-radius: var(--space-3) var(--space-3) 0 0;
    }

    body.menu-open {
        overflow: hidden;
    }

    .header-wrap > .btn-secondary,
    .header-wrap > .btn-primary {
        display: none;
    }

    .header-actions {
        margin-left: auto;
        flex: 1;
        min-width: 0;
        gap: 0;
    }

    .search-container.active {
        flex: 1;
        min-width: 0;
        display: flex;
    }

    .search-container.active .att-search-form {
        flex: 1;
        max-width: none;
    }

    .search-container.active .att-search-input {
        min-width: 0;
        flex: 1;
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .two-col-content {
        flex-direction: column;
    }

    .stats-grid {
        max-width: 100%;
    }

    .hero-feature-block {
        height: auto;
        min-height: 200px;
        padding: var(--space-6) var(--space-4);
    }

    
}

@media (max-width: 768px) {
    :root {
        --font-page-title-size: 32px;
        --font-h1-size: 24px;
        --font-h2-size: 20px;
        --font-h3-size: 16px;
        --font-h4-size: 14px;
        --font-body-size: 14px;
        --font-body-link-size: 14px;
        --font-body-bold-size: 14px;
        --font-caption-size: 14px;
        --font-stat-size: 36px;
    }

    /* Mobile spacer heights (Figma scale) */
    .spacer--3xl { height: 56px; }            /* 3XL 56px */
    .spacer--xxl { height: var(--space-12); } /* XXL 48px */
    .spacer--xl  { height: var(--space-8); }  /* XL 32px */
    .spacer--l   { height: var(--space-8); }  /* L 32px */
    .spacer--m   { height: var(--space-6); }  /* M 24px */
    .spacer--s   { height: var(--space-4); }  /* S 16px */
    .spacer--xs  { height: var(--space-2); }  /* XS 8px */
    .spacer--xxs { height: var(--space-1); }  /* XXS 4px */

    /* Small screen map height */
    /* .map-container {
        min-height: 450px;
    } */

    .map-image {
        min-height: 450px;
        object-fit: cover;
    }

    .mobile-menu-overlay {
        top: 82px; /* Start from bottom of header (16px padding + 66px header) */
    }

    .mobile-menu-panel {
        top: 0;
        left: var(--space-6);
        right: var(--space-6);
        padding: var(--space-2) 16px var(--space-6);
    }

    .mobile-menu-link {
        font-size: var(--font-body-size);
    }

    .header-actions {
        flex: 1;
        min-width: 0;
        padding-left: 0;
    }

    .search-container.active {
        flex: 1;
        min-width: 0;
        display: flex;
    }

    .search-container.active .att-search-form {
        flex: 1;
        max-width: none;
    }

    .search-container.active .att-search-input {
        min-width: 0;
        flex: 1;
    }

    .header-wrap {
        padding: var(--space-4) var(--space-6);
    }

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

    .section-two-col {
        padding-inline: var(--space-6);
    }

    .hero-feature-block {
        height: auto;
        min-height: 200px;
        padding: var(--space-6) var(--space-4);
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .hero-text {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-text p {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .footer-top {
        padding: var(--space-12) var(--space-6) 0;
    }

    .acknowledgement {
        margin: var(--space-10) var(--space-6) 0;
    }

    .acknowledgement-bar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .acknowledgement-art {
        height: 120px;
    }

    .footer {
        padding: var(--space-10) var(--space-6) var(--space-15);
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-8);
    }

    .footer-col-group {
        flex-direction: column;
        gap: var(--space-12);
    }
}

@media (max-width: 640px) {
    .header-actions {
        flex: 1;
        min-width: 0;
    }

    .search-container.active {
        flex: 1;
        min-width: 0;
        display: flex;
    }

    .search-container.active .att-search-form {
        flex: 1;
        max-width: none;
        position: relative;
    }

    .search-container.active .att-search-input {
        min-width: 0;
        flex: 1;
    }

    .search-container.active .att-search-submit img {
        filter: brightness(0);
    }
}