/* ==========================================================================
   GAMI GROUP — components.css
   New components for the multi-page build: cinematic intro, mega menu,
   page heroes, project pages, blog pages, careers, contact.
   Loaded after style.css. Shares all tokens from style.css :root.
   ========================================================================== */

/* ------------------------------------------------------------ CINEMATIC INTRO */
.intro {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--ink-bg); overflow: hidden;
  display: grid; place-items: center;
}
.intro[hidden] { display: none; }
.intro__media { position: absolute; inset: 0; }
.intro__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.intro__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(21,21,15,0.66), rgba(21,21,15,0.9));
}
.intro__inner { position: relative; text-align: center; padding: var(--gutter); }
.intro__logo {
  width: clamp(180px, 22vw, 280px); height: auto; margin-inline: auto;
  filter: brightness(0) invert(1); opacity: 0;
}
.intro__mark {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-ink);
  opacity: 0;
}
.intro__rule { width: 0; height: 1px; background: var(--brass); margin: var(--space-md) auto; }
.intro__word {
  font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--on-ink); opacity: 0;
}
.intro.is-leaving { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); opacity: 0; transform: translateY(-2%); }
html.intro-active { overflow: hidden; }
html.intro-active body { overflow: hidden; }

/* ------------------------------------------------------------ MEGA MENU */
.nav__item { position: relative; }
.nav__item > .nav__link[aria-haspopup] { display: inline-flex; align-items: center; gap: 0.4em; }
.nav__item > .nav__link .caret { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-hover); }
.nav__item[data-open] > .nav__link .caret { transform: rotate(225deg) translateY(2px); }

.megamenu {
  position: absolute; left: 50%; top: calc(100% + 0.5rem);
  transform: translateX(-50%) translateY(-8px);
  width: min(680px, 90vw);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: var(--space-lg);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out), visibility var(--dur-hover);
  box-shadow: 0 1px 0 var(--line);
}
.nav__item[data-open] > .megamenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.megamenu__col h3 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--space-sm); }
.megamenu__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.megamenu__col a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); color: var(--ink); text-decoration: none; font-size: var(--step-0); padding: 0.3em 0; }
.megamenu__col a:hover { color: var(--green); }
.megamenu__col a .n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); }
.megamenu__feature { border-left: 1px solid var(--line); padding-left: var(--space-lg); }
.megamenu__feature img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 1px solid var(--line); }
.megamenu__feature p { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-2xs); }
.megamenu__feature .link-underline { margin-top: var(--space-2xs); }
@media (max-width: 1023px) { .megamenu { display: none; } }

/* ------------------------------------------------------------ PAGE HERO (inner pages) */
.page-hero {
  position: relative; background: var(--ink-bg); color: var(--on-ink);
  padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl);
  overflow: hidden;
}
@media (max-width: 767px) {
  .page-hero { padding-block: calc(var(--nav-h-condensed) + var(--space-lg)) var(--space-xl); }
}
.page-hero--image { min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero__inner { width: 100%; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(21,21,15,0.94), rgba(21,21,15,0.72) 48%, rgba(21,21,15,0.5) 78%, rgba(21,21,15,0.42)),
    linear-gradient(0deg, rgba(21,21,15,0.55), rgba(21,21,15,0.1) 45%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: var(--on-ink); font-size: var(--step-5); font-weight: 320; line-height: 1.03; max-width: 18ch; margin-top: var(--space-md); }
.page-hero .index { color: var(--on-ink-mute); }
.page-hero__lead { color: var(--on-ink); font-size: var(--lead); max-width: 52ch; margin-top: var(--space-lg); }
.page-hero__meta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--on-ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.page-hero__meta span + span::before { content: "·"; margin-right: 1.5rem; color: var(--brass); }

/* breadcrumb */
.crumb { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); padding-block: var(--space-md); }
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-current] { color: var(--ink); }
.page-hero .crumb, .page-hero .crumb a,
.proj-hero .crumb, .proj-hero .crumb a { color: var(--on-ink-mute); }
.page-hero .crumb a:hover, .page-hero .crumb span[aria-current],
.proj-hero .crumb a:hover, .proj-hero .crumb span[aria-current] { color: var(--on-ink); }

