/* ============================================================
   SERVICE LANDING PAGES  (core/templates/core/service_pages/*.html)

   Hand-written, per-service pages (currently Corporate Tax Returns).
   Loaded only by those templates, via base.html's extra_css block.
   Every class is prefixed .cs- so nothing here can leak into other pages.
   Reuses the shared redesign pieces: .ct-rd-eyebrow, .svc-rd-btn*,
   .faq-rd-* (accordion), .cta-rd-form-card (dark booking form) and
   .sd-rd-cta (closing band).
   ============================================================ */

.cs-hero,
.cs-body,
.cs-related {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    color: #334155;
}

/* Same left/right edge as the rest of the redesign. */
.cs-hero > .container,
.cs-body > .container,
.cs-related > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* base.html sets `overflow-x: hidden` on html AND body as a horizontal-overflow
   safety net. That quietly turns <body> into a scroll container, and
   `position: sticky` then sticks to <body> (which never scrolls) instead of
   the window -- so a sticky sidebar never actually sticks. `clip` gives the
   same overflow protection without creating a scroll container. The
   :root selector out-ranks base.html's inline rule regardless of order. */
html:root,
html:root body {
    overflow-x: clip;
}

/* On desktop-width screens the rail's right edge would slide under the
   floating chat / back-to-top buttons (60px wide, ~40px from the edge), so
   keep at least 108px of right padding. Applied to all three containers so
   the hero, body and related section still share one right edge. */
@media (min-width: 1280px) {
    .cs-hero > .container,
    .cs-body > .container,
    .cs-related > .container {
        padding-right: max(clamp(1.5rem, 6vw, 7rem), 108px);
    }
}

/* ---------- Icons & tiles ---------- */
.cs-ico {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}
/* Tinted "second tone" of the two-tone icons. */
.cs-ico .t {
    fill: currentColor;
    fill-opacity: 0.15;
}

