/* Iron Peak v5 — inner-page additions on top of the index.html design system.
   Tokens only (var(--...)); no new colors. Reused verbatim: .wrap .btn .svc
   .services .section-num .serif-it .eyebrow-dim .light .light-2 .dark .panel.
   Loaded after the inline homepage <style>, so equal-specificity rules here
   win — that's deliberate for .crumbs (shared with the About page's reused
   .section-num.crumbs div). */

/* Small centered mono label, reusable above any block (FAQ list, related
   posts, etc). */
.section-label{text-align:center;font-family:var(--t-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-text);margin:0 0 24px}

/* Hero ---------------------------------------------------------------------
   Centered composition: crumbs -> eyebrow -> h1 -> lede -> cta -> media. */
.inner-hero{padding:clamp(120px,14vh,180px) var(--pad-x) clamp(64px,8vw,110px);text-align:center;overflow:hidden}
.inner-hero-in{display:flex;flex-direction:column;align-items:center}

.crumbs{cursor:default;font-family:var(--t-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.dark .crumbs,.panel .crumbs{color:var(--paper-mute)}
.crumbs a{color:inherit;transition:color .2s}
.crumbs a:hover{color:var(--forest-text);text-decoration:underline}

.inner-eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 0 18px;font-family:var(--t-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-text)}
.inner-eyebrow .dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--forest);box-shadow:0 0 0 4px rgba(31,90,46,.18)}

.inner-hero h1{font-family:var(--t-display);font-weight:900;font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;margin:0 auto 18px;max-width:20ch}
.inner-hero .inner-lede{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;color:var(--ink-mid);max-width:60ch;margin:0 auto 30px}
.dark .inner-hero .inner-lede,.panel .inner-hero .inner-lede{color:rgba(var(--paper-rgb),.78)}

.inner-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.page-top{padding-top:clamp(126px,16vw,176px)!important}
.statement-copy h1{font-family:var(--t-display);font-weight:900;font-size:clamp(1.9rem,4.2vw,3.9rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;margin:18px 0 28px}

/* Full-width hero media band, sits under the centered hero copy. */
.inner-media{max-width:1600px;margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--pad-x)}
.inner-media img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-md)}

/* Sections -----------------------------------------------------------------
   Every body section's .wrap is already centered (max-width + margin:auto);
   the bug was inner content (prose/faq/chips) not being centered *inside*
   that wrap. Each block below gets its own max-width + margin-inline:auto. */

