/*
 * INFINITE RENOVATIONS — Marketing Website
 * Design System + Full Styles
 *
 * DESIGN DOMAIN: Marketing Website ONLY
 * - Sharp 90° corners (border-radius: 0)
 * - Light-dominant, warm cream backgrounds
 * - Plus Jakarta Sans font, bold headlines, clean body
 * - Warm, professional, trust-building aesthetic
 *
 * Created: February 8, 2026
 * V3: Warm Cream, Terracotta & Navy
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ========================================
   DESIGN TOKENS (Marketing-specific)
   ======================================== */

:root {
    /* ============================================
       V3: WARM CREAM, TERRACOTTA & NAVY — LOCKED
       Light-dominant palette: cream, terracotta, navy
       70% light, 30% dark for warmth & trust
       ============================================ */

    /* Light Backgrounds (Primary page surfaces) */
    --m-bg-dark: #2B2520;          /* Espresso — warm dark sections */
    --m-bg-darker: #2B2520;        /* Espresso (unified) */
    --m-bg-card: #FFFDF8;          /* Warm white card surfaces */
    --m-bg-card-hover: #FFF9F0;
    --m-bg-light: #FAF3E1;         /* Linen — primary page background */
    --m-bg-light-alt: #F0E6D3;     /* Ivory — alternate section background */
    --m-bg-white: #FFFDF8;         /* Warm white */

    /* Navy (cool dark sections for variety) */
    --m-navy: #0F2A4A;
    --m-navy-light: #153558;
    --m-navy-card: #1A3560;
    --m-slate: #7A8CA5;
    --m-slate-light: #9AABBF;

    /* Brand Colors — Soft Terracotta */
    --m-blue: #D4845A;             /* Terracotta accent (kept as --m-blue alias for compatibility) */
    --m-blue-hover: #C07248;
    --m-blue-dark: #A8633F;
    --m-blue-glow: rgba(212, 132, 90, 0.15);
    --m-bronze: #D4845A;           /* Primary accent — soft terracotta */
    --m-bronze-hover: #C07248;
    --m-bronze-dark: #A8633F;
    --m-bronze-active: #96573A;
    --m-bronze-glow: rgba(212, 132, 90, 0.15);
    --m-green: #22C55E;
    --m-green-dark: #16A34A;
    --m-green-soft: rgba(34, 197, 94, 0.1);
    --m-gold: #D4845A;             /* Unified with terracotta */
    --m-gold-soft: rgba(212, 132, 90, 0.1);
    --m-peach-cream: #F5D5B8;      /* Soft tags, focus rings, subtle bg */

    /* Text on Dark */
    --m-text-white: #FAF3E1;       /* Cream white on dark */
    --m-text-light: rgba(250, 243, 225, 0.85);
    --m-text-muted: #8A8078;       /* Warm gray */
    --m-text-subtle: rgba(250, 243, 225, 0.35);

    /* Text on Light */
    --m-text-dark: #1E1B18;
    --m-text-body: #4A443D;
    --m-text-caption: #8A8078;

    /* Borders */
    --m-border-dark: rgba(255, 255, 255, 0.06);
    --m-border-light: rgba(30, 27, 24, 0.08);

    /* Typography */
    --m-font: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Spacing Scale */
    --m-space-xs: 4px;
    --m-space-sm: 8px;
    --m-space-md: 16px;
    --m-space-lg: 24px;
    --m-space-xl: 32px;
    --m-space-2xl: 48px;
    --m-space-3xl: 64px;
    --m-space-4xl: 96px;
    --m-space-5xl: 128px;

    /* Shadows — warm undertone */
    --m-shadow-sm: 0 1px 3px rgba(43, 37, 32, 0.06);
    --m-shadow-md: 0 4px 16px rgba(43, 37, 32, 0.08);
    --m-shadow-lg: 0 8px 32px rgba(43, 37, 32, 0.12);
    --m-shadow-xl: 0 16px 48px rgba(43, 37, 32, 0.16);
    --m-shadow-accent: 0 4px 24px rgba(212, 132, 90, 0.20);

    /* Transitions */
    --m-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --m-transition-fast: 0.15s var(--m-ease);
    --m-transition: 0.25s var(--m-ease);
    --m-transition-slow: 0.4s var(--m-ease);

    /* Layout */
    --m-max-width: 1200px;
    --m-nav-height: 72px;
    --m-utility-height: 36px;
}


/* ========================================
   RESET & BASE
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--m-font);
    background: var(--m-bg-light);
    color: var(--m-text-body);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

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

ul, ol {
    list-style: none;
}

/* Sharp corners everywhere — Infinite DNA */
* {
    border-radius: 0 !important;
}


/* ========================================
   TYPOGRAPHY
   ======================================== */

.m-h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.m-h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.m-h3 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    line-height: 1.2;
}

.m-h4 {
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.3;
}

.m-body {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--m-text-light);
}

.m-body-lg {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--m-text-light);
}

.m-caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.m-eyebrow {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--m-blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}


/* ========================================
   LAYOUT UTILITIES
   ======================================== */

.m-container {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

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

.m-section--dark {
    background: var(--m-bg-dark);
    color: var(--m-text-white);
}

.m-section--darker {
    background: var(--m-bg-darker);
    color: var(--m-text-white);
}

.m-section--light {
    background: var(--m-bg-light);
    color: var(--m-text-dark);
}

.m-section--white {
    background: var(--m-bg-white);
    color: var(--m-text-dark);
}

.m-grid {
    display: grid;
    gap: var(--m-space-lg);
}

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

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

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

.m-flex {
    display: flex;
    align-items: center;
    gap: var(--m-space-md);
}

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


/* ========================================
   BUTTONS
   ======================================== */

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--m-transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.m-btn--primary {
    background: var(--m-bronze);
    color: #FFFDF8;
    box-shadow: var(--m-shadow-accent);
    font-weight: 600;
}

.m-btn--primary:hover {
    background: var(--m-bronze-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(212, 132, 90, 0.3);
}

.m-btn--primary:active {
    background: var(--m-bronze-active);
    transform: translateY(0);
}

.m-btn--secondary {
    background: transparent;
    color: var(--m-bronze);
    border: 2px solid var(--m-bronze);
}

.m-btn--secondary:hover {
    background: rgba(212, 132, 90, 0.08);
    transform: translateY(-2px);
}

.m-btn--green {
    background: var(--m-green);
    color: var(--m-text-white);
}

.m-btn--green:hover {
    background: var(--m-green-dark);
    transform: translateY(-2px);
}

.m-btn--dark {
    background: var(--m-bg-dark);
    color: var(--m-text-white);
}

.m-btn--dark:hover {
    background: #3D352E;
    transform: translateY(-2px);
}

.m-btn--lg {
    padding: 20px 40px;
    font-size: 18px;
}

.m-btn--sm {
    padding: 10px 20px;
    font-size: 14px;
}

/* On light backgrounds */
.m-section--light .m-btn--secondary,
.m-section--white .m-btn--secondary {
    color: var(--m-bronze);
    border-color: var(--m-bronze);
}

.m-section--light .m-btn--secondary:hover,
.m-section--white .m-btn--secondary:hover {
    background: rgba(212, 132, 90, 0.06);
}


/* ========================================
   STICKY NAVIGATION
   ======================================== */

.site-nav {
    position: fixed;
    top: var(--m-utility-height);
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(250, 243, 225, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-border-light);
    height: var(--m-nav-height);
    transition: all var(--m-transition);
}

.site-nav.scrolled {
    background: rgba(250, 243, 225, 0.98);
    box-shadow: 0 2px 24px rgba(43, 37, 32, 0.08);
}

.site-nav__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--m-text-dark);
    letter-spacing: -0.01em;
}

