/* ═══════════════════════════════════════════════════════════════════
   Atelier Terra — Inner Pages Stylesheet
   Extends main.css — always load main.css first
   ═══════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO ───────────────────────────────────────────────────────── */
.page-hero {
  padding: clamp(48px,6vw,80px) var(--mh) clamp(60px,8vw,100px);
  border-bottom: 1px solid var(--ghost);
  position: relative;
}
.page-hero .eyebrow { margin-bottom: 1.2rem }
.page-hero h1 {
  font-size: clamp(2.4rem,6vw,5.5rem);
  line-height: 1.0; letter-spacing: -0.02em;
  color: var(--limestone); max-width: 16ch;
}
.page-hero-sub {
  margin-top: 1.6rem;
  font-size: clamp(1rem,1.6vw,1.15rem);
  color: var(--sandstone); max-width: 52ch; line-height: 1.85;
}
.page-hero-meta {
  margin-top: 2.4rem;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.page-hero-meta span {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--warm-mid);
}

/* ── INNER CONTENT ───────────────────────────────────────────────────── */
.page-content {
  padding: var(--gap) var(--mh);
  max-width: 1400px;
}
.page-content p {
  font-size: clamp(1rem,1.4vw,1.1rem);
  color: var(--sandstone); line-height: 1.9;
  max-width: 68ch; margin-bottom: 1.5em;
}
.page-content p:last-child { margin-bottom: 0 }
.page-content h2 {
  font-size: clamp(1.6rem,3.5vw,2.8rem);
  color: var(--limestone); margin: clamp(48px,6vw,72px) 0 1.2rem;
  letter-spacing: -0.02em; line-height: 1.1;
}
.page-content h3 {
  font-size: clamp(1rem,1.8vw,1.25rem);
  color: var(--limestone); margin: 2.4rem 0 .7rem;
}

/* ── WORK GRID ───────────────────────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3px;
}
.work-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; display: block;
  background: var(--soil);
}
.work-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.5) sepia(.3) brightness(.72) contrast(1.1);
  transition: filter .7s var(--eout), transform 1s var(--eout);
}
.work-card:hover img {
  filter: saturate(.75) sepia(.15) brightness(.85) contrast(1.05);
  transform: scale(1.04);
}
.work-card-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(20px,3vw,36px);
  background: linear-gradient(transparent, rgba(5,6,6,.8));
  transform: translateY(4px);
  transition: transform .4s var(--eout);
}
.work-card:hover .work-card-cap { transform: none }
.work-card-type {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--warm-mid); display: block; margin-bottom: .4rem;
}
.work-card-title {
  font-size: clamp(.95rem,1.8vw,1.2rem); font-weight: 300;
  color: var(--limestone); letter-spacing: .01em;
}
.work-card-arrow {
  position: absolute; top: clamp(16px,2.5vw,28px); right: clamp(16px,2.5vw,28px);
  width: 36px; height: 36px; border: 1px solid var(--ghost-mid);
  display: flex; align-items: center; justify-content: center;
  color: var(--sandstone); font-size: .9rem;
  opacity: 0; transition: opacity .35s ease;
}
.work-card:hover .work-card-arrow { opacity: 1 }

/* Work — image gallery inside a project (future) */
.work-gallery {
  display: grid; gap: 3px;
  margin: clamp(40px,6vw,72px) 0;
}
.work-gallery.full  { grid-template-columns: 1fr }
.work-gallery.half  { grid-template-columns: 1fr 1fr }
.work-gallery.third { grid-template-columns: 1fr 1fr 1fr }
.work-gallery img {
  width: 100%; display: block; object-fit: cover;
  filter: saturate(.52) sepia(.28) brightness(.78) contrast(1.1);
}
.work-gallery.full  img { aspect-ratio: 16/7 }
.work-gallery.half  img { aspect-ratio: 3/2 }
.work-gallery.third img { aspect-ratio: 1/1 }

