/*
 * CormackCoreWeb 2.0 - Main Stylesheet
 * Author: Charlie - Cormack Advertising
 */

/* =============================================
   Reset & Base Styles
   ============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "degular", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(16px, 1vw + 11px, 18px);
    line-height: 1.33;
    color: #FFFFFF;
    background-color: #0A2B33;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* =============================================
   Layout
   ============================================= */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 38px);
}

/* =============================================
   Typography Utilities
   ============================================= */
.text-accent {
    color: #BAF0FF;
}

.text-accent-light {
    color: #C5F1FB;
}

.text-dark {
    color: #0F3640;
}

/* =============================================
   Smooth Scroll
   ============================================= */
html {
    scroll-behavior: smooth;
}

/* =============================================
   Header Styles
   ============================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    background: #0A2B33;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
    background: rgba(10, 43, 51, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
}

.site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.site-logo .logo-icon {
    width: 32px;
    height: 32px;
}

.site-logo .logo-icon--dark {
    display: none;
}

.theme-light .site-logo .logo-icon {
    display: none;
}

.theme-light .site-logo .logo-icon--dark {
    display: block;
}

.main-nav {
    flex: 1;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.nav-menu li a {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #BAF0FF;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item a {
    opacity: 0.7;
}

.header-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    background: #315C52;
    border-radius: 10px;
    color: #BAF0FF;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.header-contact-btn:hover {
    background: #48636B;
    opacity: 1;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: #BAF0FF;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Header spacer to prevent content from hiding under fixed header */
body {
    padding-top: 52px;
}

/* =============================================
   Page Hero
   ============================================= */
.page-hero {
    padding: 0;
    text-align: center;
}

.page-hero > .container {
    border-bottom: none;
    padding-bottom: 0;
}

.page-hero > .container > hr {
    border: none;
    height: 1px;
    background: #FFFFFF;
    margin: 0;
}

.page-hero > .container > hr:first-child {
    margin-bottom: 100px;
}

.page-hero > .container > hr:last-child {
    margin-top: 100px;
}

.page-hero + section {
    padding-top: 50px;
}

.page-hero-inner {
    max-width: 1600px;
    margin: 10px auto;
}

.page-hero-title {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(30px, 3.2vw, 45px);
    line-height: 1.09;
    color: #C5F1FB;
    margin-bottom: 24px;
}

.page-hero-desc {
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
}

/* =============================================
   Section Title
   ============================================= */
.section-title {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2vw + 16px, 45px);
    line-height: 1.09;
    color: #C5F1FB;
    text-align: center;
    margin-bottom: 24px;
}

/* =============================================
   Hero Section
   ============================================= */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0A2B33;
    padding-bottom: 35px;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1400px;
    width: 100%;
    margin: 10px auto;
}

.hero-content hr {
    border: none;
    height: 1px;
    background: #FFFFFF;
    margin: 0;
}

.hero-content hr:first-child {
    margin-bottom: 100px;
}

.hero-content hr:last-child {
    margin-top: 100px;
}

.hero-animated-logo {
    max-width: 400px;
    margin: 0 auto 40px;
}

.hero-tagline {
    max-width: 650px;
    margin: 0 auto 24px;
    font-size: 18px;
    line-height: 1.33;
}

.hero-cta-label {
    font-weight: 500;
    color: #BAF0FF;
    letter-spacing: 0.05em;
}

/* =============================================
   Tiles Section (Stats + Welcome merged)
   ============================================= */
.tiles-section {
    padding: 5px 0;
    padding-bottom: 35%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: clamp(16px, 3vw, 38px);
    padding-right: clamp(16px, 3vw, 38px);
    background-image: url(../images/main/tiles-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}

.tiles-grid > * {
    border: 1px solid #FFFFFF !important;
}

/* Row 1: 20 / 20 / 30 / 20 / 10 = 100% (4/4/6/4/2 = 20 cols) */
.tile-r1-1 { grid-column: 1 / 5; grid-row: 1; }
.tile-r1-2 { grid-column: 5 / 9; grid-row: 1; }
.tile-r1-3 { grid-column: 9 / 15; grid-row: 1; }
.tile-r1-4 { grid-column: 15 / 19; grid-row: 1; }
.tile-r1-5 { grid-column: 19 / 21; grid-row: 1; }

/* Row 2: 10 / 40 / 25 / 25 = 100% (2/8/5/5 = 20 cols) */
.tile-r2-1 { grid-column: 1 / 3; grid-row: 2; }
.tile-r2-2 { grid-column: 3 / 11; grid-row: 2; }
.tile-r2-3 { grid-column: 11 / 16; grid-row: 2; }
.tile-r2-4 { grid-column: 16 / 21; grid-row: 2; }

/* ---- Reusable Tile Headline Sizes (fluid scaling) ---- */
.tile-heading--md {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1em;
    color: #0F3640;
}

.tile-heading--lg {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2.3vw, 33px);
    line-height: 1em;
    color: #0F3640;
}

.tile-heading--xl {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(44px, 6vw + 15px, 110px);
    line-height: 1;
    color: #0F3640;
}

/* ---- Row 1, Tile 1: Highlight ("Powering Property...") ---- */
#home-r1-t1 {
    background: #C7F1FC;
    border: none;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
}