.site-nav__logo-icon {
    width: 36px;
    height: 36px;
    color: var(--m-blue);
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--m-space-xl);
}

.site-nav__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text-body);
    transition: color var(--m-transition-fast);
    position: relative;
}

.site-nav__link:hover,
.site-nav__link.active {
    color: var(--m-text-dark);
}

.site-nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--m-blue);
    transition: width var(--m-transition);
}

.site-nav__link:hover::after,
.site-nav__link.active::after {
    width: 100%;
}

/* Portal nav link — subtle accent */
.site-nav__link--portal {
    color: var(--m-bronze);
    font-weight: 600;
}

.site-nav__link--portal:hover {
    color: var(--m-bronze-hover);
}

.site-nav__link--portal::after {
    background: var(--m-bronze);
}

/* Desktop dropdown (Services) */
.site-nav__dropdown {
    position: relative;
}

.site-nav__link--has-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.site-nav__dropdown-arrow {
    transition: transform var(--m-transition-fast);
    opacity: 0.5;
}

.site-nav__dropdown:hover .site-nav__dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.site-nav__dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -16px;
    min-width: 220px;
    background: var(--m-bg-white);
    border: 1px solid var(--m-border-light);
    box-shadow: 0 12px 40px rgba(43, 37, 32, 0.12);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--m-transition);
}

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

/* Invisible bridge so hover doesn't break when moving to dropdown */
.site-nav__dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.site-nav__dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text-body);
    transition: all var(--m-transition-fast);
}

.site-nav__dropdown-item:hover {
    color: var(--m-text-dark);
    background: rgba(212, 132, 90, 0.06);
    padding-left: 24px;
}

.site-nav__phone {
    display: none; /* Phone is now in utility bar */
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--m-text-dark);
}

.site-nav__phone svg {
    width: 16px;
    height: 16px;
    color: var(--m-bronze);
}

.site-nav__cta {
    margin-left: var(--m-space-md);
}

/* Mobile nav toggle */
.site-nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--m-text-dark);
}

.site-nav__toggle svg {
    width: 24px;
    height: 24px;
}

/* Mobile navigation panel */
.mobile-nav {
    display: none;
    position: fixed;
    top: calc(var(--m-nav-height) + var(--m-utility-height));
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--m-bg-dark);
    z-index: 999;
    padding: var(--m-space-xl) var(--m-space-lg);
    flex-direction: column;
    gap: var(--m-space-sm);
    overflow-y: auto;
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--m-space-md) 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--m-text-light);
    border-bottom: 1px solid var(--m-border-dark);
    transition: color var(--m-transition-fast);
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.mobile-nav__link:hover {
    color: var(--m-blue);
}

/* External link icon */
.mobile-nav__link--external {
    gap: 8px;
    justify-content: flex-start;
}

.mobile-nav__link--external svg {
    opacity: 0.4;
}

/* Accordion parent links */
.mobile-nav__link--parent {
    font-weight: 600;
    color: var(--m-text-white);
}

.mobile-nav__chevron {
    transition: transform var(--m-transition);
    opacity: 0.4;
    flex-shrink: 0;
}

.mobile-nav__link--parent.open .mobile-nav__chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--m-blue);
}

/* Accordion group */
.mobile-nav__group {
    width: 100%;
}

/* Sub-menu (hidden by default) */
.mobile-nav__sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-nav__sub.open {
    max-height: 400px;
}

.mobile-nav__sublink {
    display: block;
    padding: 12px 0 12px 20px;
    font-size: 16px;
    font-weight: 400;
    color: var(--m-text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all var(--m-transition-fast);
}

.mobile-nav__sublink:hover {
    color: var(--m-blue);
    padding-left: 26px;
}

.mobile-nav__sublink:last-child {
    border-bottom: none;
}

/* Close Menu button */
.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: var(--m-space-md);
    background: rgba(212, 132, 90, 0.08);
    border: 1px solid rgba(212, 132, 90, 0.2);
    color: var(--m-blue);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all var(--m-transition-fast);
}

.mobile-nav__close:hover {
    background: rgba(212, 132, 90, 0.15);
}

.mobile-nav__cta {
    margin-top: var(--m-space-lg);
}

.mobile-nav__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--m-space-md);
    font-size: 20px;
    font-weight: 600;
    color: var(--m-bronze);
}


/* ========================================
   HERO SECTION
   ======================================== */

.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--m-nav-height) + var(--m-utility-height));
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img,
.hero__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(15, 42, 74, 0.92) 0%,
            rgba(43, 37, 32, 0.78) 35%,
            rgba(43, 37, 32, 0.50) 65%,
            rgba(15, 42, 74, 0.88) 100%
        );
    z-index: 1;
}

/* Decorative abstract shapes (Lux Builders inspiration — airy accents) */
.hero__shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hero__shape--1 {
    top: 10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 132, 90, 0.08) 0%, transparent 70%);
}

.hero__shape--2 {
    bottom: -10%;
    left: -8%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 132, 90, 0.05) 0%, transparent 70%);
}

.hero__shape--3 {
    top: 30%;
    left: 40%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 132, 90, 0.04) 0%, transparent 70%);
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: var(--m-space-4xl) var(--m-space-lg);
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--m-space-3xl);
    align-items: center;
}

.hero__text {
    max-width: 560px;
}

.hero__eyebrow {
    margin-bottom: var(--m-space-md);
    color: var(--m-peach-cream);
    letter-spacing: 0.2em;
}

.hero__title {
    margin-bottom: var(--m-space-lg);
    color: #FFFDF8;
    text-shadow: 0 2px 24px rgba(15, 42, 74, 0.35);
}

.hero__title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin-top: var(--m-space-md);
}

.hero__subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: var(--m-text-light);
    margin-bottom: var(--m-space-xl);
}

.hero__stats {
    display: flex;
    gap: var(--m-space-xl);
    margin-top: var(--m-space-2xl);
}

.hero__stat {
    text-align: left;
}

.hero__stat-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--m-peach-cream);
    line-height: 1;
}

.hero__stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--m-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* ========================================
   LEAD FORM (Hero + Contact)
   ======================================== */

.lead-form {
    background: var(--m-bg-white);
    border: 1px solid var(--m-border-light);
    border-top: 4px solid var(--m-bronze);
    padding: var(--m-space-xl);
    box-shadow: 0 20px 60px rgba(15, 42, 74, 0.25), 0 8px 24px rgba(43, 37, 32, 0.12);
}

