/* New sections (added). Colour roles, used the same way everywhere:
     navy   #114a73  -> background of the hero only (one dark anchor at the top)
     copper #ac5e34  -> only things you can click (buttons, links, step numbers) - the site's own button colour
     yellow #fddf5b  -> highlight only: the key phrase in the hero and star ratings (the site's own accent)
     blue-grey #f4f9fc -> alternates with white so neighbouring sections look separate
   Fonts: Jost, as on the rest of the site. */
:root { --dsp-copper:#ac5e34; --dsp-copper-dark:#8f4b28; --dsp-blue:#114a73; --dsp-ink:#1f2a33; --dsp-muted:#5b6672; --dsp-line:#e3e8ee; --dsp-soft:#f4f9fc; --dsp-yellow:#fddf5b; }

.dsp-section { padding: 64px 0; }
.dsp-section.is-soft { background: var(--dsp-soft); }
.dsp-h2 { font-family: Jost, sans-serif; font-weight: 700; font-size: 38px; line-height: 1.2; color: var(--dsp-ink); margin: 0 0 14px; }
.dsp-lead { font-size: 18px; color: var(--dsp-muted); max-width: 820px; margin: 0 0 28px; }
.dsp-eyebrow { display: inline-block; font: 600 13px/1 Jost, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--dsp-copper); margin-bottom: 14px; }