/* about vision/mission */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-lg); }
.vm-grid .pullquote { grid-column: auto; margin-top: 0; border-color: var(--brass); color: var(--on-ink); max-width: none; }
.vm-grid .pullquote cite { color: var(--on-ink-mute); }
@media (max-width: 860px) { .vm-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ------------------------------------------------------------ LISTING PAGES */
.listing-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center;
  padding-block: var(--space-md); border-bottom: 1px solid var(--line); margin-bottom: var(--space-lg);
}
.listing-filters__group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.listing-filters__label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; margin-right: var(--space-2xs); }

.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); }
.project-grid .card { grid-column: span 4; }
.project-grid .card[hidden] { display: none; }

/* card without an image (verified list-level projects) */
.card--noimg { background: var(--paper); border-color: var(--line); }
.card--noimg .card__body { border-top: 2px solid var(--brass); padding-top: var(--space-md); }
.card--noimg .card__name { font-size: var(--step-1); }
@media (max-width: 1023px) { .project-grid .card { grid-column: span 6; } }
@media (max-width: 640px) { .project-grid .card { grid-column: span 12; } }

.listing-empty { padding: var(--space-2xl) 0; color: var(--ink-mute); font-family: var(--font-mono); }
.listing-empty[hidden] { display: none; }

/* ------------------------------------------------------------ PROJECT DETAIL */
.proj-hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink-bg); color: var(--on-ink); overflow: hidden; }
.proj-hero__inner { width: 100%; }
.proj-hero__media { position: absolute; inset: 0; z-index: 0; }
.proj-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.proj-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,15,0.55) 0%, rgba(21,21,15,0.25) 40%, rgba(21,21,15,0.9) 100%); }
.proj-hero__inner { position: relative; z-index: 1; padding-block: calc(var(--nav-h) + var(--space-lg)) var(--space-2xl); }
.proj-hero__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mute); }
.proj-hero h1 { color: var(--on-ink); font-size: var(--step-5); font-weight: 320; line-height: 1.02; margin-top: var(--space-2xs); }
.proj-hero__tagline { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--on-ink); margin-top: var(--space-sm); font-weight: 360; }

.proj-metabar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md);
  padding-block: var(--space-lg); border-bottom: 1px solid var(--line);
}
.proj-metabar div span { display: block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.proj-metabar div strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); color: var(--ink); }
.proj-metabar .status-tag { display: inline-flex; align-items: center; gap: 0.5em; }
.proj-metabar .status-tag .card__tick { width: 8px; height: 8px; border: 1px solid var(--brass); border-radius: 1px; }
@media (max-width: 767px) { .proj-metabar { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-sm); } }

.proj-section { padding-block: var(--space-3xl); }
.proj-section--tight { padding-block: var(--space-2xl); }
.proj-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); }
.proj-body__head { grid-column: 1 / 5; }
.proj-body__text { grid-column: 6 / 13; }
.proj-body__text p + p { margin-top: var(--space-md); }
@media (max-width: 900px) { .proj-body__head, .proj-body__text { grid-column: 1 / -1; } }

/* gallery */
.proj-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); }
.proj-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); position: relative; }
.proj-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.proj-gallery figure:hover img { transform: scale(1.04); }
.proj-gallery .g-solo { grid-column: span 12; aspect-ratio: 16 / 9; }
.proj-gallery .g-lg { grid-column: span 8; aspect-ratio: 16 / 10; }
.proj-gallery .g-sm { grid-column: span 4; aspect-ratio: 4 / 5; }
.proj-gallery .g-half { grid-column: span 6; aspect-ratio: 3 / 2; }
@media (max-width: 767px) {
  .proj-gallery .g-solo, .proj-gallery .g-lg, .proj-gallery .g-sm, .proj-gallery .g-half { grid-column: span 12; aspect-ratio: 3 / 2; }
}

/* spec table + amenities */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--step-0); }
.spec-table th, .spec-table td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.spec-table th { font-weight: 400; color: var(--ink-mute); width: 34%; text-transform: uppercase; font-size: var(--step--1); letter-spacing: 0.06em; }
.spec-table td { color: var(--ink); }

.amenities-list { list-style: none; padding: 0; columns: 3; column-gap: var(--space-lg); }
.amenities-list li { break-inside: avoid; padding: var(--space-2xs) 0; border-bottom: 1px solid var(--line); display: flex; gap: 0.6em; align-items: baseline; }
.amenities-list li::before { content: ""; width: 5px; height: 5px; background: var(--brass); flex-shrink: 0; transform: translateY(-2px); }
@media (max-width: 900px) { .amenities-list { columns: 2; } }
@media (max-width: 560px) { .amenities-list { columns: 1; } }