.lead-form__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--m-text-dark);
}

.lead-form__subtitle {
    font-size: 14px;
    color: var(--m-text-muted);
    margin-bottom: var(--m-space-lg);
}

.lead-form__field {
    margin-bottom: var(--m-space-md);
}

.lead-form__input,
.lead-form__select,
.lead-form__textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--m-bg-light);
    border: 1px solid var(--m-border-light);
    color: var(--m-text-dark);
    font-family: var(--m-font);
    font-size: 15px;
    transition: border-color var(--m-transition-fast);
}

.lead-form__input::placeholder,
.lead-form__select::placeholder,
.lead-form__textarea::placeholder {
    color: var(--m-text-caption);
}

.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
    outline: none;
    border-color: var(--m-blue);
    box-shadow: 0 0 0 3px var(--m-blue-glow);
}

.lead-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(74,68,61,0.5)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.lead-form__textarea {
    resize: vertical;
    min-height: 100px;
}

.lead-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-space-md);
}

.lead-form__submit {
    width: 100%;
    margin-top: var(--m-space-sm);
}

.lead-form__disclaimer {
    font-size: 12px;
    color: var(--m-text-subtle);
    margin-top: var(--m-space-sm);
    line-height: 1.5;
}

/* Form success state */
.lead-form__success {
    display: none;
    text-align: center;
    padding: var(--m-space-2xl) var(--m-space-lg);
}

.lead-form__success.visible {
    display: block;
}

.lead-form__success-icon {
    width: 56px;
    height: 56px;
    color: var(--m-green);
    margin: 0 auto var(--m-space-md);
}

.lead-form__success h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.lead-form__success p {
    font-size: 15px;
    color: var(--m-text-muted);
}


/* ========================================
   TRUST BAR
   ======================================== */

.trust-bar {
    background: var(--m-bg-light-alt);
    border-top: 1px solid var(--m-border-light);
    border-bottom: 1px solid var(--m-border-light);
    padding: var(--m-space-xl) 0;
    box-shadow: inset 0 2px 8px rgba(43, 37, 32, 0.04);
}

.trust-bar__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    display: flex;
    justify-content: center;
    gap: var(--m-space-3xl);
    flex-wrap: wrap;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-bar__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-blue);
}

.trust-bar__icon svg {
    width: 24px;
    height: 24px;
}

.trust-bar__text {
    text-align: left;
}

.trust-bar__number {
    font-size: 22px;
    font-weight: 800;
    color: var(--m-navy);
    line-height: 1;
}

.trust-bar__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}


/* ========================================
   PROMO BAND
   ======================================== */

.promo-band {
    background: linear-gradient(90deg, var(--m-blue), var(--m-blue-dark));
    padding: var(--m-space-lg) 0;
    text-align: center;
}

.promo-band__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-xl);
    flex-wrap: wrap;
}

.promo-band__text {
    font-size: 17px;
    font-weight: 600;
    color: var(--m-text-white);
}

.promo-band__highlight {
    font-weight: 800;
    color: var(--m-gold);
}

.promo-band__cta {
    background: #FFFDF8;
    color: var(--m-blue);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    transition: all var(--m-transition);
}

.promo-band__cta:hover {
    background: #FFF9F0;
    transform: translateY(-1px);
}


/* ========================================
   SERVICE GRID
   ======================================== */

.services {
    padding: var(--m-space-4xl) 0;
}

.services__header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.services__header .m-eyebrow {
    margin-bottom: var(--m-space-sm);
}

.services__header .m-h2 {
    margin-bottom: var(--m-space-md);
    color: var(--m-text-dark);
}

.services__header .m-h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: var(--m-space-md) auto 0;
}

.services__header p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--m-text-body);
}

.services__header p.m-eyebrow {
    color: var(--m-blue);
}

.services__grid {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--m-space-lg);
}

.service-card {
    background: var(--m-bg-card);
    border: 1px solid var(--m-border-light);
    border-bottom: 3px solid transparent;
    overflow: hidden;
    transition: all var(--m-transition);
    position: relative;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 132, 90, 0.15);
    border-bottom-color: var(--m-bronze);
    box-shadow: 0 12px 40px rgba(43, 37, 32, 0.14), 0 0 0 1px rgba(212, 132, 90, 0.08);
}

.service-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--m-bg-light-alt);
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--m-transition-slow);
}

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

.service-card__body {
    padding: var(--m-space-lg);
}

.service-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--m-text-dark);
}

.service-card__desc {
    font-size: 14px;
    color: var(--m-text-body);
    line-height: 1.6;
    margin-bottom: var(--m-space-md);
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--m-bronze);
    transition: all var(--m-transition-fast);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.service-card__link:hover {
    gap: 10px;
    border-bottom-color: var(--m-bronze);
    color: var(--m-bronze-hover);
}

.service-card__link svg {
    width: 16px;
    height: 16px;
}


/* ========================================
   WHY US / THE INFINITE WAY
   ======================================== */

.why-us {
    padding: var(--m-space-4xl) 0;
    background: var(--m-navy);
    color: #F0EDE6;
    position: relative;
    overflow: hidden;
}

.why-us::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 132, 90, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.why-us::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 132, 90, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.why-us__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.why-us__header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.why-us__header .m-eyebrow {
    color: var(--m-peach-cream);
    letter-spacing: 0.2em;
}

.why-us__header .m-h2 {
    color: #FFFDF8;
    margin-bottom: var(--m-space-md);
}

.why-us__header .m-h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: var(--m-space-md) auto 0;
}

.why-us__header p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    color: rgba(240, 237, 230, 0.85);
}

.why-us__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-space-xl);
}

.value-card {
    padding: var(--m-space-xl);
    background: var(--m-navy-card);
    border: 1px solid rgba(122, 140, 165, 0.12);
    border-left: 3px solid var(--m-bronze);
    transition: all var(--m-transition);
    position: relative;
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 132, 90, 0.35);
    border-left-color: var(--m-peach-cream);
    box-shadow: 0 12px 40px rgba(15, 42, 74, 0.35), 0 0 0 1px rgba(212, 132, 90, 0.15);
    background: linear-gradient(135deg, var(--m-navy-card) 0%, rgba(21, 53, 88, 0.9) 100%);
}

.value-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 132, 90, 0.12);
    border: 1px solid rgba(212, 132, 90, 0.2);
    color: var(--m-peach-cream);
    margin-bottom: var(--m-space-md);
}

.value-card__icon svg {
    width: 24px;
    height: 24px;
}

.value-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFDF8;
    margin-bottom: 8px;
}

.value-card__desc {
    font-size: 15px;
    color: rgba(240, 237, 230, 0.8);
    line-height: 1.7;
}


/* ========================================
   TESTIMONIALS
   ======================================== */

.testimonials {
    padding: var(--m-space-4xl) 0;
    background: var(--m-bg-light);
}

.testimonials__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.testimonials__header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.testimonials__header .m-h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: var(--m-space-md) auto 0;
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-space-lg);
}

