/* Inner pages (services, industries, company, legal). Additive to live styles.css. */
.inner-page main { padding-top: 64px; } /* fixed header height, matches .hero margin-top */

/* Keyboard skip link, in the spirit of live/css/contact.css. Off screen until focused, and above
   .site-header (z-index 1000) so it is visible when it drops in. */
.skip-link { position: absolute; top: -80px; left: 15px; z-index: 1001; padding: 12px; background: var(--white); color: var(--navy); }
.skip-link:focus { top: 10px; }

/* Breadcrumb strip, directly under the fixed header. */
.breadcrumb { background: var(--light-gray); font-size: 0.875rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 0; }
.breadcrumb li { color: var(--text-light); }
.breadcrumb li + li::before { content: '/'; margin-right: 6px; color: var(--mid-gray); }
.breadcrumb a { color: var(--navy-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Page hero. --hero-img is set inline per page by renderHero. */
.page-hero { background: var(--navy); color: var(--white); padding: 72px 0; }
.page-hero--image {
    background: linear-gradient(90deg, rgba(20, 30, 81, 0.95) 0%, rgba(20, 30, 81, 0.8) 55%, rgba(20, 30, 81, 0.4) 100%), var(--hero-img) center / cover no-repeat;
}
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; max-width: 780px; margin: 0 0 16px; }
.page-hero-lede { font-family: 'Playfair Display', serif; font-size: 1.2rem; max-width: 640px; color: rgba(255, 255, 255, 0.9); margin: 0 0 28px; }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.page-hero-phone { color: var(--white); font-weight: 600; text-decoration: none; }
.page-hero-phone:hover { text-decoration: underline; }

/* Body sections. */
.page-section { padding: 64px 0; }
.page-section--alt { background: var(--light-gray); }
/* One left edge for every section heading on the page. The narrow blocks are written as
   <div class="container page-narrow">, and .container is max-width 1200px, margin 0 auto, so
   capping the container itself at 820px (with or without margin-left: 0) moves the block off the
   grid: centred it starts 190px right of the full width sections, and flush left it starts 120px
   left of them. Keep the container exactly where every other container sits and cap the measure of
   its children instead, so narrow text and wide grids share the same left edge. */
.page-narrow > * { max-width: 820px; }
.page-section h2, .page-faqs h2 { text-align: left; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 16px; }
.page-section h3 { color: var(--navy); font-size: 1.2rem; margin: 28px 0 8px; }
.page-section p { margin: 0 0 16px; }
.page-section ul:not([class]) { margin: 0 0 16px 22px; }
.page-section ul:not([class]) li { margin-bottom: 6px; }
.page-section a:not(.btn):not(.link-card) { color: var(--navy-dark); text-decoration: underline; }

/* Task lists: two columns of ticked items. */
.task-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 20px 0 0; padding: 0; }
.task-list li { position: relative; padding-left: 30px; }
.task-list li::before {
    content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--teal) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Numbered step cards, matching the homepage quote process. */
.page-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; }
.page-steps li { counter-increment: step; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.page-steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: var(--white); font-weight: 700; margin-bottom: 12px; }
.page-steps strong { display: block; color: var(--navy); margin-bottom: 6px; }

/* Fact cards. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.fact { background: var(--white); border-left: 4px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.fact strong { display: block; color: var(--navy); margin-bottom: 4px; }

/* Text beside a photo. */
.page-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.page-split img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Cross-link cards. */
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.link-card { display: block; padding: 18px 20px; border: 1px solid var(--mid-gray); border-radius: var(--radius); background: var(--white); color: var(--navy); font-weight: 600; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition); }
.link-card:hover, .link-card:focus-visible { border-color: var(--teal); box-shadow: var(--shadow); }
.link-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.link-card span { display: block; margin-top: 4px; font-size: 0.9rem; font-weight: 400; color: var(--text-light); }

/* FAQ accordion, built from meta.faqs by renderFaqs. */
.page-faqs { padding: 64px 0; }
.page-faqs h2:not(:first-child) { margin-top: 48px; }
.faq { border-bottom: 1px solid var(--mid-gray); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font-size: 1.5rem; color: var(--teal); }
.faq[open] summary::after { content: '\2212'; }
.faq summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.faq-a { padding: 0 0 18px; }
.faq-a p { margin: 0 0 10px; }
.faq-a a { color: var(--navy-dark); text-decoration: underline; }

/* Town cards on the areas page. */
.town-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.town { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.town h3 { margin-top: 0; }

/* Legal pages. */
.legal h2 { font-size: 1.35rem; margin-top: 32px; }
.legal-updated { color: var(--text-light); font-size: 0.9rem; }

.inner-page .final-cta { padding: 72px 0; }

@media (max-width: 768px) {
    .page-hero { padding: 48px 0; }
    .page-hero--image { background: linear-gradient(rgba(20, 30, 81, 0.88), rgba(20, 30, 81, 0.88)), var(--hero-img) center / cover no-repeat; }
    .page-section, .page-faqs { padding: 48px 0; }
    .page-split { grid-template-columns: 1fr; gap: 28px; }
    .task-list { grid-template-columns: 1fr; }
}