/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ===== Re:Room brand palette — do not introduce colors outside this set ===== */
    --white: #ffffff;
    --off-white: #F7F4F0;      /* LIGHT_BG */
    --light-gray: #F7F4F0;     /* LIGHT_BG */
    --mid-gray: #D9D0C7;       /* RULE_COL — dividers, borders, hairlines */
    --text-gray: #888888;      /* MID_GREY — secondary text */
    --text-dark: #1A1A1A;      /* DARK — primary text, buttons, nav */
    --text-medium: rgba(26, 26, 26, 0.78); /* DARK tint — body copy between dark/gray */
    --black: #1A1A1A;
    --accent: #B5451B;         /* ACCENT — eyebrows/kickers, section numbers, active states ONLY */
    --accent-hover: #333333;   /* DARK tint — hover state for dark buttons (never accent-colored) */
    --border: #D9D0C7;         /* RULE_COL */
    --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.05);
    --shadow-md: 0 4px 20px rgba(26, 26, 26, 0.07);
    --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.09);
    --shadow-xl: 0 20px 60px rgba(26, 26, 26, 0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* NOTE: no `scroll-behavior: smooth` here. It fights GSAP ScrollTrigger's
   pinned hero (the browser's native smooth scroll and ScrollTrigger's own
   scroll corrections tug against each other and the page snaps back).
   Smooth anchor scrolling is handled in js/main.js via
   scrollIntoView({ behavior: 'smooth' }), which is unaffected. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
    overflow-x: hidden;
    max-width: 100%;
}

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

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 120px 0;
}

/* ===== PRELOADER ===== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader {
    text-align: center;
}

.loader-text {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text-dark);
    display: block;
    margin-bottom: 16px;
}

.loader-bar {
    width: 60px;
    height: 2px;
    background: var(--mid-gray);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.loader-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--text-dark);
    animation: loaderSlide 1s ease infinite;
}

@keyframes loaderSlide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 24px;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
}

.logo-re {
    color: var(--text-dark);
}

.logo-room {
    color: var(--text-gray);
    font-weight: 400;
}

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

.nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-medium);
    letter-spacing: 0.01em;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-dark);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text-dark);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-cta {
    background: #1A1A1A;
    color: #FFFFFF !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.nav-cta::after {
    display: none;
}

.nav-cta:hover {
    background: #333333;
    color: #FFFFFF !important;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text-dark);
    transition: var(--transition);
    transform-origin: center;
}

.hamburger.active span:first-child {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:last-child {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    position: relative;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
    overflow: hidden;
    perspective: 1100px;
    perspective-origin: 50% 50%;
}

/* ===== HERO CORRIDOR — a flight through the work =====
   Project photos are parked at increasing depth down the Z axis, offset
   left and right like frames along a gallery corridor. js/hero-flow.js
   pins the hero and pushes the whole track toward the camera as you
   scroll, so you physically travel forward and the work rushes past on
   either side. Per-frame depth/offset during the flight lives in JS
   (CORRIDOR); the static resting composition lives in the min-width:900px
   block below. Below 900px the frames become a plain stacked grid — see
   css/responsive.css. */
.hero-corridor {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 1;
}

.corridor-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 290px;
    margin: -145px 0 0 -200px;
    border: 8px solid var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 40px 80px -20px rgba(26, 26, 26, 0.3), 0 18px 36px -18px rgba(26, 26, 26, 0.2);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.corridor-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Corridor geometry is scoped to the same breakpoint the flight runs at,
   so none of these depth transforms leak into the mobile stacked layout.
   These values are also the resting composition the page shows before JS
   boots and if the flight never starts (no JS / no GSAP / reduced motion)
   — hero-flow.js overrides them with inline styles once it takes over. */
/* Mirrors the geo[] / travel = 0 state in js/hero-flow.js — keep the two
   in step if the spacing or lateral offsets there change. */