.cs-tile {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    color: #2563eb;
    background: linear-gradient(140deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #cfe0fb;
}
.cs-tile .cs-ico { width: 24px; height: 24px; }
.cs-tile-lg { width: 56px; height: 56px; border-radius: 16px; }
.cs-tile-lg .cs-ico { width: 28px; height: 28px; }
.cs-tile-sm { width: 36px; height: 36px; border-radius: 10px; }
.cs-tile-sm .cs-ico { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.cs-hero {
    background:
        radial-gradient(900px 420px at 8% -30%, #dbeafe 0%, rgba(219, 234, 254, 0) 70%),
        radial-gradient(700px 360px at 100% 10%, #e0f2fe 0%, rgba(224, 242, 254, 0) 65%),
        #f8fafc !important;
    border-bottom: 1px solid #e6ebf2;
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 0 !important;
}

.cs-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: clamp(0.75rem, 2.5vw, 2rem);
}
.cs-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #475569;
    text-decoration: none;
}
.cs-crumbs a:hover { color: #2563eb; }
.cs-crumbs span[aria-current] { color: #0f172a; }
.cs-crumbs span[aria-hidden] { color: #cbd5e1; }

.cs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.cs-hero h1 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 1rem;
}
.cs-hero-intro {
    font-size: 1.08rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1.4rem;
    max-width: 700px;
}

.cs-hero-points {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.cs-hero-points li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}
.cs-hero-points .cs-ico {
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    color: #ffffff;
    background: #2563eb;
    stroke-width: 3;
}

.cs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.cs-hero-actions .svc-rd-btn {
    font-size: 0.92rem;
    padding: 0.8rem 1.4rem;
    gap: 0.5rem;
}
.cs-hero-actions .cs-ico { width: 16px; height: 16px; }

/* Signature visual: a mini deadline calendar. */
.cs-cal {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.25), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.cs-cal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.1rem;
}
.cs-cal-head > div { min-width: 0; }
.cs-cal-head .cs-link-pill { margin-top: 0.1rem; }
@media (max-width: 480px) {
    .cs-cal-head { flex-wrap: wrap; }
}
.cs-cal-title {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}
.cs-cal-sub {
    display: block;
    font-size: 0.8rem;
    color: #475569;
    margin-top: 0.15rem;
}
.cs-cal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.cs-cal-list li {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding-bottom: 1.15rem;
}
.cs-cal-list li:last-child { padding-bottom: 0; }
/* dashed line joining the three milestones */
.cs-cal-list li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50px;
    bottom: 4px;
    border-left: 2px dashed #bfd3f5;
}
.cs-cal-when {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2563eb;
}
.cs-cal-list strong {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
    line-height: 1.3;
}
.cs-cal-note {
    display: block;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #475569;
    margin-top: 0.1rem;
}
/* the deadline that matters most gets the accent */
.cs-cal-list li:last-child .cs-tile {
    color: #ffffff;
    background: linear-gradient(140deg, #2563eb 0%, #38bdf8 100%);
    border-color: transparent;
}

.cs-stats {
    list-style: none;
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #dbe4f0;
}
.cs-stats li {
    padding: 1.15rem 1rem 1.3rem;
    text-align: center;
}
.cs-stats li + li { border-left: 1px solid #dbe4f0; }
.cs-stats strong {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1.1;
}
.cs-stats span {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-top: 0.2rem;
}

/* ---------- Body ---------- */
.cs-body {
    background: #ffffff !important;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem) !important;
}

.cs-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid #e6ebf2;
}
.cs-jump span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-right: 0.35rem;
}
.cs-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cs-jump a:hover { background: #dbeafe; color: #1d4ed8; }

.cs-grid {
    display: grid;
    /* The form's width scales with the screen (about 27%, 340px to 470px) so on
       a small desktop it no longer eats half the page; big screens still get
       the full 470px. */
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 470px);
    gap: 2.5rem clamp(1.75rem, 3vw, 2.75rem);
    align-items: start;
}
.cs-main { min-width: 0; }

/* Each content block. `section.` beats the legacy `section { padding: 80px 0 }`. */
section.cs-sec {
    padding: 0 !important;
    background: transparent !important;
    margin: 0 0 clamp(2.75rem, 5vw, 4rem);
    scroll-margin-top: 1.5rem;
}
section.cs-sec:last-child { margin-bottom: 0; }

.cs-sec h2,
.cs-related h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #0f172a;
    margin: 0 0 0.85rem;
}
.cs-lead {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #1e293b;
    margin: 0 0 1.5rem;
    max-width: 760px;
}
.cs-prose {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #1e293b;
    margin: 0 0 1rem;
}
.cs-note {
    font-size: 0.86rem;
    line-height: 1.6;
    color: #475569;
    margin: 1rem 0 0;
}
.cs-note a { display: inline-block; padding: 0.5rem 0; color: #2563eb; font-weight: 700; text-decoration: none; }
.cs-note a:hover { text-decoration: underline; }

/* "Ideal for" */
.cs-ideal {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
}
.cs-ideal .cs-ico { width: 20px; height: 20px; margin-top: 2px; color: #2563eb; }
.cs-ideal p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #1e293b; }
.cs-ideal strong {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 0.2rem;
}

/* ---------- Section heading row with a corner link ---------- */
.cs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
    margin-bottom: 0.85rem;
}
.cs-sec .cs-head h2,
.cs-related .cs-head h2 {
    margin: 0;
    flex: 1 1 260px;   /* heading yields space so the pill stays in the corner */
    min-width: 0;
}
.cs-related .cs-head { margin-bottom: 1.5rem; }

.cs-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #ffffff;
    border: 1px solid #cfe0fb;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cs-link-pill .cs-ico { width: 14px; height: 14px; transition: transform 0.2s; }
.cs-link-pill:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.cs-link-pill:hover .cs-ico { transform: translateX(3px); }

/* Louder pill: used where the message itself matters (other provinces). */
.cs-pill-strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfd3f5;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.cs-pill-strong .cs-ico { width: 17px; height: 17px; }
.cs-pill-strong:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; }

.cs-callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.1rem;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(120deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #cfe0fb;
    border-left: 4px solid #2563eb;
    border-radius: 14px;
}
.cs-callout strong {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.2rem;
}
.cs-callout p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #1e293b; }
.cs-callout { align-items: center; flex-wrap: wrap; }
.cs-callout-text { flex: 1 1 260px; min-width: 0; }
.cs-callout-btn { flex-shrink: 0; font-size: 0.88rem; padding: 0.7rem 1.2rem; white-space: nowrap; }

/* ---------- Cards ---------- */
.cs-cards { display: grid; gap: 1rem; }
.cs-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cs-card {
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.35rem;
    display: block;
}
.cs-card h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    margin: 0.85rem 0 0.4rem;
}
.cs-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

