/* CSS Core Resets & Architectural Theme Engine */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --color-accent: #BBCB2E;
            --color-bg: #FFFFFF;
            --color-dark: #000000;
            --color-neutral-warm: #FBF9F6;
            --font-main: 'Google Sans', sans-serif;
            --transition-luxury: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            --transition-snap: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body {
            background-color: var(--color-bg);
            color: var(--color-dark);
            font-family: var(--font-main);
            overflow-x: hidden;
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
        }

        /* Typography System */
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        p {
            font-size: 1.05rem;
            color: rgba(0,0,0,0.75);
        }

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

        img {
            width: 100%;
            display: block;
            object-fit: cover;
        }

        button {
            font-family: var(--font-main);
            background: none;
            border: none;
            cursor: pointer;
            outline: none;
        }

        /* Premium Components */
        .btn-luxury {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1.2rem 2.8rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background-color: var(--color-accent);
            color: var(--color-bg);
            transition: var(--transition-luxury);
        }

        .btn-luxury:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(187, 203, 46, 0.3);
        }

        .btn-luxury.dark {
            background-color: var(--color-dark);
            color: var(--color-bg);
        }

        .btn-luxury.dark:hover {
            background-color: var(--color-accent);
            box-shadow: 0 15px 30px rgba(187, 203, 46, 0.2);
        }

        /* Global Header Architecture */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: var(--color-bg);
            padding: 2rem 4rem;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--transition-luxury);
            border-bottom: 1px solid rgba(0,0,0,0.03);
        }

        header.shrunk {
            padding: 1rem 4rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.03);
        }

        header .logo {
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        header nav {
            display: flex;
            gap: 2.5rem;
        }

        header nav a {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            position: relative;
            padding: 0.5rem 0;
        }

        header nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--color-accent);
            transition: var(--transition-snap);
        }

        header nav a:hover::after, header nav a.active::after {
            width: 100%;
        }

        header .right-actions {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        header .contact-email {
            font-size: 0.9rem;
            font-weight: 700;
            opacity: 0.6;
        }

        /* Responsive Mobile Hamburger Menu */
        .hamburger-icon {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger-icon span {
            width: 25px;
            height: 2px;
            background-color: var(--color-dark);
            transition: var(--transition-snap);
        }

        .mobile-nav-panel {
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100vh;
            background-color: var(--color-bg);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 4rem;
            gap: 2rem;
            transition: var(--transition-luxury);
        }

        .mobile-nav-panel.active {
            left: 0;
        }

        .mobile-nav-panel a {
            font-size: 2.5rem;
            font-weight: 700;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding-bottom: 0.5rem;
        }

        /* App Main Engine Template Context */
        main {
            margin-top: 0;
        }

        section {
            position: relative;
            padding: 8rem 4rem;
            overflow: hidden;
        }

        /* SECTION 1 — Immersive Cinemagraph Hero */
    /* Hero container */
#hero-cinematic {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Video — full background */
.video-fixed-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:50%;
  z-index: 1;
}

.video-fixed-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right-side PNG image — sits ON TOP of video */
.hero-image-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%; /* adjust as needed */
  height: 100%;
  z-index: 2;
  pointer-events: none; /* allows clicks to pass through to content */
}

.hero-image-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9; /* optional: blend with video */
  mix-blend-mode: overlay; /* optional: cinematic blend effect */
}

/* Content overlay — stays on top */
.hero-editorial-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 4rem;
}

.hero-left {
  max-width: 700px;
  color: #fff454;
}

.hero-left h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.btn-luxury {
  background: transparent;
  border: 2px solid #fff650;
  color: #fff650;
  padding: 0.9rem 2.4rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
}

.btn-luxury:hover {
  background: #fff;
}