@media (min-width: 900px) {
    .corridor-card { transform: translate3d(-1150px, -130px, -780px) rotateY(32deg); opacity: 1; }
    .corridor-card:nth-child(2) { transform: translate3d(1260px, 150px, -1560px) rotateY(-32deg); }
    .corridor-card:nth-child(3) { transform: translate3d(-1370px, 200px, -2340px) rotateY(32deg); }
    .corridor-card:nth-child(4) { transform: translate3d(1150px, -180px, -3120px) rotateY(-32deg); }
    .corridor-card:nth-child(5) { transform: translate3d(-1260px, -60px, -3900px) rotateY(32deg); }
    .corridor-card:nth-child(6) { transform: translate3d(1370px, 170px, -4680px) rotateY(-32deg); }
    .corridor-card:nth-child(7) { transform: translate3d(-1150px, 120px, -5460px) rotateY(32deg); }
    .corridor-card:nth-child(8) { transform: translate3d(1260px, -160px, -6240px) rotateY(-32deg); opacity: 0.87; }
    .corridor-card:nth-child(9) { transform: translate3d(-1370px, 90px, -7020px) rotateY(32deg); opacity: 0.46; }
    .corridor-card:nth-child(10) { transform: translate3d(1150px, -110px, -7800px) rotateY(-32deg); opacity: 0.05; }
}

/* Closing statement — fades in as the flight completes */
.hero-outro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    width: min(820px, calc(100% - 48px));
    padding: 64px 48px;
    /* Same soft halo as .hero-content so the statement stays legible
       against whatever frame happens to be passing behind it. */
    background: radial-gradient(ellipse 60% 56% at 50% 50%,
        rgba(247, 244, 240, 0.95) 0%,
        rgba(247, 244, 240, 0.88) 44%,
        rgba(247, 244, 240, 0.52) 68%,
        rgba(247, 244, 240, 0) 84%);
}

.hero-outro-line {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4.2vw, 54px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin: 0;
}

.hero-outro-sub {
    margin: 18px 0 0;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

/* A soft halo rather than a frosted card — a hard panel with a backdrop
   blur turned the corridor frames behind it into mush. This keeps the
   headline legible while the depth stays readable through it. */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 48px 40px;
    background: radial-gradient(ellipse 62% 58% at 50% 50%,
        rgba(247, 244, 240, 0.94) 0%,
        rgba(247, 244, 240, 0.86) 42%,
        rgba(247, 244, 240, 0.5) 66%,
        rgba(247, 244, 240, 0) 82%);
    will-change: transform, opacity;
}

.hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.hero-highlight {
    background: linear-gradient(135deg, var(--text-dark) 0%, var(--text-gray) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto 40px;
}

.hero-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-scroll-indicator {
    position: absolute;
    z-index: 2;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hero-scroll-indicator span {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-gray);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: var(--mid-gray);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--text-dark);
    animation: scrollDown 2s ease infinite;
}

@keyframes scrollDown {
    0% { top: -50%; }
    100% { top: 150%; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 32px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.01em;
}

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

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
}

.btn-secondary:hover {
    background: var(--text-dark);
    color: var(--white);
}

.btn-ghost {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--text-dark);
}

.btn-large {
    padding: 18px 40px;
    font-size: 16px;
}

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

.btn-white:hover {
    background: var(--off-white);
    transform: translateY(-1px);
}

/* ===== STATS BAR ===== */
.stats-bar {
    padding: 60px 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.stat-item {
    text-align: center;
    flex: 1;
    padding: 0 32px;
}

.stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-suffix {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--accent);
}

.stat-label {
    display: block;
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 8px;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 48px;
    background: var(--mid-gray);
    flex-shrink: 0;
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 16px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 17px;
    color: var(--text-gray);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-cta {
    text-align: center;
    margin-top: 48px;
}

/* ===== SERVICES GRID ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    padding: 0;
    overflow: hidden;
    background: var(--off-white);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: block;
    border: 1px solid transparent;
}

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

.service-icon {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: block;
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover .service-icon img {
    transform: scale(1.06);
}

.service-content {
    padding: 28px 28px 32px;
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.service-card p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 16px;
}

.service-arrow {
    font-size: 18px;
    color: var(--text-dark);
    opacity: 0;
    transition: var(--transition);
}

.service-card:hover .service-arrow {
    opacity: 1;
}

/* ===== LAYOUT TYPE GRIDS (Kitchen & Wardrobe sub-grids) ===== */
.layout-types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.layout-type-card {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: var(--transition);
}

.layout-type-card:hover {
    background: var(--white);
    border-color: var(--text-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ===== ON-SITE STRIP (HOMEPAGE) ===== */
.on-site-strip {
    background: var(--text-dark);
    padding: 80px 0;
}

.on-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 24px;
}

.live-dot-home {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

.on-site-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 8px;
}

.on-site-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.5px;
}

.on-site-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.on-site-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}

