/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{position:relative;padding:max(8.5rem,clamp(7rem,16vw,10rem)) 0 clamp(3rem,8vw,5rem);
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink)}
.page-hero::after{content:'';position:absolute;inset:auto 0 0;height:70%;pointer-events:none;
  background:radial-gradient(90% 100% at 78% 110%,rgba(40,88,40,.5),transparent 70%)}
.page-hero h1{font-size:clamp(2.25rem,7.5vw,4.25rem);max-width:16ch}
.page-hero .standfirst{font-variation-settings:'wdth' 88,'wght' 700;
  font-size:clamp(1.125rem,3.2vw,1.5rem);color:var(--live);margin:1.25rem 0 1rem;max-width:34ch;
  text-transform:none;line-height:1.25}
.crumbs{font-size:.8125rem;color:var(--muted);margin-bottom:1.25rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--live)}
.crumbs span{margin:0 .4rem;opacity:.5}
.sec{padding-block:clamp(3rem,8vw,5.5rem);border-top:1px solid var(--line);background:var(--ink)}
.sec.alt{background:var(--surface)}
.sec h2{font-size:clamp(1.75rem,5.5vw,3rem);margin-bottom:1.25rem}
.sec h3{font-size:1.25rem;margin-bottom:.5rem}
.sec p{color:var(--body);max-width:62ch}
.two-up{display:grid;gap:2.5rem}
/* considered-factors list */
.factors{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.factors li{background:var(--surface);padding:.85rem 1.1rem;color:var(--body);font-size:.9375rem;
  display:flex;gap:.7rem;align-items:center}
.factors li::before{content:'';width:7px;height:7px;flex:none;border-radius:1px;background:var(--live)}
/* three-outcome / definition blocks */
.outcomes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:1.75rem}
.outcome{background:var(--surface);padding:1.5rem 1.35rem}
.outcome b{display:block;font-variation-settings:'wdth' 76,'wght' 800;text-transform:uppercase;
  font-size:1.0625rem;margin-bottom:.4rem;color:var(--solar)}
.outcome p{color:var(--muted);font-size:.9375rem;margin:0}
/* cross-links between services */
.crosslink{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--live);
  border-radius:3px;padding:1.35rem 1.5rem;margin-top:2rem}
.crosslink p{margin:0;color:var(--white);font-variation-settings:'wdth' 92,'wght' 600;max-width:46ch}
/* area + advice cards */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:2rem}
.tile{background:var(--surface);padding:1.6rem 1.5rem;text-decoration:none;display:block;
  transition:background .25s ease}
a.tile:hover{background:var(--raised)}
.tile h3{margin-bottom:.4rem}
.tile p{color:var(--muted);font-size:.9375rem;margin:0;max-width:none}
.tile .go{display:inline-block;margin-top:.9rem;color:var(--live);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 700}
.tile.soon .go{color:var(--muted)}
/* Areas We Cover — the town list. Names only, by design: the per-town
   paragraphs this replaced were near-identical boilerplate with the town name
   swapped, which earns nothing in search and reads as filler. The town names
   themselves are what carry the local signal, and they are still here as text.
   A town becomes a link once it has a page of its own; until then it is plain
   text rather than a "page in preparation" label. See carley_town_links(). */