.scroll-indicator-luxury {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mobile: image at top or hidden */
@media (max-width: 768px) {
  .hero-image-right {
    width: 100%;
    height: 40%;
    top: 0;
    right: 0;
  }

  .hero-image-right img {
    object-fit: cover;
  }

  .hero-editorial-overlay {
    align-items: flex-end;
    padding-bottom: 4rem;
  }

  .hero-left h1 {
    font-size: 2.2rem;
  }
}

        /* SECTION 2 — Editorial Story Wall (150vh) */
        #story-wall {
            height: 150vh;
            background: url('https://diversewebsitedesign.com.au/wp-content/uploads/2023/03/wave-1.png') center center no-repeat;
            background-size: cover;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: center;
        }

        .story-left-composition {
            position: relative;
            height: 80%;
        }

        .layered-img {
            position: absolute;
            border-radius: 24px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.12);
        }

        .li-1 { width: 75%; height: 60%; top: 0; left: 0; z-index: 1; }
        .li-2 { width: 65%; height: 55%; bottom: 5%; right: 0; z-index: 2; border: 10px solid var(--color-bg); }

        .story-right-magazine {
            padding-right: 4rem;
        }

        .story-right-magazine h2 {
            font-size: 3.5rem;
            margin-bottom: 2.5rem;
        }

        .story-right-magazine p {
            font-size: 1.15rem;
            margin-bottom: 2rem;
            text-align: justify;
        }

        /* SECTION 3 — Portfolio Gallery Architecture */
        .portfolio-grid-structure {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            margin-top: 4rem;
        }

        .project-card-editorial {
            cursor: pointer;
        }

        .project-img-wrapper {
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            height: 400px;
        }

        .project-img-wrapper img {
            height: 100%;
            transition: var(--transition-luxury);
        }

        .project-card-editorial:hover .project-img-wrapper img {
            transform: scale(1.06);
        }

        /* SECTION 4 — Draggable Client Voices */
        .glass-testimonial-track {
            display: flex;
            gap: 2.5rem;
            overflow-x: auto;
            padding: 3rem 0;
            scrollbar-width: none;
        }

        .glass-testimonial-track::-webkit-scrollbar { display: none; }

        .glass-testimonial-card {
            flex: 0 0 450px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 3rem;
            border-radius: 24px;
            color: var(--color-bg);
            transition: var(--transition-snap);
        }

        .glass-testimonial-card:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-5px);
        }

        /* SECTION 5 — Expandable Dropdowns Layout */
        .accordion-editorial-wrapper {
            margin-top: 4rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .accordion-item-luxury {
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 1.5rem;
        }

        .accordion-trigger {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: left;
        }

        .accordion-content-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 4rem;
        }

        .accordion-content-panel img {
            border-radius: 16px;
            height: 200px;
        }

        /* SECTION 6 — Consultation & Stateful Registration Lounge */
        .split-consultation-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 6rem;
            align-items: center;
        }

        .luxury-subscription-card {
            background-color: var(--color-neutral-warm);
            padding: 4.5rem;
            border-radius: 32px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.04);
        }

        .editorial-field-wrap {
            margin-bottom: 1.5rem;
        }

        .editorial-field-wrap input {
            width: 100%;
            padding: 1.2rem;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 12px;
            font-family: var(--font-main);
            outline: none;
            font-size: 1rem;
            transition: var(--transition-snap);
        }

        .editorial-field-wrap input:focus {
            border-color: var(--color-accent);
        }

        .state-notice-box {
            margin-top: 1.5rem;
            padding: 1rem;
            border-radius: 8px;
            font-weight: 700;
            display: none;
        }

        /* SECTION 8 — Interactive Before/After Split Slider */
        .before-after-container {
            position: relative;
            width: 100%;
            height: 600px;
            border-radius: 24px;
            overflow: hidden;
            user-select: none;
        }

        .ba-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .ba-image img { width: 100%; height: 100%; object-fit: cover; }

        .ba-resize-layer {
            width: 50%;
            z-index: 2;
            overflow: hidden;
        }

        .ba-handle {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background-color: var(--color-accent);
            cursor: ew-resize;
            z-index: 3;
        }

        .ba-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: var(--color-accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-bg);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* SECTION 9 — Materials Library Structural Masonry */
        .materials-masonry-layout {
            columns: 3 300px;
            column-gap: 2.5rem;
            margin-top: 4rem;
        }

        .material-sample-node {
            break-inside: avoid;
            background-color: var(--color-neutral-warm);
            padding: 1.5rem;
            border-radius: 20px;
            margin-bottom: 2.5rem;
            transition: var(--transition-luxury);
        }

        .material-sample-node img {
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        /* SECTION 10 — Linear Architectural Process Blocks */
        .architectural-process-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2rem;
            margin-top: 4rem;
            position: relative;
        }

        .process-block-card {
            background-color: var(--color-bg);
            border-top: 4px solid var(--color-dark);
            padding-top: 1.5rem;
        }

        .process-block-card:hover {
            border-top-color: var(--color-accent);
        }

        /* Inner Page Generic Elements */
        .inner-magazine-hero {
            padding: 12rem 4rem 6rem 4rem;
            background-color: var(--color-neutral-warm);
            border-bottom: 1px solid rgba(0,0,0,0.03);
        }

        .inner-magazine-hero h1 {
            font-size: 4.5rem;
            max-width: 1000px;
        }

        .inner-magazine-body {
            padding: 6rem 4rem;
        }

        /* Global Footer Paradigm */
        footer {
            background-color: var(--color-dark);
            color: var(--color-bg);
            padding: 8rem 4rem 4rem 4rem;
        }

        .footer-grid-four-col {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4rem;
            margin-bottom: 6rem;
        }

        .footer-column-node h4 {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 2rem;
            color: var(--color-accent);
        }

        .footer-column-node ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .footer-column-node ul a {
            opacity: 0.6;
            font-size: 0.95rem;
        }

        .footer-column-node ul a:hover {
            opacity: 1;
            color: var(--color-accent);
        }

        .footer-base-row {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            opacity: 0.5;
        }

        /* Responsive Adaptive Layout Breakpoints */
        @media (max-width: 1200px) {
            header nav, header .contact-email { display: none; }
            .hamburger-icon { display: flex; }
            #story-wall, .split-consultation-grid, .hero-editorial-overlay { grid-template-columns: 1fr; }
            #story-wall { height: auto; padding: 6rem 2rem; }
            .story-left-composition { height: 500px; margin-bottom: 4rem; }
            .portfolio-grid-structure, .architectural-process-grid, .footer-grid-four-col { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            header { padding: 1.5rem 2rem; }
            header.shrunk { padding: 1rem 2rem; }
            section, .inner-magazine-hero, .inner-magazine-body { padding: 4rem 2rem; }
            .hero-left h1 { font-size: 3rem; }
            .portfolio-grid-structure, .architectural-process-grid, .footer-grid-four-col { grid-template-columns: 1fr; }
            .luxury-subscription-card { padding: 2rem; }
            .accordion-content-panel { grid-template-columns: 1fr; }
        }

        /* Footer form enhancements */
#footer-email-input:focus,
#footer-unsubscribe-email:focus {
  border-color: var(--color-accent) !important;
  background: rgba(255,255,255,0.1) !important;
  box-shadow: 0 0 20px rgba(187, 203, 46, 0.05);
}

#footer-subscribe-form button:hover,
#footer-unsubscribe-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(187, 203, 46, 0.15);
}

#footer-subscribe-form button:hover {
  background: #d4e04a;
}

#footer-unsubscribe-form button:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

#footer-subscribe-feedback,
#footer-unsubscribe-feedback {
  animation: fadeIn 0.3s ease;
}

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

/* Mobile responsiveness */
@media (max-width: 768px) {
  #footer-unsubscribe-form .footer-unsubscribe-row {
    flex-direction: column;
  }
  
  #footer-unsubscribe-form button {
    width: 100%;
  }
}