.on-site-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}

.on-site-card-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.on-site-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    display: block;
}

.on-site-card-body {
    padding: 18px 20px;
}

.on-site-card-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 6px;
}

.on-site-card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--white);
    margin-bottom: 2px;
}

.on-site-card-location {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 12px;
}

.on-site-progress-bar {
    background: rgba(255,255,255,0.1);
    border-radius: 100px;
    height: 3px;
    margin-bottom: 5px;
}

.on-site-progress-fill {
    height: 3px;
    border-radius: 100px;
    background: var(--accent);
}

.on-site-progress-label {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
}

.on-site-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: rgba(255,255,255,0.35);
    font-size: 14px;
}

/* ===== PORTFOLIO PREVIEW ===== */
.portfolio-showcase {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

.portfolio-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
}

.portfolio-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.portfolio-image {
    width: 100%;
    height: 100%;
    min-height: 290px;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.portfolio-large .portfolio-image {
    min-height: 596px;
}

.portfolio-item:hover .portfolio-image {
    transform: scale(1.04);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 28px 28px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%);
    color: var(--white);
    opacity: 0;
    transition: var(--transition);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-category {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    opacity: 0.75;
    margin-bottom: 6px;
}

.portfolio-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 12px;
}

.portfolio-large .portfolio-overlay h3 {
    font-size: 26px;
}

.portfolio-context {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 8px;
    margin-top: 0;
}

.portfolio-focus {
    font-size: 12.5px;
    font-style: italic;
    opacity: 0.7;
    margin-bottom: 16px;
    margin-top: 0;
}

.portfolio-link {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
}

/* ===== PORTFOLIO PROOF STRIP ===== */
.portfolio-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 40px;
    padding: 32px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.proof-item {
    padding: 0 28px;
    border-right: 1px solid var(--border);
}

.proof-item:first-child {
    padding-left: 0;
}

.proof-item:last-child {
    padding-right: 0;
    border-right: none;
}

.proof-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.4;
}

.proof-body {
    display: block;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-gray);
}

/* ===== PROCESS ===== */
.process-grid {
    display: flex;
    align-items: flex-start;
    gap: 0;
    justify-content: center;
}

.process-step {
    flex: 1;
    text-align: center;
    padding: 0 24px;
}

.process-number {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 20px;
}

.process-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.process-step p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
}

.process-connector {
    width: 60px;
    height: 1px;
    background: var(--mid-gray);
    flex-shrink: 0;
    margin-top: 28px;
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
    background: var(--off-white);
}

.testimonials-slider {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-card {
    flex: 0 0 100%;
    padding: 48px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.testimonial-stars {
    color: var(--accent);
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 28px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--text-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.testimonial-author strong {
    display: block;
    font-size: 15px;
    color: var(--text-dark);
}

.testimonial-author span {
    font-size: 13px;
    color: var(--text-gray);
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
}

.testimonial-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mid-gray);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-dark);
}

.testimonial-btn:hover {
    background: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.testimonial-dots {
    display: flex;
    gap: 8px;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mid-gray);
    cursor: pointer;
    transition: var(--transition);
}

.testimonial-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}

/* ===== CTA SECTION ===== */
.cta-section {
    background: var(--text-dark);
    color: var(--white);
    text-align: center;
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

.cta-content p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 36px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

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

.cta-section .btn-primary {
    background: var(--white);
    color: var(--text-dark);
}

.cta-section .btn-primary:hover {
    background: var(--off-white);
}

.cta-section .btn-ghost {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.25);
}

.cta-section .btn-ghost:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

/* CTA eyebrow — overrides .cta-content p (0,2,1 > 0,1,1) */
.cta-content p.cta-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    max-width: none;
}

/* Divider rule between studio voice / client voice / action */
.cta-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 36px 0;
}

/* Testimonial blockquote inside CTA */
.cta-quote {
    margin: 0 auto;
    padding: 0;
    max-width: 580px;
}

/* Overrides .cta-content p — equal specificity, later rule wins */
.cta-quote p {
    font-size: 17px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: none;
}

.cta-quote footer {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    font-style: normal;
    margin-bottom: 0;
}

/* ===== FOOTER ===== */
.footer {
    padding: 80px 0 0;
    background: var(--off-white);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    display: inline-flex;
    align-items: baseline;
    margin-bottom: 16px;
}

