/* ============================================================
   ET Expo — SEO landing page template
   Consumed by every page rendered from the landing_pages table.
   Built entirely on the shared design tokens in styles.css, so a
   landing page looks and behaves like the rest of the site.
   ============================================================ */

/* ---------- Base (mirrors the per-page reset the static pages use) ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--charcoal-800); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
h1, h2, h3, h4 {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent); }
section[id] { scroll-margin-top: 90px; }

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1200;
  background: var(--accent); color: var(--charcoal-800);
  padding: 12px 20px; font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.lp-skip:focus { left: 12px; top: 12px; }

/* ---------- Nav (identical rules to the static pages) ---------- */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 16px 0;
  background: rgba(10, 12, 16, 0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 26px; width: auto; display: block; }
.nav-left { display: flex; align-items: center; gap: 16px; }
.nav-social { display: flex; align-items: center; gap: 13px; padding-left: 16px; border-left: 1px solid var(--border-subtle); }
.nav-social a { color: var(--text-secondary); font-size: 1rem; line-height: 1; transition: color var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
.nav-social a:hover { color: var(--accent); transform: translateY(-2px); }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a.link { position: relative; color: var(--text-secondary); font-size: var(--text-sm); transition: color var(--dur-fast); }
.nav-links a.link:hover { color: var(--accent); }
.nav-links a.link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--dur-base) var(--ease-out); }
.nav-links a.link:hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text-primary); font-size: 1.3rem; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; background: transparent;
  color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); padding: 12px 28px;
  border: 1px solid var(--border-subtle); cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: var(--lift-sm); }
.btn.solid { background: var(--accent); color: var(--charcoal-800); border-color: var(--accent); font-weight: var(--weight-semibold); }
.btn.solid:hover { color: var(--charcoal-800); box-shadow: 0 12px 32px var(--accent-glow); }
.btn.sm { padding: 8px 20px; font-size: var(--text-xs); }

/* ---------- Preview bar ---------- */
.lp-preview-bar {
  position: sticky; top: 0; z-index: 1100;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center;
  background: var(--accent); color: var(--charcoal-800);
  padding: 10px 20px; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-align: center;
}
.lp-preview-bar a { text-decoration: underline; }
.lp-preview-mode .navbar { top: 42px; }
@media (max-width: 560px) { .lp-preview-mode .navbar { position: static; } }

/* ---------- Hero ---------- */
.lp-hero {
  position: relative; padding: 168px 0 84px;
  background: var(--charcoal-800); border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.lp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.lp-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grayscale-hero); }
.lp-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .95) 0%, rgba(8, 10, 14, .82) 44%, rgba(8, 10, 14, .58) 74%, rgba(8, 10, 14, .8) 100%),
    linear-gradient(0deg, rgba(8, 10, 14, .92) 0%, rgba(8, 10, 14, .3) 55%, rgba(8, 10, 14, .55) 100%);
}
.lp-hero-inner { position: relative; z-index: 1; }
.lp-hero .eyebrow { margin-bottom: 20px; }
.lp-hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  font-weight: var(--weight-semibold);
  line-height: 1.04; letter-spacing: -0.03em; max-width: 19ch;
  text-wrap: balance;
}
.lp-lead { color: var(--text-secondary); font-size: var(--text-lead); margin-top: 20px; max-width: 62ch; }
.lp-lead p { margin-bottom: 12px; text-wrap: pretty; }
.lp-lead p:last-child { margin-bottom: 0; }
.lp-lead a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.lp-lead a:hover { border-bottom-color: var(--accent); }
.lp-lead strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Body sections ---------- */
.lp-main { display: block; }
.lp-section { padding: 68px 0 0; }
.lp-sections > .lp-section:last-child { padding-bottom: 12px; }
.lp-section--image {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-15); align-items: center;
}
.lp-section--image.lp-section--flip .lp-section-copy { order: 2; }
.lp-section--image.lp-section--flip .lp-section-figure { order: 1; }
.lp-heading { font-size: clamp(1.6rem, 3vw, var(--text-h2)); margin-bottom: 18px; text-wrap: balance; }
h3.lp-heading { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

.lp-section-figure { border: 1px solid var(--border-subtle); overflow: hidden; }
.lp-section-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--img-grayscale); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base); }
.lp-section-figure:hover img { transform: scale(1.04); filter: none; }
.lp-section-figure figcaption { padding: 12px 16px; font-size: var(--text-caps); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); }

