/* ============================================================
   Geovisual Creations – Main Stylesheet
   Matches the Kadence-based WordPress theme at geovisual.net
   Font: Manrope  |  Colors: dark navy palette + purple accent
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --font:            'Manrope', sans-serif;

  /* Dark palette (matches --global-palette*) */
  --color-bg:        #0b0d1a;   /* header & deepest bg */
  --color-dark:      #1a202c;   /* section dark bg */
  --color-darker:    #111827;   /* even darker sections */
  --color-mid:       #2d3748;   /* card borders, mid tones */
  --color-muted:     #718096;   /* muted text */

  /* Accent */
  --color-accent:    #503aa8;   /* purple – buttons only, do not change */
  --color-accent-h:  #6148c5;   /* hover purple */
  --color-highlight: #4fd1c5;   /* teal – section sub-headers & taglines */
  --color-blue:      #3182ce;

  /* Light */
  --color-lavender:  #ede4f8;   /* CTA card bg */
  --color-white:     #ffffff;
  --color-text:      #e2e8f0;   /* body text on dark */
  --color-text-dark: #1a202c;   /* text on light bg */

  /* Layout */
  --max-width:       1200px;
  --header-h:        72px;
  --radius:          12px;
  --radius-sm:       6px;
  --transition:      0.2s ease;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:    var(--font);
  font-size:      16px;
  line-height:    1.7;
  color:          var(--color-text);
  background:     var(--color-darker);
  -webkit-font-smoothing: antialiased;
}

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

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

ul { list-style: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height:  1.2;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.section-inner {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   80px 40px;
}

.section-dark   { background: var(--color-dark); }
.section-darker { background: var(--color-darker); }

.prose p  { margin-bottom: 1.1em; color: var(--color-text); }
.prose p:last-child { margin-bottom: 0; }

.split {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         60px;
  align-items: center;
}
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-block;
  padding:       14px 32px;
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     1rem;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  transition:    background var(--transition), transform var(--transition);
}
.btn-primary {
  background: var(--color-accent);
  color:      var(--color-white);
}
.btn-primary:hover {
  background: var(--color-accent-h);
  transform:  translateY(-2px);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    100;
  height:     var(--header-h);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  max-width:      var(--max-width);
  margin:         0 auto;
  padding:        0 40px;
  height:         100%;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            24px;
}

.header-brand {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-shrink: 0;
}

.site-name {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--color-white);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-name:hover { color: var(--color-text); }

/* Social nav (header) */
.social-nav {
  display:     flex;
  align-items: center;
  gap:         14px;
}
.social-nav a {
  color:      rgba(255,255,255,0.7);
  transition: color var(--transition);
  line-height: 0;
}
.social-nav a:hover { color: var(--color-white); }