.footer-tagline {
    font-size: 15px;
    color: var(--text-gray);
    margin-bottom: 4px;
    line-height: 1.6;
}

.footer-since {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 24px;
}

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

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mid-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-medium);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.footer-links h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.footer-links a {
    display: block;
    font-size: 14px;
    color: var(--text-gray);
    padding: 6px 0;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--text-dark);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-top: 1px solid var(--border);
}

.footer-bottom p {
    font-size: 13px;
    color: var(--text-gray);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: 13px;
    color: var(--text-gray);
}

.footer-bottom-links a:hover {
    color: var(--text-dark);
}

/* ===== ANIMATIONS ===== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===== PAGE HERO (for inner pages) ===== */
.page-hero {
    padding: 160px 24px 80px;
    text-align: center;
    background: var(--off-white);
}

/* Inner-page hero eyebrow: accent, matching .hero-eyebrow and
   .section-eyebrow. It was grey, so every inner page disagreed with the
   homepage on the same element. */
.page-hero .hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 16px;
}

.page-hero .hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.page-hero .hero-subtitle {
    font-size: 17px;
    color: var(--text-gray);
    max-width: 560px;
    margin: 0 auto;
}

/* ===== FORM STYLES ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid var(--mid-gray);
    border-radius: var(--radius-sm);
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-gray);
}

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

/* ===== RADIO / CHECKBOX CARDS ===== */
.option-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.option-card {
    padding: 16px 20px;
    border: 1px solid var(--mid-gray);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.option-card:hover {
    border-color: var(--text-dark);
}

.option-card.selected {
    border-color: var(--text-dark);
    background: var(--off-white);
}

.option-card input {
    display: none;
}

.option-card .option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.option-card .option-desc {
    font-size: 12px;
    color: var(--text-gray);
    margin-top: 4px;
}

/* ===== SUCCESS OVERLAY ===== */
.success-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.success-overlay.active {
    display: flex;
}

.success-content {
    padding: 48px;
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--text-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
}

.success-content h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 12px;
}

.success-content p {
    color: var(--text-gray);
    font-size: 16px;
    margin-bottom: 28px;
}

/* ===== ENGAGEMENT MODELS (Design-Only vs Design + Execution) ===== */
.engagement-models {
    background: var(--off-white);
}

.engagement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 16px;
}

.engagement-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 44px 40px 40px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.engagement-card:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.engagement-card-featured {
    background: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.engagement-card-featured:hover {
    background: var(--text-dark);
    border-color: var(--text-dark);
}

.engagement-badge {
    position: absolute;
    top: -14px;
    left: 40px;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

.engagement-card-header {
    margin-bottom: 28px;
}

.engagement-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 14px;
}

.engagement-card-featured .engagement-tag {
    color: rgba(255, 255, 255, 0.65);
}

.engagement-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 12px;
}

.engagement-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-gray);
}

.engagement-card-featured .engagement-sub {
    color: rgba(255, 255, 255, 0.75);
}

.engagement-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.engagement-card-featured .engagement-list {
    border-color: rgba(255, 255, 255, 0.12);
}

.engagement-list li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-medium);
}

.engagement-card-featured .engagement-list li {
    color: rgba(255, 255, 255, 0.85);
}

.engagement-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    width: 14px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
}

.engagement-card-featured .engagement-list li::before {
    background: rgba(255, 255, 255, 0.8);
}

.engagement-meta {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.engagement-meta p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-gray);
}

.engagement-card-featured .engagement-meta p {
    color: rgba(255, 255, 255, 0.7);
}

.engagement-meta strong {
    color: var(--text-dark);
    font-weight: 600;
}

.engagement-card-featured .engagement-meta strong {
    color: var(--white);
}

/* Replaces .engagement-meta — "for" and "outcome" paragraphs */
.engagement-for {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-gray);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.engagement-card-featured .engagement-for {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
}

.engagement-outcome {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-gray);
    font-style: italic;
    margin-bottom: 28px;
    margin-top: 4px;
}

.engagement-card-featured .engagement-outcome {
    color: rgba(255, 255, 255, 0.7);
}

.engagement-cta {
    margin-top: auto;
    align-self: flex-start;
}

.engagement-card-featured .engagement-cta.btn-primary {
    background: var(--white);
    color: var(--text-dark);
}

.engagement-card-featured .engagement-cta.btn-primary:hover {
    background: var(--light-gray);
}

