/* ==========================================================================
   template-11 sections. Each section has its own width, alignment and density;
   no two neighbours share a structure.
   ========================================================================== */

/* ---------- 1. Hero: full-bleed photo, edge fade into the next ground ---------- */
.hero {
  position: relative;
  min-height: 112svh;
  display: grid;
  align-content: end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* strong enough for pale stone and bright skies, not just dark photos */
  background:
    linear-gradient(to right, rgba(var(--scrim), 0.55) 0%, rgba(var(--scrim), 0.15) 65%, rgba(var(--scrim), 0) 100%),
    linear-gradient(to top, rgba(var(--scrim), 0.9) 22%, rgba(var(--scrim), 0.5) 55%, rgba(var(--scrim), 0.3) 100%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-6);
  padding-bottom: calc(12svh + var(--s-8));
  color: #f3eee4;
  --c-soft: rgba(243, 238, 228, 0.78);
  --c-accent: var(--inv-accent);
}
.hero-inner .label { grid-column: 1 / -1; }
.hero-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.hero-title span { display: block; }
.hero-title span + span { padding-left: 12%; }
.hero-aside {
  grid-column: 8 / -1;
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  max-width: 34ch;
  font-size: var(--step-0);
}
.hero-meta {
  grid-column: 1 / 7;
  grid-row: 4;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-soft);
}
.hero-aside { grid-row: 3 / 5; }

@media (max-width: 860px) {
  .hero { min-height: 104svh; }
  .hero-title span + span { padding-left: 0; }
  .hero-aside,
  .hero-meta { grid-column: 1 / -1; grid-row: auto; }
  .hero-inner { padding-bottom: calc(8svh + var(--s-7)); }
}

/* ---------- 2. Intro: narrow editorial column + edge-to-edge statement ---------- */
.intro { padding-block: var(--s-9) var(--s-10); overflow: hidden; }
.intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-7);
}
.intro-grid > .label { grid-column: 1 / 4; align-self: start; padding-top: 0.6em; }
.intro-lede {
  grid-column: 4 / 11;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
}
.intro-lede em { font-style: normal; color: var(--c-accent); }
.intro-notes {
  grid-column: 4 / 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.intro-notes h2 {
  margin-bottom: var(--s-2);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.intro-notes p { color: var(--c-soft); max-width: 40ch; }

.statement {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s-10);
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: calc((100vw - 2 * var(--gutter)) / 14.6);
  line-height: 0.9;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  white-space: nowrap;
}
.statement .dot { color: var(--c-accent); font-size: 0.5em; transform: translateY(-0.35em); }

@media (max-width: 860px) {
  .intro { padding-block: var(--s-8) var(--s-9); }
  .intro-grid > .label,
  .intro-lede,
  .intro-notes { grid-column: 1 / -1; }
  .intro-notes { grid-template-columns: 1fr; }
  .statement {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--s-9);
    font-size: clamp(2.8rem, 15.5vw, 7rem);
    line-height: 0.95;
  }
  .statement .dot { display: none; }
  .statement span:nth-child(3) { align-self: center; }
  .statement span:nth-child(5) { align-self: flex-end; }
}