/* ---------- Prose (rendered rich content) ---------- */
.lp-prose { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 70ch; }
.lp-prose > *:last-child { margin-bottom: 0; }
.lp-prose p { margin-bottom: 16px; text-wrap: pretty; }
.lp-prose h2, .lp-prose h3, .lp-prose h4 { color: var(--text-primary); margin: 30px 0 12px; }
.lp-prose h2 { font-size: 1.6rem; }
.lp-prose h3 { font-size: 1.28rem; }
.lp-prose h4 { font-size: 1.08rem; }
.lp-prose ul, .lp-prose ol { margin: 0 0 16px 1.15em; }
.lp-prose li { margin-bottom: 9px; }
.lp-prose ul { list-style: none; margin-left: 0; }
.lp-prose ul > li { position: relative; padding-left: 26px; }
.lp-prose ul > li::before {
  content: ''; position: absolute; left: 2px; top: 0.72em;
  width: 8px; height: 1px; background: var(--accent);
}
.lp-prose a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.lp-prose a:hover { border-bottom-color: var(--accent); }
.lp-prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.lp-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 1px 6px; }
.lp-prose blockquote {
  margin: 0 0 16px; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent); color: var(--text-body);
  font-size: var(--text-lead);
}

/* ---------- Project Gallery block ---------- */
.lp-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-gal-item { border: 1px solid var(--border-subtle); overflow: hidden; }
.lp-gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--img-grayscale); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base); }
.lp-gal-item:hover img { transform: scale(1.05); filter: none; }
.lp-gal-item figcaption { padding: 11px 14px; font-size: var(--text-caps); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); }

/* ---------- FAQ block ---------- */
.lp-faq-list { border-top: 1px solid var(--border-subtle); max-width: 900px; }
.lp-faq-item { border-bottom: 1px solid var(--border-subtle); }
.lp-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  color: var(--text-primary); font-size: var(--text-lead);
  transition: color var(--dur-fast);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary:hover { color: var(--accent); }
.lp-faq-item summary i { color: var(--accent); font-size: 0.85rem; flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-spring); }
.lp-faq-item[open] summary i { transform: rotate(45deg); }
.lp-faq-answer { padding: 0 4px 24px; }

/* ---------- Internal links / Related services block ---------- */
.lp-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-link-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  padding: 26px 24px; transition: all var(--dur-base) var(--ease-out);
}
.lp-link-card:hover { border-color: var(--accent); transform: var(--lift-md); }
.lp-link-label { color: var(--text-primary); font-size: var(--text-h4); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.lp-link-desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.lp-link-go { color: var(--accent); font-size: var(--text-caps); margin-top: auto; padding-top: 10px; }
.lp-link-card:hover .lp-link-go i { transform: translateX(4px); }
.lp-link-go i { display: inline-block; transition: transform var(--dur-base) var(--ease-spring); }

/* ---------- CTA band ---------- */
.lp-cta {
  margin-top: 84px; padding: 82px 0; text-align: center;
  border-top: 1px solid var(--border-subtle);
  background: radial-gradient(110% 120% at 50% 0%, rgba(255, 107, 74, .07), transparent 60%), var(--charcoal-800);
}
.lp-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-wrap: balance; }
.lp-cta-body { color: var(--text-secondary); font-size: var(--text-lead); margin: 14px auto 0; max-width: 58ch; text-align: center; }
.lp-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.lp-main > .lp-cta:last-child { margin-bottom: 0; }