/* ---- Row 1, Tile 2: Stat ("03 mins") ---- */
#home-r1-t2 {
    background: #FBF9F4;
    border: none;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
}

#home-r1-t2 .tile-number {
    font-family: "degular", sans-serif;
    font-size: clamp(56px, 5.5vw + 20px, 116px);
    font-weight: 400;
    line-height: 0.34;
    color: #0F3640;
}

#home-r1-t2 .tile-unit {
    font-family: "degular", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 29px;
    margin-left: 4px;
    color: #0F3640;
}

#home-r1-t2 .tile-title {
    font-family: "degular", sans-serif;
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 8px;
}

#home-r1-t2 .tile-desc {
    font-family: "degular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

/* ---- Row 1, Tile 3: Innovation Arc ---- */
#home-r1-t3 {
    background: #C8E2DA;
    border: none;
    border-radius: 10px;
    padding: 24px;
    padding-bottom: 10% !important;
    padding-top: 10% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
}

#home-r1-t3 .tile-icon {
    order: -1;
    margin-top: 0;
    padding-bottom: 5%;
}

#home-r1-t3 .tile-title {
    margin-bottom: 8px;
}

#home-r1-t3 .tile-desc {
    font-family: "degular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

/* ---- Row 1, Tile 4: Sustainable ---- */
#home-r1-t4 {
    background: #EEECE7;
    border: none;
    border-radius: 10px;
    padding: 24px;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
}

#home-r1-t4 .tile-title--large {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.07;
    color: #0F3640;
    padding-bottom: 5% !important;
}

#home-r1-t4 .tile-desc {
    font-family: "degular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

#home-r1-t4 .tile-icon {
    margin-top: auto;
}

#home-r1-t4 .tile-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 9.3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

#home-r1-t4 .tile-icon-badge img {
    width: 34px;
    height: 34px;
}

/* ---- Row 1, Tile 5: Image ---- */
#home-r1-t5 {
    border: none;
    border-radius: 10px;
    padding: 0;
    position: relative;
    min-height: 180px;
    overflow: hidden;
}

#home-r1-t5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* ---- Row 2, Tile 1: Sq Ft ---- */
#home-r2-t1 {
    background: #0C3649;
    border: none;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    gap: 8px;
    min-height: 180px;
    overflow: hidden;
    color: #FFFFFF;
}

#home-r2-t1 .tile-sqft-label,
#home-r2-t1 .tile-sqft-number {
    writing-mode: vertical-lr;
    transform: rotate(360deg);
    white-space: nowrap;
}

#home-r2-t1 .tile-sqft-label {
    font-family: "degular", sans-serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 500;
    line-height: 29px;
    color: #FFFFFF;
}

#home-r2-t1 .tile-sqft-number {
    font-family: "degular", sans-serif;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 29px;
    color: #C7F1FC;
}

/* ---- Row 2, Tile 2: Welcome ---- */
#home-r2-t2 {
    background: linear-gradient(270deg, #BCF0FE 0%, #F7F5EB 100%);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
}

#home-r2-t2 .tile-welcome-content {
    flex: 1;
}

#home-r2-t2 .tile-welcome-content h2 {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.0;
    color: #0F3640;
    margin-bottom: 16px;
}

#home-r2-t2 .tile-welcome-content p {
    margin-bottom: 16px;
    font-size: 15px;
}

#home-r2-t2 .tile-welcome-content .link-arrow {
    color: #0F3640;
}

#home-r2-t2 .tile-welcome-image {
    flex-shrink: 0;
}

#home-r2-t2 .tile-welcome-image img {
    max-width: 150px;
    height: auto;
}

/* ---- Row 2, Tile 3: Image ---- */
#home-r2-t3 {
    border: none;
    border-radius: 10px;
    padding: 0;
    position: relative;
    min-height: 180px;
    overflow: hidden;
}

#home-r2-t3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* ---- Row 2, Tile 4: Power ---- */
#home-r2-t4 {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    overflow: hidden;
    color: #0F3640;
    position: relative;
}

#home-r2-t4 .tile-power-label {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: 39px;
    line-height: 39px;
    color: #0F3640;
}

#home-r2-t4 .tile-icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
    margin-top: 0;
}

#home-r2-t4 .tile-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 9.3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

#home-r2-t4 .tile-icon-badge img {
    width: 34px;
    height: 34px;
}

/* =============================================
   Link Arrow Component
   ============================================= */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #BAF0FF;
    font-size: 15px;
}

.link-arrow span {
    transition: transform 0.2s ease;
}

.link-arrow:hover {
    opacity: 1;
}

.link-arrow:hover span {
    transform: translateX(4px);
}

/* =============================================
   Introduction Section
   ============================================= */
.introduction-section {
    padding: 100px;
    text-align: center;
}

.intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.intro-content p {
    opacity: 0.9;
}

/* =============================================
   Accommodation Preview (Tile-based)
   ============================================= */
.accommodation-preview {
    padding: 5px 0;
}

.accommodation-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}

/* Siteplan tile — spans all rows on the left */
#home-accom-plan {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    background: linear-gradient(270deg, #BEF0FE 0%, rgba(61, 76, 64, 0) 100%);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#home-accom-plan img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Accommodation info tile — top right */
#home-accom-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background: rgba(197, 241, 251, 1);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
    color: #0F3640;
}

