/* ── Service page components (2026-10 service architecture build) ───────────────
   Structure for the expanded service pages. Uses only existing design tokens
   (navy ramp, gold accent, radii, shadows, Fraunces/Sora) so it inherits the
   client brand layer. Kept separate from the synced components.css; upstream
   into the fleet component library when the build system adopts these blocks. */

/* Hero with an art-directed <picture> instead of a CSS background */
.hero--picture { background: var(--color-green-900); }
.hero--picture .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero--picture .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero--picture::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 18, 42, .9) 0%, rgba(5, 27, 56, .6) 60%, rgba(5, 27, 56, .15) 100%); }
@media (max-width: 720px) {
  .hero--picture::before { background: linear-gradient(180deg, rgba(3, 18, 42, .55) 0%, rgba(3, 18, 42, .88) 55%); }
}
.hero-title-location--sub { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-style: normal; font-weight: 700; color: rgba(255, 255, 255, .86); margin-top: 1rem; letter-spacing: 0; }

/* Breadcrumb (same markup as blog posts) */
.service-breadcrumb { background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.service-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: 0; padding: .85rem 0; font-size: .9rem; font-weight: 700; }
.service-breadcrumb li { color: var(--color-muted); }
.service-breadcrumb li + li::before { content: "›"; margin-right: .6rem; color: var(--color-accent); }
.service-breadcrumb a { color: var(--color-green-700); }

/* Main-column content blocks */
.tn-block { padding: 1.4rem 0 2.6rem; border-bottom: 2px solid var(--color-line); scroll-margin-top: 110px; }
.tn-block:first-child { padding-top: .4rem; }
.tn-block:last-child { border-bottom: 0; }
.tn-block > h2, .tn-block .tn-block-head h2 { max-width: 820px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; margin-bottom: 1.1rem; }
.tn-block h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; letter-spacing: -.03em; margin: 1.6rem 0 .55rem; }
.tn-block p { max-width: 860px; }
.tn-block p + p { margin-top: 1rem; }
.tn-block ul:not(.check-list):not(.tn-link-row), .tn-block ol:not(.tn-steps) { margin: 1rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; color: var(--color-muted); max-width: 860px; }
.tn-block a:not(.btn) { color: var(--color-green-700); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(191, 137, 19, .55); text-underline-offset: 3px; }
.tn-block a:not(.btn):hover { text-decoration-color: var(--color-accent); }
.tn-lede { font-size: 1.12rem; color: var(--color-green-700) !important; font-weight: 600; }

/* Responsive images */
.tn-media { display: block; margin: 1.4rem 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--color-green-800); }
.tn-media img { width: 100%; height: 100%; object-fit: cover; }
.tn-media--3x2 { aspect-ratio: 3 / 2; }
.tn-media--4x3 { aspect-ratio: 4 / 3; }
.tn-media--1x1 { aspect-ratio: 1 / 1; }
.tn-media--diagram { background: var(--color-white); box-shadow: none; border: 1px solid var(--color-line); padding: clamp(.75rem, 2vw, 1.25rem); }
.tn-media--diagram img { object-fit: contain; height: auto; }
.tn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.tn-pair .tn-media { margin: 0; }
.tn-pair figure { margin: 0; }
.tn-pair figcaption { margin-top: .5rem; font-size: .9rem; font-weight: 700; color: var(--color-muted); }
@media (max-width: 560px) { .tn-pair { grid-template-columns: 1fr; } }

/* Service cards (parent pages) */
.tn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.4rem; }
.tn-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-md); background: white; border: 1px solid var(--color-line); box-shadow: var(--shadow-card); scroll-margin-top: 110px; }
.tn-card .tn-media { margin: 0; border-radius: 0; box-shadow: none; }
.tn-card-body { display: grid; align-content: start; gap: .7rem; padding: 1.25rem 1.35rem 1.4rem; }
.tn-card-body h3 { margin: 0; font-size: 1.45rem; }
.tn-card-body p { font-size: .98rem; }
.tn-card-link { display: inline-flex; align-items: center; min-height: 44px; gap: .4rem; margin-top: .1rem; font-weight: 900; color: var(--color-green-700); }
.tn-card-link::after { content: "→"; color: var(--color-accent); }
.tn-card--text { background: var(--color-bg); }
@media (max-width: 700px) { .tn-cards { grid-template-columns: 1fr; } }