.towns{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:2rem;list-style:none;padding:0}
@media(min-width:40rem){.towns{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.towns{grid-template-columns:repeat(3,1fr)}}
.towns li{background:var(--surface)}
.towns a,.towns span{display:block;padding:1.15rem 1.5rem;font-size:1.0625rem;
  font-variation-settings:'wdth' 86,'wght' 600}
.towns span{color:var(--white)}
.towns a{color:var(--solar);text-decoration:none;transition:background .25s ease}
.towns a:hover{background:var(--raised)}
/* project filter chips (progressive enhancement — all cards visible without JS) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filters button{background:var(--raised);border:1px solid var(--line);color:var(--body);
  padding:.6rem 1rem;border-radius:2px;cursor:pointer;font-family:inherit;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 700}
.filters button[aria-pressed=true]{background:var(--carley);border-color:var(--live);color:#fff}
.proj-grid{display:grid;gap:1.25rem;margin-top:2rem}
@media(min-width:44rem){.proj-grid{grid-template-columns:1fr 1fr}}
@media(min-width:70rem){.proj-grid{grid-template-columns:repeat(3,1fr)}}

/* approach steps */
.approach{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:2rem}
.approach div{background:var(--surface);padding:1.4rem 1.35rem}
.approach b{display:block;font-variation-settings:'wdth' 74,'wght' 800;text-transform:uppercase;
  color:var(--live);font-size:.9375rem;margin-bottom:.3rem}
.approach p{margin:0;color:var(--muted);font-size:.9375rem}
/* end-of-page CTA */
.page-cta{text-align:center;background:linear-gradient(180deg,var(--surface),#0E140E);
  border-top:1px solid var(--line);padding-block:clamp(3rem,8vw,5rem)}
.page-cta p{margin-inline:auto}
/* ---------- inner page media ---------- */
.media{margin-top:2rem;border-radius:3px;overflow:hidden;position:relative;background:var(--raised)}
.media img{width:100%;height:auto;display:block}
.media.band img{aspect-ratio:21/9;object-fit:cover}
.media figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.25rem .95rem;
  font-size:.8125rem;color:#D6DCD4;
  background:linear-gradient(180deg,transparent,rgba(10,13,10,.9))}
.media-pair{display:grid;gap:1rem;margin-top:2rem}
.media-pair .media{margin-top:0}
.media-pair img{aspect-ratio:4/3;object-fit:cover}

/* ---------- project cards (CPT) ----------
   Every card in a row is the same height and the info panels line up.

   The media is a fixed ratio BOX with the image filling it absolutely, rather
   than an aspect-ratio on the <img> itself. WordPress emits width and height
   attributes, browsers treat those as presentational hints, and the image
   keeps its own proportions instead of the ratio we asked for. That is what
   made the cards different heights. Filling a box sidesteps it entirely.

   The crop point per project arrives as an inline object-position from the
   admin focus picker, which is why the tall crop is safe to use. */
.proj-grid{align-items:stretch}
.proj-grid .proj{height:100%}

/* stats row on a single case study */
.proj-stats-hero{margin-top:1.75rem;max-width:34rem}
.proj-stats-hero .stats{border:1px solid var(--line)}
/* The gallery band runs edge to edge: no section padding, no shell gutters,
   no max width. The slide fills the band on all four sides. */
.sec-tight{padding-block:0}
.shell-flush{max-width:none;padding-inline:0}

/* ---------- project gallery ---------- */
.gal{position:relative;max-width:var(--gal-max,100%);margin-inline:auto}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  border-radius:3px;background:var(--raised)}
.gal-track::-webkit-scrollbar{display:none}
/* Each slide is a fixed ratio BOX and the image fills it absolutely, exactly
   as the listing cards do. Putting aspect-ratio on the <img> is not enough:
   wp_get_attachment_image emits width and height attributes, browsers treat
   those as presentational hints, and the image keeps its own proportions. A
   portrait photo at full width on a phone then renders very tall, which is
   what was happening here. */
.gal-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;
  aspect-ratio:var(--gal-ratio,3/2);overflow:hidden;background:var(--raised)}
/* Shape comes from the project itself as --gal-ratio (3/2, 1/1 or 2/3), set
   per project in the editor. Every slide in that gallery uses it, at every
   width, so the carousel does not change shape as it is resized. The listing
   card crop is separate and unaffected. */
.gal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  background:rgba(10,13,10,.72);backdrop-filter:blur(6px);color:var(--white);
  font-size:1.5rem;line-height:1;font-family:inherit}
.gal-nav:hover{border-color:var(--live);color:var(--live)}
.gal-prev{left:.75rem}
.gal-next{right:.75rem}
.gal-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}
.gal-dot{width:34px;height:4px;border:0;border-radius:2px;background:var(--line);cursor:pointer;padding:0}
.gal-dot.on{background:var(--live)}
.gal-dot:focus-visible{outline:2px solid var(--solar);outline-offset:3px}
/* single image: no controls, plain figure */
.gal:not(.gal-many) .gal-slide{border-radius:3px}

/* Long form body copy. Shared by Advice guides and project case studies,
   so it lives here and journal.css inherits it via the page bundle. */
.article{max-width:44rem;margin-inline:auto}
.article h2{font-size:clamp(1.5rem,4.5vw,2.25rem);margin:2.5rem 0 1rem}
.article h3{font-size:1.25rem;margin:2rem 0 .75rem}
.article p,.article li{color:var(--body);font-size:1.0625rem}
.article ul,.article ol{padding-left:1.25rem}
.article img{border-radius:3px;margin:2rem 0}
.article a{color:var(--live)}