:root {
  --charcoal: #1c1a17;
  --charcoal-2: #262320;
  --concrete: #8a8378;
  --concrete-light: #d8d3c9;
  --paper: #f3efe7;
  --paper-2: #e9e2d5;
  --card: #fffdf9;
  --line: rgba(28,26,23,0.13);
  --ink-soft: #4a453d;
  --orange: #e8600c;
  --orange-dark: #b84a09;
  --black: #0f0e0c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--black); overflow-y: scroll; }
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(120deg, rgba(28,26,23,0.010) 0 64px, rgba(28,26,23,0) 64px 128px);
  color: var(--charcoal);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.page-wrap > *:nth-last-child(2) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
h1, h2, h3, .brand {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
a { color: inherit; text-decoration: none; }
.stripe-bar {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--orange),
    var(--orange) 14px,
    var(--black) 14px,
    var(--black) 28px
  );
}
header {
  background: var(--charcoal);
  padding: 20px 6%;
  min-height: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-img {
  height: 100px;
  width: 100px;
  object-fit: contain;
}
.brand {
  color: var(--paper);
  font-size: 1.4rem;
  font-weight: 700;
}
.brand span { color: var(--orange); }
nav { display: flex; gap: 28px; align-items: center; }
nav a {
  color: var(--concrete-light);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}
nav a:hover, nav a.active { color: var(--orange); }
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 101;
  padding: 6px;
}
.nav-toggle-label span {
  width: 26px;
  height: 3px;
  background: var(--paper);
  border-radius: 2px;
}
.call-btn {
  background: var(--orange);
  color: var(--paper) !important;
  padding: 10px 22px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero {
  background: linear-gradient(rgba(15,14,12,0.72), rgba(15,14,12,0.72)),
    repeating-linear-gradient(120deg, #3a352d, #3a352d 40px, #332e27 40px, #332e27 80px);
  color: var(--paper);
  padding: 110px 6% 100px;
  text-align: left;
}
.hero-inner { max-width: 1200px; margin: 0 auto; }
.hero-copy { max-width: 640px; }
.hero h1 {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--orange); }
.hero p {
  font-size: 1.1rem;
  color: var(--concrete-light);
  margin-bottom: 32px;
  max-width: 500px;
}
.page-banner {
  background: linear-gradient(rgba(15,14,12,0.78), rgba(15,14,12,0.78)),
    repeating-linear-gradient(120deg, #3a352d, #3a352d 40px, #332e27 40px, #332e27 80px);
  color: var(--paper);
  padding: 70px 6%;
  text-align: left;
}
.page-banner h1 { font-size: 2.4rem; }
.page-banner p { color: var(--concrete-light); margin-top: 10px; font-size: 1rem; }

/* Contact's main section is the only content block between the banner and
   footer, so the shared "center content in leftover space" behavior (see
   .page-wrap > *:nth-last-child(2) below) would center it, splitting the
   slack into a gap above AND below the form on tall viewports. Keep the
   section growing to absorb that slack (so there's no dangling gap before
   the footer), but align its content to the top instead of centering it,
   so any leftover space collects in one place, below the form. */
.page-contact section { justify-content: flex-start !important; }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  background: var(--orange);
  color: var(--paper);
  padding: 14px 30px;
  border-radius: 3px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  display: inline-block;
}
.btn-secondary {
  border: 2px solid var(--concrete-light);
  color: var(--paper);
  padding: 12px 28px;
  border-radius: 3px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  display: inline-block;
}
.trust-strip {
  background: var(--orange-dark);
  color: var(--paper);
  padding: 14px 6%;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* width:100% is required: .page-wrap is a flex column, so `margin: 0 auto`
   alone makes sections shrink-to-fit their content instead of filling. */
section { padding: 80px 6%; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Full-bleed bands sit outside the max-width, so they must not be <section>. */
.band { padding: 80px 6%; }
.band-inner { max-width: 1200px; margin: 0 auto; }
.band-dark { background: var(--charcoal-2); color: var(--paper); }
.band-dark .section-title { color: var(--paper); }
.band-intro { color: var(--concrete-light); max-width: 620px; font-size: 0.98rem; }

/* Tinted light band, so consecutive light sections read as distinct surfaces. */
.band-light {
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(120deg, rgba(28,26,23,0.013) 0 64px, rgba(28,26,23,0) 64px 128px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-light .band-intro { color: var(--ink-soft); }

.section-label {
  color: var(--orange);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-title {
  font-size: 2.1rem;
  margin-bottom: 20px;
  color: var(--charcoal);
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.split-copy p { color: var(--ink-soft); margin-bottom: 16px; }
.photo-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--orange);
  color: var(--paper);
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 3px;
}
.plate-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.id-plate {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 26px 22px;
  border-radius: 4px;
  border: 1px solid rgba(232,96,12,0.35);
  background:
    radial-gradient(circle 2.5px at 13px 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 13px calc(100% - 13px), var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) calc(100% - 13px), var(--orange) 99%, transparent 100%),
    var(--charcoal-2);
}
.plate-value {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.plate-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--concrete-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.service-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 44px auto 0;
}
.service-list-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 24px 24px;
  box-shadow: 0 1px 2px rgba(28,26,23,0.04);
}
.service-list-item .service-icon { margin-bottom: 0; }
.service-list-item h3 { font-size: 1.05rem; color: var(--charcoal); margin-bottom: 6px; }
.service-list-item p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.service-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon svg { width: 22px; height: 22px; }
.services-decor-wrap { padding: 60px 0 0 0 !important; width: 100%; }
.step-plate-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 44px auto 0;
}
.step-plate {
  flex: 1;
  min-width: 220px;
  padding: 30px 26px;
  border-radius: 4px;
  border: 1px solid rgba(232,96,12,0.35);
  background:
    radial-gradient(circle 2.5px at 13px 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 13px calc(100% - 13px), var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) calc(100% - 13px), var(--orange) 99%, transparent 100%),
    var(--charcoal-2);
}
.step-plate .step-number {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--orange);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.step-plate h3 {
  font-size: 1.15rem;
  color: var(--paper);
  margin-bottom: 8px;
}
.step-plate p {
  color: var(--concrete-light);
  font-size: 0.92rem;
  margin: 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.service-card {
  background: var(--charcoal);
  padding: 30px 26px;
  border-radius: 4px;
  border-top: 3px solid var(--orange);
}
.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: var(--paper);
}
.service-card p { color: var(--concrete-light); font-size: 0.92rem; margin: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.contact-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}
.contact-note { margin-top: 8px; }
.contact-info,
.contact-steps {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(28,26,23,0.04);
}
.contact-steps h2 { font-size: 1rem; margin-bottom: 6px; }
.contact-steps ol { list-style: none; }
.contact-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.contact-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.contact-steps strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
  margin-bottom: 2px;
}
.contact-steps p { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }
.step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--paper);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.contact-info p { color: var(--ink-soft); margin-bottom: 6px; font-size: 0.88rem; }
.contact-info a.call-link {
  color: var(--orange-dark);
  font-weight: 600;
}
form {
  background: var(--charcoal-2);
  padding: 20px 24px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
form label {
  display: block;
  color: var(--concrete-light);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
form input, form textarea, form select {
  width: 100%;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--charcoal);
  transition: border-color 0.15s, box-shadow 0.15s;
}
form input:hover, form textarea:hover, form select:hover { border-color: rgba(232,96,12,0.35); }
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,96,12,0.18);
}
form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1a17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}
form select:invalid { color: #6a655c; }
form textarea { resize: vertical; min-height: 44px; }
form button {
  margin-top: 2px;
  width: 100%;
  background: var(--orange);
  color: var(--paper);
  border: none;
  padding: 12px;
  border-radius: 3px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
}
form button:hover { background: var(--orange-dark); }
form button:active { transform: translateY(1px); }
form button:disabled { opacity: 0.7; cursor: not-allowed; }
.mini-cta {
  background: var(--charcoal);
  color: var(--paper);
  text-align: center;
  padding: 60px 6%;
}
.mini-cta h2 { font-size: 1.8rem; margin-bottom: 20px; }
footer {
  background: var(--black);
  color: var(--concrete);
  padding: 40px 6% 30px;
  text-align: center;
  font-size: 0.85rem;
}
footer .brand { font-size: 1.1rem; margin-bottom: 10px; display: block; }
footer p { margin-bottom: 6px; }
.footer-logo { height: 70px; margin-bottom: 10px; }
@media (max-width: 800px) {
  .nav-toggle-label { display: flex; }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--charcoal);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 6% 24px;
    gap: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .step-plate-row { flex-direction: column; }
  .service-list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Image frames and placeholder slots (About + Gallery)
   A .media-frame fixes the aspect ratio, so an <img> dropped in
   place of the .img-slot needs no extra styling.
   ============================================================ */
.media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--charcoal-2);
}
.media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.img-slot {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(232,96,12,0.35);
  color: var(--orange);
  background:
    radial-gradient(circle 2.5px at 13px 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 13px calc(100% - 13px), var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) calc(100% - 13px), var(--orange) 99%, transparent 100%),
    var(--charcoal-2);
}
.img-slot svg { width: 30px; height: 30px; flex-shrink: 0; }
.img-slot-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--paper);
}
.img-slot-note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--concrete);
  max-width: 210px;
}