.testimonial-card {
    background: var(--m-bg-white);
    border: 1px solid var(--m-border-light);
    border-top: 3px solid var(--m-bronze);
    padding: var(--m-space-xl);
    transition: all var(--m-transition);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(43, 37, 32, 0.1);
}

.testimonial-card__stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--m-space-md);
    color: var(--m-bronze);
    filter: drop-shadow(0 1px 4px rgba(212, 132, 90, 0.3));
}

.testimonial-card__stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.testimonial-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-lg);
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    background: var(--m-navy);
    color: var(--m-peach-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(15, 42, 74, 0.2);
}

.testimonial-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--m-text-dark);
}

.testimonial-card__project {
    font-size: 12px;
    color: var(--m-bronze);
    font-weight: 600;
    margin-top: 2px;
}


/* ========================================
   CTA BAND (Final Call to Action)
   ======================================== */

.cta-band {
    position: relative;
    padding: var(--m-space-5xl) 0;
    background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-bg-dark) 50%, var(--m-navy) 100%);
    overflow: hidden;
    border-top: 3px solid var(--m-bronze);
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212, 132, 90, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(212, 132, 90, 0.06) 0%, transparent 60%);
    z-index: 0;
}

.cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    text-align: center;
}

.cta-band__title {
    margin-bottom: var(--m-space-md);
    color: #FFFDF8;
}

.cta-band__subtitle {
    font-size: 18px;
    color: rgba(250, 243, 225, 0.75);
    margin-bottom: var(--m-space-xl);
    line-height: 1.6;
}

.cta-band__buttons {
    display: flex;
    justify-content: center;
    gap: var(--m-space-md);
    flex-wrap: wrap;
}

.cta-band .m-btn--secondary {
    color: var(--m-peach-cream);
    border-color: var(--m-peach-cream);
}

.cta-band .m-btn--secondary:hover {
    background: rgba(245, 213, 184, 0.1);
    color: #FFFDF8;
    border-color: #FFFDF8;
}

.cta-band__trust {
    margin-top: var(--m-space-xl);
    font-size: 13px;
    color: rgba(250, 243, 225, 0.45);
}

.cta-band__trust span {
    margin: 0 var(--m-space-sm);
}


/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    background: var(--m-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--m-space-3xl) 0 var(--m-space-xl);
}

.site-footer__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--m-space-2xl);
    padding-bottom: var(--m-space-2xl);
    border-bottom: 1px solid var(--m-border-dark);
}

.site-footer__brand {
    max-width: 280px;
}

.site-footer__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--m-text-white);
    margin-bottom: var(--m-space-md);
}

.site-footer__desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--m-text-muted);
    margin-bottom: var(--m-space-lg);
}

.site-footer__credentials {
    display: flex;
    gap: var(--m-space-md);
}

.site-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--m-bronze);
    background: rgba(212, 132, 90, 0.08);
    color: var(--m-peach-cream);
    font-size: 12px;
    font-weight: 600;
}

.site-footer__column h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--m-text-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--m-space-md);
}

.site-footer__column ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__column a {
    font-size: 14px;
    color: var(--m-text-muted);
    transition: color var(--m-transition-fast);
}

.site-footer__column a:hover {
    color: var(--m-text-white);
}

.site-footer__bottom {
    padding-top: var(--m-space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--m-space-md);
}

.site-footer__copyright {
    font-size: 13px;
    color: var(--m-text-subtle);
}

.site-footer__legal {
    display: flex;
    gap: var(--m-space-lg);
}

.site-footer__legal a {
    font-size: 13px;
    color: var(--m-text-subtle);
    transition: color var(--m-transition-fast);
}

.site-footer__legal a:hover {
    color: var(--m-text-light);
}


/* ========================================
   TOP UTILITY BAR (Harrell/Brothers inspiration)
   ======================================== */

.utility-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--m-bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    height: var(--m-utility-height);
}

.utility-bar__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.utility-bar__left {
    display: flex;
    align-items: center;
    gap: var(--m-space-md);
}

.utility-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--m-text-muted);
    letter-spacing: 0.02em;
}

.utility-bar__item svg {
    color: var(--m-bronze);
}

.utility-bar__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.utility-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--m-text-white);
    transition: color var(--m-transition-fast);
}

.utility-bar__phone:hover {
    color: var(--m-blue);
}

.utility-bar__phone svg {
    color: var(--m-bronze);
}


/* ========================================
   IMPACT NUMBERS / SOCIAL PROOF (SVW inspiration)
   ======================================== */

.impact-numbers {
    position: relative;
    padding: var(--m-space-3xl) 0;
    background: var(--m-bg-dark);
    overflow: hidden;
}

.impact-numbers::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 132, 90, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(212, 132, 90, 0.04) 0%, transparent 60%);
}

.impact-numbers__inner {
    position: relative;
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.impact-numbers__accent {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: 0 auto var(--m-space-2xl);
}

.impact-numbers__grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--m-space-2xl);
    flex-wrap: wrap;
}

.impact-numbers__item {
    text-align: center;
    padding: var(--m-space-md) var(--m-space-xl);
}

.impact-numbers__value {
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    color: var(--m-peach-cream);
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(212, 132, 90, 0.2);
}

.impact-numbers__label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(250, 243, 225, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

.impact-numbers__divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
}


/* ========================================
   OUR PROCESS (OroCoast/Bayside inspiration)
   ======================================== */

.our-process {
    padding: var(--m-space-4xl) 0;
    background: var(--m-bg-dark);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--m-bronze);
}

.our-process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 132, 90, 0.15) 15%, rgba(212, 132, 90, 0.15) 85%, transparent 100%);
    transform: translateX(-50%);
    display: none; /* Desktop: hidden, process line is in steps */
}

.our-process__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.our-process__header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.our-process__header .m-eyebrow {
    color: var(--m-peach-cream);
    letter-spacing: 0.2em;
}

.our-process__header .m-h2 {
    margin-bottom: var(--m-space-md);
    color: #FFFDF8;
}

.our-process__header p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    color: rgba(250, 243, 225, 0.7);
}

.our-process__steps {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.process-step {
    display: flex;
    gap: var(--m-space-xl);
    padding: var(--m-space-xl) 0;
    position: relative;
}

.process-step__number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #FFFDF8;
    background: var(--m-bronze);
    border: none;
    box-shadow: 0 4px 20px rgba(212, 132, 90, 0.3);
    position: relative;
    z-index: 1;
}

.process-step__content {
    flex: 1;
    padding-top: 4px;
}

.process-step__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--m-peach-cream);
    margin-bottom: 6px;
}

.process-step__desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(250, 243, 225, 0.7);
}

/* Connecting line between step numbers */
.process-step__line {
    position: absolute;
    left: 27px; /* center of 56px box */
    top: calc(var(--m-space-xl) + 56px);
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(212, 132, 90, 0.45), rgba(212, 132, 90, 0.1));
}

.process-step:last-child .process-step__line {
    display: none;
}


/* ========================================
   PORTFOLIO TEASER (Lux/HartmanBaldwin/Spazio inspiration)
   ======================================== */

.portfolio-teaser {
    padding: var(--m-space-4xl) 0;
    background: var(--m-bg-light-alt);
}