.connectivity-list { list-style: none; padding: 0; }
.connectivity-list li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.connectivity-list li span:first-child { color: var(--ink); }
.connectivity-list li span:last-child { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); white-space: nowrap; }

.highlight-list { list-style: none; padding: 0; counter-reset: hl; }
.highlight-list li { counter-increment: hl; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.highlight-list li::before { content: counter(hl, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass); }
.highlight-list li span { font-family: var(--font-display); font-size: var(--step-1); }

.rera-note { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); border-left: 2px solid var(--brass); padding-left: var(--space-md); max-width: 60ch; }

/* project CTA band */
.proj-cta { background: var(--ink-bg); color: var(--on-ink); padding-block: var(--space-4xl); text-align: left; }
.proj-cta h2 { color: var(--on-ink); font-size: var(--step-4); font-weight: 320; max-width: 16ch; }
.proj-cta__row { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* related */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ CUSTOMER SPEAK (video) */
.speak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); }
@media (max-width: 900px) { .speak-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .speak-grid { grid-template-columns: 1fr; } }

.speak-card { display: flex; flex-direction: column; }
.speak-card__play {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper-sunken);
  aspect-ratio: 16 / 10; cursor: pointer;
}
.speak-card__play img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.speak-card__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,15,0.05), rgba(21,21,15,0.45)); transition: background var(--dur-hover); }
.speak-card__play:hover img { transform: scale(1.04); }
.speak-card__play:hover::after { background: linear-gradient(180deg, rgba(21,21,15,0.1), rgba(21,21,15,0.55)); }
.speak-card__disc {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(238,235,224,0.7);
  display: grid; place-items: center; color: var(--on-ink);
  background: rgba(21,21,15,0.28); transition: background var(--dur-hover), border-color var(--dur-hover);
}
.speak-card__play:hover .speak-card__disc, .speak-card__play:focus-visible .speak-card__disc { background: var(--green); border-color: var(--green); }
.speak-card__body { padding-top: var(--space-md); }
.speak-card__quote { font-family: var(--font-display); font-size: var(--step-1); font-weight: 360; line-height: 1.32; color: var(--ink); max-width: none; }
.section--ink .speak-card__quote { color: var(--on-ink); }
.speak-card__who { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.speak-card__who span { color: var(--ink); }
.section--ink .speak-card__who { color: var(--on-ink-mute); }
.section--ink .speak-card__who span { color: var(--on-ink); }

/* video lightbox */
.video-lightbox { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 10); display: grid; place-items: center; padding: var(--space-md); isolation: isolate; }
.video-lightbox[hidden] { display: none; }
.video-lightbox__scrim { position: absolute; inset: 0; background: rgba(15,15,10,0.82); opacity: 0; transition: opacity 0.26s var(--ease-out); }
.video-lightbox.is-open .video-lightbox__scrim { opacity: 1; }
.video-lightbox__frame {
  position: relative; z-index: 1; width: min(1040px, 100%); aspect-ratio: 16 / 9;
  opacity: 0; transform: scale(0.97); transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.video-lightbox.is-open .video-lightbox__frame { opacity: 1; transform: none; }
.video-lightbox__slot, .video-lightbox__slot iframe { width: 100%; height: 100%; border: 0; background: #000; display: block; }
.video-lightbox__close {
  position: absolute; top: -44px; right: 0; width: 44px; height: 44px;
  display: grid; place-items: center; color: var(--on-ink);
}
@media (max-width: 640px) { .video-lightbox__close { top: -40px; } }

/* ------------------------------------------------------------ BLOG LISTING */
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); border-bottom: 1px solid var(--line); }
.blog-featured__media { overflow: hidden; border: 1px solid var(--line); }
.blog-featured__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.blog-featured:hover .blog-featured__media img { transform: scale(1.03); }
.blog-featured__meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
.blog-featured h2 { font-size: var(--step-3); margin: var(--space-sm) 0; }
.blog-featured h2 a { color: var(--ink); text-decoration: none; }
.blog-featured h2 a:hover { color: var(--green); }
.blog-featured p { color: var(--ink-soft); }
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; gap: var(--space-lg); } }