/* ── THINKING / BLOG ─────────────────────────────────────────────────── */
.thinking-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(28px,4vw,52px);
  padding: var(--gap) var(--mh);
}
.thinking-card { display: flex; flex-direction: column; gap: 1rem }
.thinking-card-img {
  aspect-ratio: 3/2; overflow: hidden; background: var(--soil);
}
.thinking-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.5) sepia(.3) brightness(.72);
  transition: filter .5s ease, transform .7s var(--eout);
}
.thinking-card:hover .thinking-card-img img {
  filter: saturate(.72) sepia(.15) brightness(.85);
  transform: scale(1.04);
}
.thinking-card-meta {
  display: flex; align-items: center; gap: 1rem;
}
.thinking-card-date {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm-mid);
}
.thinking-card-tag {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); border: 1px solid var(--clay);
  padding: 2px 8px;
}
.thinking-card h2 {
  font-size: clamp(1rem,1.8vw,1.3rem); font-weight: 300;
  color: var(--limestone); letter-spacing: -.01em; line-height: 1.3;
  margin: 0;
}
.thinking-card p {
  font-size: .9rem; color: var(--sandstone); line-height: 1.8; margin: 0;
}
.thinking-card a {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--warm-mid); transition: color .3s ease; margin-top: auto;
}
.thinking-card a:hover { color: var(--limestone) }

/* ── ARTICLE (thinking post) ─────────────────────────────────────────── */
.article-wrap {
  display: grid;
  grid-template-columns: 1fr clamp(280px,28vw,360px);
  gap: clamp(48px,6vw,96px);
  padding: var(--gap) var(--mh);
  align-items: start;
}
.article-body { max-width: 68ch }
.article-body p {
  font-size: clamp(1rem,1.4vw,1.1rem);
  color: var(--sandstone); line-height: 1.95; margin-bottom: 1.6em;
}
.article-body h2 {
  font-size: clamp(1.4rem,2.8vw,2rem);
  color: var(--limestone); margin: 2.4rem 0 .8rem;
  letter-spacing: -0.015em; line-height: 1.15;
}
.article-body h3 {
  font-size: clamp(.95rem,1.6vw,1.15rem);
  color: var(--limestone); margin: 1.8rem 0 .5rem;
}

/* Article — image blocks */
.article-img-full {
  margin: clamp(36px,5vw,60px) 0;
}
.article-img-full img {
  width: 100%; display: block; object-fit: cover;
  aspect-ratio: 16/7;
  filter: saturate(.52) sepia(.28) brightness(.78) contrast(1.1);
}
.article-img-half {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; margin: clamp(36px,5vw,60px) 0;
}
.article-img-half img {
  width: 100%; display: block; object-fit: cover;
  aspect-ratio: 3/2;
  filter: saturate(.52) sepia(.28) brightness(.78) contrast(1.1);
}
.article-img-caption {
  font-size: .72rem; color: var(--warm-mid);
  letter-spacing: .06em; margin-top: .8rem; line-height: 1.5;
}

/* Article — pullquote */
.article-quote {
  margin: clamp(36px,5vw,60px) 0;
  padding: clamp(24px,3.5vw,40px) clamp(24px,4vw,48px);
  border-left: 2px solid var(--clay);
  background: rgba(79,57,43,.08);
}
.article-quote blockquote {
  font-size: clamp(1.1rem,2.2vw,1.5rem); font-weight: 300;
  color: var(--limestone); line-height: 1.4; letter-spacing: -.01em;
  margin-bottom: .8rem;
}
.article-quote cite {
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm-mid); font-style: normal;
}

/* Article sidebar */
.article-sidebar {
  position: sticky; top: clamp(80px,10vw,120px);
}
.article-sidebar-section {
  margin-bottom: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--ghost);
}
.article-sidebar-section:last-child { border-bottom: none }
.article-sidebar-label {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--warm-mid); margin-bottom: .8rem; display: block;
}
.article-sidebar-title {
  font-size: .9rem; font-weight: 300; color: var(--limestone);
  line-height: 1.4; letter-spacing: .01em;
}
.article-related { display: flex; flex-direction: column; gap: 1.2rem }
.article-related-item { display: flex; gap: .8rem; align-items: flex-start }
.article-related-item img {
  width: 60px; height: 60px; object-fit: cover; flex-shrink: 0;
  filter: saturate(.45) sepia(.3) brightness(.72);
}
.article-related-item p {
  font-size: .78rem; color: var(--sandstone); line-height: 1.5; margin: 0;
}