#home-accom-info h3 {
    font-family: "degular-display", sans-serif;
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 500;
    line-height: 1.0;
    color: #0F3640;
    margin-bottom: 16px;
}

#home-accom-info .link-arrow {
    color: #0F3640;
}

/* Table tile — middle right */
#home-accom-table {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: rgba(232, 242, 217, 0.1);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spec Table */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.spec-table th,
.spec-table td {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-table th {
    font-weight: 500;
    color: #BAF0FF;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spec-table td {
    color: #FFFFFF;
}

.spec-table-total td {
    font-weight: 700;
    border-top: 1px solid #BAF0FF;
    border-bottom: none;
}

/* Sqft callout tile — bottom right */
#home-accom-sqft {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background: rgba(251, 249, 244, 1);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
    text-align: center;
    color: #0F3640;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sqft-big {
    font-family: "degular-display", sans-serif;
    font-size: clamp(44px, 6vw + 15px, 120px);
    font-weight: 400;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    color: #0F3640;
}

#home-accom-sqft p {
    color: #0F3640;
    font-size: clamp(18px, 1.8vw, 25px);
}

/* =============================================
   High Spec Image Section
   ============================================= */
.high-spec-image-section {
    padding: 5px 0;
}

.high-spec-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.high-spec-image img.img-rounded {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.high-spec-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 30px;
}

.high-spec-image-title {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2vw + 12px, 45px);
    line-height: 1.09;
    color: #0B3325;
}

.high-spec-image-icon {
    flex-shrink: 0;
}

.high-spec-image-icon img {
    width: 48px;
    height: 48px;
}

/* =============================================
   High Spec Section
   ============================================= */
.high-spec-section {
    padding: 5px 0 50px 0;
}

.high-spec-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 10px;
}

.high-spec-left {
    display: flex;
}

.high-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.spec-feature-card {
    background: #ADB4B85C;
    border: 1px solid rgba(202, 202, 202, 1);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    color: #C5F1FB;
}

.spec-feature-title {
    font-weight: 500;
    margin-bottom: 16px;
}

.spec-feature-icon {
    display: flex;
    justify-content: flex-end;
}

.spec-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
}

.spec-icon-badge img {
    width: 34px;
    height: 34px;
}