.portfolio-teaser__inner {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.portfolio-teaser__header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.portfolio-teaser__header .m-h2 {
    margin-bottom: var(--m-space-md);
}

.portfolio-teaser__header .m-h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: var(--m-space-md) auto 0;
}

.portfolio-teaser__header p {
    max-width: 520px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--m-text-body);
}

.portfolio-teaser__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--m-space-md);
}

.portfolio-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--m-transition);
}

.portfolio-card:hover {
    transform: translateY(-3px);
}

.portfolio-card__image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.portfolio-card--featured {
    grid-row: 1 / 3;
}

.portfolio-card--featured .portfolio-card__image {
    height: 100%;
    min-height: 576px;
}

.portfolio-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--m-transition-slow);
}

.portfolio-card:hover .portfolio-card__placeholder {
    transform: scale(1.04);
}

.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--m-transition-slow);
}

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

/* Text overlay on images (Spazio inspiration — text in front of picture) */
.portfolio-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--m-space-xl);
    background: linear-gradient(0deg, rgba(15, 42, 74, 0.85) 0%, rgba(15, 42, 74, 0.4) 55%, transparent 100%);
    transition: padding var(--m-transition);
}

.portfolio-card:hover .portfolio-card__overlay {
    padding-bottom: calc(var(--m-space-xl) + 4px);
}

.portfolio-card__tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--m-bronze);
    color: #FFFDF8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.portfolio-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--m-text-white);
    margin-bottom: 4px;
}

.portfolio-card__location {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.portfolio-teaser__cta {
    text-align: center;
    margin-top: var(--m-space-2xl);
}


/* ========================================
   ANIMATION UTILITIES
   ======================================== */

.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--m-ease), transform 0.6s var(--m-ease);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.6s var(--m-ease);
}

.fade-in.visible {
    opacity: 1;
}

/* Stagger animation delay for grid items */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }


/* ========================================
   RESPONSIVE: TABLET (768px)
   ======================================== */

@media (max-width: 1024px) {
    /* Switch to mobile hamburger nav on tablets */
    .site-nav__links,
    .site-nav__phone {
        display: none;
    }

    .site-nav__toggle {
        display: flex;
    }

    .site-nav__cta {
        margin-left: auto;
        margin-right: var(--m-space-sm);
    }

    .mobile-nav {
        top: calc(var(--m-nav-height) + var(--m-utility-height));
    }

    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--m-space-2xl);
    }

    .hero__text {
        max-width: 100%;
        text-align: center;
    }

    .hero__stats {
        justify-content: center;
    }

    .lead-form {
        max-width: 480px;
        margin: 0 auto;
    }

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

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

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

    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: var(--m-space-xl);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    /* Portfolio: stack to single column */
    .portfolio-teaser__grid {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-card--featured {
        grid-row: auto;
    }

    .portfolio-card--featured .portfolio-card__image {
        min-height: 280px;
    }
}


/* ========================================
   RESPONSIVE: MOBILE (600px)
   ======================================== */

@media (max-width: 600px) {
    :root {
        --m-nav-height: 60px;
        --m-utility-height: 0px; /* Hide utility bar on mobile */
    }

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

    .m-container {
        padding: 0 var(--m-space-md);
    }

    /* Utility bar hidden on mobile */
    .utility-bar {
        display: none;
    }

    /* Nav */
    .site-nav {
        top: 0;
    }

    .site-nav__links,
    .site-nav__phone {
        display: none;
    }

    .site-nav__toggle {
        display: flex;
    }

    .site-nav__cta {
        display: none;
    }

    .mobile-nav {
        top: var(--m-nav-height);
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding-top: var(--m-nav-height);
        padding-bottom: 0;
    }

    .hero__content {
        padding: var(--m-space-2xl) var(--m-space-md);
    }

    .hero__stats {
        flex-direction: column;
        gap: var(--m-space-md);
    }

    .lead-form {
        max-width: 100%;
    }

    .lead-form__row {
        grid-template-columns: 1fr;
    }

    /* Impact numbers */
    .impact-numbers__grid {
        flex-direction: column;
        gap: var(--m-space-lg);
    }

    .impact-numbers__divider {
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    }

    .impact-numbers__value {
        font-size: 42px;
    }

    /* Services */
    .services__grid {
        grid-template-columns: 1fr;
        padding: 0 var(--m-space-md);
    }

    /* Why Us */
    .why-us__grid {
        grid-template-columns: 1fr;
    }

    /* Process */
    .process-step {
        gap: var(--m-space-md);
    }

    .process-step__number {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .process-step__line {
        left: 21px;
        top: calc(var(--m-space-xl) + 44px);
    }

    .process-step__title {
        font-size: 18px;
    }

    /* Portfolio */
    .portfolio-teaser__grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card--featured .portfolio-card__image {
        min-height: 240px;
    }

    .portfolio-card__image {
        height: 220px;
    }

    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: 1fr;
    }

    /* Trust bar */
    .trust-bar__inner {
        flex-direction: column;
        gap: var(--m-space-lg);
        align-items: flex-start;
        padding: 0 var(--m-space-md);
    }

    /* Promo band */
    .promo-band__inner {
        flex-direction: column;
        gap: var(--m-space-md);
    }

    /* CTA band */
    .cta-band__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-band__buttons .m-btn {
        width: 100%;
    }

    /* Footer */
    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .site-footer__legal {
        justify-content: center;
    }
}


/* ========================================
   MOBILE STICKY CTA BAR
   ======================================== */

.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--m-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px var(--m-space-md);
    gap: 8px;
}

@media (max-width: 600px) {
    .mobile-cta-bar {
        display: flex;
    }

    .mobile-cta-bar .m-btn {
        flex: 1;
        padding: 14px;
        font-size: 14px;
    }

    /* Add bottom padding to body for the sticky bar */
    body {
        padding-bottom: 68px;
    }
}


/* ========================================
   SUB-PAGE: HERO (Shorter hero for inner pages)
   ======================================== */

.subpage-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--m-nav-height) + var(--m-utility-height));
    overflow: hidden;
}

.subpage-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.subpage-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(15, 42, 74, 0.65) 0%,
            rgba(43, 37, 32, 0.75) 50%,
            rgba(43, 37, 32, 0.92) 100%
        );
    z-index: 1;
}

.subpage-hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: var(--m-space-3xl) var(--m-space-lg) var(--m-space-2xl);
    width: 100%;
}

.subpage-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
    margin-bottom: var(--m-space-lg);
    font-size: 13px;
    font-weight: 500;
    color: rgba(250, 243, 225, 0.6);
}

.subpage-hero__breadcrumb a {
    color: var(--m-peach-cream);
    transition: color var(--m-transition-fast);
}

.subpage-hero__breadcrumb a:hover {
    color: #FFFDF8;
}

.subpage-hero__breadcrumb-sep {
    color: rgba(250, 243, 225, 0.3);
    font-size: 11px;
}

.subpage-hero__title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFDF8;
    margin-bottom: var(--m-space-md);
    text-shadow: 0 2px 24px rgba(15, 42, 74, 0.35);
}