/* ── POST BLOCKS (CMS block editor output) ──────────────────────────── */
/* The block editor serializes into .post-block elements. These can appear
   anywhere inside .article-body on a post page, or inside the admin preview. */
.article-body .post-block { max-width: none }
.article-body .post-block + .post-block { margin-top: clamp(32px,4vw,56px) }

.post-text p { font-size: clamp(1rem,1.4vw,1.1rem); color: var(--sandstone); line-height: 1.95; margin-bottom: 1.4em }
.post-text h2 { font-size: clamp(1.4rem,2.8vw,2rem); color: var(--limestone); margin: 1.8rem 0 .8rem; letter-spacing: -0.015em; line-height: 1.15 }
.post-text h3 { font-size: clamp(.95rem,1.6vw,1.15rem); color: var(--limestone); margin: 1.6rem 0 .5rem }
.post-text blockquote { border-left: 2px solid var(--sandstone); padding: .4rem 1.2rem; color: var(--warm-mid); font-style: italic; margin: 1rem 0 }
.post-text ul, .post-text ol { padding-left: 1.4rem; margin-bottom: 1.2em; color: var(--sandstone); line-height: 1.9 }
.post-text a { color: var(--sandstone); text-decoration: underline; text-underline-offset: 3px }

.post-heading { color: var(--limestone); letter-spacing: -0.015em; line-height: 1.2 }
h2.post-heading { font-size: clamp(1.4rem,2.8vw,2rem); margin: 0 }
h3.post-heading { font-size: clamp(1.05rem,1.8vw,1.25rem); color: var(--sandstone); text-transform: uppercase; letter-spacing: .08em; margin: 0 }

/* Split — 1/2 text, 1/2 image */
.post-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,3vw,48px);
  align-items: center;
}
.post-split-left { direction: rtl }
.post-split-left > * { direction: ltr }
.post-split-text p { font-size: clamp(.95rem,1.3vw,1.05rem); color: var(--sandstone); line-height: 1.9; margin-bottom: 1.1em }
.post-split-text h2, .post-split-text h3 { color: var(--limestone); margin: 0 0 .6rem }
.post-split-img { position: relative; overflow: hidden }
.post-split-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/5;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* 2 columns text + 1 image column */
.post-2col-img {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px,3.5vw,56px);
  align-items: start;
}
.post-2col-left { direction: rtl }
.post-2col-left > * { direction: ltr }
.post-2col-text {
  column-count: 2;
  column-gap: clamp(24px,3vw,44px);
}
.post-2col-text p { font-size: clamp(.9rem,1.2vw,1rem); color: var(--sandstone); line-height: 1.85; margin: 0 0 1em; break-inside: avoid }
.post-2col-text h2, .post-2col-text h3 { break-inside: avoid; color: var(--limestone); margin: 0 0 .5rem }
.post-2col-img-cell { position: relative; overflow: hidden }
.post-2col-img-cell img {
  width: 100%; display: block; object-fit: cover;
  aspect-ratio: 3/4;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* Full-width image */
.post-full-img {
  margin: 0;
  width: 100%;
}
.post-full-img img {
  width: 100%; display: block; object-fit: cover;
  aspect-ratio: 16/7;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}
.post-full-img figcaption {
  font-size: .72rem; color: var(--warm-mid);
  letter-spacing: .06em; margin-top: .8rem; line-height: 1.5;
}

/* Image placeholder — rendered when a fullimg block has no img yet.
   Shows the Midjourney + Nano Banana prompts inline so Mike can see
   what to generate and drop in. Safe to ship to production: visually
   obvious that it's a placeholder, not a broken image. */
.post-img-placeholder .img-ph-box {
  width: 100%; aspect-ratio: 16/7;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px,3.5vw,48px);
  background: repeating-linear-gradient(
    45deg, rgba(79,57,43,.06), rgba(79,57,43,.06) 12px,
    rgba(79,57,43,.12) 12px, rgba(79,57,43,.12) 24px);
  border: 1px dashed var(--clay);
  color: var(--sandstone);
}
.post-img-placeholder .img-ph-label {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--clay); font-weight: 500; margin-bottom: .8rem;
}
.post-img-placeholder .img-ph-alt {
  font-size: 1rem; color: var(--limestone); font-weight: 300;
  line-height: 1.45; margin: 0 0 1rem; max-width: 60ch;
}
.post-img-placeholder .img-ph-mj,
.post-img-placeholder .img-ph-nb {
  font-size: .7rem; line-height: 1.55; color: var(--warm-mid);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin: .3rem 0; max-width: 80ch;
}
.post-img-placeholder .img-ph-mj strong,
.post-img-placeholder .img-ph-nb strong {
  color: var(--clay); font-weight: 500; letter-spacing: .08em;
}