.spec-feature-card--wide {
    background: linear-gradient(90deg, #C5F1FB 0%, #F7F5EB 100%);
    border: 1px solid rgba(202, 202, 202, 1);
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
}

.spec-feature-card--wide-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spec-feature-card--wide h3 {
    font-family: "degular-display", sans-serif;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.0;
    color: #0B3325;
    margin-bottom: 16px;
    font-weight: 500;
}

.spec-feature-card--wide p {
    font-size: 15px;
    color: #0B3325;
    opacity: 0.85;
    margin-bottom: 16px;
}

.spec-feature-card--wide .link-arrow {
    color: #0B3325;
    font-weight: 500;
}

.spec-feature-card--wide-image {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-left: 45px;
    width: 250px;
}

.spec-feature-card--wide-image img {
    width: 100%;
    height: auto;
    animation: drone-hover 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes drone-hover {
    0%   { transform: translateY(15px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    25%  { transform: translateY(-10px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    50%  { transform: translateY(-35px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    75%  { transform: translateY(-10px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    100% { transform: translateY(15px); }
}

/* =============================================
   Sustainability Preview
   ============================================= */
.sustainability-preview {
    background: #C7E2DB;
    padding: 60px 0;
    border-radius: 12px;
    margin: 5px 0;
}

.sustainability-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.sustainability-header h2 {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2vw + 16px, 45px);
    line-height: 1.09;
    color: #0B3325;
}

.sustainability-header-icon img {
    width: 80px;
    height: 80px;
}

.sustainability-grid {
    display: grid;
    grid-template-columns: 40fr 30fr 30fr 30fr;
    gap: 10px;
}

.sust-tile {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(202, 202, 202, 1);
}

.sust-tile--text {
    background: #FBF9F4;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sust-tile--text p {
    font-size: 15px;
    color: #0B3325;
    line-height: 1.5;
    margin-bottom: 24px;
}

.sust-tile--text .link-arrow {
    color: #0B3325;
    font-weight: 500;
    margin-top: auto;
}

.sust-tile--image {
    position: relative;
    min-height: 280px;
}

.sust-tile--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sust-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    pointer-events: none;
}

.sust-tile-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

/* =============================================
   Location Preview
   ============================================= */
.location-preview {
    background: linear-gradient(180deg, #C5F1FB 0%, #F7F5EB 100%);
    padding: 60px 0;
    border-radius: 12px;
    margin: 5px 0 50px 0;
}

.location-header {
    text-align: center;
    margin-bottom: 40px;
}

.location-header h2 {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2vw + 16px, 45px);
    line-height: 1.09;
    color: #0B3325;
    margin-bottom: 24px;
}

.location-header p {
    max-width: 750px;
    margin: 0 auto 16px;
    color: #0B3325;
    opacity: 0.9;
    font-size: 16px;
    line-height: 1.5;
}

.location-header .link-arrow {
    color: #0B3325;
    font-weight: 500;
}

.location-grid {
    display: grid;
    grid-template-columns: 70fr 30fr;
    grid-template-rows: auto auto;
    gap: 10px;
}

.loc-tile {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(202, 202, 202, 1);
}

.loc-tile--map {
    grid-row: 1 / 3;
    min-height: 400px;
}

.loc-tile--map iframe,
.loc-tile--map .cormack-map,
.loc-tile--map > div {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 10px;
}

.loc-tile--video {
    position: relative;
    min-height: 200px;
}

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

.loc-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    pointer-events: none;
}

.loc-tile-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.loc-tile--stat {
    background: #FBF9F4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.loc-stat-number {
    font-family: "degular-display", sans-serif;
    font-size: clamp(56px, 5.5vw + 20px, 116px);
    font-weight: 400;
    line-height: 1;
    display: block;
    color: #0F3640;
}

.loc-stat-label {
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1vw + 12px, 29px);
    line-height: 1.2;
    text-align: center;
    color: #0F3640;
    margin-top: 8px;
}

.loc-tile--text {
    grid-column: 1 / -1;
    background: #FBF9F4;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.loc-tile--text p {
    font-size: 15px;
    color: #0B3325;
    line-height: 1.5;
    flex: 1;
}

.loc-tile--text .link-arrow {
    color: #0B3325;
    font-weight: 500;
    white-space: nowrap;
}

/* =============================================
   Button Styles
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 10px;
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-primary {
    background: #315C52;
    color: #BAF0FF;
}

.btn-primary:hover {
    background: #48636B;
    opacity: 1;
    transform: translateY(-1px);
}

/* =============================================
   Footer Styles
   ============================================= */
.site-footer {
    padding: 60px 0 0;
    background: #0E1516;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.footer-heading h2 {
    font-family: "degular-display", sans-serif;
    font-size: clamp(28px, 2vw + 18px, 50px);
    line-height: 1.09;
    color: #C5F1FB;
    margin-bottom: 16px;
}

.footer-heading p {
    color: #C5F1FB;
    opacity: 0.9;
}

.scroll-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    background: #48636B;
    border-radius: 50%;
    color: #BAF0FF;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.scroll-to-top:hover {
    background: #315C52;
    opacity: 1;
}

.footer-divider {
    display: none;
}

.footer-agents {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-agents-left {
    display: flex;
    gap: 0;
}

.agent-column {
    display: flex;
    flex-direction: column;
    padding-right: 40px;
}

.agent-column + .agent-column {
    padding-left: 40px;
    padding-right: 0;
    border-left: 2px solid #BAF0FF;
}

.agent-logo {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 24px;
    align-self: flex-start;
}

.agent-cards-row {
    display: flex;
    gap: 40px;
}

.agent-card {
    font-size: 18px;
    line-height: 1.33;
    margin-bottom: 16px;
}

.agent-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.agent-card a {
    opacity: 0.83;
}

.agent-card a:hover {
    opacity: 1;
    color: #BAF0FF;
}

.footer-agents-right {
    text-align: right;
}

.developed-by-label {
    color: #C5F1FB;
    margin-bottom: 16px;
}

.developer-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #BAF0FF;
}

.developer-logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-credit {
    font-size: 14px;
    opacity: 0.74;
}

.footer-credit a {
    color: #FFFFFF;
}

.footer-credit a:hover {
    opacity: 1;
    color: #BAF0FF;
}

/* Footer Branding Bar */
.footer-branding {
    padding: 40px 0;
}

.footer-branding > .container {
    padding-top: 40px;
}

.footer-logo-full {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================
   Full Width Image Section
   ============================================= */
.fullwidth-image {
    width: 100%;
    overflow: hidden;
}

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

/* =============================================
   Feature Grid (Accommodation Page)
   ============================================= */
.accom-bg-wrap {
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: clamp(350px, 50vw, 700px);
}

.features-grid-section {
    padding: 5px 0 50px 0;
}

.features-grid--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 0;
}

.feature-card {
    background: rgba(173, 180, 184, 0.36);
    border: 1px solid rgba(202, 202, 202, 1);
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
}

.feature-card-title {
    font-weight: 500;
    font-size: clamp(15px, 1.3vw, 18px);
    color: #BAF0FF;
    line-height: 1.3;
}

.feature-card-icon {
    margin-top: auto;
    align-self: flex-end;
}

.feature-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-badge img {
    width: 34px;
    height: 34px;
}

/* =============================================
   Travel Tables (Location Page)
   ============================================= */
.travel-section {
    padding: 5px 0;
}

.travel-tile {
    border: 1px solid rgba(202, 202, 202, 1);
    border-radius: 12px;
    overflow: hidden;
}

.travel-tile--tables {
    background: linear-gradient(270deg, #BCF0FE 0%, #F7F5EB 100%);
    padding: clamp(30px, 4vw, 50px) clamp(20px, 3vw, 40px);
}

.travel-tile--map {
    min-height: 700px;
    border: none;
}

.travel-tile--map .cgm-map {
    height: 100% !important;
    min-height: 700px;
}

.cgm-map {
    border-radius: 12px !important;
    border: none !important;
}

.travel-grid {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: 10px;
    align-items: stretch;
}

.travel-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 15px;
    table-layout: fixed;
}

.travel-table:last-child {
    margin-bottom: 0;
}

.travel-table th:first-child,
.travel-table td:first-child {
    width: 50%;
}

.travel-table th:nth-child(2),
.travel-table td:nth-child(2) {
    width: 25%;
}

.travel-table th:nth-child(3),
.travel-table td:nth-child(3) {
    width: 25%;
}

.travel-table th,
.travel-table td {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.travel-table td[colspan] {
    text-align: right;
    font-size: 13px;
}

.travel-table th {
    font-weight: 500;
    color: #BAF0FF;
}

.travel-table--light th,
.travel-table--light td {
    color: #0C2C34;
    border-bottom: 1px solid rgba(12, 44, 52, 0.15);
}

.travel-table--light th {
    color: #0C2C34;
    font-weight: 600;
}

.travel-table--light th:nth-child(n+2),
.travel-table--light td:nth-child(n+2) {
    text-align: right;
}

/* =============================================
   Cluster Grid (Location Page)
   ============================================= */
.cluster-section {
    padding: 5px 0 50px 0;
}

.cluster-header {
    text-align: center;
    margin: 100px;
}

.cluster-header h2 {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2vw + 16px, 45px);
    line-height: 1.09;
    color: #C5F1FB;
    margin-bottom: 24px;
}

.cluster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.cluster-card {
    padding: clamp(20px, 2vw, 30px);
    display: flex;
    flex-direction: column;
}

.cluster-card h3 {
    font-size: clamp(20px, 1.8vw, 27px);
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 16px;
    color: #BAF0FF;
}

.cluster-card p {
    font-size: 15px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.cluster-stat {
    font-family: "degular-display", sans-serif;
    font-size: clamp(44px, 4.5vw + 14px, 94px);
    font-weight: 400;
    line-height: 1;
    color: #0F3640;
    display: block;
    margin-top: auto;
}

.cluster-stat-label {
    font-size: 15px;
    color: #FFFFFF;
    opacity: 0.7;
}

.cluster-card--illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cluster-card--illustration img {
    width: 100%;
    max-width: 240px;
    height: auto;
}

.cluster-card.cluster-card--image {
    padding: 0;
    background-size: cover !important;
    background-position: center center !important;
    min-height: 250px;
    border-radius: 12px;
    overflow: hidden;
}

.cluster-card-icon {
    margin-top: auto;
}

.cluster-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cluster-icon-badge img {
    width: 34px;
    height: 34px;
}

/* =============================================
   Bento Grid (Sustainability Page)
   ============================================= */
.sustainability-bento {
    padding: 5px 0;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 10px;
}

.bento-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.bento-card--text {
    background: rgba(173, 180, 184, 0.36);
    border: 1px solid #0C3649;
    padding: clamp(20px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bento-card--text h3 {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.15;
    color: #BAF0FF;
    margin-top: auto;
}

.bento-card--stat {
    background: #FBF9F4;
    border: 1px solid #0C3649;
    padding: clamp(20px, 2.5vw, 30px);
    color: #0F3640;
    display: flex;
    flex-direction: column;
}

.bento-card--image {
    position: relative;
    border: 1px solid #0C3649;
}

.bento-card--image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.bento-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(20px, 2.5vw, 30px);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    z-index: 1;
    border-radius: 0 0 12px 12px;
}

.bento-card-overlay .bento-title {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2vw, 30px);
    color: #FFFFFF;
    line-height: 1.15;
}

.bento-card-overlay p {
    color: #FFFFFF;
    font-size: 15px;
}

.bento-title {
    font-weight: 500;
    font-size: 18px;
}

.bento-subtitle {
    font-size: 15px;
    opacity: 0.7;
    color: #FFFFFF;
}

.bento-stat-number {
    font-family: "degular-display", sans-serif;
    font-size: clamp(44px, 4.5vw + 14px, 94px);
    font-weight: 400;
    line-height: 1;
    color: #0F3640;
    display: block;
    margin-top: auto;
    margin-bottom: 8px;
}

.bento-stat-label {
    font-weight: 500;
    font-size: 15px;
    color: #0F3640;
}

.bento-stat-sub {
    font-size: 15px;
    opacity: 0.7;
    color: #0F3640;
}

.bento-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bento-icon-badge img {
    width: 34px;
    height: 34px;
}

.bento-icon {
    margin-top: auto;
}

/* Sustainability bento card variants */
.bento-card--green {
    background: #C8E2DA;
    border: 1px solid #0C3649;
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card--blue {
    background: #BAF0FF;
    border: 1px solid #0C3649;
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card--dark {
    background: #0C3649;
    border: 1px solid #0C3649;
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card--dark h3,
.bento-card--dark p {
    color: #FFFFFF;
}

.bento-card--green h3,
.bento-card--green p {
    color: #0C3649;
}

.bento-heading {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    line-height: 1;
    margin-top: auto;
}

.bento-heading--lg {
    font-size: clamp(28px, 3vw, 43px);
}

.bento-heading--md {
    font-size: clamp(20px, 2vw, 29px);
    color: #0F3640;
}

.bento-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(16px, 2vw, 24px);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    border-radius: 0 0 12px 12px;
    z-index: 2;
}

.bento-text-overlay p {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 29px);
    line-height: 1;
    color: #FFFFFF;
}

.bento-badge--top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.bento-badge--bottom-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.bento-stat-lg {
    font-family: "degular-display", sans-serif;
    font-weight: 300;
    font-size: clamp(60px, 7vw, 102px);
    line-height: 1;
    color: #FFFFFF;
    margin-bottom: clamp(16px, 2vw, 24px);
}

.bento-desc-white {
    font-family: "degular-display", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 29px);
    line-height: 29px;
    color: #FFFFFF;
}

.bento-icon-standalone {
    position: absolute;
    bottom: clamp(16px, 2vw, 24px);
    right: clamp(16px, 2vw, 24px);
    width: clamp(50px, 5vw, 80px);
    height: auto;
}

/* =============================================
   Card & Component Defaults
   ============================================= */
.card {
    background: rgba(173, 180, 184, 0.36);
    border: 1px solid #CACACA;
    border-radius: 10px;
}

.card--light {
    background: #FBF9F4;
    border-color: #FFFFFF;
}

.img-rounded {
    border-radius: 10px;
}

/* =============================================
   Cambridge Images Section
   ============================================= */
.cambridge-images-section {
    padding: 5px 0;
}

.cambridge-grid {
    display: grid;
    grid-template-columns: 65fr 35fr;
    grid-template-rows: auto 1fr;
    gap: 10px;
}

.cambridge-photo--large {
    grid-row: 1 / 3;
}

.cambridge-photo--large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cambridge-photo--small img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cambridge-stat-card {
    background: #FBF9F4;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #0F3640;
}

.cambridge-stat-number {
    font-family: "degular-display", sans-serif;
    font-size: clamp(56px, 5.5vw + 20px, 116px);
    font-weight: 400;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

/* =============================================
   Arc Section (Location Page)
   ============================================= */
.arc-section {
    padding: 5px 0;
}

.arc-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: clamp(400px, 45vw, 650px);
    display: flex;
    align-items: flex-start;
    border: 1px solid rgba(202, 202, 202, 0.25);
}

.arc-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 21, 22, 0.75) 0%, rgba(14, 21, 22, 0.3) 50%, transparent 100%);
    z-index: 1;
}

.arc-tile-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    padding: clamp(30px, 4vw, 60px);
}

.arc-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.arc-icons img {
    max-width: 45%;
    height: auto;
    display: block;
}

.arc-tile-content h2 {
    font-family: "degular-display", sans-serif;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
}

.arc-tile-content p {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    opacity: 0.9;
}

/* =============================================
   Development Section (Accommodation Page)
   ============================================= */
.development-section {
    padding: 5px 0;
}

.development-tile {
    background: linear-gradient(270deg, #BEF0FE 0%, rgba(61, 76, 64, 0) 100%);
    border: 1px solid #CACACA;
    border-radius: 12px;
    padding: clamp(30px, 4vw, 60px);
    overflow: hidden;
}

.development-grid {
    display: grid;
    grid-template-columns: 0.35fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.development-text {
    padding-top: 30%;
}

.development-text h3 {
    font-family: "degular-display", sans-serif;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 500;
    line-height: 1.0;
    color: #C5F1FB;
    margin-bottom: 24px;
}

.development-text p {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    opacity: 0.9;
}

.development-plan img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.floorplans-section {
    padding: 5px 0;
}

.floorplans-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
}

.fp-tile {
    border: 1px solid rgba(202, 202, 202, 1);
    border-radius: 10px;
    overflow: hidden;
}

.fp-tile--elevations {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    background: #EEECE8;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-tile--elevations img {
    width: 100%;
    height: auto;
}

.fp-tile--table {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background: #E8F2D91A;
    padding: clamp(16px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-table--light th {
    color: #BAF0FF;
}

.fp-tile--brochure {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: #BAF0FF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    font-family: "degular", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0B3325;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.fp-tile--brochure:hover {
    opacity: 0.85;
}

.fp-tile--photo {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-size: cover;
    background-position: center center;
    min-height: 200px;
}

/* =============================================
   Responsive Breakpoints
   ============================================= */
@media (max-width: 1024px) {
    .tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tile-r1-1, .tile-r1-2, .tile-r1-3, .tile-r1-4, .tile-r1-5,
    .tile-r2-1, .tile-r2-2, .tile-r2-3, .tile-r2-4 {
        grid-column: auto;
        grid-row: auto;
    }

    #home-r2-t2 {
        grid-column: span 2;
    }

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

    .accommodation-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    #home-accom-plan {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #home-accom-info {
        grid-column: auto;
        grid-row: auto;
    }

    #home-accom-table {
        grid-column: auto;
        grid-row: auto;
    }

    #home-accom-sqft {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .development-grid {
        grid-template-columns: 1fr 1fr;
    }

    .floorplans-grid,
    .travel-grid {
        grid-template-columns: 1fr;
    }

    .travel-map {
        min-height: 400px;
    }

    .fp-tile--elevations,
    .fp-tile--table,
    .fp-tile--brochure,
    .fp-tile--photo {
        grid-column: auto;
        grid-row: auto;
    }

    .fp-tile--photo {
        min-height: 250px;
    }

    .location-grid,
    .cambridge-grid {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

    .high-spec-layout {
        grid-template-columns: 1fr;
    }

    .sustainability-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sust-tile--text {
        grid-column: 1 / -1;
    }

    .loc-tile--map {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .spec-feature-card--wide-image {
        width: 180px;
    }

    .footer-agents {
        flex-direction: column;
    }

    .footer-agents-right {
        text-align: left;
    }

    .developer-logos {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 0;
    }

    .page-hero > .container {
        padding-bottom: 0;
    }

    .page-hero > .container > hr:first-child {
        margin-bottom: 20px;
    }

    .page-hero > .container > hr:last-child {
        margin-top: 20px;
    }

    /* Card-style sections: reduce internal padding on mobile */
    .sustainability-preview,
    .location-preview {
        padding: 30px 0;
    }

    .introduction-section {
        padding: 40px;
    }

    .cluster-header {
        margin: 40px;
    }

    /* Last sections: keep 50px bottom on mobile */
    .cluster-section {
        padding: 5px 0 50px 0;
    }

    .site-footer {
        padding: 40px 0 0;
    }

    .accommodation-grid {
        grid-template-columns: 1fr;
    }

    #home-accom-plan,
    #home-accom-info,
    #home-accom-table,
    #home-accom-sqft {
        grid-column: auto;
        grid-row: auto;
    }

    #home-accom-plan {
        padding: 16px;
    }

    #home-accom-info,
    #home-accom-table,
    #home-accom-sqft {
        padding: 20px;
    }

    .spec-table th,
    .spec-table td {
        padding: 6px 10px;
    }

    .development-grid {
        grid-template-columns: 1fr;
    }

    .development-tile {
        padding: clamp(20px, 3vw, 40px);
    }

    /* Mobile Nav - reorder: logo left, hamburger center, envelope right */
    .header-inner {
        justify-content: space-between;
    }

    .site-logo {
        order: 1;
    }

    .menu-toggle {
        display: flex;
        order: 2;
    }

    .header-contact-btn {
        order: 3;
    }

    .main-nav {
        position: fixed;
        top: 52px;
        left: 0;
        width: 100%;
        background: #0A2B33;
        border-bottom: 1px solid #CACACA;
        padding: 24px 20px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        z-index: 998;
    }

    .main-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }

    .nav-menu li a {
        font-size: 18px;
        display: block;
        padding: 8px 0;
    }

    .tiles-grid {
        grid-template-columns: 1fr;
    }

    #home-r2-t2 {
        grid-column: auto;
        flex-direction: column;
    }

    .location-grid,
    .cambridge-grid {
        grid-template-columns: 1fr;
    }

    .cluster-grid {
        grid-template-columns: 1fr;
    }

    .features-grid--4col {
        grid-template-columns: 1fr;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .high-spec-grid {
        grid-template-columns: 1fr 1fr;
    }

    .spec-feature-card--wide {
        flex-direction: column;
    }

    .spec-feature-card--wide-image {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
    }

    .sustainability-grid {
        grid-template-columns: 1fr;
    }

    .sustainability-header {
        flex-direction: column;
        gap: 16px;
    }

    .loc-tile--map {
        grid-row: auto;
        min-height: 300px;
    }

    .footer-agents-left {
        flex-direction: column;
        gap: 30px;
    }

    .agent-column + .agent-column {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid #BAF0FF;
        padding-top: 30px;
    }

    .agent-cards-row {
        flex-direction: column;
        gap: 16px;
    }

}