/* Prose ------------------------------------------------------------------ */
.prose{font-size:17px;line-height:1.75;color:var(--ink-mid);max-width:820px;margin-inline:auto}
.dark .prose,.panel .prose{color:rgba(var(--paper-rgb),.78)}
.prose p{margin:0 0 22px;max-width:68ch}
.prose h2{font-family:var(--t-display);font-weight:800;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin:56px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line-light)}
.prose h2:first-child{margin-top:0}
.dark .prose h2,.panel .prose h2{color:var(--paper);border-color:var(--line-dark)}
.prose h3{font-family:var(--t-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:36px 0 14px}
.dark .prose h3,.panel .prose h3{color:var(--paper)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px;max-width:68ch}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--forest-text)}
.prose a{color:var(--forest-text);text-decoration:underline;text-decoration-color:rgba(31,90,46,.35)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{color:var(--ink);font-weight:600}
.dark .prose strong,.panel .prose strong{color:var(--paper)}
.prose blockquote{margin:0 0 26px;padding:6px 0 6px 24px;border-left:2px solid var(--forest);font-family:var(--t-serif);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.dark .prose blockquote,.panel .prose blockquote{color:var(--paper)}
.table-wrap{overflow-x:auto;margin:0 0 26px}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-light)}
.dark .prose th,.dark .prose td,.panel .prose th,.panel .prose td{border-color:var(--line-dark)}
.prose th{font-family:var(--t-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.post-meta{max-width:820px;margin:0 auto 18px!important;text-align:center;font-size:11px}

/* FAQ ---------------------------------------------------------------------
   Real cards, not a bare left-aligned list. Centered 860px column. */
.faq-list{margin:48px auto 0;max-width:860px;display:grid;gap:12px}
.faq-list details{border:1px solid var(--line-light);border-radius:14px;padding:22px 26px;background:var(--surface);transition:border-color .25s}
.dark .faq-list details,.panel .faq-list details{border-color:var(--line-dark);background:var(--panel-2)}
.faq-list details:hover{border-color:rgba(31,90,46,.55)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-family:var(--t-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);list-style:none}
.dark .faq-list summary,.panel .faq-list summary{color:var(--paper)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex-shrink:0;font-family:var(--t-body);font-weight:400;font-size:22px;line-height:1;color:var(--forest-text);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details[open]{border-color:rgba(31,90,46,.55)}
.faq-list p{margin:16px 0 0;font-size:.97rem;line-height:1.65;color:var(--ink-mute);animation:faqIn .25s ease}
.dark .faq-list p,.panel .faq-list p{color:var(--paper-mute)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Related / link-card blocks ------------------------------------------------
   Centered eyebrow + a card grid, never a raw <ul>/pill list. */
.chip-group{margin:56px auto 0;max-width:860px;text-align:center}
.chip-group h3{font-family:var(--t-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-text);margin:0 0 20px}
.chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;text-align:left}
.chip-link{flex:0 1 260px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line-light);border-radius:var(--r-md);padding:19px 22px;background:var(--surface);font-family:var(--t-body);font-weight:600;font-size:14px;color:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.dark .chip-link,.panel .chip-link{border-color:var(--line-dark);background:var(--panel-2);color:var(--paper)}
.chip-link::after{content:"\2192";flex-shrink:0;color:var(--forest-text);transition:transform .3s}
.chip-link:hover{transform:translateY(-3px);border-color:rgba(31,90,46,.55)}
.chip-link:hover::after{transform:translateX(4px)}

/* Gallery ------------------------------------------------------------------
   ponytail: no content wires a gallery in yet — utility class only, ready
   for the day a page passes a list of images through it. */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.gallery a,.gallery .g-item{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery a:hover img,.gallery .g-item:hover img{transform:scale(1.06)}

/* Gallery / service-card grid reuse ----------------------------------------*/
.svc-grid{margin-top:48px}
.svc-grid .svc:nth-child(-n+6){grid-column:span 2}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc-grid .svc{grid-column:span 1!important}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}

/* Blog post cards ----------------------------------------------------------*/
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:1px solid var(--line-light);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;background:var(--surface);transition:border-color .3s,transform .3s}
.dark .post-card,.panel .post-card{border-color:var(--line-dark);background:var(--panel-2)}
.post-card:hover{border-color:rgba(31,90,46,.5);transform:translateY(-3px)}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .eyebrow-dim{margin:16px 20px 0}
.post-card h3{font-family:var(--t-display);font-weight:800;font-size:1.15rem;line-height:1.1;letter-spacing:-.02em;text-transform:none;margin:10px 20px 8px}
.post-card p{font-size:13.5px;line-height:1.55;color:var(--ink-mute);margin:0 20px 20px}
@media (max-width:1100px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

.related-posts{max-width:1240px}
.related-posts .post-grid{text-align:left}

/* Blog index header ----------------------------------------------------- */
.blog-head{max-width:70ch;margin:0 auto;text-align:center}

/* Active nav ----------------------------------------------------------------*/
nav.primary a.active{color:var(--paper)}
nav.primary a.active::after{width:100%}

@media (max-width:900px){
  .chip-group,.faq-list{max-width:100%}
}

@media (max-width:767px){
  .inner-hero{padding:104px var(--pad-x) 44px}
  .inner-media{margin-top:32px}
  .inner-media img{aspect-ratio:4/3;border-radius:var(--r-sm)}
  .page-top{padding-top:clamp(104px,20vw,140px)!important}
  .prose h2{margin:40px 0 16px;padding-bottom:14px}
  .faq-list details{padding:18px 20px}
  .faq-list summary{font-size:1.05rem}
}

/* tap targets */
.chips a,.chip,.related a,.inner-chips a{min-height:44px;display:inline-flex;align-items:center;padding:10px 16px}