/* ---------- 3. Services: sticky heading + ruled list ---------- */
.services { padding-block: var(--s-9); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
}
.services-head {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: 7.5rem;
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  padding-right: var(--s-6);
}
.services-head p { color: var(--c-soft); max-width: 32ch; }
.service-list { grid-column: 5 / -1; counter-reset: svc; border-top: 1px solid var(--c-line); }
.service-list a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 0.85fr) 2rem;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--s-6);
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}
.service-list .num {
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  color: var(--c-accent);
}
.service-list h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.05;
  transition: transform var(--dur-2) var(--ease-out);
}
.service-list p { color: var(--c-soft); font-size: var(--step--1); max-width: 38ch; }
.service-list .arrow {
  justify-self: end;
  color: var(--c-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
}
.service-list a:hover h3,
.service-list a:focus-visible h3 { transform: translateX(0.6rem); }
.service-list a:hover .arrow,
.service-list a:focus-visible .arrow { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .services-head { grid-column: 1 / -1; position: static; margin-bottom: var(--s-7); padding-right: 0; }
  .service-list { grid-column: 1 / -1; }
  .service-list a { grid-template-columns: 2.5rem 1fr; row-gap: var(--s-2); padding-block: var(--s-5); }
  .service-list p { grid-column: 2; }
  .service-list .arrow { display: none; }
}

/* ---------- 4. Projects: expanding side-by-side panels ---------- */
.work { padding-block: var(--s-8) var(--s-9); }
.work-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.work-head > div { display: grid; gap: var(--s-4); }
.panels {
  display: flex;
  gap: var(--s-3);
  height: min(78vh, 46rem);
  padding-inline: var(--gutter);
}
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #222;
  transition: flex-grow var(--dur-3) var(--ease);
  outline-offset: -3px;
}
.panel.is-active { flex-grow: 3.4; }
.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.panel.is-active img { transform: none; }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim), 0.85), rgba(var(--scrim), 0.05) 55%);
}
.panel-tag {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3eee4;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity var(--dur-2) var(--ease);
}
.panel.is-active .panel-tag { opacity: 0; }
.panel-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  color: #f3eee4;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.panel.is-active .panel-info { opacity: 1; transform: none; transition-delay: 0.25s; }
.panel-info .where {
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(243, 238, 228, 0.8);
}
.panel-info h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  white-space: nowrap;
}
.panel-info p { max-width: 42ch; color: rgba(243, 238, 228, 0.86); font-size: var(--step--1); }
.panel-index {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  z-index: 1;
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  color: rgba(243, 238, 228, 0.75);
}

/* touch / small screens: swipe row, info always visible */
@media (max-width: 860px), (hover: none) {
  .panels {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s-4);
    scrollbar-width: none;
  }
  .panels::-webkit-scrollbar { display: none; }
  .panel,
  .panel.is-active { flex: 0 0 min(80vw, 26rem); aspect-ratio: 4 / 5.4; scroll-snap-align: start; }
  .panel img { transform: none; }
  .panel-tag { display: none; }
  .panel-info { opacity: 1; transform: none; padding: var(--s-5); }
  .panel-info h3 { white-space: normal; font-size: var(--step-2); }
}
.work-hint { display: none; margin-top: var(--s-4); padding-inline: var(--gutter); font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-soft); }
@media (max-width: 860px), (hover: none) { .work-hint { display: block; } }

/* ---------- 5. Feature: one photo used twice (blurred ground + sharp inset) ---------- */
.feature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s-10) var(--s-9);
  color: #f3eee4;
  --c-soft: rgba(243, 238, 228, 0.78);
  --c-line: rgba(243, 238, 228, 0.2);
  --c-accent: var(--inv-accent);
  background: var(--inv-bg);
}
.feature-bg {
  position: absolute;
  inset: -8%;
  z-index: -1;
}
.feature-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(42px) saturate(1.1) brightness(0.5);
  transform: scale(1.15);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: end;
}
.feature-inset {
  grid-column: 6 / -1;
  grid-row: 1 / 3;
  position: relative;
}
.feature-inset img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.feature-inset figcaption {
  margin-top: var(--s-3);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-soft);
  text-align: right;
}
.feature-top { grid-column: 1 / 6; grid-row: 1; align-self: start; display: grid; gap: var(--s-4); }
/* the name runs over the inset's left edge: the one deliberate grid break */
.feature-name {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  margin-bottom: 1.2em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display);
  line-height: 0.82;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}
.feature-copy {
  grid-column: 1 / 6;
  grid-row: 3;
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-5);
}
.feature-copy p { max-width: 44ch; }
.feature-facts {
  grid-column: 7 / -1;
  grid-row: 3;
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
}
.feature-facts dt { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-soft); }
.feature-facts dd { margin-top: var(--s-1); font-family: var(--font-display); font-size: var(--step-1); }

