/* ============================================
   intuitiv.space — Page-level shared styles
   Used across all secondary pages
   Built on top of site.css
   ============================================ */

/* Push body content below fixed utility bar (36) + nav (76) */
.page {
  padding-top: 112px;
}

/* ============================================
   PAGE HERO — restrained editorial header
   ============================================ */
.page-hero {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--stone-200);
  overflow: hidden;
}
.page-hero--photo {
  min-height: 620px;
  display: flex; align-items: flex-end;
}
.page-hero--photo .page-hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero--photo .page-hero__photo::after {
  content: ''; position: absolute; inset: 0;
  /* Two-pass scrim. (1) Vertical fade — paper at top for nav contrast,
     image visible mid, strong paper at bottom so overlaid text reads
     cleanly even where the photo brightens (windows, sky, marble).
     (2) Diagonal lighten on the lower-left where the title + lede sit,
     guaranteeing ~85% paper under those text blocks regardless of the
     underlying image. */
  background:
    linear-gradient(180deg,
      rgba(250,250,248,0.45) 0%,
      rgba(250,250,248,0.10) 22%,
      rgba(250,250,248,0.45) 55%,
      rgba(250,250,248,0.92) 88%,
      rgba(250,250,248,1.00) 100%),
    linear-gradient(105deg,
      rgba(250,250,248,0.85) 0%,
      rgba(250,250,248,0.55) 32%,
      rgba(250,250,248,0.10) 60%,
      transparent 85%);
}
/* Text-shadow safety net: a pale cream halo behind dark display type
   keeps the title legible even if the photo is unusually contrasty. */
.page-hero--photo .page-hero__title,
.page-hero--photo .page-hero__lede {
  text-shadow: 0 1px 22px rgba(250,250,248,0.75);
}
.page-hero--photo .page-hero__meta strong {
  text-shadow: 0 1px 12px rgba(250,250,248,0.7);
}
.page-hero--paper {
  padding: 100px 0 80px;
}
.page-hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: 64px;
}
.page-hero--paper .page-hero__content { padding-bottom: 0; }

.page-hero__crumbs {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 36px;
  display: flex; align-items: center; gap: 12px;
}
.page-hero__crumbs a { color: var(--faint); }
.page-hero__crumbs a:hover { color: var(--intuitiv-gold-deep); opacity: 1; }
.page-hero__crumbs span { color: var(--stone-300); }

.page-hero__eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
  font-weight: 600;
}
.page-hero__eyebrow::before {
  content: ''; width: 36px; height: 1px; background: var(--intuitiv-gold-deep);
}
.page-hero__title {
  font-family: var(--serif-display);
  font-size: clamp(48px, 6.6vw, 100px);
  line-height: 0.98;
  font-weight: 500;
  color: var(--ink);
  /* Floor is 48px; break a long unbroken word rather than overflow 320px. */
  overflow-wrap: break-word;
  letter-spacing: -0.015em;
  max-width: 18ch;
  text-wrap: pretty;
  margin-bottom: 32px;
}
.page-hero__title em {
  font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400;
}
.page-hero__lede {
  font-size: 18px; line-height: 1.6;
  color: var(--fg-3);
  max-width: 56ch;
  margin-bottom: 40px;
}

.page-hero__meta {
  display: flex; gap: 36px; flex-wrap: wrap;
  border-top: 1px solid var(--stone-200);
  padding-top: 22px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
.page-hero__meta strong { color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  /* !important: ~11 pages set an inline min-height of 540–680px on the
     photo hero, which on a phone eats the whole viewport before any
     content and crops the background hard. Cap it on mobile. */
  .page-hero--photo { min-height: 480px !important; }
  .page-hero--paper { padding: 64px 0 48px; }
}

/* ============================================
   PROSE — long-form editorial blocks
   ============================================ */
.prose-section {
  padding: 120px 0;
  background: var(--paper);
}
.prose-section--warm { background: var(--paper-warm); border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); }