/* Main nav */
.main-nav ul {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.main-nav a {
  padding:       10px 18px;
  font-size:     1rem;
  font-weight:   500;
  color:         rgba(255,255,255,0.85);
  border-radius: var(--radius-sm);
  transition:    color var(--transition), background var(--transition);
}
.main-nav a:hover,
.main-nav a.active { color: var(--color-white); background: rgba(255,255,255,0.08); }
.main-nav .nav-shop {
  background:  var(--color-accent);
  color:       var(--color-white);
  padding:     10px 20px;
}
.main-nav .nav-shop:hover { background: var(--color-accent-h); }

/* Hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  margin-left:    auto;
}
.nav-toggle span {
  display:    block;
  width:      26px;
  height:     2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position:            relative;
  min-height:          calc(100vh - var(--header-h));
  display:             flex;
  align-items:         center;
  justify-content:     center;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  overflow:            hidden;
}

.hero-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(8, 8, 20, 0.45);
}

.hero-content {
  position:   relative;
  z-index:    1;
  text-align: center;
  padding:    40px 20px;
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        24px;
}

.hero-logo {
  width:     min(480px, 72vw);
  height:    auto;
  filter:    drop-shadow(0 4px 24px rgba(0,0,0,0.6));
}

.hero-taglines {
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        4px;
}
.hero-taglines p {
  font-size:   clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  color:       rgba(255,255,255,0.92);
  letter-spacing: 0.04em;
}

/* ── What We Create ─────────────────────────────────────────────────────── */
.what-we-create .split-text h2 {
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 20px;
  color:         var(--color-white);
}
.what-we-create .split-text p {
  font-size:   1.05rem;
  line-height: 1.8;
  color:       var(--color-text);
}
.what-we-create .split-image img {
  border-radius: var(--radius);
  width:         100%;
  height:        420px;
  object-fit:    cover;
}

/* ── CTA Section ────────────────────────────────────────────────────────── */
.cta-section .section-inner { padding-top: 60px; padding-bottom: 60px; }

.cta-card {
  background:    var(--color-lavender);
  color:         var(--color-text-dark);
  border-radius: var(--radius);
  padding:       48px 40px;
}
.cta-card h2 {
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 16px;
  color:         var(--color-text-dark);
}
.cta-card p {
  font-size:     1.05rem;
  margin-bottom: 28px;
  color:         #2d3748;
}
.cta-section .split-image img {
  border-radius: var(--radius);
  width:         100%;
  height:        420px;
  object-fit:    cover;
}

/* ── About Section ──────────────────────────────────────────────────────── */
.about-section .split-text h2 {
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 20px;
  color:         var(--color-white);
}
.about-section .split-image img {
  border-radius: var(--radius);
  width:         100%;
  height:        480px;
  object-fit:    cover;
  object-position: top;
}

/* ── Featured Installations ─────────────────────────────────────────────── */
.installations-section .section-inner > h2 {
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 40px;
  color:         var(--color-white);
}

.installations-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   32px;
}

.installation-card { cursor: default; }