/* Pull quote — italic body with optional eyebrow lead-in. The eyebrow gives
   the reader a moment of orientation before the quote itself; italic body
   distinguishes it visually from surrounding paragraph text. */
.post-quote {
  margin: 0;
  padding: clamp(28px,4vw,48px) clamp(28px,5vw,64px);
  border-left: 3px solid var(--clay);
  background: rgba(79,57,43,.08);
  position: relative;
}
.post-quote-eyebrow {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--clay); font-weight: 500;
  margin-bottom: 1rem;
}
.post-quote p {
  font-size: clamp(1.25rem,2.4vw,1.7rem); font-weight: 300; font-style: italic;
  color: var(--limestone); line-height: 1.45; letter-spacing: -.005em;
  margin: 0 0 1rem;
}
.post-quote cite {
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm-mid); font-style: normal; display: block;
}

@media (max-width: 720px) {
  .post-split, .post-2col-img { grid-template-columns: 1fr }
  .post-split-left, .post-2col-left { direction: ltr }
  .post-2col-text { column-count: 1 }
  .post-split-img img { aspect-ratio: 4/3 }
  .post-2col-img-cell img { aspect-ratio: 3/2 }
}

/* ── PROCESS PAGE ────────────────────────────────────────────────────── */
.process-page-steps {
  display: flex; flex-direction: column;
  gap: 0;
  padding: var(--gap) var(--mh);
}
.process-page-step {
  display: grid;
  grid-template-columns: clamp(60px,8vw,100px) 1fr clamp(260px,30%,360px);
  gap: clamp(24px,4vw,60px);
  padding: clamp(32px,5vw,60px) 0;
  border-bottom: 1px solid var(--ghost);
  align-items: start;
}
.process-page-img {
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.process-page-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* Process page banner — between page hero and the 5 stages. */
.howwework-banner {
  margin: 0 0 clamp(36px,5vw,64px);
  padding: 0 var(--mh);
  width: 100%;
}
.howwework-banner img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/7; object-fit: cover;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}
.process-page-step:last-child { border-bottom: none }
.process-page-num {
  font-size: clamp(2rem,5vw,4rem); font-weight: 300;
  color: var(--clay); letter-spacing: -.02em; line-height: 1;
  padding-top: .2rem;
}
.process-page-body h2 {
  font-size: clamp(1.3rem,2.8vw,2rem);
  color: var(--limestone); margin-bottom: 1rem;
  letter-spacing: -.015em; line-height: 1.15;
}
.process-page-body p {
  font-size: clamp(.95rem,1.4vw,1.05rem);
  color: var(--sandstone); line-height: 1.9;
  max-width: 62ch; margin-bottom: 1em;
}
.process-page-body p:last-child { margin-bottom: 0 }
.process-faq {
  padding: var(--gap) var(--mh);
  border-top: 1px solid var(--ghost);
}
.process-faq-item {
  border-bottom: 1px solid var(--ghost);
  padding: 1.4rem 0;
}
.process-faq-q {
  font-size: clamp(.95rem,1.5vw,1.1rem); font-weight: 400;
  color: var(--limestone); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; list-style: none;
  background: none; border: none; font-family: var(--font);
  width: 100%; text-align: left; padding: 0;
}
.process-faq-q:focus-visible {
  outline: 1px solid var(--sandstone); outline-offset: 4px;
}
.process-faq-q::after {
  content: '+'; font-size: 1.2rem; font-weight: 300;
  color: var(--warm-mid); flex-shrink: 0;
  transition: transform .3s ease;
}
.process-faq-item.open .process-faq-q::after { transform: rotate(45deg) }
.process-faq-a {
  font-size: .95rem; color: var(--sandstone);
  line-height: 1.85; max-width: 64ch;
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--eout), padding .4s ease;
}
.process-faq-item.open .process-faq-a {
  max-height: 400px; padding-top: 1rem;
}