#who .cs-card p { color: #1e293b; }

.cs-cards-compact .cs-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; }
.cs-cards-compact .cs-card h3 { margin: 0; }
.cs-cards-compact .cs-card p { grid-column: 1 / -1; margin-top: 0.6rem; }

.cs-card-benefit {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f8fafc;
}
.cs-card-benefit h3 { margin-top: 0; }

/* ---------- What's included ---------- */
.cs-incl { display: grid; gap: 1rem; }
.cs-incl-card {
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-left: 4px solid #2563eb;
    border-radius: 16px;
    padding: 1.35rem 1.5rem 1.5rem;
}
.cs-incl-2 { border-left-color: #0ea5e9; }
.cs-incl-3 { border-left-color: #10b981; }
.cs-incl-3 .cs-tile { color: #059669; background: linear-gradient(140deg, #ecfdf5, #d1fae5); border-color: #bbf0d6; }
.cs-incl-2 .cs-tile { color: #0284c7; background: linear-gradient(140deg, #f0f9ff, #e0f2fe); border-color: #bde3f7; }
.cs-incl-card header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.cs-incl-card h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.cs-incl-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2rem;
}
.cs-incl-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    break-inside: avoid;
    padding: 0.3rem 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1e293b;
}
.cs-incl-card li .cs-ico {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: #2563eb;
    stroke-width: 2.6;
}
.cs-incl-2 li .cs-ico { color: #0284c7; }
.cs-incl-3 li .cs-ico { color: #059669; }

/* ---------- Process timeline ---------- */
.cs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: 1rem;
}
.cs-step:last-child { padding-bottom: 0; }
.cs-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: -2px;
    width: 2px;
    background: linear-gradient(#93b4ee, #dbeafe);
}
.cs-step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(140deg, #2563eb 0%, #38bdf8 100%);
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px #dbeafe;
    position: relative;
    z-index: 1;
}
.cs-step-body {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1rem 1.25rem;
}
.cs-step-body h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}
.cs-step-body p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

/* In-flow call-to-action strips */
.cs-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(120deg, #0b1220 0%, #12305f 100%);
    border-radius: 16px;
}
.cs-inline-cta p {
    flex: 1 1 200px;
    margin: 0;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
.cs-inline-cta .svc-rd-btn { font-size: 0.88rem; padding: 0.7rem 1.2rem; }

/* ---------- Tables ---------- */
.cs-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
}
.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: #ffffff;
}
.cs-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    background: #f8fafc;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid #e6ebf2;
}
.cs-table tbody th,
.cs-table tbody td {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    text-align: left;
    line-height: 1.55;
}
.cs-table tbody tr:last-child th,
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody th {
    font-weight: 700;
    color: #0f172a;
    width: 34%;
}
.cs-table tbody td { color: #334155; }
.cs-table tbody th .cs-tile {
    display: inline-grid;
    vertical-align: middle;
    margin-right: 0.65rem;
}

.cs-rates thead th:not(:first-child),
.cs-rates tbody td { text-align: center; }
.cs-rates tbody { border-top: 1px solid #e6ebf2; }
.cs-rates tbody th { width: auto; }
.cs-rates-place th {
    background: #eff6ff;
    color: #1d4ed8 !important;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.65rem 1.1rem !important;
}
.cs-rates-total {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    color: #1d4ed8 !important;
    background: #f5f9ff;
}

/* ---------- Industry chips ---------- */
.cs-chips {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.cs-chips li {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}
.cs-chips .cs-chips-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    background: none;
    border: 0;
    padding: 0 0.35rem 0 0;
}


/* ---------- Quote factors ---------- */
.cs-quote {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.7rem;
}
.cs-quote li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
}
.cs-quote strong { display: block; font-size: 0.92rem; color: #0f172a; line-height: 1.3; }
.cs-quote li span:not(.cs-tile) { display: block; font-size: 0.82rem; color: #334155; line-height: 1.45; }


/* ---------- Corporate structure ---------- */
.cs-struct { display: grid; gap: 0.85rem; }
.cs-struct-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 1.35rem;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
}
.cs-struct-item h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.3rem;
}
.cs-struct-item p {
    font-size: 0.93rem;
    line-height: 1.65;
    color: #334155;
    margin: 0;
}

/* ---------- Pricing promises ---------- */
.cs-promises {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
}
.cs-promises li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}
.cs-promises .cs-ico { width: 18px; height: 18px; color: #059669; stroke-width: 2.6; }

/* ---------- Offices ---------- */
.cs-office { display: flex; gap: 0.85rem; align-items: flex-start; }
.cs-office h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.cs-office p { font-size: 0.88rem; }
.cs-office-phone {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 0.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}
.cs-office-phone:hover { text-decoration: underline; }

/* ---------- Reviews ---------- */
.cs-reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.cs-review {
    margin: 0;
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}
.cs-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.6rem; }
.cs-review blockquote {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #334155;
    flex: 1;
}
.cs-review figcaption strong { display: block; font-size: 0.9rem; color: #0f172a; }
.cs-review figcaption span { display: block; font-size: 0.78rem; color: #64748b; margin-top: 0.1rem; }

/* ---------- FAQ (accordion look comes from the shared .faq-rd-*) ---------- */
.cs-faq .faq-rd-list {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;   /* opening one card does not stretch its neighbour */
}
.cs-faq .faq-rd-toggle { padding: 1rem 1.1rem; gap: 0.6rem; }
.cs-faq .faq-rd-question { font-size: 0.93rem; line-height: 1.35; }
.cs-faq .faq-rd-answer-inner { padding: 0 1.1rem 1.1rem calc(1.1rem + 18px + 0.5rem); }
.cs-faq .faq-rd-answer-inner p { color: #1e293b; }

/* ---------- Sticky booking rail ---------- */
.cs-rail {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: grid;
    gap: 0.85rem;
}
.cs-rail .cta-rd-form-card { padding: 1.25rem 1.35rem 1rem; }
.cs-rail .cta-rd-form-badge { margin-bottom: 0.6rem; }
.cs-rail .cta-rd-form-title { font-size: 1.3rem; margin-bottom: 0.25rem; }
.cs-rail .cta-rd-form-sub { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.8rem; }
.cs-rail .cta-rd-fields { gap: 0.5rem 0.75rem; }
.cs-rail .cta-rd-field > span { font-size: 0.68rem; }
.cs-rail .cta-rd-form-card .form-control,
.cs-rail .cta-rd-field select {
    width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    color: #e2e8f0;
    background: #060c17;
    border: 1px solid #1e3a70;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
}
.cs-rail .cta-rd-form-card .form-control::placeholder { color: #64748b; }
.cs-rail .cta-rd-form-card input.form-control { text-overflow: ellipsis; }
.cs-rail .cta-rd-form-card .form-control:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.cs-rail .cta-rd-form-card textarea.form-control { resize: vertical; height: 4.4rem; min-height: 2.9rem; }
.cs-rail .cta-rd-form-foot { margin-top: 0.6rem; font-size: 0.72rem; }
.cs-rail .sd-rd-field-error { font-size: 0.75rem; color: #fca5a5; }

/* "Prefer to talk?" box -- the phone icon does a small, gentle nudge on hover. */
.cs-rail-call {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
}
.cs-rail-call {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.cs-rail-text { display: block; }
.cs-rail-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}
.cs-rail-num {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.2s;
}
.cs-rail-call:hover .cs-rail-num,
.cs-rail-call:focus-visible .cs-rail-num { color: #2563eb; }
.cs-rail-call:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.cs-rail-call .cs-tile .cs-ico { transform-origin: 70% 70%; }
@keyframes cs-phone-nudge {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}
@media (hover: hover) and (pointer: fine) {
    .cs-rail-call {
        transition: border-color 0.25s, box-shadow 0.25s;
    }
    .cs-rail-call .cs-tile {
        transition: background 0.25s, color 0.25s, border-color 0.25s;
    }
    .cs-rail-call:hover,
    .cs-rail-call:focus-within {
        border-color: #93b4f5;
        box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.4);
    }
    .cs-rail-call:hover .cs-tile,
    .cs-rail-call:focus-within .cs-tile {
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: #ffffff;
        border-color: transparent;
    }
    .cs-rail-call:hover .cs-tile .cs-ico,
    .cs-rail-call:focus-within .cs-tile .cs-ico {
        animation: cs-phone-nudge 0.6s ease-in-out;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-rail-call:hover .cs-tile .cs-ico,
    .cs-rail-call:focus-within .cs-tile .cs-ico { animation: none; }
}

/* "Prefer to chat?" WhatsApp box: same layout as the phone box above it, in
   WhatsApp green, with a small pop (instead of the phone nudge) on hover. */
.cs-rail-wa .cs-tile {
    color: #128c4a;
    background: linear-gradient(140deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}
.cs-rail-wa .cs-tile .cs-ico { width: 20px; height: 20px; transform-origin: 50% 60%; }
.cs-rail-wa:hover .cs-rail-num,
.cs-rail-wa:focus-visible .cs-rail-num { color: #15803d; }
.cs-rail-wa:focus-visible { outline-color: #16a34a; }
@keyframes cs-wa-pop {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.22) rotate(-8deg); }
    60% { transform: scale(0.94) rotate(5deg); }
}
@media (hover: hover) and (pointer: fine) {
    .cs-rail-wa:hover,
    .cs-rail-wa:focus-within {
        border-color: #86efac;
        box-shadow: 0 8px 20px -10px rgba(22, 163, 74, 0.45);
    }
    .cs-rail-wa:hover .cs-tile,
    .cs-rail-wa:focus-within .cs-tile {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #ffffff;
        border-color: transparent;
    }
    .cs-rail-wa:hover .cs-tile .cs-ico,
    .cs-rail-wa:focus-within .cs-tile .cs-ico { animation: cs-wa-pop 0.6s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-rail-wa:hover .cs-tile .cs-ico,
    .cs-rail-wa:focus-within .cs-tile .cs-ico { animation: none; }
}

/* The two contact boxes sit in a wrapper: stacked normally, and on short
   desktop screens a compact side-by-side pair so the form still fits without
   an inner scrollbar. */
.cs-rail-contact { display: grid; gap: 0.85rem; }
.cs-rail-short { display: none; }
@media (min-width: 1280px) and (max-height: 960px) {
    .cs-rail-contact { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .cs-rail-contact .cs-rail-call { gap: 0.6rem; padding: 0.45rem 0.7rem; border-radius: 12px; }
    .cs-rail-contact .cs-rail-label,
    .cs-rail-contact .cs-rail-num { display: none; }
    .cs-rail-contact .cs-rail-short {
        display: block;
        font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        color: #0f172a;
    }
}

/* ---------- Related services & guides ---------- */
.cs-related {
    background: #f8fafc !important;
    border-top: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
}
.cs-related h2 { margin-bottom: 1.5rem; }
.cs-related-sub {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2.5rem 0 1.25rem;
}
.cs-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
}
.cs-card-link p { flex: 1; }
.cs-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
}
.cs-more .cs-ico { width: 15px; height: 15px; transition: transform 0.2s; }
.cs-guide img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
    .cs-card-link {
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
            box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .cs-card-link .cs-tile {
        transition: background 0.25s, color 0.25s, border-color 0.25s,
            transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
    }
    .cs-card-link:hover,
    .cs-card-link:focus-visible {
        z-index: 2;
        transform: translateY(-6px) scale(1.025);
        border-color: #93b4f5;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1),
            0 14px 26px -6px rgba(15, 23, 42, 0.28),
            0 32px 56px -14px rgba(37, 99, 235, 0.32);
    }
    .cs-card-link:hover .cs-tile,
    .cs-card-link:focus-visible .cs-tile {
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: #ffffff;
        border-color: transparent;
        transform: rotate(-6deg) scale(1.08);
    }
    .cs-card-link:hover .cs-more .cs-ico,
    .cs-card-link:focus-visible .cs-more .cs-ico { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-card-link,
    .cs-card-link .cs-tile { transition: none !important; }
    .cs-card-link:hover,
    .cs-card-link:focus-visible,
    .cs-card-link:hover .cs-tile,
    .cs-card-link:focus-visible .cs-tile { transform: none; }
}

/* Short laptop screens: trim the rail so the whole form stays in view. */
@media (min-width: 1280px) and (max-height: 820px) {
    .cs-rail .cta-rd-form-sub,
    .cs-rail .cta-rd-form-badge { display: none; }
    .cs-rail .cta-rd-form-title { margin-top: 0; }
    .cs-rail .cta-rd-form-card textarea.form-control { min-height: 3.2rem; }
    /* the WhatsApp box joined the phone box, so tighten the form a little more */
    .cs-rail .cta-rd-form-card { padding: 0.85rem 1.15rem 0.7rem; }
    .cs-rail .cta-rd-form-title { font-size: 1.15rem; margin-bottom: 0.5rem; }
    .cs-rail .cta-rd-fields { gap: 0.3rem 0.6rem; }
    .cs-rail .cta-rd-form-card .form-control,
    .cs-rail .cta-rd-field select { padding-top: 0.32rem; padding-bottom: 0.32rem; }
    .cs-rail .cta-rd-form-card textarea.form-control { height: 2.9rem; }
    .cs-rail .cta-rd-form-foot { margin-top: 0.4rem; }
}
@media (min-width: 1280px) and (max-height: 740px) {
    .cs-rail .cta-rd-form-card { padding: 0.65rem 1.1rem 0.55rem; }
    .cs-rail .cta-rd-form-title { margin-bottom: 0.35rem; }
    .cs-rail .cta-rd-fields { gap: 0.2rem 0.55rem; }
    .cs-rail .cta-rd-form-card .form-control,
    .cs-rail .cta-rd-field select { padding-top: 0.26rem; padding-bottom: 0.26rem; }
    .cs-rail .cta-rd-form-card textarea.form-control { height: 2.4rem; min-height: 2.4rem; }
    .cs-rail { gap: 0.55rem; }
    /* very short screens: the three dropdowns pair up instead of one per row */
    .cs-rail .cta-rd-fields .cta-rd-field:has(> select) { grid-column: auto; }
}

/* ============ Responsive ============ */
@media (max-width: 1279px) {
    /* Rail drops under the content; no longer sticky. */
    .cs-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-rail { position: static; max-height: none; overflow: visible; max-width: 560px; }
}
@media (max-width: 991px) {
    .cs-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-cal { max-width: 520px; }
    .cs-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-reviews { grid-template-columns: minmax(0, 1fr); }
    .cs-incl-card ul { columns: 1; }
}
@media (max-width: 640px) {
    .cs-faq .faq-rd-list { grid-template-columns: minmax(0, 1fr); }
    .cs-cards-3,
    .cs-cards-2 { grid-template-columns: minmax(0, 1fr); }
    .cs-stats { grid-template-columns: minmax(0, 1fr); }
    .cs-stats li + li { border-left: 0; border-top: 1px solid #dbe4f0; }
    .cs-hero-actions .svc-rd-btn { width: 100%; justify-content: center; }
    .cs-table tbody th { width: auto; }
    .cs-rates thead th,
    .cs-rates tbody th,
    .cs-rates tbody td { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.8rem; }
    .cs-rates thead th { font-size: 0.68rem; letter-spacing: 0.02em; }
    .cs-rail .cta-rd-field > span { font-size: 0.75rem; }
    .cs-table tbody th .cs-tile { display: none; }
    .cs-card-benefit { flex-direction: column; }
    .cs-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0.75rem; }
    .cs-step-num { width: 36px; height: 36px; font-size: 0.95rem; }
    .cs-step:not(:last-child)::before { left: 17px; top: 36px; }
    .cs-step-body { flex-direction: column; }
    .cs-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cs-jump a { white-space: nowrap; }
}

/* Very small phones (320-360px): squeeze the rates table so it fits without
   a sideways scroll. */
@media (max-width: 360px) {
    .cs-rates thead th,
    .cs-rates tbody th,
    .cs-rates tbody td { padding-left: 0.35rem; padding-right: 0.35rem; font-size: 0.76rem; }
    .cs-rates thead th { font-size: 0.66rem; letter-spacing: 0; }
    .cs-rates-place th { font-size: 0.74rem; }
    .cs-rates tbody th { line-height: 1.3; }
}

/* iOS Safari zooms the whole page when a form field with text smaller than
   16px is focused, so on touch-sized screens the booking form uses 16px. */
@media (max-width: 767px) {
    .cs-rail .cta-rd-form-card .form-control,
    .cs-rail .cta-rd-field select { font-size: 16px; }
}

/* Very small phones: stack the callout (icon, text, then button full width)
   instead of letting the button squeeze in beside the icon. */
@media (max-width: 480px) {
    .cs-callout { flex-direction: column; align-items: flex-start; }
    .cs-callout-text { flex: 0 0 auto; width: 100%; }   /* basis 260px would be a height here */
    .cs-callout-btn { width: 100%; justify-content: center; }
}

/* When the form column is narrower than its 470px maximum (screens under about
   1740px) two dropdowns per row get cut off ("Morning (9a..."), so each
   dropdown gets its own full-width row. */
@media (min-width: 1280px) and (max-width: 1739px) {
    .cs-rail .cta-rd-field:has(> select) { grid-column: 1 / -1; }

    /* ...and to make up for the extra rows, drop the small badge and the intro
       line and tighten the spacing, so the whole form (with its Send button)
       still fits on a 900px-tall screen without an inner scrollbar. */
    .cs-rail .cta-rd-form-badge,
    .cs-rail .cta-rd-form-sub { display: none; }
    .cs-rail .cta-rd-form-title { margin-bottom: 0.7rem; }
    .cs-rail .cta-rd-fields { gap: 0.4rem 0.7rem; }
    .cs-rail .cta-rd-form-card { padding: 1.1rem 1.25rem 0.9rem; }
    .cs-rail .cta-rd-form-card textarea.form-control { height: 3.6rem; }
}