.installation-img-wrap {
  overflow:      hidden;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.installation-img-wrap img {
  width:      100%;
  height:     300px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.installation-card:hover .installation-img-wrap img {
  transform: scale(1.03);
}
.installation-card h3 {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--color-white);
  text-align:  center;
}

/* ── Newsletter Section ─────────────────────────────────────────────────── */
.newsletter-section {
  background: var(--color-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.newsletter-inner {
  text-align: center;
  padding:    72px 40px;
}
.newsletter-inner h2 {
  font-size:     clamp(1.6rem, 2.5vw, 2rem);
  margin-bottom: 12px;
  color:         var(--color-white);
}
.newsletter-inner > p {
  font-size:     1rem;
  color:         var(--color-text);
  margin-bottom: 32px;
  max-width:     540px;
  margin-left:   auto;
  margin-right:  auto;
}
.newsletter-form { display: inline-block; width: 100%; max-width: 540px; }
.newsletter-fields {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}
.newsletter-fields input {
  flex:          1 1 180px;
  padding:       12px 18px;
  border-radius: var(--radius-sm);
  border:        1px solid rgba(255,255,255,0.15);
  background:    rgba(255,255,255,0.07);
  color:         var(--color-white);
  font-family:   var(--font);
  font-size:     0.95rem;
}
.newsletter-fields input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-fields input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* ── Contact Page ───────────────────────────────────────────────────────── */
.contact-hero {
  min-height:          calc(100vh - var(--header-h));
  background-image:    url('/images/bg.png');
  background-size:     cover;
  background-position: center;
  display:             flex;
  align-items:         flex-start;
  justify-content:     center;
  padding:             60px 24px 80px;
}

.contact-card {
  background:    var(--color-white);
  color:         var(--color-text-dark);
  border-radius: var(--radius);
  padding:       52px 48px;
  width:         100%;
  max-width:     680px;
  box-shadow:    0 8px 48px rgba(0,0,0,0.35);
}
.contact-card h1 {
  font-size:     2.2rem;
  margin-bottom: 32px;
  color:         var(--color-text-dark);
}

.form-alert {
  padding:       14px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-weight:   500;
}
.form-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.form-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-field label {
  display:       block;
  font-weight:   600;
  margin-bottom: 6px;
  color:         var(--color-text-dark);
  font-size:     0.95rem;
}
.form-field .required { color: #e53e3e; }

.form-field input,
.form-field textarea {
  width:         100%;
  padding:       12px 16px;
  border:        1px solid #dce0e6;
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     1rem;
  color:         var(--color-text-dark);
  background:    #ffffff;
  transition:    border-color var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  outline:       none;
  border-color:  var(--color-accent);
  box-shadow:    0 0 0 3px rgba(80,58,168,0.12);
}
.form-field textarea { resize: vertical; min-height: 140px; }

.contact-form .btn { align-self: flex-start; }

.contact-extra { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e2e8f0; }

/* ── Generic page ───────────────────────────────────────────────────────── */
.page-content .section-inner { max-width: 800px; }
.page-title {
  font-size:     clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 32px;
  color:         var(--color-white);
}

/* ── Installations footer (home page) ──────────────────────────────────── */
.installations-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      48px;
  padding-top:     32px;
  border-top:      1px solid rgba(255,255,255,0.08);
  flex-wrap:       wrap;
  gap:             16px;
}

/* ── Outline button variant ─────────────────────────────────────────────── */
.btn-outline {
  background:    transparent;
  color:         var(--color-white);
  border:        2px solid rgba(255,255,255,0.35);
}
.btn-outline:hover {
  border-color: var(--color-white);
  background:   rgba(255,255,255,0.06);
  transform:    translateY(-2px);
}

/* ── Press / Media Kit link ─────────────────────────────────────────────── */
.press-link {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  color:       rgba(255,255,255,0.45);
  font-size:   0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:  color var(--transition);
}
.press-link:hover { color: rgba(255,255,255,0.8); }

.press-section { padding: 0; }
.press-inner {
  padding-top:    24px !important;
  padding-bottom: 40px !important;
  text-align:     center;
}

/* ── Page Hero (Installations, Commissions, etc.) ───────────────────────── */
.page-hero { border-bottom: 1px solid rgba(255,255,255,0.06); }
.page-hero-inner { padding-top: 72px; padding-bottom: 72px; }
.page-hero h1 {
  font-size:     clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 16px;
  color:         var(--color-white);
}
.page-hero-sub {
  font-size:   1.1rem;
  color:       var(--color-text);
  max-width:   640px;
  line-height: 1.7;
}

/* ── Installation detail cards ──────────────────────────────────────────── */
.installations-detail .section-inner { max-width: 1100px; }

.install-detail {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           64px;
  align-items:   center;
  padding:       56px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.install-detail:first-child { padding-top: 0; }
.install-detail:last-child  { border-bottom: none; }

.install-detail--reverse { direction: rtl; }
.install-detail--reverse > * { direction: ltr; }

.install-detail-image img {
  width:         100%;
  height:        380px;
  object-fit:    cover;
  border-radius: var(--radius);
}

.install-detail-text h2 {
  font-size:     clamp(1.6rem, 2.5vw, 2rem);
  color:         var(--color-white);
  margin-bottom: 8px;
}
.install-tagline {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--color-highlight);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
.install-description {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--color-text);
}

/* ── Installations CTA section ──────────────────────────────────────────── */
.install-cta-section { border-top: 1px solid rgba(255,255,255,0.06); }
.install-cta-inner {
  text-align:    center;
  padding-top:   72px;
  padding-bottom: 72px;
}
.install-cta-inner h2 {
  font-size:     clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: 12px;
  color:         var(--color-white);
}
.install-cta-inner p {
  font-size:     1.05rem;
  color:         var(--color-text);
  margin-bottom: 28px;
}

/* ── Commissions page ───────────────────────────────────────────────────── */
.commissions-hero {
  position:            relative;
  background-size:     cover;
  background-position: center;
}
.commissions-hero-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(8,8,20,0.7);
}
.commissions-hero .page-hero-inner { padding-top: 100px; padding-bottom: 100px; }
.commissions-hero h1,
.commissions-hero .page-hero-sub { color: var(--color-white); }

.commissions-inner {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   64px;
  align-items:           start;
}
.commissions-body h2 {
  font-size:     1.4rem;
  color:         var(--color-white);
  margin:        36px 0 10px;
}
.commissions-body h2:first-child { margin-top: 0; }
.commissions-body h3 {
  font-size:   1.1rem;
  color:       var(--color-highlight);
  margin:      24px 0 6px;
}
.commissions-body p,
.commissions-body li {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--color-text);
}
.commissions-body ul {
  list-style:  disc;
  padding-left: 20px;
  margin:      0 0 16px;
}
.commissions-body hr {
  border:      none;
  border-top:  1px solid rgba(255,255,255,0.1);
  margin:      32px 0;
}
.commissions-body em { color: rgba(255,255,255,0.5); font-size: 0.9rem; }

.commissions-sidebar { display: flex; flex-direction: column; gap: 20px; }
.commissions-cta-card {
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding:       28px 24px;
}
.commissions-cta-card h3 {
  font-size:     1.1rem;
  color:         var(--color-white);
  margin-bottom: 10px;
}
.commissions-cta-card p {
  font-size:     0.9rem;
  color:         var(--color-text);
  margin-bottom: 20px;
  line-height:   1.6;
}

/* ── Obelisk tall card ──────────────────────────────────────────────────── */
.install-detail--tall .install-detail-image img { height: 520px; }

/* ── Commissions form ───────────────────────────────────────────────────── */
.commissions-form-section { border-top: 1px solid rgba(255,255,255,0.06); }
.commissions-form-inner {
  max-width:  860px;
  padding-top:    72px;
  padding-bottom: 72px;
}
.commissions-form-header {
  margin-bottom: 40px;
}
.commissions-form-header h2 {
  font-size:     clamp(1.8rem, 2.5vw, 2.2rem);
  color:         var(--color-white);
  margin-bottom: 10px;
}
.commissions-form-header p {
  color:     var(--color-text);
  font-size: 1rem;
  max-width: 600px;
}
.commissions-form { display: flex; flex-direction: column; gap: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* dark form fields (commissions + new contact) */
.commissions-form .form-field label,
.contact-form--dark .form-field label {
  color:     rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.commissions-form .form-field input,
.commissions-form .form-field textarea,
.contact-form--dark .form-field input,
.contact-form--dark .form-field textarea {
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.15);
  color:         var(--color-white);
  border-radius: var(--radius-sm);
  padding:       14px 18px;
  font-family:   var(--font);
  font-size:     1rem;
  width:         100%;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.commissions-form .form-field input::placeholder,
.commissions-form .form-field textarea::placeholder,
.contact-form--dark .form-field input::placeholder,
.contact-form--dark .form-field textarea::placeholder {
  color: rgba(255,255,255,0.3);
}
.commissions-form .form-field input:focus,
.commissions-form .form-field textarea:focus,
.contact-form--dark .form-field input:focus,
.contact-form--dark .form-field textarea:focus {
  outline:      none;
  border-color: var(--color-highlight);
  box-shadow:   0 0 0 3px rgba(79,209,197,0.15);
}
.commissions-form .form-field textarea,
.contact-form--dark .form-field textarea { resize: vertical; min-height: 140px; }
.commissions-form .required,
.contact-form--dark .required { color: var(--color-highlight); }

/* ── Redesigned Contact page ────────────────────────────────────────────── */
.contact-page {
  display:             grid;
  grid-template-columns: 1fr 1fr;
  min-height:          calc(100vh - var(--header-h));
  background-image:    url('/images/bg.png');
  background-size:     cover;
  background-position: center;
}

.contact-left {
  background: rgba(8, 8, 20, 0.82);
  display:    flex;
  align-items: center;
  padding:    60px 48px;
}
.contact-left-inner { max-width: 420px; }

.contact-eyebrow {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-highlight);
  margin-bottom:  20px;
}

.contact-headline {
  font-size:     clamp(2.4rem, 4vw, 3.6rem);
  font-weight:   800;
  line-height:   1.08;
  color:         var(--color-white);
  margin-bottom: 24px;
}
.contact-headline em {
  font-style:  normal;
  color:        var(--color-highlight);
}

.contact-sub {
  font-size:     1rem;
  color:         rgba(255,255,255,0.6);
  line-height:   1.7;
  margin-bottom: 36px;
}

.contact-detail {
  display:       flex;
  flex-direction: column;
  gap:           4px;
  margin-bottom: 36px;
  font-size:     0.9rem;
  color:         rgba(255,255,255,0.5);
}
.contact-detail-label {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-highlight);
}

.contact-social {
  display:    flex;
  flex-direction: column;
  gap:        14px;
}
.contact-social a {
  display:     flex;
  align-items: center;
  gap:         12px;
  color:       rgba(255,255,255,0.55);
  font-size:   0.95rem;
  font-weight: 500;
  transition:  color var(--transition);
}
.contact-social a:hover { color: var(--color-white); }

.contact-right {
  background: rgba(11, 13, 26, 0.72);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    60px 48px;
}
.contact-form-wrap { width: 100%; max-width: 480px; }

.contact-form--dark { display: flex; flex-direction: column; gap: 20px; }
.contact-submit { width: 100%; text-align: center; padding: 16px; font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   HOME 2 — "The Illusionist"  editorial bold redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* shared layout token */
.h2-section-inner {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   80px 40px;
}

/* geometric section icon */
.h2-num {
  width:       52px;
  height:      52px;
  color:       rgba(255,255,255,0.28);
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.h2-num svg { display: block; }
.h2-num--light { color: rgba(255,255,255,0.5); }

/* section title */
.h2-section-title {
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color:       var(--color-white);
  line-height: 1.1;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.h2-hero {
  position:            relative;
  height:              calc(100vh - var(--header-h));
  display:             flex;
  flex-direction:      column;
  justify-content:     space-between;
  background-size:     cover;
  background-position: center;
  overflow:            hidden;
}
.h2-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,20,0.55) 0%,
    rgba(8,8,20,0.2) 40%,
    rgba(8,8,20,0.75) 100%
  );
}
.h2-hero-inner {
  position:       relative;
  z-index:        1;
  height:         100%;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  padding:        48px 60px;
}
.h2-hero-top { display: flex; justify-content: center; align-items: center; flex: 1; }
.h2-hero-logo { width: min(280px, 50vw); height: auto; }
.h2-hero-bottom {
  display:     flex;
  align-items: flex-end;
  justify-content: space-between;
  gap:         24px;
  flex-wrap:   wrap;
}
.h2-hero-taglines {
  display:    flex;
  flex-direction: column;
  gap:        0;
}
.h2-hero-taglines span {
  font-size:      clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight:    300;
  color:          rgba(255,255,255,0.8);
  line-height:    1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.h2-hero-taglines span:nth-child(2) { color: var(--color-highlight); }

/* ── 01 What ──────────────────────────────────────────────────────────── */
.h2-what { background: var(--color-dark); }
.h2-what .h2-section-inner {
  display:     grid;
  grid-template-columns: 120px 1fr 1fr;
  gap:         40px;
  align-items: center;
}
.h2-what-body { display: flex; flex-direction: column; gap: 24px; }
.h2-what-text p {
  font-size:   1.05rem;
  line-height: 1.8;
  color:       var(--color-text);
}
.h2-text-link {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  color:       var(--color-highlight);
  font-size:   0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top:  16px;
  transition:  gap var(--transition);
}
.h2-text-link:hover { gap: 12px; }
.h2-what-image img {
  width:         100%;
  height:        380px;
  object-fit:    cover;
  border-radius: var(--radius);
}

/* ── 02 Installations ─────────────────────────────────────────────────── */
.h2-installs { background: var(--color-darker); }
.h2-installs-inner {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   80px 40px;
}
.h2-installs-header {
  display:     flex;
  align-items: flex-end;
  gap:         24px;
  margin-bottom: 40px;
}
.h2-installs-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}
/* Space Dome: full-width feature hero, uncropped */
.h2-inst-card--0 {
  grid-column: 1 / -1;
}
.h2-inst-card--0 .h2-inst-img img {
  height:     420px;
  object-fit: contain;
  background: var(--color-darker);
}
.h2-inst-card--1 .h2-inst-img img,
.h2-inst-card--2 .h2-inst-img img,
.h2-inst-card--3 .h2-inst-img img,
.h2-inst-card--4 .h2-inst-img img { height: 260px; }
/* Obelisk: tall portrait photo — show full image without cropping */
.h2-inst-card--3 .h2-inst-img img {
  object-fit:      contain;
  object-position: top center;
  background:      var(--color-darker);
}

.h2-inst-card { position: relative; overflow: hidden; border-radius: var(--radius); }
.h2-inst-img { overflow: hidden; }
.h2-inst-img img {
  width:      100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}
.h2-inst-card:hover .h2-inst-img img { transform: scale(1.04); }

.h2-inst-label {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        12px 16px;
  background:     rgba(11,13,26,0.75);
  backdrop-filter: blur(6px);
}
.h2-inst-num {
  font-size:      0.7rem;
  font-weight:    700;
  color:          var(--color-highlight);
  letter-spacing: 0.1em;
  flex-shrink:    0;
}
.h2-inst-title {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--color-white);
}