/* ── PRACTICE PAGE ───────────────────────────────────────────────────── */
.practice-page {
  display: grid;
  grid-template-columns: 1fr clamp(280px,28vw,360px);
  gap: clamp(48px,6vw,96px);
  padding: var(--gap) var(--mh);
  align-items: start;
}
.practice-page-text p {
  font-size: clamp(1rem,1.4vw,1.1rem);
  color: var(--sandstone); line-height: 1.9;
  max-width: 64ch; margin-bottom: 1.5em;
}
.practice-page-text h2 {
  font-size: clamp(1.4rem,2.8vw,2.2rem);
  color: var(--limestone); margin: clamp(40px,5vw,64px) 0 1rem;
  letter-spacing: -.015em; line-height: 1.15;
}
.practice-page-text h2:first-of-type { margin-top: 0 }

/* ── WORK PAGE — filterable project gallery ───────────────────────── */
.work-filter-chip {
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--ghost);
  color: var(--warm-mid);
  padding: 9px 18px;
  letter-spacing: inherit;
  font-size: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.work-filter-chip:hover { color: var(--sandstone); border-color: rgba(212,184,150,.35); }
.work-filter-chip.active {
  color: var(--limestone);
  border-color: var(--clay);
  background: rgba(79,57,43,.25);
}
.work-card {
  display: flex; flex-direction: column;
  background: var(--soil);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ghost);
  transition: border-color .25s, transform .25s;
  overflow: hidden;
}
.work-card:hover { border-color: rgba(212,184,150,.35); transform: translateY(-2px); }
.work-card-img {
  width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--soil);
}
.work-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
  transition: transform .6s ease;
}
.work-card:hover .work-card-img img { transform: scale(1.03); }
.work-card-body { padding: clamp(18px,2vw,28px); }
.work-card-eye {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--warm-mid); margin-bottom: .8rem;
}
.work-card-title {
  font-size: clamp(1.1rem,1.6vw,1.4rem); font-weight: 300; color: var(--limestone);
  letter-spacing: -.01em; line-height: 1.3; margin: 0 0 .6rem;
}
.work-card-summary {
  font-size: .82rem; color: var(--sandstone); line-height: 1.7;
  margin: 0; max-height: 4.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.work-card-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm-mid); margin-top: 1rem;
}
@media (max-width: 540px) {
  .work-grid-projects { grid-template-columns: 1fr !important; }
}

/* Thinking page hero band — full-bleed-ish 16:7 banner above the article
   grid. Editable via admin (data-edit-id="thinking-hero-img"). */