.prose-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: end;
  margin-bottom: 64px;
}
.prose-head--center {
  grid-template-columns: 1fr;
  text-align: left;
  max-width: 920px;
}
/* Lock the title to (col 1, row 1) so multiple .prose-head__lede
   paragraphs stack cleanly in column 2 instead of spilling into the
   empty (col 1, row 2) slot below the headline. Single-paragraph
   layouts behave exactly as before. */
.prose-head__title {
  font-family: var(--serif-display);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  grid-column: 1;
  grid-row: 1;
}
.prose-head__title em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.prose-head__lede {
  font-size: 16px; line-height: 1.7;
  color: var(--fg-3);
  max-width: 56ch;
  grid-column: 2;
}
/* Stacked lede paragraphs sit one above the other in column 2. */
.prose-head__lede + .prose-head__lede {
  margin-top: 18px;
}
/* The single-column centered variant unsets the column locks so the
   whole block flows top-to-bottom in one column. */
.prose-head--center .prose-head__title,
.prose-head--center .prose-head__lede {
  grid-column: 1;
  grid-row: auto;
}

@media (max-width: 880px) {
  .prose-section { padding: 72px 0; }
  .prose-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  /* Reset the lede's column lock so it doesn't land in a phantom 2nd
     track (only the --center variant reset it before). */
  .prose-head__lede { grid-column: 1; }
}

/* Two-column body prose */
.prose-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.prose-cols p {
  font-size: 15px; line-height: 1.75;
  color: var(--fg-3);
  margin-bottom: 14px;
  max-width: 52ch;
}
@media (max-width: 880px) { .prose-cols { grid-template-columns: 1fr; gap: 20px; } }

/* ============================================
   PILLARS — numbered roman list (i. ii. iii.)
   ============================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-200);
}
.pillars--two { grid-template-columns: repeat(2, 1fr); }
.pillars--four { grid-template-columns: repeat(4, 1fr); }

.pillar {
  padding: 48px 28px 56px 0;
  border-right: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  position: relative;
}
.pillar:last-child { border-right: 0; }
.pillar:not(:first-child) { padding-left: 28px; }
.pillar__num {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14px; color: var(--intuitiv-gold-deep);
  margin-bottom: 32px; letter-spacing: 0.08em;
}
.pillar__title {
  font-family: var(--serif-display);
  font-size: 26px; font-weight: 500;
  color: var(--ink); margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.pillar__title em { font-style: italic; color: var(--intuitiv-gold-deep); }
.pillar__copy {
  font-size: 14px; line-height: 1.7;
  color: var(--fg-3);
  margin-bottom: 24px;
  max-width: 38ch;
}
.pillar__list {
  list-style: none;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-top: 1px solid var(--stone-200);
}
.pillar__list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--stone-200);
}
.pillar__list li::before {
  content: '·';
  color: var(--intuitiv-gold-deep);
  font-weight: 700;
  margin-right: 10px;
  font-size: 16px;
}
.pillar__cta {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--intuitiv-gold-deep);
}

@media (max-width: 1100px) {
  .pillars--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* !important: ~40 pages set an inline style="grid-template-columns:
     repeat(3,1fr)" on .pillars, which otherwise outranks this rule and
     keeps three unreadable columns at phone width. */
  .pillars,
  .pillars--two,
  .pillars--four { grid-template-columns: 1fr !important; }
  .pillar { border-right: 0; padding: 36px 0 !important; }
}

/* ============================================
   STAT STRIP — credibility numbers
   ============================================ */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  background: var(--paper);
}
.stat {
  padding: 56px 28px;
  border-right: 1px solid var(--stone-200);
  text-align: left;
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--serif-display);
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.stat__num em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.stat__lab {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.stat__sub {
  font-size: 13px; line-height: 1.55;
  color: var(--fg-3);
  max-width: 30ch;
}
@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--stone-200); }
}

/* ============================================
   IMAGE BAND — full-bleed Qualia photography
   ============================================ */