/* ── 03 About ─────────────────────────────────────────────────────────── */
.h2-about { background: var(--color-dark); border-top: 1px solid rgba(255,255,255,0.06); }
.h2-about .h2-section-inner {
  display:     grid;
  grid-template-columns: 120px 1fr;
  gap:         0 40px;
}
.h2-about-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         60px;
  align-items: start;
}
.h2-about-image img {
  width:         100%;
  height:        520px;
  object-fit:    cover;
  object-position: top;
  border-radius: var(--radius);
}
.h2-about-eyebrow {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-highlight);
  margin-bottom:  12px;
}
.h2-pullquote {
  border-left: 3px solid var(--color-highlight);
  padding:     0 0 0 20px;
  margin:      24px 0;
  font-size:   1.1rem;
  font-style:  italic;
  color:       rgba(255,255,255,0.65);
  line-height: 1.6;
}
.h2-about-body p { font-size: 0.95rem; line-height: 1.8; color: var(--color-text); margin-bottom: 1em; }

/* ── 04 CTA ───────────────────────────────────────────────────────────── */
.h2-cta {
  position:   relative;
  min-height: 480px;
  display:    flex;
  align-items: center;
  overflow:   hidden;
}
.h2-cta-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
}
.h2-cta-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, rgba(8,8,20,0.92) 0%, rgba(8,8,20,0.6) 60%, rgba(8,8,20,0.3) 100%);
}
.h2-cta-inner {
  position:   relative;
  z-index:    1;
  max-width:  var(--max-width);
  margin:     0 auto;
  padding:    80px 40px;
  width:      100%;
}
.h2-cta-inner h2 {
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   800;
  color:         var(--color-white);
  margin-bottom: 12px;
}
.h2-cta-inner p {
  font-size:     1.05rem;
  color:         rgba(255,255,255,0.7);
  margin-bottom: 32px;
  max-width:     480px;
}

