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

  /* Eliminate inline-image baseline gap that breaks tight grid layouts */
  img, picture { display: block; max-width: 100%; }

  :root {
    --ink: #1c1a16;
    --ink-light: #3a3630;
    --cream: #f5f0e8;
    --cream-dark: #ede8df;
    --gold: #b8963e;
    --gold-light: #d4af6a;
    --gold-pale: #f0e6cc;
    --warm-gray: #8c8680;
    --white: #fdfaf5;
    --nav-h: 80px;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', system-ui, sans-serif;
  }

  html { scroll-behavior: smooth; }
  body { font-family: var(--sans); background: var(--white); color: var(--ink); font-weight: 300; line-height: 1.7; overflow-x: hidden; }
  body.contact-page { background: var(--ink); }

  /* Skip to content — visible on keyboard focus only */
  .skip-link {
    position: absolute; top: -40px; left: 8px;
    background: var(--gold); color: var(--ink);
    padding: 10px 16px; font-size: 13px; font-weight: 500;
    text-decoration: none; letter-spacing: 0.05em;
    z-index: 10000; transition: top 0.2s;
  }
  .skip-link:focus { top: 8px; outline: 2px solid var(--ink); outline-offset: 2px; }

  
  /* Portfolio facade — single architectural elevation drawing */
  .page-hero-visual.facade {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(245,240,232,0.015);
    min-height: 380px;
  }
  .page-hero-visual.facade::before { display: none; }
  .page-hero-visual.facade .facade-svg {
    width: 100%;
    height: 100%;
    max-height: 360px;
    color: rgba(245,240,232,0.72);
    transition: color 0.5s ease;
  }
  .page-hero-visual.facade:hover .facade-svg { color: rgba(245,240,232,0.92); }
  .page-hero-visual.facade .phv-label {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold);
    font-weight: 500;
  }

  /* Projects collage — 4 overlapping SVG tiles */
  .page-hero-visual.collage {
    position: relative;
    display: block;
    background: transparent;
    min-height: 400px;
    margin-bottom: 60px;
  }
  .page-hero-visual.collage::before { display: none; }
  .collage-tile {
    position: absolute;
    background: rgba(245,240,232,0.018);
    border: 1px solid rgba(184,150,62,0.28);
    overflow: hidden;
    padding: 14px;
    transition: transform 0.5s ease, border-color 0.4s ease, background 0.4s ease;
  }
  .collage-tile svg {
    display: block; width: 100%; height: 100%;
    color: rgba(245,240,232,0.7);
    transition: color 0.4s ease;
  }
  .collage-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(184,150,62,0.55);
    background: rgba(245,240,232,0.035);
    z-index: 5;
  }
  .collage-tile:hover svg { color: rgba(245,240,232,0.95); }
  .collage-tile-label {
    position: absolute;
    bottom: 10px; left: 12px;
    font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold);
    font-weight: 500;
  }
  /* Asymmetric overlapping arrangement */
  .collage-tile-1 { top: 0;    left: 0;   width: 44%; height: 50%; z-index: 2; }
  .collage-tile-2 { top: 6%;   right: 0;  width: 50%; height: 42%; z-index: 1; }
  .collage-tile-3 { bottom: 0; left: 8%;  width: 50%; height: 42%; z-index: 1; }
  .collage-tile-4 { bottom: 6%;right: 0;  width: 42%; height: 50%; z-index: 2; }


  /* Projects scenery — single stylised landscape image (cropped, ~2/3 of original height) */
  .page-hero-visual.scenery {
    position: relative;
    display: block;
    background: #1c1a16;
    overflow: hidden;
    align-self: start;
    height: 260px;
    min-height: 0;
    margin-top: 24px;
  }
  .page-hero-visual.scenery::before { display: none; }
  .page-hero-visual.scenery img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.86) contrast(1.06) saturate(0.78);
    transition: filter 0.6s ease, transform 1.2s ease;
  }
  .page-hero-visual.scenery:hover img { filter: brightness(0.96) contrast(1.04) saturate(0.9); transform: scale(1.02); }
  .page-hero-visual.scenery::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(135deg, rgba(184,150,62,0.10) 0%, transparent 45%, rgba(28,26,22,0.35) 100%),
      linear-gradient(to bottom, transparent 55%, rgba(28,26,22,0.55) 100%);
    pointer-events: none;
  }
  .page-hero-visual.scenery .phv-label {
    z-index: 2;
    bottom: 14px; left: 16px;
  }
  /* picture must fill the fixed-height scenery cell so object-fit:cover crops correctly */
  .page-hero-visual.scenery picture { height: 100%; }