/* Outlined button for light backgrounds */
.btn-outline-dark {
  border: 2px solid var(--charcoal);
  color: var(--charcoal);
  padding: 12px 28px;
  border-radius: 3px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  display: inline-block;
  transition: background 0.2s, color 0.2s;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible { background: var(--charcoal); color: var(--paper); }

/* ============================================================
   About page
   ============================================================ */
.page-about .story-section { padding-bottom: 50px; }
.story-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.story-copy p { color: var(--ink-soft); margin-bottom: 16px; }
.story-copy .lead {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
  margin-bottom: 22px;
}
.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.story-media { position: relative; }
.story-frame { aspect-ratio: 4/5; }

.page-about .glance-section { padding-top: 0; padding-bottom: 70px; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.value-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--charcoal);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 28px 26px;
}
.value-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(232,96,12,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-icon svg { width: 21px; height: 21px; }
.value-card h3 { font-size: 1.05rem; color: var(--paper); margin-bottom: 7px; }
.value-card p { color: var(--concrete-light); font-size: 0.92rem; margin: 0; }

.scope-intro { color: var(--ink-soft); max-width: 620px; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 32px;
  padding: 0;
}
.chip {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 3px;
  padding: 9px 16px;
}

/* ============================================================
   Gallery page
   ============================================================ */
.gallery-head {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 48px;
}
.gallery-head-copy p { color: var(--ink-soft); max-width: 560px; margin: 0; }
.gallery-status {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 22px;
  border-radius: 4px;
  border: 1px solid rgba(232,96,12,0.35);
  background:
    radial-gradient(circle 2.5px at 13px 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) 13px, var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 13px calc(100% - 13px), var(--orange) 99%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 13px) calc(100% - 13px), var(--orange) 99%, transparent 100%),
    var(--charcoal-2);
}
.gallery-status h3 { font-size: 1rem; color: var(--paper); margin-bottom: 6px; }
.gallery-status p { color: var(--concrete-light); font-size: 0.87rem; margin: 0; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.project-card {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,26,23,0.04);
}
.project-card .media-frame { border-radius: 0; }
.project-card .img-slot { border: none; border-radius: 0; }
.project-card figcaption {
  border-top: 2px solid var(--orange);
  padding: 16px 20px 20px;
}
.project-card h3 { font-size: 1rem; color: var(--charcoal); margin-bottom: 6px; }
.project-card p { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }

/* ============================================================
   Home page
   ============================================================ */
.band-actions { text-align: center; margin-top: 44px; }
.page-home .band-light .scope-intro { margin-bottom: 40px; }

/* ============================================================
   Home + About + Gallery responsive
   ============================================================ */
@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr 0.8fr; gap: 40px; }
  .gallery-head { grid-template-columns: 1fr; gap: 32px; }
  .gallery-status { max-width: 560px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-frame { aspect-ratio: 4/3; }
  .story-media { max-width: 520px; }
  .values-grid { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; gap: 36px; }
  .split-copy + .media-frame { max-width: 520px; }
}
@media (max-width: 620px) {
  .page-home section,
  .page-about section,
  .page-gallery section { padding: 56px 6%; }
  .page-about .glance-section { padding-top: 0; padding-bottom: 52px; }
  .band { padding: 56px 6%; }
  .page-home .section-title,
  .page-about .section-title,
  .page-gallery .section-title { font-size: 1.65rem; }
  .page-about .page-banner,
  .page-gallery .page-banner { padding: 54px 6%; }
  .page-about .page-banner h1,
  .page-gallery .page-banner h1 { font-size: 1.85rem; }
  .page-home .mini-cta h2,
  .page-about .mini-cta h2,
  .page-gallery .mini-cta h2 { font-size: 1.5rem; }
  .story-copy .lead { font-size: 1.2rem; }
  .story-media { max-width: none; }
  .id-plate { min-width: 100%; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .services-grid { grid-template-columns: 1fr; }
  .split-copy + .media-frame { max-width: none; }
  .value-card { padding: 24px 20px; gap: 14px; }
  .hero { padding: 70px 6%; }
  .btn-row .btn-primary,
  .btn-row .btn-secondary { width: 100%; text-align: center; }
  .story-actions .btn-primary,
  .story-actions .btn-outline-dark { width: 100%; text-align: center; }
}