.thinking-hero-img {
  margin: 0 0 clamp(28px,4vw,48px);
  padding: 0 var(--mh);
  width: 100%;
}
.thinking-hero-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/7; object-fit: cover;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* Studio image — sits between the page hero and the two-column body. */
.practice-studio-img {
  margin: 0 0 clamp(40px,6vw,72px);
  padding: 0 var(--mh);
  width: 100%;
}
.practice-studio-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/7; object-fit: cover;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* Inline section band inside .practice-page-text — sits between two H2
   sections to break up long prose with a contextual image (Mike on site,
   in-studio shots, etc.). Spans the full text-column width and sits
   flush-left, with tight vertical spacing so the image reads as part of
   the section it accompanies rather than a free-floating insert. The
   explicit margin-inline:0 overrides the user-agent figure default of
   40px each side that otherwise indents the image. */
.practice-section-img {
  margin: clamp(10px,1.4vw,18px) 0 clamp(8px,1.2vw,14px);
  margin-inline: 0;
  padding: 0;
  width: 100%;
  align-self: start;
}
.practice-section-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/9; object-fit: cover;
  filter: saturate(.55) sepia(.22) brightness(.82) contrast(1.08);
}

/* Alliance logos — clickable wordmark blocks at the foot of the practice
   text. The <img> renders if a logo file is present; otherwise onerror
   falls back to the wordmark span. */
.alliance-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}
.alliance-logo {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .5rem;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--ghost);
  background: rgba(5,6,6,.35);
  text-decoration: none;
  transition: border-color .25s, background .25s, transform .25s;
  min-height: 110px;
}
.alliance-logo:hover {
  border-color: rgba(212,184,150,.4);
  background: rgba(212,184,150,.04);
  transform: translateY(-2px);
}
.alliance-logo img {
  max-width: 160px; max-height: 56px; height: auto;
  filter: brightness(.95) contrast(.95);
}
.alliance-wordmark {
  display: none; /* shown by onerror when img fails */
  font-size: 1.15rem; font-weight: 300; letter-spacing: .02em;
  color: var(--limestone);
}
.alliance-caption {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm-mid); margin-top: auto;
}
.alliance-logo:hover .alliance-caption { color: var(--sandstone) }
@media (max-width: 540px) {
  .alliance-logos { grid-template-columns: 1fr }
}

/* ── BEGIN / CONTACT PAGE ────────────────────────────────────────────── */
.begin-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
}
.begin-left {
  position: relative; overflow: hidden;
}
.begin-left img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.45) sepia(.35) brightness(.65);
}
.begin-left-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(40px,6vw,72px);
  background: linear-gradient(transparent 30%, rgba(5,6,6,.75));
}
.begin-left-content blockquote {
  font-size: clamp(1rem,2vw,1.4rem); font-weight: 300;
  color: var(--limestone); line-height: 1.5; margin-bottom: .8rem;
  max-width: 38ch;
}
.begin-left-content cite {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--warm-mid); font-style: normal;
}
.begin-right {
  padding: clamp(48px,7vw,96px) clamp(36px,5vw,72px);
  display: flex; flex-direction: column; justify-content: center;
}

/* ── INNER PAGE FOOTER CTA ───────────────────────────────────────────── */
.inner-cta {
  padding: clamp(60px,8vw,100px) var(--mh);
  background: var(--hinterland);
  border-top: 1px solid var(--ghost);
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: clamp(24px,4vw,48px);
}
.inner-cta-text h2 {
  font-size: clamp(1.6rem,3.5vw,2.8rem); font-weight: 300;
  color: var(--limestone); letter-spacing: -.02em; line-height: 1.1;
  margin-bottom: .6rem;
}
.inner-cta-text p {
  font-size: .95rem; color: var(--sandstone); max-width: 44ch; line-height: 1.8;
}
.inner-cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 16px 32px; flex-shrink: 0;
  border: 1px solid rgba(212,184,150,.3);
  color: var(--limestone); font-family: var(--font);
  font-size: .68rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; transition: all .35s ease;
  white-space: nowrap;
}
.inner-cta-btn:hover { background: var(--clay); border-color: var(--clay) }