@media (max-width: 860px) {
  .feature { padding-block: var(--s-9) var(--s-8); }
  .feature-top, .feature-inset, .feature-name, .feature-copy, .feature-facts { grid-column: 1 / -1; grid-row: auto; }
  .feature-inset { margin-top: var(--s-6); }
  .feature-name { margin-top: var(--s-5); margin-bottom: 0; font-size: clamp(2.8rem, 14vw, 6rem); }
  .feature-inset figcaption { text-align: left; }
  .feature-facts { grid-template-columns: 1fr 1fr; }
}

/* ---------- 6. Stats: oversized numerals, staggered ---------- */
.stats { padding-block: var(--s-9) var(--s-10); }
.stats-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.stats-head .label { grid-column: 1 / 4; align-self: start; padding-top: 0.6em; }
.stats-head p:not(.label) { grid-column: 4 / 10; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
.stat-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: start;
}
.stat { display: grid; gap: var(--s-3); }
.stat:nth-child(1) { grid-column: 1 / 4; }
.stat:nth-child(2) { grid-column: 4 / 10; margin-top: var(--s-9); justify-self: center; }
.stat:nth-child(3) { grid-column: 10 / -1; margin-top: var(--s-11); justify-self: end; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 12.5vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
}
.stat-num sup { font-size: 0.35em; vertical-align: top; position: relative; top: 0.25em; color: var(--c-accent); margin-left: 0.04em; }
.stat-label {
  max-width: 24ch;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  color: var(--c-soft);
  font-size: var(--step--1);
}
.stat-label strong { display: block; color: var(--c-ink); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; font-size: var(--step--2); margin-bottom: var(--s-1); }

@media (max-width: 860px) {
  .stats-head .label, .stats-head p:not(.label) { grid-column: 1 / -1; }
  .stats-head { row-gap: var(--s-4); }
  .stat:nth-child(n) { grid-column: 1 / -1; margin-top: var(--s-7); }
  .stat:nth-child(2) { justify-self: end; text-align: right; }
  .stat:nth-child(2) .stat-label { margin-left: auto; }
}