.engagement-footnote {
    text-align: center;
    margin-top: 40px;
    font-size: 14.5px;
    color: var(--text-gray);
}

.engagement-footnote a {
    color: var(--text-dark);
    font-weight: 500;
    border-bottom: 1px solid var(--text-dark);
    padding-bottom: 1px;
}

.engagement-footnote a:hover {
    opacity: 0.7;
}

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

    .engagement-card {
        padding: 40px 28px 32px;
    }

    .engagement-badge {
        left: 28px;
    }

    .engagement-title {
        font-size: 24px;
    }
}

/* ===== Offers Strip (Homepage low-friction entry tiles) ===== */
.offers-strip { background: var(--white); }
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.offer-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 28px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition);
}
.offer-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--text-dark);
}
.offer-tile-price {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--text-dark);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 100px;
    margin-bottom: 4px;
}
.offer-tile-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
}
.offer-tile-sub {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}
.offer-tile-cta {
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-dark);
}

@media (max-width: 900px) {
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .offer-tile {
        padding: 28px 24px;
    }
}

@media (max-width: 900px) {
    .portfolio-showcase {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .portfolio-large {
        grid-column: auto;
        grid-row: auto;
    }

    .portfolio-large .portfolio-image {
        min-height: 360px;
    }

    .portfolio-image {
        min-height: 260px;
    }

    /* Always show overlay on touch devices */
    .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.78) 100%);
    }

    .portfolio-proof-strip {
        grid-template-columns: 1fr 1fr;
        gap: 24px 0;
        padding: 28px 0;
    }

    .proof-item {
        padding: 0 20px 0 0;
        border-right: none;
    }

    .proof-item:nth-child(odd) {
        padding-right: 20px;
        border-right: 1px solid var(--border);
    }

    .proof-item:nth-child(even) {
        padding-left: 20px;
        padding-right: 0;
    }
}

@media (max-width: 540px) {
    .portfolio-proof-strip {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .proof-item {
        padding: 0 !important;
        border-right: none !important;
    }
}

/* ============================================
   WHATSAPP COMPONENTS
   ============================================ */


/* Nav icon */
.nav-wa {
    display: flex;
    align-items: center;
    line-height: 1;
    transition: opacity 0.2s;
}

.nav-wa:hover {
    opacity: 0.7;
}

.nav-wa::after {
    display: none !important;
}

/* Homepage CTA WhatsApp button — brand rule: no green anywhere, CTAs stay dark */
.btn-wa {
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-wa:hover {
    background: var(--text-dark);
    color: #fff;
}

/* ============================================
   MOBILE BOTTOM CTA STRIP
   ============================================ */

.mobile-cta-strip {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    /* Push page content above the strip */
    body:not(.contact-page) {
        padding-bottom: 60px;
    }

    .mobile-cta-strip {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #1A1A1A;
        z-index: 998;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        /* iPhone safe area (home indicator) */
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;
    }

    .mobile-cta-strip.strip-visible {
        transform: translateY(0);
    }

    /* Hide strip entirely on contact page */
    .contact-page .mobile-cta-strip {
        display: none !important;
    }

    .mobile-cta-strip a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #1A1A1A;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        line-height: 1;
        height: 60px;
    }

    .mobile-cta-strip .strip-call {
        background-color: #FFFFFF;
        color: #1A1A1A;
        border: 1.5px solid #1A1A1A;
        box-sizing: border-box;
    }

    .mobile-cta-strip .strip-call:hover,
    .mobile-cta-strip .strip-call:active {
        background-color: #1A1A1A;
        color: #FFFFFF;
    }

    .mobile-cta-strip .strip-wa {
        background-color: #FFFFFF;
        color: #1A1A1A;
        border: 1.5px solid #1A1A1A;
        box-sizing: border-box;
    }

    .mobile-cta-strip .strip-wa:hover,
    .mobile-cta-strip .strip-wa:active {
        background-color: #1A1A1A;
        color: #FFFFFF;
    }

    /* Keep SVG icons visible on white background; invert on hover */
    .mobile-cta-strip .strip-call svg,
    .mobile-cta-strip .strip-wa svg {
        fill: #1A1A1A;
    }

    .mobile-cta-strip .strip-call:hover svg,
    .mobile-cta-strip .strip-call:active svg,
    .mobile-cta-strip .strip-wa:hover svg,
    .mobile-cta-strip .strip-wa:active svg {
        fill: #FFFFFF;
    }

}