/* ── BREADCRUMB ──────────────────────────────────────────────────────── */
.breadcrumb {
  padding: calc(clamp(72px,10vw,120px) + 18px) var(--mh) 18px;
  border-bottom: 1px solid var(--ghost);
  display: flex; align-items: center; gap: .6rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm-mid);
}
.breadcrumb a { color: var(--warm-mid); transition: color .25s }
.breadcrumb a:hover { color: var(--sandstone) }
.breadcrumb span { opacity: .4 }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .work-grid { grid-template-columns: 1fr }
  .thinking-grid { grid-template-columns: repeat(2,1fr) }
  .article-wrap { grid-template-columns: 1fr }
  .article-sidebar { position: static }
  .practice-page { grid-template-columns: 1fr }
  .begin-wrap { grid-template-columns: 1fr }
  .begin-left { min-height: 380px }
  .process-page-step { grid-template-columns: clamp(48px,6vw,72px) 1fr }
  /* On narrow screens drop the per-stage image below the text body. */
  .process-page-img { grid-column: 1 / -1; margin-top: 1rem; }
  .process-page-img img { aspect-ratio: 16/9; }
  .howwework-banner img { aspect-ratio: 16/9; }
}
@media (max-width: 700px) {
  .work-grid { grid-template-columns: 1fr }
  .thinking-grid { grid-template-columns: 1fr }
  .article-img-half { grid-template-columns: 1fr }
  .inner-cta { flex-direction: column; align-items: flex-start }

  /* Location pages */
  .loc-hero { padding-top: clamp(80px,14vw,140px); padding-bottom: clamp(60px,10vw,100px) }
  .loc-hero h1 { font-size: clamp(2.6rem,8vw,4.5rem) }
  .loc-meta { gap: 1rem 1.6rem }
  .loc-topo { width: clamp(180px,28vw,320px); height: clamp(180px,28vw,320px); top: auto; bottom: -40px }
  .loc-related-grid { grid-template-columns: 1fr }
}

/* ── LOCATION PAGES ─────────────────────────────────────────────────────
   Standardised hero used for /locations/* pages. The topographic motif
   SVG is generated by inner.js from data-topo-seed; the rest of the hero
   is configured per-page via these CSS custom properties:
     --loc-bg-img         background photo URL
     --loc-bg-pos         background position (default: center)
     --loc-accent-angle   angle of the warm-tone vignette (default: 135deg)
─────────────────────────────────────────────────────────────────────── */
.loc-hero {
  position: relative; overflow: hidden;
  padding: clamp(120px,16vw,200px) var(--mh) clamp(80px,10vw,140px);
  border-bottom: 1px solid var(--ghost);
  background-color: var(--black);
  isolation: isolate;
}
/* Hero image is a real <img> for alt text + LCP. Positioned behind content. */
.loc-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--loc-bg-pos, center);
  filter: saturate(.45) sepia(.3) brightness(.55) contrast(1.1);
}
.loc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--loc-accent-angle, 135deg),
      rgba(79,57,43,.55) 0%,
      rgba(5,6,6,.35) 45%,
      rgba(5,6,6,.92) 100%);
}
/* Credit overlay sits at bottom-left of the hero — clear, small, restrained. */
.loc-hero-credit {
  position: absolute; left: var(--mh); bottom: clamp(16px,2vw,28px);
  z-index: 2; pointer-events: none; max-width: 60ch;
  text-shadow: 0 1px 8px rgba(5,6,6,.7);
}
.loc-hero .eyebrow { color: var(--sandstone); margin-bottom: 1.6rem }
.loc-hero h1 {
  font-size: clamp(2.6rem,7vw,5.8rem); font-weight: 300;
  line-height: 1.0; letter-spacing: -0.02em;
  color: var(--limestone); max-width: 18ch; position: relative;
}
.loc-hero h1 .loc-h1-prefix {
  display: block; font-size: .42em; font-weight: 400;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--warm-mid); margin-bottom: .8rem;
}
.loc-hero-sub {
  margin-top: 2rem; max-width: 56ch;
  font-size: clamp(1.05rem,1.7vw,1.25rem); font-weight: 300;
  line-height: 1.7; color: var(--sandstone);
}
.loc-meta {
  margin-top: 2.8rem; display: flex; flex-wrap: wrap;
  gap: 1.4rem 2.4rem; align-items: center;
}
.loc-meta-item {
  display: inline-flex; flex-direction: column; gap: .25rem;
}
.loc-meta-label {
  font-size: .55rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--warm-mid);
}
.loc-meta-value {
  font-size: .85rem; letter-spacing: .04em; color: var(--sandstone);
  font-variant-numeric: tabular-nums;
}