.subpage-hero__title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin-top: var(--m-space-md);
}

.subpage-hero__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(250, 243, 225, 0.8);
    max-width: 620px;
}


/* ========================================
   SUB-PAGE: SECTION HEADERS
   ======================================== */

.section-header {
    text-align: center;
    margin-bottom: var(--m-space-3xl);
}

.section-header__eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--m-bronze);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--m-space-sm);
}

.section-header__title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-md);
}

.section-header__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin: var(--m-space-md) auto 0;
}

.section-header__desc {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--m-text-body);
    line-height: 1.7;
}

/* Dark section variant */
.m-section--dark .section-header__eyebrow {
    color: var(--m-peach-cream);
    letter-spacing: 0.2em;
}

.m-section--dark .section-header__title {
    color: #FFFDF8;
}

.m-section--dark .section-header__desc {
    color: rgba(250, 243, 225, 0.75);
}

/* Left-aligned variant */
.section-header--left {
    text-align: left;
}

.section-header--left .section-header__title::after {
    margin-left: 0;
    margin-right: auto;
}

.section-header--left .section-header__desc {
    margin-left: 0;
    margin-right: auto;
}


/* ========================================
   SUB-PAGE: COMPARISON TABLES
   ======================================== */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--m-shadow-md);
}

.comparison-table thead {
    position: sticky;
    top: calc(var(--m-nav-height) + var(--m-utility-height));
    z-index: 10;
}

.comparison-table th {
    background: var(--m-navy);
    color: var(--m-bg-light);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--m-space-md) var(--m-space-lg);
    text-align: left;
    border-bottom: 2px solid var(--m-bronze);
}

.comparison-table th:first-child {
    font-size: 15px;
}

.comparison-table td {
    background: var(--m-bg-white);
    color: var(--m-text-dark);
    font-size: 15px;
    padding: var(--m-space-md) var(--m-space-lg);
    border-bottom: 1px solid rgba(43, 37, 32, 0.08);
}

.comparison-table tr:nth-child(even) td {
    background: var(--m-bg-light);
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--m-text-dark);
}

.comparison-table tbody tr:hover td {
    background: rgba(212, 132, 90, 0.04);
}

/* Check and X marks */
.comparison-table__check {
    color: var(--m-green);
    font-size: 18px;
    font-weight: 700;
}

.comparison-table__check::before {
    content: '\2713';
}

.comparison-table__x {
    color: var(--m-text-muted);
    font-size: 18px;
    font-weight: 700;
}

.comparison-table__x::before {
    content: '\2717';
}

/* Table wrapper for horizontal scroll on mobile */
.comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--m-space-md));
    padding: 0 var(--m-space-md);
}


/* ========================================
   SUB-PAGE: FAQ ACCORDION
   ======================================== */

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--m-space-md);
}

.faq-item {
    background: var(--m-bg-white);
    border: 1px solid var(--m-border-light);
    transition: box-shadow var(--m-transition);
    overflow: hidden;
}

.faq-item:hover {
    box-shadow: var(--m-shadow-sm);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--m-space-lg) var(--m-space-xl);
    font-size: 17px;
    font-weight: 600;
    color: var(--m-text-dark);
    cursor: pointer;
    list-style: none;
    transition: color var(--m-transition-fast), background var(--m-transition-fast);
    user-select: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: var(--m-space-md);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D4845A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--m-transition);
}

.faq-item summary:hover {
    color: var(--m-bronze);
    background: rgba(212, 132, 90, 0.03);
}

.faq-item[open] summary {
    color: var(--m-bronze);
    border-bottom: 1px solid var(--m-border-light);
    background: rgba(212, 132, 90, 0.04);
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item__answer {
    padding: var(--m-space-lg) var(--m-space-xl) var(--m-space-xl);
    font-size: 15px;
    line-height: 1.7;
    color: var(--m-text-body);
    animation: faqSlideDown 0.3s var(--m-ease);
}

.faq-item__answer p {
    margin-bottom: var(--m-space-md);
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

.faq-item__answer ul,
.faq-item__answer ol {
    padding-left: var(--m-space-lg);
    margin-bottom: var(--m-space-md);
    list-style: disc;
}

.faq-item__answer li {
    margin-bottom: var(--m-space-xs);
}

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


/* ========================================
   SUB-PAGE: ARTICLE / BLOG CARDS
   ======================================== */

.article-card {
    background: var(--m-bg-card);
    border: 1px solid var(--m-border-light);
    overflow: hidden;
    transition: all var(--m-transition);
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(43, 37, 32, 0.12);
}

.article-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--m-bg-light-alt);
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--m-transition-slow);
}

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

.article-card__body {
    padding: var(--m-space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card__category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(212, 132, 90, 0.1);
    color: var(--m-bronze);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--m-space-sm);
    align-self: flex-start;
}

.article-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--m-text-dark);
    line-height: 1.3;
    margin-bottom: var(--m-space-sm);
}

.article-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--m-text-body);
    margin-bottom: var(--m-space-md);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
    font-size: 12px;
    color: var(--m-text-caption);
    margin-bottom: var(--m-space-md);
}

.article-card__meta-sep {
    width: 3px;
    height: 3px;
    background: var(--m-text-caption);
    display: inline-block;
}

.article-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--m-bronze);
    transition: all var(--m-transition-fast);
    margin-top: auto;
}

.article-card__link:hover {
    gap: 10px;
    color: var(--m-bronze-hover);
}

.article-card__link::after {
    content: '\2192';
    transition: transform var(--m-transition-fast);
}

.article-card:hover .article-card__link::after {
    transform: translateX(3px);
}


/* ========================================
   SUB-PAGE: FILTER CHIPS
   ======================================== */

.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
    padding: var(--m-space-md) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text-body);
    background: var(--m-bg-white);
    border: 1px solid var(--m-border-light);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--m-transition-fast);
    font-family: var(--m-font);
}

.filter-chip:hover {
    background: rgba(212, 132, 90, 0.06);
    color: var(--m-bronze);
    border-color: rgba(212, 132, 90, 0.25);
}

.filter-chip.active {
    background: var(--m-bronze);
    color: #FFFDF8;
    border-color: var(--m-bronze);
    font-weight: 600;
}

.filter-chip.active:hover {
    background: var(--m-bronze-hover);
    border-color: var(--m-bronze-hover);
}


/* ========================================
   SUB-PAGE: FEATURE / DETAIL CARDS
   ======================================== */

.detail-card {
    background: var(--m-bg-card);
    border: 1px solid var(--m-border-light);
    padding: var(--m-space-xl);
    transition: all var(--m-transition);
}

.detail-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-lg);
    border-color: rgba(212, 132, 90, 0.15);
}

.detail-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 132, 90, 0.1);
    border: 1px solid rgba(212, 132, 90, 0.2);
    color: var(--m-bronze);
    margin-bottom: var(--m-space-md);
}

.detail-card__icon svg {
    width: 24px;
    height: 24px;
}

.detail-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-sm);
}

.detail-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--m-text-body);
}