.image-band {
  width: 100%;
  height: 60vh;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.image-band--tall { height: 80vh; min-height: 640px; }

.image-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 40px;
  background: var(--paper);
}
.image-pair__item {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
@media (max-width: 720px) {
  .image-pair { grid-template-columns: 1fr; padding: 0 24px; }
}

/* ============================================
   GEO BAND — three locations, illustrative
   stock imagery for "Where we work"
   ============================================ */
.geo-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.geo-band__item {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.geo-band__item picture { display: block; }
.geo-band__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--ink-soft, #2a2a2a);
}
.geo-band__item figcaption {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.geo-band__region {
  font-family: var(--display, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink, #1c1b19);
  letter-spacing: 0.01em;
}
.geo-band__city {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #5a5853);
}
.geo-band__foot {
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-soft, #5a5853);
  font-style: italic;
}
@media (max-width: 900px) {
  .geo-band { grid-template-columns: 1fr 1fr; }
  .geo-band__item:nth-child(3) { grid-column: span 2; }
  .geo-band__item:nth-child(3) img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .geo-band { grid-template-columns: 1fr; }
  .geo-band__item:nth-child(3) { grid-column: auto; }
  .geo-band__item:nth-child(3) img { aspect-ratio: 3 / 2; }
}

/* ============================================
   SPLIT — text + image side-by-side
   ============================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 120px 0;
}
.split--reverse .split__copy { order: 2; }
.split__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.split__photo--landscape { aspect-ratio: 4 / 3; }
.split__title {
  font-family: var(--serif-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.split__title em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.split__copy p {
  font-size: 15px; line-height: 1.75;
  color: var(--fg-3);
  margin-bottom: 14px;
  max-width: 50ch;
}
.split__cta {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.split__cta:hover { color: var(--intuitiv-gold-deep); border-color: var(--intuitiv-gold-deep); opacity: 1; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
  .split--reverse .split__copy { order: initial; }
}

/* ============================================
   FACT ROWS — definition-list style
   ============================================ */
.facts {
  border-top: 1px solid var(--stone-200);
}
.fact {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--stone-200);
  align-items: baseline;
}
.fact__no {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14px; color: var(--intuitiv-gold-deep);
  letter-spacing: 0.08em;
}
.fact__name {
  font-family: var(--serif-display);
  font-size: 22px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.fact__name em { font-style: italic; color: var(--intuitiv-gold-deep); }
.fact__copy {
  font-size: 14.5px; line-height: 1.75;
  color: var(--fg-3);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .fact { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
}

/* ============================================
   AUDIENCE CARDS — three-up
   ============================================ */
.aud-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.aud-card {
  background: #fff;
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--intuitiv-gold);
  padding: 40px 32px;
  display: flex; flex-direction: column;
}
.aud-card__no {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14px; color: var(--intuitiv-gold-deep);
  margin-bottom: 24px; letter-spacing: 0.08em;
}
.aud-card__name {
  font-family: var(--serif-display);
  font-size: 26px; font-weight: 500;
  color: var(--ink); margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.aud-card__copy {
  font-size: 14px; line-height: 1.7;
  color: var(--fg-3);
  margin-bottom: 24px;
}
.aud-card__cta {
  margin-top: auto;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  padding-top: 16px;
  border-top: 1px solid var(--stone-200);
  display: inline-flex; align-items: center; gap: 12px;
}
@media (max-width: 880px) { .aud-cards { grid-template-columns: 1fr; } }

/* ============================================
   PULL — secondary pullquote
   ============================================ */
.pull {
  background: var(--paper);
  padding: 100px 0;
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.pull__mark {
  font-family: var(--serif-display); font-style: italic;
  font-size: 80px; line-height: 1;
  color: var(--intuitiv-gold);
  margin-bottom: -32px;
}
.pull__quote {
  font-family: var(--serif-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.32;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 26ch;
}
.pull__quote em { font-style: italic; color: var(--intuitiv-gold-deep); }
.pull__attr {
  margin-top: 40px;
  display: flex; align-items: center; gap: 18px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
.pull__attr-bar { width: 36px; height: 1px; background: var(--ink-soft); }
.pull__attr strong { color: var(--ink); font-weight: 500; }

/* ============================================
   CTA-BAND — closing CTA on every page
   ============================================ */
.cta-band {
  background: var(--paper-warm);
  padding: 120px 0;
  border-top: 1px solid var(--stone-200);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.cta-band__title {
  font-family: var(--serif-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 16ch;
  margin-bottom: 28px;
}
.cta-band__title em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.cta-band__copy {
  font-size: 16px; line-height: 1.7;
  color: var(--fg-3);
  max-width: 50ch;
}
.cta-band__action {
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
  padding-bottom: 12px;
}
.cta-band__cta {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700;
  transition: background var(--dur) var(--ease-standard);
}
.cta-band__cta:hover { background: var(--intuitiv-gold-deep); opacity: 1; }
.cta-band__note {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 880px) {
  .cta-band { padding: 64px 0; }
  .cta-band__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   FORM — contact form
   ============================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.form-row {
  display: flex; flex-direction: column;
  gap: 8px;
}
.form-row--full { grid-column: 1 / -1; }
.form-row label {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--sans-body);
  /* 16px min: iOS Safari auto-zooms the page when a focused input is
     under 16px. Keeping it at 16 avoids a jarring zoom on every field. */
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone-200);
  padding: 10px 0;
  outline: none;
  transition: border-color var(--dur) var(--ease-standard);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-bottom-color: var(--intuitiv-gold-deep);
}
.form-row textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--sans-body);
  line-height: 1.6;
}
.form-row__hint {
  font-size: 11px; color: var(--faint);
  margin-top: 4px;
}
.form-submit {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700;
  border: 0; cursor: pointer;
  font-family: var(--sans-body);
  transition: background var(--dur) var(--ease-standard);
}
.form-submit:hover { background: var(--intuitiv-gold-deep); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================
   FILTER PILLS — used on press / projects
   ============================================ */
.pill-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.pill {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 16px;
  border: 1px solid var(--stone-200);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans-body);
  font-weight: 500;
  transition: all var(--dur) var(--ease-standard);
}
.pill.is-on,
.pill:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ============================================
   AWARDS LIST — for press + about
   ============================================ */
.awards {
  border-top: 1px solid var(--stone-200);
}
.award {
  display: grid;
  grid-template-columns: 90px 1fr 2fr 120px;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--stone-200);
  align-items: baseline;
}
.award__year {
  font-family: var(--serif-display); font-style: italic;
  font-size: 18px; color: var(--intuitiv-gold-deep);
  letter-spacing: 0.02em;
}
.award__title {
  font-family: var(--serif-display);
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.award__sub {
  font-size: 13.5px; line-height: 1.6;
  color: var(--fg-3);
}
.award__org {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
@media (max-width: 880px) {
  .award { grid-template-columns: 1fr; gap: 6px; }
  .award__org { text-align: left; }
}

/* ============================================
   PROJECT INDEX TILES
   ============================================ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
}
.proj-tile {
  display: block;
  cursor: pointer;
}
.proj-tile__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
  transition: opacity var(--dur) var(--ease-standard);
}
.proj-tile:hover .proj-tile__photo { opacity: 0.85; }
.proj-tile__no {
  font-family: var(--serif-display); font-style: italic;
  font-size: 13px; color: var(--intuitiv-gold-deep);
  margin-bottom: 8px; letter-spacing: 0.08em;
}
.proj-tile__name {
  font-family: var(--serif-display);
  font-size: 26px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.proj-tile__loc {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 720px) { .proj-grid { grid-template-columns: 1fr; } }

/* ============================================
   TAHOE PAGE — keep the dark surface for the demo
   ============================================ */
.tahoe-page-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--stone-200);
}
.tahoe-page-frame--light {
  background: #FDFCFB;
}
.tahoe-page-frame--light .tahoe-page-frame__chrome {
  color: rgba(0,0,0,0.32);
}
.tahoe-page-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.tahoe-page-frame > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tahoe-page-frame__chrome {
  position: absolute; top: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  z-index: 5;
  pointer-events: none;
}
.tahoe-page-caption {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
}

/* ============================================
   TAHOE DEMO IFRAME — responsive scaling
   ---------------------------------------------
   The Tahoe demo is a fixed-canvas touchpanel UI.
   We render it at its native 1440x900 resolution
   inside .tahoe-demo-frame__stage and let JS apply
   transform: scale() so it always fits the container
   width at any desktop/tablet size — no internal
   scrollbars, no overlapping labels.
   On mobile (<860px) we hide this entirely and show
   .tahoe-demo-mobile, which routes to the standalone
   demo full-screen.
   ============================================ */
.tahoe-demo-frame {
  position: relative;
  width: 100%;
  height: var(--tahoe-demo-h, 56.25vw);  /* set by JS once scale resolves; vw fallback approximates 1440x810 */
  background: #000;
  border: 1px solid var(--stone-200);
  overflow: hidden;
}
.tahoe-demo-frame__chrome {
  position: absolute; top: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  z-index: 5;
  pointer-events: none;
}
.tahoe-demo-frame__stage {
  position: absolute; inset: 0;
  overflow: hidden;
}
.tahoe-demo-frame__stage iframe {
  width: 1440px;
  height: 900px;
  border: 0;
  display: block;
  transform-origin: top left;
  transform: scale(1);  /* JS overwrites */
  background: #000;
}

/* Mobile preview card — replaces the iframe below 860px */
.tahoe-demo-mobile {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--stone-200);
  text-decoration: none;
  color: inherit;
  background: #000;
}
.tahoe-demo-mobile picture,
.tahoe-demo-mobile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tahoe-demo-mobile__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.85) 100%);
  color: #FAF6EB;
}
.tahoe-demo-mobile__eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--intuitiv-gold-soft, #E4D3AE);
  font-weight: 600;
  margin-bottom: 10px;
}
.tahoe-demo-mobile__title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: #FAF6EB;
  margin: 0 0 10px 0;
  max-width: 22ch;
}
.tahoe-demo-mobile__copy {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 14px 0;
  max-width: 38ch;
}
.tahoe-demo-mobile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--intuitiv-gold-soft, #E4D3AE);
  border-bottom: 1px solid rgba(201,168,106,0.4);
  padding-bottom: 4px;
  width: fit-content;
}
.tahoe-demo-mobile:hover .tahoe-demo-mobile__cta {
  color: #fff;
  border-bottom-color: #fff;
  opacity: 1;
}