/* ---------- 7. Reviews: overlapping place cards that pop in ---------- */
.reviews { padding-block: var(--s-9) var(--s-10); overflow: hidden; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
}
.reviews-head { grid-column: 1 / 5; display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.reviews-head p { color: var(--c-soft); max-width: 30ch; }
.cards {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: auto;
}
.card {
  --r: 0deg;
  position: relative;
  display: grid;
  gap: var(--s-5);
  align-content: space-between;
  padding: var(--s-6);
  background: var(--card-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(20, 30, 26, 0.35);
  transform: rotate(var(--r));
}
.card:nth-child(1) { grid-column: 1 / 5; grid-row: 1; --r: -1.6deg; z-index: 1; }
.card:nth-child(2) { grid-column: 3 / 7; grid-row: 2; --r: 1.2deg; margin-top: -2.5rem; z-index: 2; }
.card:nth-child(3) { grid-column: 1 / 5; grid-row: 3; --r: -0.6deg; margin-top: -2rem; margin-left: 1.5rem; z-index: 3; }
.card blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; }
.card blockquote::before { content: "\201C"; display: block; height: 0.55em; font-size: 3em; line-height: 1; color: var(--c-accent); }
.card footer { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; }
.card footer span:last-child { color: var(--c-soft); }

.js [data-pop] {
  opacity: 0;
  transform: translateY(40px) scale(0.92) rotate(calc(var(--r) - 4deg));
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.js [data-pop].is-in { opacity: 1; transform: rotate(var(--r)); }

@media (max-width: 860px) {
  .reviews-head { grid-column: 1 / -1; margin-bottom: var(--s-7); }
  .cards { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .card:nth-child(n) { grid-column: 1; grid-row: auto; margin: 0; }
  .card:nth-child(2) { margin: -1rem 0 0 1.25rem; }
  .card:nth-child(3) { margin: -1rem 1.25rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-pop] { transform: rotate(var(--r)); }
}

/* ---------- 8. Page end: light ground dissolves into a full-bleed photo ---------- */
.end { position: relative; padding-top: var(--s-9); }
.end-media {
  position: relative;
  min-height: 115svh;
  display: grid;
  align-content: end;
}
/* One scene: the photo runs on past the section, down behind the (transparent) footer,
   darkening as it goes. --footer-h is set by JS; without it the photo simply ends at
   the section and the footer sits on the page's dark ground. */
/* --end-fade: the soft top edge where the page dissolves into the photo. Eased (not a
   straight ramp, whose start reads as a line) and measured on the section alone, not the
   photo's extra height under the footer. */
.end-media {
  --fade-h: calc((100% - var(--footer-h, 0px)) * 0.55);
  --end-fade: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.03) calc(var(--fade-h) * 0.15),
    rgba(0, 0, 0, 0.12) calc(var(--fade-h) * 0.3),
    rgba(0, 0, 0, 0.3) calc(var(--fade-h) * 0.45),
    rgba(0, 0, 0, 0.55) calc(var(--fade-h) * 0.6),
    rgba(0, 0, 0, 0.8) calc(var(--fade-h) * 0.77),
    rgba(0, 0, 0, 0.95) calc(var(--fade-h) * 0.9),
    #000 var(--fade-h));
}
.end-media > img,
.end-media::after {
  -webkit-mask-image: var(--end-fade);
  mask-image: var(--end-fade);
}
.end-media > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--footer-h, 0px));
  object-fit: cover;
}
.end-media::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--footer-h, 0px)) 0;
  background:
    linear-gradient(to right, rgba(var(--scrim), 0.45) 0%, rgba(var(--scrim), 0) 60%),
    linear-gradient(to top,
      rgba(var(--scrim), 0.94) 0,
      rgba(var(--scrim), 0.86) var(--footer-h, 0px),
      rgba(var(--scrim), 0.72) calc(var(--footer-h, 0px) + 18%),
      rgba(var(--scrim), 0.4) calc(var(--footer-h, 0px) + 38%),
      rgba(var(--scrim), 0) calc(var(--footer-h, 0px) + 62%));
  pointer-events: none;
}
.end-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-6);
  padding-bottom: var(--s-9);
  color: #f3eee4;
  --c-soft: rgba(243, 238, 228, 0.8);
  --c-accent: var(--inv-accent);
}
.end-inner .label { grid-column: 1 / -1; }
.end-title {
  grid-column: 1 / 10;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}
.end-actions {
  grid-column: 1 / 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.end-actions .tel { font-family: var(--font-display); font-size: var(--step-2); text-decoration: none; }
.end-actions .tel:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.end-note { grid-column: 9 / -1; align-self: end; color: var(--c-soft); font-size: var(--step--1); max-width: 30ch; }

@media (max-width: 860px) {
  .end-title, .end-actions, .end-note { grid-column: 1 / -1; }
  .end-media { min-height: 100svh; }
}

/* ---------- Footer: transparent, over the page-end photo where there is one
   (body is the footer colour, so pages without that photo get a plain dark footer) ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  background: transparent;
  color: #e9e3d7;
  --c-soft: #9aa49e;
  --c-line: rgba(233, 227, 215, 0.14);
  --c-accent: var(--inv-accent);
  padding-top: var(--s-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-7);
  padding-bottom: var(--s-7);
}
.footer-col { grid-column: span 3; display: grid; gap: var(--s-3); align-content: start; font-size: var(--step--1); }
.footer-col:first-child { grid-column: span 4; }
.footer-col h2 { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-soft); }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-col .big { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; }
.footer-col ul { display: grid; gap: var(--s-2); }
.footer-word {
  display: block;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: calc((100vw - 2 * var(--gutter)) / 7.25);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e9e3d7;
  opacity: 0.95;
  margin-bottom: 0.12em;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--c-soft);
}
.footer-base a { color: inherit; }

@media (max-width: 860px) {
  .footer-col, .footer-col:first-child { grid-column: 1 / -1; }
  .footer-col:nth-child(n+2) { grid-column: span 6; }
}
@media (max-width: 520px) {
  .footer-col:nth-child(n+2) { grid-column: 1 / -1; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-head { padding-block: calc(var(--s-10) + 2rem) var(--s-8); }
.page-head .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-6); }
.page-head .label { grid-column: 1 / -1; }
.page-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display);
  line-height: 0.84;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.page-head .lede { grid-column: 6 / -1; max-width: 36ch; }
@media (max-width: 860px) { .page-head .lede { grid-column: 1 / -1; } }

/* service detail: alternating density, not alternating image sides */
.svc { padding-block: var(--s-9); border-top: 1px solid var(--c-line); }
.svc .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-6); align-items: start; }
.svc-num { grid-column: 1 / 3; font-family: var(--font-display); font-size: var(--step-5); line-height: 0.85; color: var(--c-accent); }
.svc-body { grid-column: 3 / 8; display: grid; gap: var(--s-5); }
.svc-body h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; text-transform: uppercase; letter-spacing: var(--track-display); }
.svc-body p { color: var(--c-soft); max-width: 52ch; }
.svc-list { grid-column: 9 / -1; display: grid; border-top: 1px solid var(--c-line); }
.svc-list li { padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); font-size: var(--step--1); }
.svc-photo { grid-column: 8 / -1; }
.svc-photo img { width: 100%; object-fit: cover; }
.svc--wide .svc-photo { grid-column: 1 / -1; margin-top: var(--s-6); }
.svc--wide .svc-photo img { aspect-ratio: 21 / 9; }
.svc--tall .svc-photo img { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .svc-num, .svc-body, .svc-list, .svc-photo { grid-column: 1 / -1; }
}