.blog-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.blog-list li { border-bottom: 1px solid var(--line); }
.blog-list a { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--space-md); align-items: baseline; padding: var(--space-lg) 0; text-decoration: none; color: var(--ink); transition: padding-left var(--dur-hover) var(--ease-out); }
.blog-list a:hover, .blog-list a:focus-visible { padding-left: var(--space-sm); }
.blog-list a .n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass); }
.blog-list a .t { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.blog-list a:hover .t { color: var(--green); }
.blog-list a .c { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) { .blog-list a { grid-template-columns: 3rem 1fr; } .blog-list a .c { grid-column: 2; } .blog-list a .t { font-size: var(--step-1); } }

.more-insights { list-style: none; padding: 0; }
.more-insights li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.more-insights a { color: var(--ink-soft); text-decoration: none; font-size: var(--step-0); }
.more-insights a:hover { color: var(--green); }
.more-insights a::after { content: " ↗"; color: var(--ink-mute); }

/* ------------------------------------------------------------ BLOG ARTICLE */
.article-hero { padding-block: calc(var(--nav-h-condensed) + var(--space-lg)) var(--space-md); }
.article-hero__meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
.article-hero h1 { font-size: var(--step-4); max-width: 20ch; margin: var(--space-sm) 0; overflow-wrap: anywhere; }
.article-hero__figure { margin: var(--space-lg) 0 0; border: 1px solid var(--line); overflow: hidden; }
.article-hero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.prose { max-width: 68ch; margin-inline: auto; overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--space-md); }
.prose a { overflow-wrap: anywhere; }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-2xl); }
.prose h3 { font-size: var(--step-1); font-family: var(--font-display); margin-top: var(--space-xl); }
.prose p { font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); max-width: none; }
.prose ul, .prose ol { padding-left: 1.4em; color: var(--ink-soft); }
.prose li { margin-top: var(--space-2xs); line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose .drop-cap::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: 0.8; float: left; padding: 0.05em 0.1em 0 0; color: var(--ink); font-weight: 400; }
.prose .lead { font-size: var(--lead); color: var(--ink); }
.article-continue { margin-top: var(--space-xl) !important; }
.article-note { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); max-width: 68ch; margin-inline: auto; }
.article-note a { color: var(--green); }

/* ------------------------------------------------------------ CAREERS */
.careers-why { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); }
.careers-why__head { grid-column: 1 / 5; }
.careers-why__text { grid-column: 6 / 13; }
@media (max-width: 900px) { .careers-why__head, .careers-why__text { grid-column: 1 / -1; } }

.openings { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.openings li { border-bottom: 1px solid var(--line); padding: var(--space-lg) 0; display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--space-md); align-items: start; }
.openings li::before { content: attr(data-n); font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass); }
.openings h3 { font-size: var(--step-2); font-weight: 400; }
.openings .exp { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; margin-top: var(--space-3xs); }
.openings p { color: var(--ink-soft); margin-top: var(--space-2xs); font-size: var(--step-0); }
.openings .req { font-size: var(--step--1); color: var(--ink-mute); margin-top: var(--space-2xs); }
.openings .btn { align-self: center; white-space: nowrap; }
@media (max-width: 767px) { .openings li { grid-template-columns: 2.2rem 1fr; } .openings .btn { grid-column: 2; margin-top: var(--space-sm); } }

/* ------------------------------------------------------------ CONTACT */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
.contact-details dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); }
.contact-details dt { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.contact-details dd { color: var(--ink); }
.contact-details dd a { color: var(--ink); text-decoration: none; }
.contact-details dd a:hover { color: var(--green); }
.contact-social { display: flex; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
.contact-social a { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.contact-social a:hover { color: var(--green); }
.contact-map { margin-top: var(--space-xl); border: 1px solid var(--line); aspect-ratio: 16 / 7; background: var(--paper-sunken); display: grid; place-content: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.7; text-align: center; padding: var(--space-lg); max-width: none; }
.contact-map a { color: var(--green); }

.contact-form { background: var(--paper-raised); border: 1px solid var(--line); padding: var(--space-lg); border-radius: 2px; }
.contact-form h2 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.contact-form .form__intro { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: var(--space-md); }

/* ------------------------------------------------------------ SHARED SECTION OPENER (inner pages) */
.inner-section { padding-block: var(--space-3xl); }
.inner-section--tight { padding-block: var(--space-2xl); }
.inner-section--ink { background: var(--ink-bg); color: var(--on-ink); }
.inner-section--ink h2, .inner-section--ink h3 { color: var(--on-ink); }