/*
|--------------------------------------------------------------------------|
| Sub-pages (/services/..., /products/...): layout on top of style.css     |
| These pages do not load plugins.css (bootstrap), so the basics are here. |
|--------------------------------------------------------------------------|
*/
*, *::before, *::after { box-sizing: border-box; }
.hm-page { background: #fff; }
.hm-page .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.hm-page .site-header { background-color: #000; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #FFC206; color: #000; padding: 8px 14px; font-weight: 700; }
.skip-link:focus { left: 10px; top: 10px; color: #000; }
.hm-page h1, .hm-page h2, .hm-page h3 { clear: none; }

/* Buttons (black on yellow for contrast) */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { display: inline-block; padding: 13px 26px; border: 2px solid #FFC206; font-family: Cabin, 'Cabin Fallback', sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; text-decoration: none; transition: all .25s ease; }
.btn-primary { background: #FFC206; color: #000; }
.btn-primary:hover, .btn-primary:focus { background: #fff; border-color: #fff; color: #000; }
.btn-ghost { background: transparent; color: #fff; }
.btn-ghost:hover, .btn-ghost:focus { background: #FFC206; color: #000; }
.btn:focus-visible, .pg-sec a:focus-visible, .pills a:focus-visible, .faq summary:focus-visible { outline: 3px solid #FFC206; outline-offset: 2px; }

/* Hero */
.pg-hero { background: #0C0C0C linear-gradient(135deg, #0C0C0C 0%, #171717 55%, #2b2306 100%); color: #fff; padding: 120px 0 70px; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li, .crumbs a { color: #c8c8c8; font-size: 13px; }
.crumbs li + li::before { content: "\203A"; color: #FFC206; margin-right: 6px; }
.crumbs a:hover, .crumbs a:focus { color: #FFC206; }
.pg-hero-grid.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 50px; align-items: start; }
.pg-eyebrow { color: #FFC206; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.pg-hero h1 { color: #fff; font-weight: 900; font-size: 42px; line-height: 1.2; max-width: 900px; margin: 0 0 20px; }
.pg-hero .lead { color: #e8e8e8; font-size: 18px; line-height: 1.6; max-width: 820px; margin-bottom: 14px; }
.pg-hero .lead a { color: #FFC206; font-size: inherit; }
.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 30px; color: #f0f0f0; font-size: 16px; line-height: 1.5; }
.points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px; border-left: 3px solid #FFC206; border-bottom: 3px solid #FFC206; transform: rotate(-45deg); }
.hero-panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 194, 6, .45); border-top: 4px solid #FFC206; padding: 26px 26px 18px; }
.hero-panel-title { color: #FFC206; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; font-size: 13px; margin: 0 0 14px; }
.hero-panel ul { list-style: none; padding: 0; margin: 0; }
.hero-panel li { color: #f2f2f2; font-size: 15px; line-height: 1.45; padding: 10px 0 10px 26px; border-top: 1px solid rgba(255, 255, 255, .1); position: relative; }
.hero-panel li:first-child { border-top: 0; }
.hero-panel li::before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; background: #FFC206; }

/* Content sections */
.pg-sec { padding: 70px 0; }
.pg-sec.alt { background: #f5f5f5; }
.pg-sec h2 { color: #111; font-weight: 900; font-size: 30px; line-height: 1.25; margin: 0 0 24px; padding-left: 16px; border-left: 4px solid #FFC206; }
.pg-sec p, .pg-sec li { color: #444; font-size: 16px; line-height: 1.65; }
.pg-sec > .container > p, .pg-sec > .container > ul, .pg-sec > .container > ol { max-width: 880px; }
.pg-sec ul { padding-left: 20px; }
.pg-sec li { margin-bottom: 6px; }
.pg-sec a { color: #000; font-size: inherit; text-decoration: underline; text-decoration-color: #FFC206; text-underline-offset: 3px; }
.pg-sec a:hover, .pg-sec a:focus { color: #8a6a00; }
.pg-sec strong { color: #222; }
.flow { display: inline-block; background: #fff6d6; border-left: 4px solid #FFC206; padding: 10px 16px; color: #111 !important; font-weight: 700; }
.chips { list-style: none; padding: 0 !important; margin: 6px 0 16px; display: flex; flex-wrap: wrap; gap: 10px; max-width: none !important; }
.chips li { background: #fff; border: 1px solid #ddd; padding: 7px 14px; margin: 0; font-size: 15px; color: #222; }
.pg-sec.alt .chips li { background: #fff; }

/* Cards */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 10px 0 20px; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.card { position: relative; background: #fff; border: 1px solid #e3e3e3; border-top: 3px solid #FFC206; padding: 24px 22px 14px; }
.pg-sec:not(.alt) .card { background: #fafafa; }
.card h3 { color: #111; font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; }
.card p, .card li { font-size: 15px; line-height: 1.6; }
.card ul { padding-left: 18px; }
.card.featured { border: 2px solid #FFC206; border-top-width: 5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.card-sub { color: #6b5200 !important; font-weight: 700; margin-top: -6px; }
.badge { display: inline-block; background: #0C0C0C; color: #FFC206; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; margin-bottom: 10px; line-height: 18px; }
.card-more { margin-top: 10px; }
.card .more-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid #FFC206; }

/* Tables */
.tbl-wrap { overflow-x: auto; margin: 10px 0 20px; -webkit-overflow-scrolling: touch; }
.pg-table { border-collapse: collapse; width: 100%; min-width: 560px; background: #fff; }
.pg-table th, .pg-table td { border: 1px solid #e0e0e0; padding: 12px 14px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.55; color: #444; }
.pg-table th { background: #0C0C0C; color: #fff; font-weight: 700; }
.pg-table td:first-child { width: 30%; }

/* Numbered steps */
.steps { counter-reset: step; list-style: none; padding: 0 !important; display: grid; gap: 12px; margin: 10px 0 20px; }
.steps li { counter-increment: step; position: relative; background: #fff; border: 1px solid #e3e3e3; padding: 14px 16px 14px 64px; margin: 0; }
.pg-sec:not(.alt) .steps li { background: #fafafa; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 12px; font-family: Roboto, 'Roboto Fallback', sans-serif; font-weight: 900; font-size: 22px; color: #b38600; }

/* FAQ */
.faq { max-width: 900px; }
.faq details { background: #fff; border: 1px solid #e0e0e0; margin-bottom: 10px; }
.pg-sec:not(.alt) .faq details { background: #fafafa; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { color: #111; font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 10px; font-size: 26px; line-height: 30px; color: #8a6a00; }
.faq details[open] summary::after { content: "\2212"; }
.faq .ans { padding: 0 18px 8px; }

/* Related links */
.pills { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { margin: 0; }
.pills a { display: inline-block; background: #fff; border: 1px solid #d4d4d4; padding: 9px 16px; color: #111; font-size: 15px; text-decoration: none; }
.pills a:hover, .pills a:focus { border-color: #FFC206; background: #FFC206; color: #000; }

/* Closing CTA band */
.pg-cta { background: #FFC206; padding: 64px 0; text-align: center; }
.pg-cta h2 { color: #000; font-weight: 900; font-size: 32px; line-height: 1.25; margin: 0 0 12px; }
.pg-cta p { color: #1a1a1a; font-size: 17px; line-height: 1.6; max-width: 720px; margin: 0 auto 10px; }
.pg-cta .btn-row { justify-content: center; margin-top: 22px; }
.pg-cta .btn-primary { background: #000; border-color: #000; color: #fff; }
.pg-cta .btn-primary:hover, .pg-cta .btn-primary:focus { background: #fff; border-color: #fff; color: #000; }
.pg-cta .btn-ghost { color: #000; border-color: #000; }
.pg-cta .btn-ghost:hover, .pg-cta .btn-ghost:focus { background: #000; color: #FFC206; }
.pg-cta .form-link { margin-top: 20px; font-size: 15px; }
.pg-cta .form-link a { color: #000; font-size: 15px; font-weight: 700; text-decoration: underline; }

@media screen and (max-width: 1000px) {
    .pg-hero-grid.has-aside { grid-template-columns: 1fr; gap: 30px; }
    .hm-page .container { padding-left: 24px; padding-right: 24px; }
    .hm-page .site-header > .container { padding-left: 0; padding-right: 0; }
}
@media screen and (max-width: 767px) {
    .pg-hero { padding: 104px 0 50px; }
    .pg-hero h1 { font-size: 30px; }
    .pg-hero .lead { font-size: 17px; }
    .pg-sec { padding: 50px 0; }
    .pg-sec h2, .pg-cta h2 { font-size: 25px; }
    .cards, .cards-2 { grid-template-columns: 1fr; }
    .btn { width: 100%; text-align: center; }
    .hm-page .container { padding-left: 20px; padding-right: 20px; }
    .hm-page .site-header > .container { padding-left: 0; padding-right: 0; }
}

/* No bootstrap reset on sub-pages: links are plain unless in body copy */
.hm-page a { text-decoration: none; }
.hm-page .pg-sec p a, .hm-page .pg-sec li a { text-decoration: underline; }
.hm-page .pg-sec .pills a, .hm-page .pg-sec .card .more-link { text-decoration: none; }
.hm-footer li a { display: inline-block; padding: 3px 0; }