/* projects page: alternative gallery variant (one large image + numbered list) */
.index-gallery { padding-block: var(--s-8) var(--s-9); }
.index-gallery .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
.ig-stage { grid-column: 1 / 8; position: sticky; top: 6.5rem; height: min(calc(100svh - 9rem), 54rem); overflow: hidden; border-radius: var(--r-card); background: #222; }
.ig-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.ig-stage img.is-active { opacity: 1; }
.ig-list { grid-column: 9 / -1; border-top: 1px solid var(--c-line); counter-reset: ig; }
.ig-list button {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-2) var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--c-soft);
  transition: color var(--dur-1) var(--ease);
}
.ig-list button[aria-pressed="true"],
.ig-list button:hover { color: var(--c-ink); }
.ig-list .n { font-size: var(--step--2); letter-spacing: var(--track-caps); color: var(--c-accent); padding-top: 0.5em; }
.ig-list .ig-title { display: block;  font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.05; text-transform: uppercase; letter-spacing: var(--track-display); }
.ig-list .ig-desc { grid-column: 2; font-size: var(--step--1); max-width: 36ch; }
.ig-list .ig-thumb { display: none; }
@media (max-width: 860px) {
  .ig-stage { display: none; }
  .ig-list { grid-column: 1 / -1; }
  .ig-list .ig-thumb { display: block; grid-column: 1 / -1; margin-bottom: var(--s-3); }
  .ig-list .ig-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* contact page */
.contact { padding-block: var(--s-7) var(--s-10); }
.contact .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-8); align-items: start; }
.contact-details { grid-column: 1 / 5; display: grid; gap: var(--s-6); }
.contact-details dt { font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-soft); margin-bottom: var(--s-1); }
.contact-details dd { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; }
.contact-details dd a { text-decoration: none; }
.contact-details dd a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.form { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); padding: var(--s-7); background: var(--card-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.form h2 { grid-column: 1 / -1; }
.field { display: grid; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 40%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--c-accent); }
.form .btn { justify-self: start; }
.form-note { grid-column: 1 / -1; font-size: var(--step--2); color: var(--c-soft); }
.areas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); padding-top: var(--s-7); border-top: 1px solid var(--c-line); }
.areas .label { grid-column: 1 / 5; }
.areas ul { grid-column: 5 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-family: var(--font-display); font-size: var(--step-3); text-transform: uppercase; letter-spacing: var(--track-display); line-height: 1.2; }
@media (max-width: 860px) {
  .contact-details, .form, .areas .label, .areas ul { grid-column: 1 / -1; }
  .form { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); }
  .areas ul { margin-top: var(--s-5); font-size: var(--step-2); }
}