@media (max-width: 480px) {
    .power-number {
        font-size: 36px;
    }
}

/* =============================================
   Sustainability Page - Light Theme Overrides
   ============================================= */
.theme-light {
    background: #E7FAFF;
}

.theme-light .site-header {
    background: #E7FAFF;
}

.theme-light .site-header.scrolled {
    background: rgba(231, 250, 255, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.theme-light .nav-menu li a {
    color: #0C2C34;
}

.theme-light .header-contact-btn {
    background: #0C2C34;
}

.theme-light .header-contact-btn:hover {
    background: #1a4a56;
}

.theme-light .menu-toggle .hamburger-line {
    background: #0C2C34;
}

.theme-light .page-hero {
    background: #E7FAFF;
}

.theme-light .page-hero > .container > hr {
    background: #0C2C34;
}

.theme-light .page-hero-title {
    color: #0C2C34;
}

.theme-light .page-hero-desc {
    color: #0C2C34;
}

/* Sustainability footer override */
.theme-light .site-footer {
    background: #0E1516;
}

@media (max-width: 768px) {
    .theme-light .main-nav {
        background: #E7FAFF;
    }

    .theme-light .main-nav .nav-menu li a {
        color: #0C2C34;
    }
}

/* =============================================
   Animations - Fade In on Scroll
   ============================================= */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Staggered tile reveal - hide children from initial paint */
.tiles-grid > *,
.accommodation-grid > *,
.high-spec-grid > *,
.sustainability-grid > *,
.cluster-grid > *,
.features-grid--4col > *,
.floorplans-grid > *,
.cambridge-grid > *,
.bento-grid > * {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
}

.tile-reveal {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.tile-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Icon badge hover pop */
.bento-icon-badge,
.cluster-icon-badge,
.feature-icon-badge,
.spec-icon-badge,
.tile-icon-badge {
    transition: transform 0.25s ease;
}

.bento-icon-badge:hover,
.cluster-icon-badge:hover,
.feature-icon-badge:hover,
.spec-icon-badge:hover,
.tile-icon-badge:hover {
    transform: scale(1.15);
}

/* =============================================
   Focus States - Accessibility
   ============================================= */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #BAF0FF;
    outline-offset: 2px;
}

.theme-light a:focus-visible,
.theme-light button:focus-visible {
    outline-color: #0C2C34;
}

.header-contact-btn:focus-visible {
    opacity: 1;
}

/* =============================================
   Sustainability Bento - Responsive
   ============================================= */

/* Tablet landscape */
@media (max-width: 1024px) {
    .sustainability-bento .bento-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Reset all inline grid positions */
    .sustainability-bento .bento-grid > div {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Nested grids stay as grid but stack to single column */
    .sustainability-bento .bento-grid > div[style*="display: grid"] {
        grid-template-columns: 1fr 1fr !important;
        aspect-ratio: auto !important;
    }

    /* Row 3 full-width container: 3 cols -> 2 cols */
    .sustainability-bento .bento-grid > div[style*="grid-column: 1 / -1"] {
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        aspect-ratio: auto !important;
    }

    .bento-stat-lg {
        font-size: clamp(48px, 6vw, 72px);
    }

    .bento-heading--lg {
        font-size: clamp(24px, 2.5vw, 36px);
    }
}

/* Tablet portrait / large mobile */
@media (max-width: 768px) {
    .sustainability-bento .bento-grid {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }

    /* All child divs become full width, reset inline styles */
    .sustainability-bento .bento-grid > div {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: auto !important;
        width: 100%;
    }

    /* Nested grids: stack tiles in single column */
    .sustainability-bento .bento-grid > div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* Row 3 container also stacks */
    .sustainability-bento .bento-grid > div[style*="grid-column: 1 / -1"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        aspect-ratio: auto !important;
    }

    /* Ensure content tiles have enough height */
    .sustainability-bento .bento-card {
        min-height: 200px;
    }

    .sustainability-bento .bento-card--green,
    .sustainability-bento .bento-card--blue,
    .sustainability-bento .bento-card--dark {
        min-height: 180px;
        padding: 20px;
    }

    /* Image tiles need good height for visibility */
    .sustainability-bento .bento-card--image {
        min-height: 220px;
    }

    /* Trees card (was spanning 2 rows) needs defined height on mobile */
    .sustainability-bento .bento-card--image[style*="grid-row: 1 / 3"] {
        min-height: 300px;
    }

    /* Scale down large stat numbers */
    .sustainability-bento .bento-stat-lg {
        font-size: 60px;
    }

    .sustainability-bento .bento-stat-number {
        font-size: clamp(40px, 10vw, 60px);
    }

    /* Scale headings */
    .sustainability-bento .bento-heading--lg {
        font-size: clamp(24px, 6vw, 34px);
    }

    .sustainability-bento .bento-heading--md {
        font-size: clamp(18px, 4.5vw, 24px);
    }

    .sustainability-bento .bento-desc-white {
        font-size: clamp(16px, 4.5vw, 22px);
        line-height: 1.2;
    }

    .sustainability-bento .bento-text-overlay p {
        font-size: clamp(16px, 4.5vw, 22px);
    }

    /* Icon standalone - keep visible */
    .sustainability-bento .bento-icon-standalone {
        width: clamp(40px, 10vw, 60px);
        bottom: 16px;
        right: 16px;
    }

    /* Icon badges slightly smaller */
    .sustainability-bento .bento-icon-badge {
        width: 44px;
        height: 44px;
    }

    .sustainability-bento .bento-icon-badge img {
        width: 22px;
        height: 22px;
    }

    /* Trees card inner content */
    .sustainability-bento .bento-card--image > div[style*="inset: 0"] img[style*="width: 70%"] {
        width: 50% !important;
    }

    /* LED beacon icon */
    .sustainability-bento img[style*="width: clamp(80px"] {
        width: clamp(50px, 12vw, 80px) !important;
        margin-bottom: 12px !important;
    }

    /* Water icon */
    .sustainability-bento .bento-card--green img[style*="width: 100%"][style*="margin-top: auto"] {
        max-height: 60px;
        width: auto !important;
        object-fit: contain;
    }

    /* Fullwidth image section */
    .sustainability-fullwidth div[style*="aspect-ratio"] {
        aspect-ratio: 16 / 9 !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .sustainability-bento .bento-card {
        min-height: 170px;
    }

    .sustainability-bento .bento-card--green,
    .sustainability-bento .bento-card--blue,
    .sustainability-bento .bento-card--dark {
        min-height: 160px;
        padding: 16px;
    }

    .sustainability-bento .bento-card--image {
        min-height: 180px;
    }

    .sustainability-bento .bento-stat-lg {
        font-size: 48px;
        margin-bottom: 12px;
    }

    .sustainability-bento .bento-stat-number {
        font-size: 36px;
    }

    .sustainability-bento .bento-heading--lg {
        font-size: 22px;
    }

    .sustainability-bento .bento-heading--md {
        font-size: 17px;
    }

    .sustainability-bento .bento-desc-white {
        font-size: 16px;
    }

    .sustainability-bento .bento-text-overlay p {
        font-size: 16px;
    }

    .sustainability-bento .bento-icon-badge {
        width: 38px;
        height: 38px;
    }

    .sustainability-bento .bento-icon-badge img {
        width: 19px;
        height: 19px;
    }

    .sustainability-bento .bento-icon-standalone {
        width: 36px;
        bottom: 12px;
        right: 12px;
    }

    /* Fullwidth image - taller on small screens */
    .sustainability-fullwidth div[style*="aspect-ratio"] {
        aspect-ratio: 4 / 3 !important;
    }

    /* Stat sub text */
    .sustainability-bento .bento-stat-sub {
        font-size: 13px;
    }
}