/* Everything before the first CTA still needs bottom air. */
.lp-main > *:last-child:not(.lp-cta) { padding-bottom: 90px; }

/* ---------- Footer (identical rules to the static pages) ---------- */
footer { background: var(--bg-footer); padding: 48px 0 32px; }
/* Three columns: brand at the far left, the office block through the middle,
   and Explore seated against the right padding. The old flex rule gave all
   three the same growth, so Explore was stretched across a wide, mostly empty
   third and read as floating near the centre. An "auto" last track shrinks to
   its own content, and justify-self:end puts that content where the eye
   expects it without right-aligning the text itself. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) auto; gap: 40px 72px; align-items: start; margin-bottom: 32px; }
.footer-col { min-width: 0; }
.footer-grid > .footer-col:last-child { justify-self: end; }
/* Tablet: two columns, Explore drops beneath the brand. Phone: one clean stack. */
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; } .footer-grid > .footer-col:last-child { justify-self: start; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: color .25s ease, border-color .25s ease, transform .3s var(--ease-spring); }
.social-row a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer-col h4 { font-size: var(--text-base); font-weight: var(--weight-medium); margin-bottom: 16px; }
.footer-col p { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.7; margin-top: 12px; }
.footer-col .logo img { height: 26px; }
.footer-col a:hover { color: var(--accent); }
/* Office address + map button. Same square outline, icon and hover as the
   Location block in the contact section; scoped to the footer column. */
.footer-col .loc-row { display: flex; align-items: center; gap: 14px; }
.footer-col .loc-row { width: fit-content; }
/* The address sizes to its own text so the arrow sits right beside it,
   rather than being pushed to the far edge of the column by a growing p. */
.footer-col .loc-row p { flex: 0 1 auto; }
.footer-col .map-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: color .25s ease, border-color .25s ease, transform .3s var(--ease-spring); }
.footer-col .map-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer-col .map-btn i { color: inherit; }
footer hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 32px 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.copyright { font-size: 0.75rem; color: var(--text-secondary); }
.admin-link { font-size: 0.75rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-fast); }
.admin-link:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .lp-link-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lp-section--image { grid-template-columns: 1fr; gap: var(--space-8); }
  .lp-section--image.lp-section--flip .lp-section-copy,
  .lp-section--image.lp-section--flip .lp-section-figure { order: initial; }
  .lp-gal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 12, 16, 0.98); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
    padding: 8px 0;
  }
  .nav-links a.link { padding: 14px 24px; }
  .nav-links a.btn, .nav-links a.btn.sm { margin: 10px 24px 4px; justify-content: center; }
  .nav-toggle { display: block; }
}
@media (max-width: 680px) {
  .lp-hero { padding: 132px 0 62px; }
  .lp-section { padding-top: 52px; }
  .lp-cta { margin-top: 60px; padding: 62px 0; }
  .lp-link-grid, .lp-gal-grid { grid-template-columns: 1fr; }
  .lp-hero-actions .btn, .lp-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Matches the reveal utility used across the site. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }


/* ============================================================
   Reusable section components
   Every block is a .lp-section, so vertical rhythm is uniform
   no matter which order an editor arranges them in.
   ============================================================ */

/* Intro — centred lead-in */
.lp-intro { text-align: center; }
.lp-intro .lp-heading { margin-left: auto; margin-right: auto; max-width: 22ch; }
.lp-prose-center { margin-left: auto; margin-right: auto; text-align: center; font-size: var(--text-lead); }

/* Services / Features — icon cards */
.lp-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.lp-services .lp-card-grid, .lp-features .lp-card-grid { margin-top: 32px; }
.lp-card-item {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  padding: 32px 28px; transition: all var(--dur-base) var(--ease-out);
}
a.lp-card-item:hover { border-color: var(--accent); transform: var(--lift-md); }
.lp-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--border-subtle);
  color: var(--accent); font-size: 1.15rem; margin-bottom: 20px;
  transition: border-color var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}
