/* ============================================================
   MERIDIAN — PHASE 6: theme toggle, theme transition, lightbox,
   project placeholders, clickable gallery plates
   ============================================================ */

/* ---- Smooth, intentional cross-fade when the theme flips.
   Scoped to a temporary class so nothing transitions on first
   load or on every normal hover/scroll interaction. ---- */
html.theme-transitioning,
html.theme-transitioning * {
  transition: background-color 0.5s var(--ease-architectural),
              color 0.5s var(--ease-architectural),
              border-color 0.5s var(--ease-architectural),
              fill 0.5s var(--ease-architectural) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning, html.theme-transitioning * { transition: none !important; }
}

/* ---- Header actions wrapper (theme toggle + hamburger) ---- */
.header-actions { display: flex; align-items: center; gap: 0.9rem; }

/* ---- Theme toggle — a small architectural instrument, not a switch ---- */
.theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal);
  flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-architectural), background var(--dur-fast) var(--ease-architectural);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-icon { width: 17px; height: 17px; position: absolute; transition: opacity var(--dur-fast) var(--ease-architectural), transform var(--dur-fast) var(--ease-architectural); }
.theme-icon-dark { opacity: 0; transform: rotate(-40deg) scale(0.6); }
[data-theme="dark"] .theme-icon-light { opacity: 0; transform: rotate(40deg) scale(0.6); }
[data-theme="dark"] .theme-icon-dark { opacity: 1; transform: rotate(0) scale(1); }
.theme-icon-light { opacity: 1; transform: rotate(0) scale(1); }

/* ---- Project placeholders — architectural, not "coming soon" ---- */
.project-visual--empty { background: var(--paper); }
.project-visual--empty::before { opacity: 0.7; }
.project-item--placeholder { cursor: default; }
.project-item--placeholder .project-index { color: var(--stone); background: none; opacity: 0.8; }
.project-item--placeholder .project-title { color: var(--stone); }
.project-sub--muted { letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-xs); color: var(--stone); }

/* ---- Clickable gallery plates inside the case study ---- */
.case-stage-plate, .sheet-tag--lg {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-architectural), border-color var(--dur-fast) var(--ease-architectural);
}
.case-stage-plate:hover, .case-stage-plate:focus-visible,
.sheet-tag--lg:hover, .sheet-tag--lg:focus-visible {
  background: var(--ivory);
  border-color: var(--accent);
}
button.case-stage-plate, button.sheet-tag--lg { font: inherit; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ink-fixed);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-architectural);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-stage {
  width: min(70vw, 560px);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-plate svg { width: 100%; height: 100%; color: var(--ivory-fixed); opacity: 0.92; }
.lightbox-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

.lightbox-caption {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ivory-fixed);
}
.lightbox-caption span:first-child { font-family: var(--font-display); font-size: var(--fs-md); }
.lightbox-caption span:nth-child(2) { color: rgba(243, 241, 234, 0.6); }
.lightbox-caption span:last-child { color: rgba(243, 241, 234, 0.45); letter-spacing: 0.05em; }

.lightbox-close, .lightbox-nav {
  position: fixed;
  width: 44px; height: 44px;
  border: 1px solid rgba(243, 241, 234, 0.3);
  background: transparent;
  color: var(--ivory-fixed);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-architectural), border-color var(--dur-fast) var(--ease-architectural);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(243, 241, 234, 0.1); border-color: var(--ivory-fixed); }
.lightbox-close svg, .lightbox-nav svg { width: 16px; height: 16px; }

.lightbox-close { top: clamp(1rem, 3vw, 1.75rem); right: var(--gutter); }
.lightbox-prev { left: clamp(1rem, 4vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(1rem, 4vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-next svg { transform: none; }
.lightbox-prev svg { transform: scaleX(-1); }

@media (max-width: 640px) {
  .lightbox-stage { width: 82vw; }
  .lightbox-prev, .lightbox-next { width: 36px; height: 36px; }
  .lightbox-prev { left: 0.75rem; }
  .lightbox-next { right: 0.75rem; }
  .lightbox-caption { flex-wrap: wrap; justify-content: center; text-align: center; gap: 0.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

/* ============================================================
   TRUST BAR (requested addition) — always a fixed dark/light
   treatment regardless of site theme, same rationale as final-cta
   ============================================================ */
.trust-bar { position: relative; }
.trust-bar-photo {
  height: clamp(200px, 26vw, 300px);
  background-size: cover;
  background-position: center;
  position: relative;
}
.trust-bar-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,16,0.35), rgba(20,19,16,0.8));
}
.trust-bar-card {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  background: var(--ivory-fixed);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-content: space-between;
}
.trust-item { display: flex; align-items: center; gap: 0.9rem; }
.trust-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink-fixed);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg { width: 20px; height: 20px; color: var(--ivory-fixed); }
.trust-text { display: flex; flex-direction: column; font-size: var(--fs-sm); color: #3A3730; line-height: 1.35; }
.trust-text strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-fixed); }
@media (max-width: 900px) {
  .trust-bar-card { margin-top: -40px; gap: 1.5rem 2rem; }
}
@media (max-width: 560px) {
  .trust-bar-card { flex-direction: column; margin-top: -32px; border-radius: 14px; }
}