/* ── 05 Newsletter ────────────────────────────────────────────────────── */
.h2-newsletter { background: var(--color-bg); border-top: 1px solid rgba(255,255,255,0.06); }
.h2-newsletter-inner {
  display:     grid;
  grid-template-columns: 120px 1fr;
  gap:         0 40px;
}
.h2-newsletter-body { padding-top: 8px; }
.h2-newsletter-body .h2-section-title { margin-bottom: 12px; }
.h2-newsletter-body > p {
  font-size:     1rem;
  color:         var(--color-text);
  margin-bottom: 28px;
  max-width:     540px;
}
.h2-press-row { margin-top: 28px; }

/* ── Home 2 responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* grid is already 2-col; Space Dome stays full-width */
  .h2-inst-card--0 .h2-inst-img img { height: 320px; }
}
@media (max-width: 900px) {
  .h2-hero-inner    { padding: 32px 24px; }
  .h2-what .h2-section-inner { grid-template-columns: 1fr; }
  .h2-what .h2-num  { display: none; }
  .h2-what-image img { height: 260px; }
  .h2-about .h2-section-inner { grid-template-columns: 1fr; }
  .h2-about .h2-num { display: none; }
  .h2-about-inner { grid-template-columns: 1fr; gap: 32px; }
  .h2-about-image img { height: 280px; }
  .h2-newsletter-inner { grid-template-columns: 1fr; }
  .h2-newsletter .h2-num { display: none; }
}
@media (max-width: 640px) {
  .h2-hero-taglines span { font-size: clamp(0.9rem, 4vw, 1.4rem); }
  .h2-installs-grid { grid-template-columns: 1fr; }
  .h2-inst-card--0 .h2-inst-img img { height: 260px; }
  .h2-inst-card--1 .h2-inst-img img,
  .h2-inst-card--2 .h2-inst-img img,
  .h2-inst-card--3 .h2-inst-img img,
  .h2-inst-card--4 .h2-inst-img img { height: 220px; }
}

