/* ============ Ashton Studios — inner pages (towns, services, work) ============
   Loaded after styles.css. Everything here extends the home page's tokens and
   voice; nothing redefines them. Motion is compositor-only (transform/opacity/
   clip-path) and every scroll-driven effect is switched off under
   prefers-reduced-motion at the bottom of this file. */

/* ---------- page hero ---------- */
.page-hero {
  position: relative; min-height: 88svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8.5rem var(--gutter) 2rem;
  background: radial-gradient(60rem 36rem at 18% 22%, rgba(216, 189, 141, 0.055), transparent 66%);
}
.page-hero .hero-inner { max-width: 74rem; }
.page-hero .hero-sub { max-width: 36rem; }
.page-hero .hero-foot { padding-top: 3.4rem; }
.crumb {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 1.6rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
}
.crumb a { text-decoration: none; color: var(--ink-dim); transition: color .2s; }
.crumb a:hover { color: var(--accent); }
.crumb i { font-style: normal; color: var(--accent); }

/* The signature: a postcode (or the trade) drawn at architectural scale in a
   single hairline stroke behind the headline, the same treatment as the
   home page's scroll-linked band. It drifts against the scroll so the hero
   has depth before a single reveal has fired. */
.ghost {
  position: absolute; right: -.04em; bottom: -.14em; z-index: 0; pointer-events: none; user-select: none;
  font-weight: 900; font-stretch: 92%; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  font-size: clamp(7rem, 4rem + 26vw, 30rem);
  color: transparent; -webkit-text-stroke: 1px #33302a;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .ghost { animation: ghost-drift linear both; animation-timeline: scroll(root); animation-range: 0 120svh; }
  @keyframes ghost-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6vw, 18vh, 0); } }
}

/* ---------- editorial body ---------- */
.local {
  padding: var(--space-section) var(--gutter);
  display: grid; gap: clamp(2.4rem, 5vw, 6rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}
.local-aside { position: sticky; top: 6.5rem; display: grid; gap: 1.4rem; }
.local-tag { font-family: var(--mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.pull {
  font-family: var(--serif); font-style: italic; font-weight: 380;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.1rem); line-height: 1.12; letter-spacing: -.005em;
  text-wrap: balance; max-width: 22ch;
}
.prose { max-width: 40rem; display: grid; gap: 1.35rem; }
.prose p { color: var(--ink-dim); font-size: clamp(1.04rem, .95rem + .45vw, 1.24rem); line-height: 1.62; }
.prose p:first-child { color: var(--ink); }
.prose p:first-child::first-letter {
  font-family: var(--serif); font-style: italic; font-weight: 380; color: var(--accent);
  float: left; font-size: 3.9em; line-height: .8; padding: .08em .16em 0 0;
}
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color .2s; }
.prose a:hover { color: var(--accent); }

/* hairline ledger — the anti-card. rows, not boxes. */
.ledger { list-style: none; border-top: 1px solid var(--line); margin-top: 1.4rem; }
.ledger li {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 1.4rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.ledger h3 { font-size: 1.05rem; font-weight: 800; text-transform: lowercase; line-height: 1.3; }
.ledger p { color: var(--ink-dim); font-size: .96rem; }

/* ---------- the offer ---------- */
.offer { padding: var(--space-section) var(--gutter); background: var(--bg-raise); border-block: 1px solid var(--line); }
.offer-head { display: grid; gap: 1.2rem; max-width: 52rem; }
.offer-head p { color: var(--ink-dim); max-width: 40rem; font-size: 1.08rem; }
.offer-rows { list-style: none; margin-top: 3rem; border-top: 1px solid var(--line); }
.offer-rows li {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 1.2rem 3rem; align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.offer-num {
  font-weight: 900; font-stretch: 90%; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); text-wrap: balance;
}
.offer-num small { font-family: var(--serif); font-style: italic; font-weight: 380; font-size: .42em; color: var(--accent); letter-spacing: 0; text-transform: lowercase; margin-left: .2ch; }
.offer-copy { display: grid; gap: .5rem; }
.offer-copy h3 { font-size: 1.15rem; font-weight: 800; text-transform: lowercase; }
.offer-copy p { color: var(--ink-dim); font-size: .98rem; }
.offer-fine { margin-top: 1.6rem; font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); line-height: 1.8; max-width: 44rem; }
.offer-cta { margin-top: 2.2rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }

/* ---------- how it works (reuses .steps) ---------- */
.how { padding: var(--space-section) var(--gutter) 0; }
.how .section-title { margin-bottom: 3rem; }

/* ---------- nearby / siblings ---------- */
.nearby { padding: var(--space-section) var(--gutter); }
.nearby-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.nearby-head p { color: var(--ink-dim); max-width: 26rem; font-size: .95rem; }
/* .link-ledger lives in styles.css (shared with the home page strips) */

/* ---------- case studies ---------- */
.case-shot { padding: 0 var(--gutter); margin-top: -1rem; position: relative; z-index: 2; }
.case-shot .shot { max-width: 76rem; margin: 0 auto; }
.case-shot .shot img { transition: none; }
.brief {
  padding: var(--space-section) var(--gutter) 0;
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
.brief-facts { list-style: none; border-top: 1px solid var(--line); align-self: start; position: sticky; top: 6.5rem; }
.brief-facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.brief-facts dt, .brief-facts .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); padding-top: .25rem; }
.brief-facts a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.brief-facts a:hover { color: var(--accent); }
.case-body { display: grid; gap: clamp(3rem, 6vw, 6rem); }
.case-part { display: grid; gap: 1.2rem; }
.case-part .section-title { margin-bottom: .6rem; }
.case-part .prose p:first-child { color: var(--ink-dim); }
.case-part .prose p:first-child::first-letter { all: unset; }
.case-cta { padding: var(--space-section) var(--gutter); display: grid; gap: 1.4rem; justify-items: start; border-top: 1px solid var(--line); }
.case-cta p { color: var(--ink-dim); max-width: 34rem; font-size: 1.08rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .local, .brief { grid-template-columns: minmax(0, 1fr); }
  .local-aside, .brief-facts { position: static; }
  .pull { max-width: none; }
}
@media (max-width: 760px) {
  .page-hero { min-height: 78svh; padding-top: 7rem; }
  .ghost { font-size: clamp(6rem, 42vw, 12rem); bottom: 4.2rem; right: -.06em; opacity: .7; }
  .ledger li, .offer-rows li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .brief-facts li { grid-template-columns: 6.5rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost { animation: none !important; transform: none !important; }
}