/* Horizontal layout variant */
.detail-card--horizontal {
    display: flex;
    align-items: flex-start;
    gap: var(--m-space-lg);
}

.detail-card--horizontal .detail-card__icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.detail-card--horizontal .detail-card__body {
    flex: 1;
}

/* Detail cards on dark backgrounds */
.m-section--dark .detail-card {
    background: var(--m-navy-card);
    border-color: rgba(122, 140, 165, 0.12);
}

.m-section--dark .detail-card:hover {
    border-color: rgba(212, 132, 90, 0.35);
    box-shadow: 0 12px 40px rgba(15, 42, 74, 0.35);
}

.m-section--dark .detail-card__icon {
    background: rgba(212, 132, 90, 0.12);
    border-color: rgba(212, 132, 90, 0.2);
    color: var(--m-peach-cream);
}

.m-section--dark .detail-card__title {
    color: #FFFDF8;
}

.m-section--dark .detail-card__text {
    color: rgba(240, 237, 230, 0.8);
}


/* ========================================
   SUB-PAGE: PORTFOLIO FILTER GRID
   ======================================== */

.portfolio-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-sm);
    margin-bottom: var(--m-space-2xl);
    flex-wrap: wrap;
}

.portfolio-filter__btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text-body);
    background: transparent;
    border: 1px solid var(--m-border-light);
    cursor: pointer;
    transition: all var(--m-transition-fast);
    font-family: var(--m-font);
}

.portfolio-filter__btn:hover {
    color: var(--m-bronze);
    border-color: rgba(212, 132, 90, 0.3);
    background: rgba(212, 132, 90, 0.04);
}

.portfolio-filter__btn.active {
    background: var(--m-bronze);
    color: #FFFDF8;
    border-color: var(--m-bronze);
    font-weight: 600;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-space-lg);
}

.portfolio-grid__item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--m-transition);
    opacity: 1;
    transform: scale(1);
}

.portfolio-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-lg);
}

.portfolio-grid__item-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--m-bg-light-alt);
}

.portfolio-grid__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--m-transition-slow);
}

.portfolio-grid__item:hover .portfolio-grid__item-image img {
    transform: scale(1.05);
}

.portfolio-grid__item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--m-space-lg);
    background: linear-gradient(0deg, rgba(15, 42, 74, 0.88) 0%, rgba(15, 42, 74, 0.35) 60%, transparent 100%);
}

.portfolio-grid__item-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--m-bronze);
    color: #FFFDF8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.portfolio-grid__item-title {
    font-size: 17px;
    font-weight: 700;
    color: #FFFDF8;
}

.portfolio-grid__item-location {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

/* Show/hide animation for filtering */
.portfolio-grid__item.hidden {
    opacity: 0;
    transform: scale(0.9);
    position: absolute;
    pointer-events: none;
}

.portfolio-grid__item.showing {
    animation: portfolioFadeIn 0.4s var(--m-ease) forwards;
}

@keyframes portfolioFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ========================================
   SUB-PAGE: TIMELINE / PROCESS STEPS (Horizontal)
   ======================================== */

.timeline-horizontal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: var(--m-space-lg) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 160px;
    max-width: 240px;
    padding: 0 var(--m-space-md);
    position: relative;
}

.timeline-step__number {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #FFFDF8;
    background: var(--m-bronze);
    box-shadow: 0 4px 20px rgba(212, 132, 90, 0.3);
    position: relative;
    z-index: 2;
    margin-bottom: var(--m-space-md);
}

.timeline-step__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-xs);
}

.timeline-step__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--m-text-body);
}

/* Connecting line between steps */
.timeline-step__connector {
    position: absolute;
    top: 26px;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
    background: linear-gradient(90deg, var(--m-bronze), rgba(212, 132, 90, 0.25));
    z-index: 1;
}

.timeline-step:last-child .timeline-step__connector {
    display: none;
}

/* Dark background variant */
.m-section--dark .timeline-step__title {
    color: var(--m-peach-cream);
}

.m-section--dark .timeline-step__desc {
    color: rgba(250, 243, 225, 0.7);
}


/* ========================================
   SUB-PAGE: TWO-COLUMN CONTENT
   ======================================== */

.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-space-3xl);
    align-items: center;
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
}

.content-split--reverse {
    direction: rtl;
}

.content-split--reverse > * {
    direction: ltr;
}

.content-split__image {
    overflow: hidden;
    box-shadow: var(--m-shadow-lg);
}

.content-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 360px;
    transition: transform var(--m-transition-slow);
}

.content-split__image:hover img {
    transform: scale(1.03);
}

.content-split__text {
    padding: var(--m-space-lg) 0;
}

.content-split__eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--m-bronze);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--m-space-sm);
}

.content-split__heading {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-md);
}

.content-split__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--m-bronze), var(--m-peach-cream));
    margin-top: var(--m-space-md);
}

.content-split__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--m-text-body);
    margin-bottom: var(--m-space-lg);
}

.content-split__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--m-space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--m-space-sm);
}

.content-split__list li {
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
    font-size: 15px;
    color: var(--m-text-body);
    padding: var(--m-space-xs) 0;
}

.content-split__list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(212, 132, 90, 0.12);
    border: 1px solid rgba(212, 132, 90, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4845A' stroke-width='3'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}


/* ========================================
   SUB-PAGE: NEWSLETTER / EMAIL SIGNUP
   ======================================== */

.newsletter {
    background: var(--m-navy);
    padding: var(--m-space-3xl) 0;
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 132, 90, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(212, 132, 90, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.newsletter__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    text-align: center;
}

.newsletter__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: #FFFDF8;
    margin-bottom: var(--m-space-sm);
}

.newsletter__desc {
    font-size: 16px;
    color: rgba(250, 243, 225, 0.7);
    margin-bottom: var(--m-space-xl);
    line-height: 1.6;
}

.newsletter__form {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
}

.newsletter__input {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: none;
    color: #FFFDF8;
    font-family: var(--m-font);
    font-size: 15px;
    transition: all var(--m-transition-fast);
}

.newsletter__input::placeholder {
    color: rgba(250, 243, 225, 0.4);
}

.newsletter__input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--m-bronze);
    box-shadow: 0 0 0 3px rgba(212, 132, 90, 0.15);
}

.newsletter__submit {
    padding: 16px 28px;
    background: var(--m-bronze);
    color: #FFFDF8;
    font-family: var(--m-font);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--m-transition);
}

.newsletter__submit:hover {
    background: var(--m-bronze-hover);
}

.newsletter__disclaimer {
    margin-top: var(--m-space-md);
    font-size: 12px;
    color: rgba(250, 243, 225, 0.35);
}


/* ========================================
   SUB-PAGE: RESPONSIVE OVERRIDES
   ======================================== */