/* ═══════════════════ COMPACT PAGE HEADER ═══════════════════ */
.page-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,240,232,0.55);
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(184,150,62,0.18);
}
.page-meta a {
  color: rgba(245,240,232,0.55); text-decoration: none; cursor: pointer;
  transition: color 0.2s;
}
.page-meta a:hover { color: var(--gold); }
.page-meta .sep { color: rgba(245,240,232,0.3); }
.page-meta .dot { color: rgba(245,240,232,0.3); padding: 0 4px; }
.page-meta .current { color: rgba(245,240,232,0.85); }
.page-meta .page-eyebrow { color: var(--gold); font-weight: 500; }
@media (max-width: 480px) {
  .page-meta { font-size: 10px; gap: 6px; }
  .page-meta .dot { padding: 0 2px; }
}

/* ═══════════════════ NAVIGATION ═══════════════════ */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--nav-h); display: flex; align-items: center;
    padding: 0 60px; background: var(--ink);
    border-bottom: 1px solid rgba(184,150,62,0.2);
    transition: background 0.3s;
  }
  .nav-logo {
    font-family: var(--serif); font-weight: 500; font-size: 22px;
    color: var(--cream); letter-spacing: 0.03em; cursor: pointer;
    display: flex; align-items: baseline; gap: 8px; text-decoration: none; flex-shrink: 0;
  }
  .nav-logo span { color: var(--gold); font-size: 11px; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; }
  .nav-links { display: flex; gap: 36px; margin-left: auto; list-style: none; }
  .nav-links a {
    color: rgba(245,240,232,0.7); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none; font-weight: 400;
    cursor: pointer; padding-bottom: 2px;
    border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }

  /* ═══════════════════ PAGES ═══════════════════ */
  main { padding-top: var(--nav-h); min-height: 100vh; animation: fadeIn 0.4s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* ═══════════════════ HERO ═══════════════════ */
  .hero {
    min-height: calc(100vh - var(--nav-h)); background: var(--ink);
    display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden;
  }
  .hero-left {
    padding: 100px 60px 80px; display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2;
  }
  .hero-tag {
    position: absolute; top: 40px; left: 60px; z-index: 3;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold); margin: 0; display: flex; align-items: center; gap: 14px;
  }
  .hero-tag::before { content: ''; display: block; width: 40px; height: 1px; background: var(--gold); }
  .hero h1 { font-family: var(--serif); font-size: clamp(44px,5vw,72px); font-weight: 300; color: var(--cream); line-height: 1.1; margin-bottom: 28px; }
  .hero h1 em { color: var(--gold); font-style: italic; }
  .hero-sub { color: rgba(245,240,232,0.6); font-size: 15px; line-height: 1.8; max-width: 400px; margin-bottom: 52px; font-weight: 300; }
  .hero-actions { display: flex; gap: 20px; align-items: center; }
  .btn-primary {
    background: var(--gold); color: var(--ink); padding: 14px 32px;
    font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; border: none;
    cursor: pointer; font-family: var(--sans); font-weight: 500; transition: all 0.2s;
  }
  .btn-primary:hover { background: var(--gold-light); }
  .btn-ghost {
    background: transparent; color: var(--cream); padding: 14px 32px;
    font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
    border: 1px solid rgba(245,240,232,0.3); cursor: pointer; font-family: var(--sans);
    font-weight: 400; transition: all 0.2s;
  }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
  .hero-right {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #2a2620 0%, #1c1a16 100%);
  }
  .hero-img-grid { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0.7; }
  .hero-img-cell { background: linear-gradient(160deg, #3a3530 0%, #252220 100%); position: relative; overflow: hidden; }
  .hero-img-cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(184,150,62,0.08) 0%, transparent 60%); }
  .hero-img-cell:nth-child(1) { background: linear-gradient(145deg, #2e2925, #1a1816); }
  .hero-img-cell:nth-child(2) { background: linear-gradient(145deg, #252220, #2a2720); }
  .hero-img-cell:nth-child(3) { background: linear-gradient(145deg, #221f1c, #2d2a26); }
  .hero-img-cell:nth-child(4) { background: linear-gradient(145deg, #2b2825, #1e1c19); }
  .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--ink) 0%, transparent 30%); z-index: 1; }
  .hero-stats { display: flex; gap: 0; border-top: 1px solid rgba(184,150,62,0.2); margin-top: 60px; padding-top: 40px; }
  .hero-stat { flex: 1; padding-right: 28px; border-right: 1px solid rgba(245,240,232,0.1); margin-right: 28px; }
  .hero-stat:last-child { border-right: none; }
  .hero-stat-num { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; color: var(--gold); line-height: 1; margin-bottom: 6px; }
  .hero-stat-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,232,0.5); }

  /* ═══════════════════ SECTIONS ═══════════════════ */
  section { padding: 100px 60px; }
  .section-dark { background: var(--ink); color: var(--cream); }
  .section-cream { background: var(--cream); }
  .section-white { background: var(--white); }

  .section-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
  .section-tag::before { content: ''; display: block; width: 40px; height: 1px; background: var(--gold); }
  .section-title { font-family: var(--serif); font-size: clamp(32px,4vw,52px); font-weight: 300; line-height: 1.15; margin-bottom: 24px; }
  .section-subtitle { font-size: 15px; color: var(--warm-gray); max-width: 600px; line-height: 1.8; margin-bottom: 60px; }
  .section-dark .section-subtitle { color: rgba(245,240,232,0.55); }
  .section-dark .section-title { color: var(--cream); }

  .divider { width: 60px; height: 1px; background: var(--gold); margin: 28px 0; }

  /* ═══════════════════ INTRO SPLIT ═══════════════════ */
  .intro-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .intro-visual {
    aspect-ratio: 3/4; background: var(--ink);
    position: relative; overflow: hidden;
  }
  .intro-visual::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, #2a2620 40%, #3a3020 100%);
  }
  .intro-visual-label {
    position: absolute; bottom: 24px; left: 24px; right: 24px;
    background: rgba(28,26,22,0.85); border: 1px solid rgba(184,150,62,0.3);
    padding: 20px 24px; backdrop-filter: blur(4px); z-index: 2;
  }
  .intro-visual-label p { font-size: 13px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
  .intro-visual-label strong { font-family: var(--serif); color: var(--cream); font-weight: 400; font-size: 18px; }

  /* Photographic 2x2 grid inside the intro-visual */
  .intro-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--ink); }
  .intro-grid-cell { position: relative; overflow: hidden; }
  /* picture must fill the absolutely-positioned grid cell for img height:100% to resolve */
  .intro-grid-cell picture { height: 100%; }
  .intro-grid-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; filter: brightness(0.92) contrast(1.02); }
  .intro-grid-cell:hover img { transform: scale(1.04); }
  .intro-grid-cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%); pointer-events: none; }
  .intro-grid-label { position: absolute; bottom: 12px; left: 14px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); z-index: 1; font-weight: 500; }

  /* Legal pages — clean prose styling */
  .legal-content { max-width: 820px; margin: 0 auto; }
  .legal-content h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); margin: 44px 0 14px; line-height: 1.3; }
  .legal-content h2:first-child { margin-top: 0; }
  .legal-content p { font-size: 15px; color: var(--warm-gray); line-height: 1.85; margin-bottom: 18px; }
  .legal-content ul { margin: 0 0 22px 1.4em; padding: 0; }
  .legal-content li { font-size: 15px; color: var(--warm-gray); line-height: 1.8; margin-bottom: 8px; }
  .legal-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
  .legal-content a:hover { color: var(--gold); }
  .legal-content strong { color: var(--ink); font-weight: 500; }

  /* Arch decorative shapes */
  .arch-shape {
    position: absolute; top: 10%; right: 10%;
    width: 60%; aspect-ratio: 1/1.8;
    border: 1px solid rgba(184,150,62,0.15);
    border-radius: 50% 50% 0 0;
  }

  /* ═══════════════════ SERVICE CARDS ═══════════════════ */
  .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .service-card {
    background: var(--cream-dark); padding: 48px 36px; position: relative; overflow: hidden;
    transition: all 0.3s; cursor: pointer;
  }
  .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--gold); transition: height 0.4s; }
  .service-card:hover::before { height: 100%; }
  .service-card:hover { background: var(--ink); }
  .service-card:hover .sc-title { color: var(--cream); }
  .service-card:hover .sc-text { color: rgba(245,240,232,0.6); }
  .service-card:hover .sc-num { color: rgba(184,150,62,0.3); }
  .sc-num { font-family: var(--serif); font-size: 72px; font-weight: 300; color: rgba(28,26,22,0.07); position: absolute; top: 16px; right: 20px; line-height: 1; transition: color 0.3s; }
  .sc-icon { width: 40px; height: 40px; margin-bottom: 28px; }
  .sc-title { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); margin-bottom: 16px; transition: color 0.3s; }
  .sc-text { font-size: 14px; color: var(--warm-gray); line-height: 1.8; transition: color 0.3s; }

  /* ═══════════════════ PROJECT GRID ═══════════════════ */
  .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .project-grid > .project-card:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 21/9; }
  .project-card {
    position: relative; overflow: hidden; cursor: pointer;
    aspect-ratio: 4/3;
  }
  .project-card-bg {
    position: absolute; inset: 0; transition: transform 0.6s;
  }
  .project-card:hover .project-card-bg { transform: scale(1.04); }
  .project-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,26,22,0.95) 0%, rgba(28,26,22,0.3) 60%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 36px 32px;
  }
  .project-card-tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .project-card-title { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--cream); margin-bottom: 8px; }
  .project-card-detail { font-size: 13px; color: rgba(245,240,232,0.6); }
  .project-card-arrow { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; background: rgba(184,150,62,0); border: 1px solid rgba(184,150,62,0); display: flex; align-items: center; justify-content: center; color: var(--gold); transition: all 0.3s; font-size: 18px; }
  .project-card:hover .project-card-arrow { background: var(--gold); border-color: var(--gold); color: var(--ink); }

  /* More Projects (secondary) grid */
  .more-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .mp-card { background: var(--white); cursor: pointer; transition: transform 0.4s; overflow: hidden; }
  .mp-card:hover { transform: translateY(-4px); }
  .mp-card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-dark); }
  .mp-card-img picture { height: 100%; }
  .mp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
  .mp-card:hover .mp-card-img img { transform: scale(1.04); }
  .mp-card-content { padding: 24px 22px 26px; }
  .mp-card-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .mp-card-title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
  .mp-card-detail { font-size: 13px; color: var(--warm-gray); line-height: 1.5; }

  /* Project bg colours */
  .pbg-1 { background: linear-gradient(135deg, #2a3020 0%, #1a2215 100%); }
  .pbg-2 { background: linear-gradient(135deg, #20252a 0%, #151a22 100%); }
  .pbg-3 { background: linear-gradient(135deg, #2a2020 0%, #221515 100%); }
  .pbg-4 { background: linear-gradient(135deg, #252022 0%, #1e1720 100%); }

  /* Building illustration in bg */
  .bld-illus {
    position: absolute; inset: 0; opacity: 0.15;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 0;
  }

  /* ═══════════════════ TESTIMONIAL / QUOTE ═══════════════════ */
  .quote-block { max-width: 800px; margin: 0 auto; text-align: center; }
  .quote-block blockquote { font-family: var(--serif); font-size: clamp(22px,3vw,36px); font-weight: 300; font-style: italic; color: var(--cream); line-height: 1.4; margin-bottom: 32px; }
  .quote-block cite { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); font-style: normal; }

  /* ═══════════════════ PORTFOLIO PAGE / INTERNAL HEROES ═══════════════════ */
  .page-hero {
    background: var(--ink);
    padding: 40px 60px 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: start;
    min-height: auto;
  }
  .page-hero-inner { max-width: 640px; padding-bottom: 60px; }

  /* Right-side image grid (2x2) */
  .page-hero-visual {
    position: relative;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    background: var(--ink);
    margin-bottom: 60px;
    min-height: 360px;
  }
  .page-hero-visual.single { display: block; min-height: 320px; }
  .phv-cell {
    position: relative; overflow: hidden; background: #2a2620;
  }
  .phv-cell img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.88) contrast(1.04);
    transition: transform 0.8s ease, filter 0.4s ease;
  }
  .phv-cell:hover img { transform: scale(1.04); filter: brightness(1) contrast(1.06); }
  /* picture must fill the cell so img height:100% resolves against cell height */
  .phv-cell picture { height: 100%; }
  .phv-cell::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
  }
  .phv-label {
    position: absolute; bottom: 12px; left: 14px; z-index: 2;
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); font-weight: 500;
  }
  .page-hero-visual::before {
    content: ''; position: absolute; inset: -1px;
    border: 1px solid rgba(184,150,62,0.18);
    pointer-events: none; z-index: 3;
  }
  .breadcrumb { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; display: flex; gap: 10px; align-items: center; }
  .breadcrumb span { color: rgba(245,240,232,0.4); }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .info-card { border: 1px solid var(--cream-dark); padding: 36px; }
  .info-card-icon { width: 48px; height: 3px; background: var(--gold); margin-bottom: 28px; }
  .info-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 14px; }
  .info-card p { font-size: 14px; color: var(--warm-gray); line-height: 1.8; }

  .stat-row { display: flex; gap: 60px; border-top: 1px solid var(--cream-dark); padding-top: 48px; margin-top: 48px; }
  .stat-item-num { font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 8px; }
  .stat-item-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-gray); }

  .property-list { display: flex; flex-direction: column; gap: 2px; }
  .property-item { background: var(--cream-dark); padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; transition: all 0.2s; }
  .property-item:hover { background: var(--ink); }
  .property-item:hover .pi-name { color: var(--cream); }
  .property-item:hover .pi-detail { color: rgba(245,240,232,0.5); }
  .pi-name { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 4px; transition: color 0.2s; }
  .pi-detail { font-size: 13px; color: var(--warm-gray); transition: color 0.2s; }
  .pi-badge { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--gold); color: var(--gold); white-space: nowrap; }

  /* ═══════════════════ CONSTRUCTION PAGE ═══════════════════ */
  .timeline { position: relative; padding-left: 40px; }
  .timeline::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--gold), rgba(184,150,62,0.1)); }
  .timeline-item { position: relative; margin-bottom: 52px; }
  .timeline-dot { position: absolute; left: -45px; top: 6px; width: 10px; height: 10px; border: 2px solid var(--gold); background: var(--white); border-radius: 50%; }
  .timeline-year { font-size: 11px; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
  .timeline-title { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 10px; }
  .timeline-text { font-size: 14px; color: var(--warm-gray); line-height: 1.8; max-width: 480px; }

  .service-list { display: flex; flex-direction: column; gap: 1px; }
  .service-item { padding: 28px 0; border-bottom: 1px solid var(--cream-dark); display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 24px; }
  .si-num { font-family: var(--serif); font-size: 13px; color: var(--gold); font-weight: 400; }
  .si-name { font-family: var(--serif); font-size: 20px; font-weight: 400; }
  .si-text { font-size: 13px; color: var(--warm-gray); margin-top: 4px; }
  .si-arrow { color: var(--gold); font-size: 18px; }
  .section-dark .service-item { border-bottom-color: rgba(245,240,232,0.1); }
  .section-dark .si-name { color: var(--cream); }


  /* Heritage timeline laid out over two columns */
  .timeline-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  @media (max-width: 1024px) {
    .timeline-2col { grid-template-columns: 1fr; gap: 0; }
  }

  /* ═══════════════════ PROJECT DETAIL ═══════════════════ */
  .project-detail-hero { background: var(--ink); min-height: 55vh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; padding: 80px 60px 60px; }
  .project-detail-bg { position: absolute; inset: 0; opacity: 0.3; }
  .project-detail-inner { position: relative; z-index: 2; max-width: 700px; }
  .back-link { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; cursor: pointer; background: none; border: none; font-family: var(--sans); }
  .back-link:hover { opacity: 0.7; }
  .project-meta { display: flex; gap: 40px; margin-top: 32px; }
  .project-meta-item label { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,240,232,0.4); margin-bottom: 5px; }
  .project-meta-item span { font-size: 14px; color: var(--cream); }
  .project-content { padding: 80px 60px; max-width: 800px; }
  .project-content p { font-size: 15px; color: var(--warm-gray); line-height: 1.9; margin-bottom: 24px; }
  .project-content h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); margin: 48px 0 18px; }

  .project-img-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; margin: 60px 0; }
  .project-img { aspect-ratio: 4/3; background: var(--cream-dark); position: relative; overflow: hidden; }
  .project-img.tall { aspect-ratio: auto; grid-row: span 2; }
  .project-img-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  /* Gallery cells use height:100% on <img> — picture must also fill the cell for it to resolve */
  .project-detail-page picture { height: 100%; }

  /* ═══════════════════ CONTACT PAGE ═══════════════════ */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 560px; }
  .contact-left { background: var(--ink); padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; }
  .contact-right { background: var(--cream); padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; }
  .contact-detail { margin-bottom: 36px; }
  .contact-detail label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px; }
  .contact-detail p { font-size: 15px; color: var(--cream); line-height: 1.7; }

  
  /* Contact page Google Map — fills its grid cell completely */
  .contact-right.contact-map { padding: 0 !important; background: #1c1a16; position: relative; min-height: 440px; }
  #yyh-map { position: absolute; inset: 0; }
  /* Text-only Contact hero — single column, slim header strip */
  .page-hero.text-only { grid-template-columns: 1fr; gap: 0; min-height: auto; padding-bottom: 16px; }
  .page-hero.text-only .page-hero-inner { max-width: 1240px; margin: 0 auto; padding-bottom: 0; width: 100%; }
  .page-hero.text-only h1 { margin-bottom: 0; }
  /* Constrain contact grid so map doesn't fly to the right edge of the viewport on wide screens */
  .contact-grid { max-width: 1240px; margin: 0 auto; min-height: 460px; border-top: 1px solid rgba(184,150,62,0.18); }
  /* Mobile/tablet contact: stack details over map */
  @media (max-width: 1280px) {
    .contact-grid, .page-hero.text-only .page-hero-inner { max-width: 100%; }
  }
  @media (max-width: 1024px) {
    .contact-grid { min-height: auto; grid-template-columns: 1fr; }
    .contact-right.contact-map { min-height: 380px; }
    .contact-left { padding: 48px 32px; }
  }
  @media (max-width: 768px) {
    .contact-left { padding: 40px 24px; }
    .contact-right.contact-map { min-height: 320px; }
  }

  /* ═══════════════════ FOOTER ═══════════════════ */
  footer { background: var(--ink); padding: 60px 60px 40px; border-top: 1px solid rgba(184,150,62,0.15); }
  .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
  .footer-brand p { font-size: 13px; color: rgba(245,240,232,0.4); line-height: 1.8; margin-top: 16px; max-width: 220px; }
  .footer-col h4 { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
  .footer-col a { display: block; font-size: 13px; color: rgba(245,240,232,0.5); text-decoration: none; margin-bottom: 10px; cursor: pointer; transition: color 0.2s; }
  .footer-col a:hover { color: var(--cream); }
  .footer-col span { display: block; font-size: 13px; color: rgba(245,240,232,0.5); margin-bottom: 10px; }
  .footer-bottom { border-top: 1px solid rgba(245,240,232,0.07); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
  .footer-bottom p { font-size: 12px; color: rgba(245,240,232,0.3); }
  .footer-logo { font-family: var(--serif); font-size: 18px; color: var(--cream); font-weight: 400; }

  /* ═══════════════════ UTILITIES ═══════════════════ */
  .max-w { max-width: 1200px; margin: 0 auto; }
  .mb-60 { margin-bottom: 60px; }
  .mb-40 { margin-bottom: 40px; }
  .text-gold { color: var(--gold); }
  .text-cream { color: var(--cream); }
  .serif { font-family: var(--serif); }

  .gold-rule { width: 100%; height: 1px; background: linear-gradient(to right, var(--gold), transparent); margin: 60px 0; opacity: 0.4; }

  /* SVG building illustrations */
  .bld-svg { opacity: 0.12; }

  /* Sector badge */
  .sector-badge { display: inline-flex; gap: 6px; align-items: center; background: rgba(184,150,62,0.1); border: 1px solid rgba(184,150,62,0.3); padding: 6px 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }

  /* ═══════════════════ HIGHLIGHT STRIP ═══════════════════ */

  /* ═══════════════════ CONSTRUCTION METRICS ═══════════════════ */
  .metrics-dark { background: var(--ink-light); }
  .metrics-row { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(184,150,62,0.2); }
  .metric-box { padding: 44px 36px; border-right: 1px solid rgba(184,150,62,0.2); text-align: center; }
  .metric-box:last-child { border-right: none; }
  .metric-box-num { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 52px); font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 12px; }
  .metric-box-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,240,232,0.5); }

  /* ═══════════════════ SCROLLBAR ═══════════════════ */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--cream-dark); }
  ::-webkit-scrollbar-thumb { background: var(--gold); }

  /* ═══════════════════ MOBILE HAMBURGER ═══════════════════ */
  .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; background: none; border: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--cream); transition: all 0.3s; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ═══════════════════ TABLET (≤1024px) ═══════════════════ */
  @media (max-width: 1024px) {
    nav { padding: 0 32px; }
    section { padding: 72px 32px; }
    .hero { grid-template-columns: 1fr; }
    .hero-left { padding: 72px 32px 60px; }
    .hero-tag { top: 40px; left: 32px; }
    .hero-right { display: none; }
    .hero h1 { font-size: 52px; }
    .hero-stats { gap: 0; }
    .intro-split { grid-template-columns: 1fr; gap: 48px; }
    .intro-visual { max-width: 560px; max-height: none; aspect-ratio: 16/12; margin: 0 auto; width: 100%; }
    .two-col { grid-template-columns: 1fr; gap: 48px; }
    .three-col { grid-template-columns: 1fr 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .more-projects-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .service-grid { grid-template-columns: 1fr 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-left { padding: 60px 32px; }
    .contact-right { padding: 60px 32px; }
    .metrics-row { grid-template-columns: 1fr 1fr; }
    .metric-box:nth-child(2) { border-right: none; }
    .metric-box:nth-child(3) { border-top: 1px solid rgba(184,150,62,0.2); }
    .page-hero { padding: 40px 32px 0; grid-template-columns: 1fr; gap: 0; min-height: auto; }
    .page-hero-inner { padding-bottom: 40px; max-width: 100%; }
    .page-hero-visual { display: none; }
    .project-detail-hero { padding: 60px 32px 48px; }
    .project-content { padding: 60px 32px !important; }
    /* Tablet: drop project galleries from 3-col to 2-col so images don't get tiny */
    .project-detail-page [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    .project-detail-page [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    /* Reduce inline desktop padding on tablet */
    .project-detail-page [style*="padding:80px 60px"],
    .project-detail-page [style*="padding:60px"]:not([style*="padding:60px 0"]):not([style*="padding:10px"]) {
      padding: 60px 32px !important;
    }
    .stat-row { gap: 36px; flex-wrap: wrap; }
    footer { padding: 48px 32px 32px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  }

  /* ═══════════════════ MOBILE (≤768px) ═══════════════════ */
  @media (max-width: 768px) {
    :root { --nav-h: 64px; }
    nav { padding: 0 20px; }
    .nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--ink); flex-direction: column; gap: 0; padding: 16px 0 24px; border-top: 1px solid rgba(184,150,62,0.2); z-index: 999; }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid rgba(245,240,232,0.06); }
    .nav-links a { display: block; padding: 16px 24px; font-size: 14px; letter-spacing: 0.1em; border-bottom: none; }
    .nav-toggle { display: flex; margin-left: auto; }

    section { padding: 56px 20px; }
    .hero-left { padding: 56px 20px 48px; }
    .hero-tag { top: 32px; left: 20px; }
    .hero h1 { font-size: 38px; }
    .hero-sub { font-size: 14px; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .btn-primary, .btn-ghost { width: 100%; text-align: center; }
    .hero-stats { flex-direction: column; gap: 24px; }
    .hero-stat { border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid rgba(245,240,232,0.08); padding-bottom: 20px; }
    .hero-stat:last-child { border-bottom: none; }

    .intro-split { gap: 36px; }
    .intro-visual { display: none; }
    .two-col { gap: 36px; }
    .three-col { grid-template-columns: 1fr; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card { padding: 36px 24px; }

    .project-grid { grid-template-columns: 1fr; }
    .project-card { aspect-ratio: 3/2; }
    .project-grid > .project-card:last-child:nth-child(odd) { aspect-ratio: 3/2; grid-column: span 1; }
    .more-projects-grid { grid-template-columns: 1fr; gap: 18px; }

    .page-hero { padding: 32px 20px 0; grid-template-columns: 1fr; gap: 0; min-height: auto; }
    .breadcrumb { font-size: 10px; }
    .metrics-row { grid-template-columns: 1fr 1fr; border: 1px solid rgba(184,150,62,0.2); }
    .metric-box { padding: 28px 16px; }
    .metric-box-num { font-size: 36px; }
    .metric-box:nth-child(2n) { border-right: none; }
    .metric-box:nth-child(n+3) { border-top: 1px solid rgba(184,150,62,0.2); }

    .property-item { grid-template-columns: 1fr; gap: 12px; }
    .pi-badge { align-self: flex-start; }

    .service-item { grid-template-columns: 40px 1fr; gap: 16px; }
    .si-arrow { display: none; }

    .timeline { padding-left: 24px; }
    .timeline-dot { left: -29px; }

    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .footer-col { padding-top: 20px; border-top: 1px solid rgba(245,240,232,0.07); }
    footer { padding: 40px 20px 28px; }

    .contact-grid { grid-template-columns: 1fr; }
    .contact-left { padding: 48px 20px; }
    .contact-right { padding: 48px 20px; }


    .project-detail-hero { padding: 48px 20px 40px; }
    .project-detail-inner > div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }
    .project-meta { flex-wrap: wrap; gap: 20px; }

    .quote-block blockquote { font-size: 22px; }

    .stat-row { flex-direction: column; gap: 24px; }

    .pd-content-grid { grid-template-columns: 1fr !important; }

    section[style*="display:grid;grid-template-columns:repeat(3,1fr)"] { display: flex !important; flex-direction: column !important; gap: 36px !important; }

    /* Project page galleries — collapse inline-styled multi-col grids on mobile */
    .project-detail-page [style*="grid-template-columns:2fr 1fr"],
    .project-detail-page [style*="grid-template-columns:1fr 1fr"],
    .project-detail-page [style*="grid-template-columns:1fr 1fr 1fr"],
    .project-detail-page [style*="grid-template-rows:1fr 1fr"] {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto !important;
    }
    /* 4-col gallery row → 2-col on mobile (2×2 is more legible than 4 tiny thumbs) */
    .project-detail-page [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    /* Drop the 16:10 forced ratio so portrait phone images don't get cropped weirdly */
    .project-detail-page [style*="aspect-ratio:16/10"] { aspect-ratio: 4/3 !important; }
    /* Sticky right rail (project details card) shouldn't stick once stacked */
    .project-detail-page [style*="position:sticky"] { position: static !important; }
    /* Reduce huge inline desktop padding on project sections */
    .project-detail-page [style*="padding:80px 60px"],
    .project-detail-page [style*="padding:60px"]:not([style*="padding:60px 0"]):not([style*="padding:10px"]) {
      padding: 48px 20px !important;
    }

    /* Legal pages mobile */
    .legal-content h2 { font-size: 21px; margin-top: 36px; }
    .legal-content p, .legal-content li { font-size: 14px; }
  }

  /* ═══════════════════ SMALL MOBILE (≤480px) ═══════════════════ */
  @media (max-width: 480px) {
    .hero h1 { font-size: 32px; }
    .section-title { font-size: 28px !important; }
    .metric-box-num { font-size: 30px; }
    .hero-stat-num { font-size: 28px; }
  }

/* ═══════════════════ ACCESSIBILITY — ensure tap targets ≥44×44px (WCAG 2.5.5 AAA) ═══════════════════ */
@media (max-width: 768px) {
  .btn-primary, .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Slightly larger nav links on mobile */
  .nav-links a {
    padding: 12px 0;
  }
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles — hide nav, footer, and decorative elements */
@media print {
  nav, footer, .page-hero, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .project-detail-bg { display: none !important; }
}