/* OnShoreWave — Growth & AI Enablement Services section styles.
   Reuses the design tokens defined in site.css (--navy, --blue, --serif, etc.). */

/* ── Section hero (dark) ───────────────────────────────────────── */
.svc-hero { background: linear-gradient(160deg, var(--navy), #12294a); color: #fff; padding: 88px 0 64px; }
.svc-hero .section-inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.svc-hero .eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--accent); margin: 0 0 18px; }
.svc-hero h1 { font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1.18; margin: 0 0 18px; max-width: 820px; }
.svc-hero h1 em { color: var(--accent); font-style: italic; }
.svc-hero p.lede { font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.6; color: #d7e2f1; max-width: 700px; margin: 0 0 30px; }
.svc-hero .hero-btns a { text-decoration: none; }
.svc-hero .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }

/* Breadcrumb on detail pages */
.svc-crumb { font-family: var(--sans); font-size: 13px; color: var(--accent); margin: 0 0 16px; }
.svc-crumb a { color: var(--accent); text-decoration: none; }
.svc-crumb a:hover { text-decoration: underline; }

/* ── Service cards grid (hub) ──────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 44px; }
.svc-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(11,29,56,.10); }
.svc-problem { font-family: var(--serif); font-style: italic; color: var(--blue); font-size: 16px; margin: 0 0 12px; }
.svc-card h3 { font-family: var(--serif); color: var(--navy); font-size: 21px; font-weight: 600; margin: 0 0 10px; line-height: 1.25; }
.svc-card p.desc { font-family: var(--sans); color: var(--mid); font-size: 15px; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.svc-more { font-family: var(--sans); color: var(--blue); font-weight: 500; font-size: 14px; text-decoration: none; }
.svc-more:hover { text-decoration: underline; }

/* ── "Why" band ────────────────────────────────────────────────── */
.svc-why { background: var(--offwhite); }
.svc-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 40px; margin-top: 36px; }
.svc-why-item { display: flex; gap: 14px; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--text); }
.svc-why-item .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-top: 7px; }

/* ── Detail-page prose + components ────────────────────────────── */
.det-lead { font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--navy); margin: 0 0 28px; max-width: 780px; }
.det-block { max-width: 820px; }
.det-block h3 { font-family: var(--serif); color: var(--navy); font-size: 22px; font-weight: 600; margin: 34px 0 12px; }
.det-block p { font-family: var(--sans); color: var(--text); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.det-list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; }
.det-list li { position: relative; padding-left: 22px; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--text); }
.det-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.det-meta { font-family: var(--sans); font-size: 15px; color: var(--mid); margin: 0 0 6px; }
.det-meta b { color: var(--navy); font-weight: 500; }

/* Pricing tiers */
.det-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 10px; }
.price-card { border: 1px solid var(--stone); border-radius: var(--radius); padding: 22px 20px; background: var(--white); }
.price-card .tier { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 500; color: var(--blue); margin: 0 0 6px; }
.price-card .amt { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.1; }
.price-card .amt span { font-size: 14px; color: var(--mid); font-family: var(--sans); font-weight: 400; }
.price-card .amt small { display: block; font-size: 15px; color: var(--mid); font-family: var(--sans); font-weight: 400; margin-top: 4px; }
.det-note { font-family: var(--sans); font-size: 13px; color: var(--mid); font-style: italic; margin: 12px 0 0; }

/* Disclaimer / boundary */
.det-disclaimer { background: var(--offwhite); border-left: 3px solid var(--gold); border-radius: 4px; padding: 18px 22px; margin: 30px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--slate, #3E4C59); max-width: 820px; }

/* FAQ */
.det-faq { max-width: 820px; margin-top: 8px; }
.det-faq details { border-bottom: 1px solid var(--stone); padding: 14px 0; }
.det-faq summary { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--navy); cursor: pointer; list-style: none; }
.det-faq summary::-webkit-details-marker { display: none; }
.det-faq summary::before { content: "+ "; color: var(--blue); font-weight: 600; }
.det-faq details[open] summary::before { content: "\2212 "; }
.det-faq p { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--mid); margin: 12px 0 2px; }

/* ── CTA band ──────────────────────────────────────────────────── */
.svc-cta-band { background: var(--navy); color: #fff; text-align: center; padding: 64px 0; }
.svc-cta-band h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin: 0 0 14px; }
.svc-cta-band p { font-family: var(--sans); font-weight: 300; color: #d7e2f1; font-size: 17px; margin: 0 0 26px; }
.svc-cta-band .btn-primary { text-decoration: none; }

@media (max-width: 640px){
  .svc-hero h1 { font-size: 32px; }
  .svc-hero { padding: 64px 0 48px; }
}

/* ── Work-order additions: process steps, related, packages ────── */
.det-process { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.det-process .step { flex: 1 1 150px; min-width: 150px; background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 15px 14px; }
.det-process .step .n { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 500; color: var(--blue); }
.det-process .step .t { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 16px; margin-top: 3px; }
.det-process .step .d { font-family: var(--sans); color: var(--mid); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.det-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.det-related a { font-family: var(--sans); font-size: 14px; color: var(--blue); text-decoration: none; border: 1px solid var(--stone); border-radius: 999px; padding: 7px 16px; }
.det-related a:hover { background: var(--offwhite); }
.det-seeall { font-family: var(--sans); font-size: 14px; margin-top: 10px; }
.det-seeall a { color: var(--blue); font-weight: 500; text-decoration: none; }
.det-seeall a:hover { text-decoration: underline; }

/* Packages & Pricing page */
.pkg-group h3 { font-family: var(--serif); color: var(--navy); font-size: 22px; font-weight: 600; margin: 36px 0 6px; }
.pkg-table { width: 100%; border-collapse: collapse; }
.pkg-table td { border-bottom: 1px solid var(--stone); padding: 12px 6px; font-family: var(--sans); font-size: 15px; vertical-align: middle; }
.pkg-table td.name { color: var(--navy); font-weight: 500; }
.pkg-table td.name a { color: var(--navy); text-decoration: none; }
.pkg-table td.name a:hover { color: var(--blue); }
.pkg-table td.price { color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg-table td.act { text-align: right; white-space: nowrap; }
.pkg-table td.act a { color: var(--blue); font-weight: 500; text-decoration: none; font-size: 14px; }
.pkg-table td.act a:hover { text-decoration: underline; }
@media (max-width: 600px) { .pkg-table td.act { display: none; } .pkg-table td.price { font-size: 14px; } }