@media (max-width: 1024px) {
    /* Sub-page hero */
    .subpage-hero {
        min-height: 45vh;
    }

    /* Comparison table */
    .comparison-table th,
    .comparison-table td {
        padding: var(--m-space-sm) var(--m-space-md);
        font-size: 13px;
    }

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

    /* Timeline horizontal */
    .timeline-horizontal {
        justify-content: flex-start;
    }

    .timeline-step {
        min-width: 140px;
    }

    /* Two-column content */
    .content-split {
        gap: var(--m-space-2xl);
    }

    /* Article cards - 2 columns */
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Detail cards horizontal revert to vertical on tablet */
    .detail-card--horizontal {
        flex-direction: column;
    }

    .detail-card--horizontal .detail-card__icon {
        margin-bottom: var(--m-space-md);
    }
}

@media (max-width: 600px) {
    /* Sub-page hero */
    .subpage-hero {
        min-height: auto;
        padding-top: var(--m-nav-height);
    }

    .subpage-hero__content {
        padding: var(--m-space-2xl) var(--m-space-md) var(--m-space-xl);
    }

    .subpage-hero__subtitle {
        font-size: 16px;
    }

    /* Section headers */
    .section-header {
        margin-bottom: var(--m-space-2xl);
    }

    .section-header__desc {
        font-size: 15px;
    }

    /* Comparison table */
    .comparison-table th,
    .comparison-table td {
        padding: var(--m-space-sm) var(--m-space-sm);
        font-size: 12px;
    }

    .comparison-table th {
        font-size: 11px;
    }

    /* FAQ */
    .faq-item summary {
        padding: var(--m-space-md) var(--m-space-lg);
        font-size: 15px;
    }

    .faq-item__answer {
        padding: var(--m-space-md) var(--m-space-lg) var(--m-space-lg);
    }

    /* Article cards - single column */
    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-card__image {
        height: 180px;
    }

    /* Filter bar - compact */
    .filter-bar {
        gap: var(--m-space-xs);
    }

    .filter-chip {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Portfolio grid - single column */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid__item-image {
        height: 220px;
    }

    .portfolio-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .portfolio-filter::-webkit-scrollbar {
        display: none;
    }

    .portfolio-filter__btn {
        flex-shrink: 0;
        padding: 8px 18px;
        font-size: 13px;
    }

    /* Timeline - stack vertical on mobile */
    .timeline-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: var(--m-space-lg);
    }

    .timeline-step {
        flex-direction: row;
        text-align: left;
        min-width: unset;
        max-width: unset;
        gap: var(--m-space-md);
        padding: 0;
    }

    .timeline-step__number {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 16px;
        margin-bottom: 0;
    }

    .timeline-step__connector {
        position: absolute;
        top: 44px;
        left: 22px;
        width: 2px;
        height: calc(100% + var(--m-space-lg));
        background: linear-gradient(180deg, var(--m-bronze), rgba(212, 132, 90, 0.15));
    }

    .timeline-step__content {
        flex: 1;
        padding-top: 2px;
    }

    /* Two-column content - stack */
    .content-split {
        grid-template-columns: 1fr;
        gap: var(--m-space-xl);
    }

    .content-split--reverse {
        direction: ltr;
    }

    .content-split__image img {
        min-height: 240px;
    }

    /* Newsletter */
    .newsletter__form {
        flex-direction: column;
        gap: var(--m-space-sm);
    }

    .newsletter__input {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    .newsletter__input:focus {
        border-color: var(--m-bronze);
    }

    .newsletter__submit {
        width: 100%;
    }

    /* Detail cards */
    .detail-card--horizontal {
        flex-direction: column;
    }

    .detail-card--horizontal .detail-card__icon {
        margin-bottom: var(--m-space-md);
    }
}


/* ========================================
   PORTAL PAGE — Benefits, Auth, Steps
   ======================================== */

/* Benefits Grid — 3×2 cards */
.portal-benefits-grid {
    max-width: var(--m-max-width);
    margin: 0 auto;
    padding: 0 var(--m-space-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-space-lg);
}

.portal-benefit-card {
    background: var(--m-bg-card);
    border: 1px solid var(--m-border-light);
    border-left: 3px solid var(--m-bronze);
    padding: var(--m-space-xl) var(--m-space-lg);
    transition: all var(--m-transition);
    position: relative;
}

.portal-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-lg);
    border-left-color: var(--m-bronze-hover);
}

.portal-benefit-card__icon {
    font-size: 32px;
    margin-bottom: var(--m-space-md);
    line-height: 1;
}

.portal-benefit-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-sm);
}

.portal-benefit-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--m-text-body);
}

/* Portal Steps Grid (How It Works) */
.portal-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--m-space-xl);
    max-width: 900px;
    margin: 0 auto;
}

/* Auth Section — Two side-by-side cards */
.portal-auth-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.portal-auth-card {
    background: var(--m-bg-card);
    border: 1px solid var(--m-border-light);
    padding: var(--m-space-2xl) var(--m-space-xl);
    text-align: center;
    transition: all var(--m-transition);
    position: relative;
}

.portal-auth-card:hover {
    box-shadow: var(--m-shadow-lg);
}

.portal-auth-card--signup {
    border-left: 4px solid var(--m-bronze);
}

.portal-auth-card--signin {
    border-left: 4px solid var(--m-navy);
}

.portal-auth-card__icon {
    font-size: 40px;
    margin-bottom: var(--m-space-md);
    line-height: 1;
}

.portal-auth-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--m-text-dark);
    margin-bottom: var(--m-space-xs);
}

.portal-auth-card__subtitle {
    font-size: 15px;
    color: var(--m-text-body);
    margin-bottom: var(--m-space-lg);
}

.portal-auth-card__benefits {
    text-align: left;
    margin-bottom: var(--m-space-lg);
    padding: 0 var(--m-space-md);
}

.portal-auth-card__benefits li {
    font-size: 14px;
    color: var(--m-text-body);
    padding: var(--m-space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--m-space-sm);
}

.portal-auth-card__benefits li::before {
    content: '✓';
    color: var(--m-bronze);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.portal-auth-card__note {
    font-size: 13px;
    color: var(--m-text-caption);
    margin-top: var(--m-space-md);
}

/* Google Sign-In Button */
.google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    background: #FFFFFF;
    border: 1px solid #DADCE0;
    font-family: var(--m-font);
    font-size: 16px;
    font-weight: 600;
    color: #3C4043;
    cursor: pointer;
    transition: all var(--m-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #BDBDBD;
    background: #F8F9FA;
}

.google-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.google-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Signed-In State */
.portal-signed-in {
    text-align: center;
    padding: var(--m-space-xl) 0;
}

.portal-signed-in p {
    font-size: 17px;
    color: var(--m-text-body);
    margin-bottom: var(--m-space-lg);
}

.portal-signed-in .m-btn {
    display: inline-flex;
}

/* ─── Portal Page Responsive ─── */
@media (max-width: 1024px) {
    .portal-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portal-benefits-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--m-space-md);
    }

    .portal-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--m-space-lg);
        text-align: center;
    }

    .portal-auth-section {
        grid-template-columns: 1fr;
        gap: var(--m-space-lg);
    }

    .portal-auth-card {
        padding: var(--m-space-xl) var(--m-space-lg);
    }

    .portal-auth-card--signup,
    .portal-auth-card--signin {
        border-left-width: 3px;
    }

    .google-btn {
        max-width: 100%;
    }
}