a.lp-card-item:hover .lp-card-icon { border-color: var(--accent); transform: translateY(-3px); }
.lp-card-item h3 { font-size: var(--text-h4); margin-bottom: 10px; }
.lp-card-body { font-size: var(--text-sm); max-width: none; }
.lp-card-body p { margin-bottom: 10px; }
.lp-card-go { color: var(--accent); font-size: var(--text-caps); margin-top: auto; padding-top: 16px; }
a.lp-card-item:hover .lp-card-go i { transform: translateX(4px); }
.lp-card-go i { display: inline-block; transition: transform var(--dur-base) var(--ease-spring); }

/* Booth sizes */
.lp-size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.lp-size { border: 1px solid var(--border-subtle); padding: 28px 24px; background: var(--bg-card); }
.lp-size-label {
  font-size: 1.6rem; font-weight: var(--weight-semibold);
  color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: 1;
}
.lp-size-meta {
  margin-top: 8px; color: var(--accent);
  font-size: var(--text-caps); letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.lp-size-body { margin-top: 14px; font-size: var(--text-sm); max-width: none; }

/* Process — numbered steps */
.lp-step-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.lp-step { display: flex; gap: 24px; padding: 26px 0; border-top: 1px solid var(--border-subtle); }
.lp-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.lp-step-n {
  flex: 0 0 auto; font-size: 1.5rem; font-weight: var(--weight-semibold);
  color: transparent; -webkit-text-stroke: 1.2px var(--accent); line-height: 1.2; opacity: .75;
  font-variant-numeric: tabular-nums;
}
.lp-step-copy h3 { font-size: var(--text-h4); margin-bottom: 8px; }
.lp-step-copy .lp-prose { font-size: var(--text-sm); }

/* Locations served */
.lp-place-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.lp-place {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: 10px 20px; font-size: var(--text-sm);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
a.lp-place:hover { color: var(--accent); border-color: var(--accent); transform: var(--lift-sm); }

/* Related projects */
.lp-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.lp-project { display: block; border: 1px solid var(--border-subtle); background: var(--bg-card); overflow: hidden; }
a.lp-project:hover { border-color: var(--accent); }
.lp-project-ph { overflow: hidden; }
.lp-project-ph img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: var(--img-grayscale);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base);
}
a.lp-project:hover .lp-project-ph img { transform: scale(1.05); filter: none; }
.lp-project-info { padding: 20px 22px; }
.lp-project-info h3 { font-size: var(--text-h4); }
.lp-project-info p { color: var(--text-secondary); font-size: var(--text-xs); margin-top: 6px; }

/* Inquiry form block — .contact rules come from quote-section.css, shared with
   every other page, so the form looks and behaves identically here. */
.lp-main > .contact { margin-top: 20px; }
.lp-main > .contact .section-head { margin-left: 0; }

@media (max-width: 1080px) {
  .lp-card-grid, .lp-size-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .lp-card-grid, .lp-size-grid, .lp-project-grid { grid-template-columns: 1fr; }
  .lp-step { gap: 16px; }
}

/* ---------- Portfolio case pages (/portfolio/{slug}/) ---------- */
/* The case page reuses the landing-page shell, so these are the few additions
   the case layout needs on top of it - nothing here restyles a landing page. */
.case-crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 18px; }
.case-crumbs a { color: var(--text-secondary); }
.case-crumbs a:hover { color: var(--accent); }

.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border-subtle); }
.case-fact dt { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.case-fact dd { margin: 0; font-size: var(--text-base); }

.case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.case-gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.case-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A single image should not be stretched across the full grid width. */
.case-gallery figure:only-child { grid-column: 1 / -1; max-height: 560px; }

.case-back { display: flex; flex-wrap: wrap; gap: 12px 28px; }

@media (max-width: 700px) {
  .case-gallery { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 20px; }
}

/* The same quiet link the Portfolio page uses, in the shared footer. */
.footer-bottom .project-index-link { color: var(--text-secondary); font-size: var(--text-xs); }
.footer-bottom .project-index-link:hover { color: var(--accent); }