/* Buttons */
.dsp-btn-main, .dsp-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 Jost, sans-serif; padding: 16px 24px; border-radius: 8px; text-decoration: none !important; border: 2px solid var(--dsp-copper); cursor: pointer; transition: background .2s, color .2s; }
.dsp-btn-main { background: var(--dsp-copper); color: #fff !important; }
.dsp-btn-main:hover { background: var(--dsp-copper-dark); border-color: var(--dsp-copper-dark); }
.dsp-btn-main[disabled] { opacity: .7; cursor: wait; }
.dsp-btn-ghost { background: transparent; color: var(--dsp-copper) !important; }
.dsp-btn-ghost.is-light { border-color: #fff; color: #fff !important; }
.dsp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Hero */
.dsp-hero { background: linear-gradient(135deg, #0d3a5a 0%, var(--dsp-blue) 60%, #1b5b88 100%); color: #fff; padding: 56px 0 48px; }
.dsp-hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 40px; align-items: center; }
.dsp-hero .dsp-hero-title { font: 700 46px/1.12 Jost, sans-serif; color: #fff; margin: 0 0 14px; }
.dsp-hero .dsp-hero-title span { display: block; color: var(--dsp-yellow); }
.dsp-hero .dsp-eyebrow { color: #cfe0ee; }
.dsp-hero-sub { font-size: 19px; line-height: 1.55; color: #e6eef5; margin: 0 0 14px; max-width: 640px; }
.dsp-hero-cred { font-size: 15px; color: #cfe0ee; margin: 0 0 18px; }
.dsp-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.dsp-chips li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.dsp-hero-card { background: #fff; color: var(--dsp-ink); border-radius: 14px; padding: 26px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.dsp-hero-card h2 { font: 700 22px/1.25 Jost, sans-serif; margin: 0 0 4px; color: var(--dsp-ink); }
.dsp-hero-card p.small { color: var(--dsp-muted); font-size: 14px; margin: 0 0 14px; }

/* Lead form */
.dsp-lead-form { display: grid; gap: 12px; }
.dsp-field label { display: block; font: 600 14px/1.3 Jost, sans-serif; margin-bottom: 5px; color: var(--dsp-ink); }
.dsp-field label span { font-weight: 400; color: var(--dsp-muted); }
.dsp-field input, .dsp-field textarea { width: 100%; padding: 13px 14px; border: 1px solid #c9d3dd; border-radius: 8px; font-size: 16px; background: #fff; color: var(--dsp-ink); }
.dsp-field input:focus, .dsp-field textarea:focus { outline: 2px solid var(--dsp-copper); outline-offset: 1px; border-color: var(--dsp-copper); }
.dsp-lead-form .dsp-btn-main { width: 100%; padding: 17px 20px; font-size: 17px; }
.dsp-form-status { margin: 0; font-size: 14px; color: #b42318; min-height: 0; }
.dsp-form-status:empty { display: none; }
.dsp-form-note { margin: 0; font-size: 14px; color: var(--dsp-muted); }
.dsp-form-note a { color: var(--dsp-copper); font-weight: 600; }
.dsp-lead-form.is-dark .dsp-field label, .dsp-lead-form.is-dark .dsp-form-note { color: #e6eef5; }
.dsp-lead-form.is-dark .dsp-form-note a { color: #f3c9a8; }
.dsp-lead-form.is-dark .dsp-form-status { color: #ffd2cc; }
.dsp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Cards */
.dsp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dsp-cards.is-3 { grid-template-columns: repeat(3, 1fr); }
.dsp-card { background: #fff; border: 1px solid var(--dsp-line); border-radius: 12px; padding: 22px; }
.dsp-card h3 { font: 700 19px/1.3 Jost, sans-serif; color: var(--dsp-ink); margin: 0 0 8px; }
.dsp-card p { margin: 0 0 8px; color: var(--dsp-muted); font-size: 15px; line-height: 1.6; }
.dsp-card ul { margin: 0 0 10px; padding-left: 18px; color: var(--dsp-muted); font-size: 15px; }
.dsp-card a.more { font-weight: 600; color: var(--dsp-copper); text-decoration: none; }

/* Journey steps */
.dsp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0 0 10px; }
.dsp-steps li { background: #fff; border: 1px solid var(--dsp-line); border-radius: 12px; padding: 22px 20px 20px; position: relative; }
.dsp-steps li::before { counter-increment: step; content: counter(step); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--dsp-copper); color: #fff; font: 700 16px/34px Jost, sans-serif; justify-content: center; margin-bottom: 10px; }
.dsp-steps strong { display: block; font: 700 18px/1.3 Jost, sans-serif; margin-bottom: 6px; color: var(--dsp-ink); }
.dsp-steps span { color: var(--dsp-muted); font-size: 15px; }

/* FAQ */
.dsp-faq-list { max-width: 900px; }
.dsp-faq details { background: #fff; border: 1px solid var(--dsp-line); border-radius: 10px; margin-bottom: 10px; padding: 0 18px; }
.dsp-faq summary { cursor: pointer; font: 600 17px/1.4 Jost, sans-serif; padding: 16px 0; color: var(--dsp-ink); list-style: none; position: relative; padding-right: 28px; }
.dsp-faq summary::-webkit-details-marker { display: none; }
.dsp-faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--dsp-copper); }
.dsp-faq details[open] summary::after { content: "–"; }
.dsp-faq details p { margin: 0 0 16px; color: var(--dsp-muted); line-height: 1.7; }

/* Call-to-action band */
.dsp-cta { background: var(--dsp-blue); color: #fff; }
.dsp-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.dsp-cta .dsp-h2 { color: #fff; }
.dsp-cta p { color: #e6eef5; font-size: 17px; }

/* Content blocks on inner pages */
.dsp-content h2 { font: 700 26px/1.3 Jost, sans-serif; color: var(--dsp-ink); margin: 28px 0 10px; }
.dsp-content p, .dsp-content li { color: #4a5560; line-height: 1.75; font-size: 16px; }
.dsp-answer { background: var(--dsp-soft); border-left: 4px solid var(--dsp-copper); padding: 16px 18px; border-radius: 6px; margin: 0 0 18px; }
.dsp-inline-cta { background: var(--dsp-blue); border-radius: 12px; padding: 24px; margin: 28px 0; color: #fff; }
.dsp-inline-cta h2 { color: #fff !important; margin-top: 0 !important; }
.dsp-inline-cta p { color: #e6eef5 !important; }

/* Thank-you page */
.dsp-thanks-box { max-width: 720px; margin: 0 auto; text-align: center; }
.dsp-thanks-box .dsp-actions { justify-content: center; }
.dsp-thanks-tip { background: var(--dsp-soft); border-radius: 10px; padding: 14px 16px; color: var(--dsp-muted); }


/* Responsive */
@media (max-width: 991px) {
  .dsp-hero-grid, .dsp-cta-grid { grid-template-columns: 1fr; }
  .dsp-cards, .dsp-steps { grid-template-columns: repeat(2, 1fr); }
  .dsp-cards.is-3 { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .dsp-section { padding: 44px 0; }
  .dsp-hero { padding: 30px 0 34px; }
  .dsp-hero .dsp-hero-title { font-size: 32px; }
  .dsp-hero-sub { font-size: 17px; }
  .dsp-h2 { font-size: 28px; }
  .dsp-cards, .dsp-steps { grid-template-columns: 1fr; }
  .dsp-hero-card { padding: 20px; }
}

/* Hero layout: desktop = text left, form right. Phones = heading, then the form, then the proof
   (so the form is on the first screen). */
.dsp-hero-grid { grid-template-areas: "copy card" "proof card"; }
.dsp-hero-grid > .dsp-hero-copy { grid-area: copy; }
.dsp-hero-grid > .dsp-hero-card { grid-area: card; }
.dsp-hero-grid > .dsp-hero-proof { grid-area: proof; }
.dsp-cta-grid > * { min-width: 0; }
@media (max-width: 991px) {
  .dsp-hero-grid { grid-template-areas: "copy" "card" "proof"; gap: 22px; }
}

/* Star in the hero rating chip */
.dsp-star { color: var(--dsp-yellow); }

/* Whole card is a link (blog summary on the home page) */
a.dsp-card-link { display: block; text-decoration: none !important; transition: box-shadow .2s, transform .2s; }
a.dsp-card-link:hover { box-shadow: 0 10px 24px rgba(17,74,115,.12); transform: translateY(-2px); }
a.dsp-card-link .more { font-weight: 600; color: var(--dsp-copper); }

/* "Also consults at" strip under the original Hospital Attachments block */
.dsp-also { background: #fff; padding: 28px 0 40px; }
.dsp-also-title { font: 700 22px/1.3 Jost, sans-serif; color: var(--dsp-ink); margin: 0 0 14px; text-align: center; }
.dsp-also-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.dsp-also-list li { border: 1px solid var(--dsp-line); border-radius: 10px; padding: 14px; font-size: 14px; color: var(--dsp-muted); background: #fff; }
.dsp-also-list strong { display: block; color: var(--dsp-ink); font: 600 15px/1.3 Jost, sans-serif; }
.dsp-also-list span { display: block; margin-top: 6px; color: var(--dsp-blue); font-weight: 600; }
.dsp-also-more { text-align: center; margin: 14px 0 0; }
.dsp-also-more a { color: var(--dsp-copper); font-weight: 600; }
@media (max-width: 991px) { .dsp-also-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dsp-also-list { grid-template-columns: 1fr; } }

/* Short patient quote on the GI and HPB pages */
.dsp-quote { border-left: 4px solid var(--dsp-copper); margin: 24px 0; padding: 6px 0 6px 16px; color: var(--dsp-ink); font-style: italic; }
.dsp-quote cite { display: block; font-style: normal; font-weight: 600; color: var(--dsp-muted); margin-top: 6px; }