/* Breakpoint swap: hide iframe on small screens, show preview */
@media (max-width: 860px) {
  .tahoe-demo-frame { display: none; }
  .tahoe-demo-mobile { display: block; }
}

/* ============================================
   TAHOE GALLERY — grid of real screen captures
   ============================================ */
.tahoe-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 16px;
}
.tahoe-gallery--three { grid-template-columns: repeat(3, 1fr); }
.tahoe-shot {
  position: relative;
  background: #000;
  border: 1px solid var(--stone-200);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tahoe-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tahoe-shot__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
}
.tahoe-shot__caption strong { color: #fff; font-weight: 500; letter-spacing: 0.16em; }
@media (max-width: 720px) {
  .tahoe-gallery,
  .tahoe-gallery--three { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================
   PROJECT IMAGE PLACEHOLDER — for residences
   where photography has not yet been sourced
   ============================================ */
.project__image--placeholder {
  background: linear-gradient(135deg, var(--ink) 0%, oklch(28% 0.02 250) 50%, var(--ink) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.project__image--placeholder::before {
  content: ""; position: absolute; inset: 24px;
  border: 1px solid rgba(201,168,106,0.18);
}
.project__image--placeholder span {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(201,168,106,0.7); font-weight: 600;
  position: relative; z-index: 1;
}

/* ============================================
   DOCUMENT BAND — "Take this with you"
   A linkable PDF brief for each audience.
   Used on architects.html, builders.html, contact.html.
   ============================================ */
.doc-band {
  padding: 100px 0;
  background: var(--paper);
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.doc-band__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.doc-band__copy h2 {
  font-family: var(--serif-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-bottom: 20px;
  text-wrap: balance;
}
.doc-band__copy h2 em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.doc-band__label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  margin-bottom: 20px;
}
.doc-band__lede {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-3);
  margin-bottom: 28px;
  max-width: 50ch;
}
.doc-band__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.doc-band__btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  background: var(--ink);
  color: rgba(255,255,255,0.94);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-standard);
}
.doc-band__btn:hover { opacity: 0.85; }
.doc-band__btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--stone-300);
}
.doc-band__btn--ghost:hover { border-color: var(--ink); opacity: 1; }
.doc-band__btn span:last-child { font-size: 12px; }

.doc-band__preview {
  position: relative;
  aspect-ratio: 8.5 / 11;
  background: var(--ink);
  box-shadow: 0 24px 56px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transform: rotate(-1.5deg);
  transition: transform var(--dur) var(--ease-standard);
}
.doc-band__preview:hover { transform: rotate(0); }
.doc-band__preview-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.35;
  filter: grayscale(15%);
}
.doc-band__preview-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 70%, var(--ink) 100%);
}
.doc-band__preview-content {
  position: absolute;
  inset: 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: rgba(255,255,255,0.96);
}
.doc-band__preview-logo {
  display: block;
  width: 132px;
  height: auto;
  opacity: 0.96;
}
.doc-band__preview-eyebrow {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--intuitiv-gold);
  font-weight: 600;
  margin-bottom: 18px;
}
.doc-band__preview-title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.98);
  margin-bottom: 18px;
  text-wrap: balance;
}
.doc-band__preview-title em { font-style: italic; color: var(--intuitiv-gold); font-weight: 400; }
.doc-band__preview-meta {
  display: flex; justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 880px) {
  .doc-band__inner { grid-template-columns: 1fr; gap: 48px; }
  .doc-band__preview { transform: rotate(0); max-width: 360px; margin: 0 auto; }
}