/* The topographic motif — JS-generated 5–6 contour curves.
   Position: pinned to the lower-right of the hero. */
.loc-topo {
  position: absolute; right: clamp(-20px,3vw,40px); bottom: clamp(-30px,3vw,40px);
  width: clamp(220px,30vw,420px); height: clamp(220px,30vw,420px);
  z-index: -1; pointer-events: none;
  color: var(--sandstone); opacity: .35;
}
.loc-topo path {
  fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* Body copy — extends .page-content but with tighter sub-section rhythm */
.loc-page { padding: var(--gap) var(--mh); max-width: 1100px }
.loc-page > p {
  font-size: clamp(1rem,1.4vw,1.1rem); color: var(--sandstone);
  line-height: 1.85; max-width: 68ch; margin-bottom: 1.4em;
}
.loc-page > p:first-of-type { font-size: clamp(1.1rem,1.7vw,1.3rem); color: var(--limestone) }
.loc-page h2 {
  font-size: clamp(1.4rem,2.6vw,2rem); color: var(--limestone);
  margin: clamp(48px,6vw,80px) 0 1.2rem;
  letter-spacing: -0.015em; line-height: 1.2; max-width: 24ch;
}

/* Per-location FAQ block — quietly styled, expandable details */
.loc-faq {
  padding: clamp(40px,6vw,72px) var(--mh) clamp(60px,8vw,100px);
  border-top: 1px solid var(--ghost);
  max-width: 1100px;
}
.loc-faq .eyebrow { display: block; margin-bottom: 1.2rem }
.loc-faq h3 { font-size: clamp(1.4rem,2.4vw,1.8rem); color: var(--limestone); margin-bottom: 2rem }
.loc-faq-list { display: flex; flex-direction: column; gap: .6rem }
.loc-faq details {
  border-bottom: 1px solid var(--ghost);
  padding: 1.2rem 0;
}
.loc-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding-right: 2rem;
  font-size: clamp(.95rem,1.4vw,1.05rem);
  color: var(--limestone); font-weight: 400;
  transition: color .2s ease;
}
.loc-faq summary:hover { color: var(--sandstone) }
.loc-faq summary::-webkit-details-marker { display: none }
.loc-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem; color: var(--warm-mid);
  transition: transform .25s ease;
}
.loc-faq details[open] summary::after { content: "−" }
.loc-faq details > div {
  padding-top: 1rem; max-width: 70ch;
  font-size: .95rem; line-height: 1.75; color: var(--sandstone);
}

/* "Related locations" footer block */
.loc-related {
  padding: clamp(60px,8vw,100px) var(--mh);
  border-top: 1px solid var(--ghost);
}
.loc-related .eyebrow { display: block; margin-bottom: 1.2rem }
.loc-related h3 { font-size: clamp(1.4rem,2.4vw,1.8rem); color: var(--limestone); margin-bottom: 2rem }
.loc-related-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2vw,28px);
}
.loc-related-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.6rem; border: 1px solid var(--ghost);
  text-decoration: none; transition: border-color .3s ease, background .3s ease;
}
.loc-related-card:hover { border-color: var(--sandstone); background: rgba(212,184,150,.04) }
.loc-related-card-eye {
  font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--warm-mid);
}
.loc-related-card-title {
  font-size: 1.05rem; font-weight: 400; color: var(--limestone);
  letter-spacing: .01em;
}
.loc-related-card-arrow {
  margin-top: auto; padding-top: .8rem;
  font-size: .7rem; letter-spacing: .15em; color: var(--sandstone);
}
}