/* Supporting services: 2x2 grid (primary support) and compact strip (secondary) */
.tn-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; margin-top: 1rem; }
.tn-support-grid section { padding-top: 1rem; border-top: 3px solid var(--color-accent); scroll-margin-top: 110px; }
.tn-support-grid h3 { margin-top: 0; font-size: 1.25rem; }
.tn-support-grid p { font-size: .97rem; }
.tn-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.4rem; margin-top: .8rem; }
.tn-strip section { scroll-margin-top: 110px; }
.tn-strip h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-family: var(--font-body); letter-spacing: 0; font-weight: 800; }
.tn-strip p { font-size: .9rem; }
.tn-block--compact > h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
@media (max-width: 700px) { .tn-support-grid, .tn-strip { grid-template-columns: 1fr; } }

/* Process steps */
.tn-steps { list-style: none; counter-reset: tnstep; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.tn-steps li { counter-increment: tnstep; position: relative; padding: 1rem 1.1rem 1rem 3.6rem; border: 1px solid var(--color-line); border-radius: 18px; background: white; color: var(--color-muted); }
.tn-steps li::before { content: counter(tnstep); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-green-800); color: #fff; font-weight: 900; font-size: .9rem; }
.tn-steps strong { color: var(--color-ink); }

/* Fireplace vs fire pit: side-by-side cards on desktop, stacked on mobile */
.tn-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.3rem 0; }
.tn-compare-card { padding: 1.25rem 1.35rem; border-radius: var(--radius-md); background: white; border: 1px solid var(--color-line); box-shadow: var(--shadow-card); }
.tn-compare-card h3 { margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 3px solid var(--color-accent); }
.tn-compare-card dl { margin: 0; display: grid; gap: .7rem; }
.tn-compare-card dt { font-weight: 900; color: var(--color-ink); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.tn-compare-card dd { margin: .15rem 0 0; color: var(--color-muted); }
@media (max-width: 700px) { .tn-compare { grid-template-columns: 1fr; } }

/* In-content CTA band */
.tn-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 1.6rem 0 .4rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-md); background: var(--color-green-800); color: white; }
.tn-cta-band p { color: white; font-weight: 700; font-size: 1.1rem; max-width: 520px; }
.tn-cta-band--photo { background-size: cover; background-position: center; }

/* FAQs (native disclosure, keyboard accessible) */
.tn-faq { display: grid; gap: .75rem; margin-top: 1.2rem; }
.tn-faq details { border: 1px solid var(--color-line); border-radius: 18px; background: white; }
.tn-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: .9rem 1.15rem; }
.tn-faq summary::-webkit-details-marker { display: none; }
.tn-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: var(--color-accent); font-weight: 700; }
.tn-faq details[open] summary::after { content: "–"; }
.tn-faq summary h3 { margin: 0; font-size: 1.1rem; font-family: var(--font-body); letter-spacing: 0; font-weight: 800; line-height: 1.3; }
.tn-faq summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 18px; }
.tn-faq .tn-faq-answer { padding: 0 1.15rem 1.1rem; }

/* Town link row */
.tn-link-row { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.tn-link-row li a, .tn-link-row li span { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: white; font-weight: 800; text-decoration: none !important; }
.tn-link-row li span { color: var(--color-muted); }

/* Solid navy final CTA (child pages) */
body.theme-growth .final-cta.final-cta--solid { background-image: none; background-color: var(--color-green-800); }

/* Primary buttons inside the main column keep 44px+ targets on mobile */
@media (max-width: 560px) {
  .hero .button-row .btn, .tn-cta-band .btn { width: 100%; }
}

/* Services dropdown: child pages indented under their parent */
.primary-nav .dropdown .dropdown-sub a { padding-left: 1.6rem; font-weight: 700; font-size: .93rem; }
.primary-nav .dropdown .dropdown-sub a::before { content: "–"; margin-right: .45rem; color: var(--color-accent); }

/* Single square detail images stay modest in the main column */
.tn-media--narrow { max-width: 420px; }

/* Image disclosure (AI-generated illustrations until project photography exists) */
.tn-illustrative { position: absolute; right: clamp(.75rem, 2vw, 1.5rem); bottom: .85rem; z-index: 1; margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72) !important; }
.tn-image-note { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: .82rem; color: var(--color-muted); max-width: 860px; }

/* Homepage: grouped service cards (2026-10 homepage revision) */
.tn-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-card-body h4 { margin: 0; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.03em; }
.tn-home-group { margin-top: 2.4rem; }
.tn-home-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; padding-bottom: .8rem; border-bottom: 2px solid var(--color-line); }
.tn-home-group-head h3 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.tn-home-also { margin-top: 1rem; font-size: .98rem; }
.tn-home-also a { color: var(--color-green-700); font-weight: 800; }
@media (max-width: 980px) { .tn-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tn-cards--3 { grid-template-columns: 1fr; } }