/* ---- Premium circular badge treatment for sheet-tag icons (CAD/BIM/etc) ---- */
.sheet-tag .tag-mark {
  width: 44px; height: 44px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--ink-fixed);
  color: var(--ivory-fixed);
}
.sheet-tag--lg .tag-mark { width: 56px; height: 56px; padding: 13px; }

/* ---- Map embed (region section) ---- */
.region-map {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  max-width: 820px;
  margin-inline: auto;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-mid) var(--ease-architectural);
}
.region-map:hover, .region-map:focus-within { filter: grayscale(0); }
.region-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Social links with icon marks ---- */
.footer-social { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-social a { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-social svg { width: 18px; height: 18px; color: var(--concrete); transition: color var(--dur-fast) var(--ease-architectural); flex-shrink: 0; }
.footer-social a:hover svg { color: var(--accent); }

/* ---- Pricing section ---- */
.pricing { border-top: 1px solid var(--line); padding-block: clamp(4rem, 10vw, 7rem); }
.pricing-head h2 { font-size: var(--fs-xl); color: var(--ink); max-width: 20ch; margin-top: 0.5rem; }
.pricing-lead { margin-top: 0.75rem; max-width: 52ch; color: var(--concrete); font-size: var(--fs-md); }
.pricing-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.pricing-card {
  border: 1px solid var(--line-strong);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.pricing-card.is-featured { border-color: var(--accent); position: relative; }
.pricing-card.is-featured::before {
  content: "Most Requested";
  position: absolute; top: -12px; left: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--accent); color: var(--ivory-fixed);
  font-size: var(--fs-xs); letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
}
.pricing-icon { width: 34px; height: 34px; color: var(--accent); }
.pricing-card h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); margin-top: 1rem; }
.pricing-range { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); margin-top: 0.5rem; }
.pricing-range span { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--concrete); display: block; margin-top: 0.2rem; }
.pricing-card p.pricing-desc { margin-top: 0.75rem; color: var(--concrete); font-size: var(--fs-sm); line-height: 1.55; }
.pricing-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; flex-grow: 1; }
.pricing-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-sm); color: var(--ink); }
.pricing-list svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; margin-top: 0.3em; }
.pricing-card .btn-secondary { margin-top: 1.5rem; }
.pricing-note { margin-top: 2rem; font-size: var(--fs-xs); color: var(--concrete); max-width: 60ch; }

/* ---- Capabilities: photo in the preview panel ---- */
.services-preview { position: sticky; overflow: hidden; }
.services-preview .preview-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: opacity var(--dur-mid) var(--ease-architectural);
  z-index: 0;
}
.services-preview::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,19,16,0.15) 30%, rgba(20,19,16,0.82));
}
.services-preview .preview-icon,
.services-preview > div { position: relative; z-index: 2; }
.services-preview .preview-icon { color: var(--ivory-fixed); width: 44px; height: 44px; }
.services-preview .preview-label { color: rgba(243,241,234,0.7); }
.services-preview .preview-title { color: var(--ivory-fixed); }
.service-inline-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 1rem; }
@media (min-width: 950px) { .service-inline-photo { display: none; } }

/* ---- Studio photo (replaces the empty plate) ---- */
.studio-plate { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.studio-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.studio-plate figcaption { position: absolute; left: 0.9rem; bottom: 0.8rem; font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--ivory-fixed); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.footer-bottom .copyright { color: var(--ink); }

/* ============================================================
   Contact + final CTA merged: form on the left, "Let's draw the
   next line." panel on the right, side by side (stacks on mobile)
   ============================================================ */
.contact-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: stretch; }
@media (min-width: 960px) { .contact-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.contact-main .intake-sheet, .contact-main .intake-success { max-width: none; }

.contact-cta {
  position: relative;
  background: var(--ink-fixed);
  color: var(--ivory-fixed);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
@media (min-width: 960px) {
  .contact-cta { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; min-height: min(78vh, 720px); }
}
.contact-cta-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; }
.contact-cta-lines line { stroke: var(--ivory-fixed); stroke-width: 1; }
.contact-cta-inner { position: relative; }
.contact-cta-inner p { color: #A39C8C; }
.contact-cta-inner h2 { margin-top: 0.75rem; font-size: clamp(2.25rem, 4.5vw, 3.75rem); color: var(--ivory-fixed); line-height: 1.05; }
.contact-cta-inner .btn-primary { margin-top: 2rem; display: inline-block; background: var(--ivory-fixed); color: var(--ink-fixed); }
.contact-cta-inner .btn-primary:hover { background: var(--accent); color: var(--ivory-fixed); }
.contact-cta { border: 1px solid var(--line-strong); }