/* ── Responsive – new pages ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .install-detail,
  .install-detail--reverse { grid-template-columns: 1fr; direction: ltr; gap: 32px; }
  .install-detail-image img { height: 280px; }
  .commissions-inner        { grid-template-columns: 1fr; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background:  var(--color-bg);
  border-top:  1px solid rgba(255,255,255,0.06);
  padding:     28px 40px;
}
.footer-inner {
  max-width:      var(--max-width);
  margin:         0 auto;
  display:        flex;
  justify-content: center;
}
.footer-social {
  display:     flex;
  align-items: center;
  gap:         28px;
}
.footer-social a {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       rgba(255,255,255,0.6);
  font-size:   0.9rem;
  font-weight: 500;
  transition:  color var(--transition);
}
.footer-social a:hover { color: var(--color-white); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .split,
  .split-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 36px;
  }
  .what-we-create .split-image img,
  .cta-section .split-image img,
  .about-section .split-image img { height: 300px; }

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

  .section-inner { padding: 60px 24px; }
}

@media (max-width: 640px) {
  .header-inner { padding: 0 20px; }

  .main-nav {
    display:    none;
    position:   absolute;
    top:        var(--header-h);
    left:       0;
    right:      0;
    background: var(--color-bg);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding:    16px 20px;
  }
  .main-nav.open { display: block; }
  .main-nav ul   { flex-direction: column; gap: 4px; }
  .main-nav a    { display: block; padding: 12px 16px; }

  .nav-toggle { display: flex; }

  .hero-logo { width: min(320px, 80vw); }

  .contact-card { padding: 32px 24px; }

  .newsletter-fields { flex-direction: column; }
  .newsletter-fields .btn { width: 100%; text-align: center; }

  .footer-social { flex-wrap: wrap; justify-content: center; gap: 20px; }
}