/* ============================================
   ALL THREE DOCUMENTS — index card grid (contact page)
   ============================================ */
.doc-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 0;
}
.doc-trio__card {
  display: block;
  background: var(--ink);
  color: rgba(255,255,255,0.96);
  text-decoration: none;
  position: relative;
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-standard);
}
.doc-trio__card:hover { transform: translateY(-4px); opacity: 1; }
.doc-trio__card-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.32; filter: grayscale(15%);
}
.doc-trio__card-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.88) 75%, var(--ink) 100%);
}
.doc-trio__card-body {
  position: absolute; inset: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.doc-trio__card-logo {
  display: block;
  width: 124px;
  height: auto;
  opacity: 0.96;
}
.doc-trio__card-eyebrow {
  font-size: 8.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--intuitiv-gold); font-weight: 600; margin-bottom: 14px;
}
.doc-trio__card-title {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 24px; line-height: 1.12; letter-spacing: -0.005em;
  color: rgba(255,255,255,0.98);
  margin-bottom: 16px;
  text-wrap: balance;
}
.doc-trio__card-title em { font-style: italic; color: var(--intuitiv-gold); font-weight: 400; }
.doc-trio__card-cta {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--intuitiv-gold); font-weight: 600;
  display: inline-flex; gap: 10px; align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 880px) {
  .doc-trio { grid-template-columns: 1fr; }
}
.deploy-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.deploy {
  display: flex; flex-direction: column; gap: 18px;
}
.deploy__shot {
  background: #000;
  border: 1px solid var(--stone-200);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.deploy__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deploy__label {
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
}
.deploy__title {
  font-family: var(--serif-display);
  font-size: 26px; font-weight: 500; line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.deploy__title em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.deploy__copy {
  font-size: 14px; line-height: 1.7;
  color: var(--fg-3);
  max-width: 46ch;
}
@media (max-width: 880px) {
  .deploy-split { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   COMPACT FOOTER FILLER PAGE NAV
   ============================================ */
.page-jump {
  background: var(--paper);
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  padding: 18px 0;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
.page-jump__inner {
  display: flex; gap: 32px; flex-wrap: wrap;
  align-items: center;
}
.page-jump a { color: var(--ink-soft); }
.page-jump a:hover { color: var(--intuitiv-gold-deep); opacity: 1; }

/* ============================================
   COMPARE — side-by-side platform cards & table
   used on /crestron-home-vs-custom
   ============================================ */
.compare-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.compare-card {
  padding: 56px 40px;
  border-right: 1px solid var(--stone-200);
}
.compare-card:last-child { border-right: 0; }
.compare-card__label {
  font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  margin-bottom: 18px;
}
.compare-card__title {
  font-family: var(--serif-display);
  font-size: 36px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin-bottom: 6px;
}
.compare-card__title em { font-style: italic; color: var(--intuitiv-gold-deep); font-weight: 400; }
.compare-card__sub {
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--faint);
  font-style: italic;
  margin-bottom: 28px;
}
.compare-card__copy {
  font-size: 15px; line-height: 1.7;
  color: var(--fg-3);
  max-width: 46ch;
  margin-bottom: 28px;
}
.compare-card__suited {
  border-top: 1px solid var(--stone-200);
  padding-top: 22px;
  font-size: 12.5px; line-height: 1.65;
  color: var(--ink-soft);
}
.compare-card__suited strong {
  display: block;
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}
@media (max-width: 880px) {
  .compare-cards { grid-template-columns: 1fr; }
  .compare-card { border-right: 0; border-bottom: 1px solid var(--stone-200); padding: 40px 0; }
  .compare-card:last-child { border-bottom: 0; }
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 14px;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 22px 24px;
  border-bottom: 1px solid var(--stone-200);
  line-height: 1.65;
  color: var(--fg-3);
}
.compare-table thead th {
  font-family: var(--serif-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--stone-300);
  padding-top: 0;
}
.compare-table thead th:first-child {
  font-family: inherit;
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.compare-table tbody th {
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  width: 22%;
  white-space: nowrap;
}
.compare-table td:nth-child(2) { background: rgba(212, 165, 116, 0.04); }
@media (max-width: 880px) {
  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block; width: 100%; white-space: normal; }
  .compare-table thead { display: none; }
  .compare-table tbody tr { padding: 24px 0; border-bottom: 1px solid var(--stone-200); }
  .compare-table tbody th {
    padding: 0 0 8px;
    border: 0;
    color: var(--intuitiv-gold-deep);
  }
  .compare-table td {
    padding: 4px 0;
    border: 0;
    background: transparent !important;
  }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
  }
}

/* Constraint cards — used on the comparison page section 03 */
.constraint-set { margin-top: 32px; }
.constraint-set + .constraint-set { margin-top: 64px; }
.constraint-set__head {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stone-200);
  margin-bottom: 0;
}

/* ============================================
   CONTACT-DIRECT — phone + email strip on /contact
   Sits between the page hero and the form, giving
   visitors who don't want a form an obvious tap
   target for either channel.
   ============================================ */
.contact-direct {
  background: var(--paper-warm);
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  padding: 56px 0;
}
.contact-direct__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .contact-direct__inner { grid-template-columns: 1fr; gap: 32px; }
  .contact-direct { padding: 40px 0; }
}
.contact-direct__eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--intuitiv-gold-deep);
  font-weight: 600;
  margin-bottom: 16px;
}
.contact-direct__copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0;
}
.contact-direct__channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) {
  .contact-direct__channels { grid-template-columns: 1fr; }
}
.contact-direct__channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--intuitiv-gold);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-standard),
              box-shadow var(--dur) var(--ease-standard);
}
.contact-direct__channel:hover {
  border-color: var(--intuitiv-gold);
  box-shadow: 0 12px 32px rgba(26,26,26,0.08);
  opacity: 1;
}
.contact-direct__lab {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.contact-direct__val {
  font-family: var(--serif-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.contact-direct__channel:hover .contact-direct__val {
  color: var(--intuitiv-gold-deep);
}
.contact-direct__sub {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 6px;
}
@media (max-width: 600px) {
  .contact-direct__val { font-size: 22px; }
}