/* ============================================================
 * WeFinance — Service pages (Figma: "Service - Home Loan" 5059:458)
 * Loaded ONLY on /services/* pages, after styles.min.css.
 * Header/footer reuse the compiled homepage classes; everything
 * below styles the service-page body sections (svc-*).
 *
 * Design tokens (1920px reference frame):
 *   ink #0e0e11 · muted #7b7b7b · mint #80c0bf · navy #31354f
 *   card colors: #31354f #485f70 #618893 #80c0bf #9cc3c2 #c1cfcf
 *   section padding: 180px vert / content max 1520px
 *   card radius: 60px 4px (tl br / tr bl) · btn radius: 40px 0
 *   card shadow: 16px 19px 15.6px rgba(0,0,0,.12)
 * ============================================================ */

:root {
  --svc-ink: #0e0e11;
  --svc-muted: #7b7b7b;
  --svc-mint: #80c0bf;
  --svc-navy: #31354f;
  --svc-grad: linear-gradient(180deg, #31354f 0%, #0e0e11 100%);
  /* Figma effect: DROP_SHADOW offset (16,19) radius 15.6 → as a CSS
     filter drop-shadow() the blur param is half the Figma radius (7.8px);
     as box-shadow it is the full 15.6px. */
  --svc-drop-shadow: 16px 19px 7.8px rgba(0, 0, 0, 0.12);
  --svc-card-shadow: 16px 19px 15.6px rgba(0, 0, 0, 0.12);
  --svc-radius: 60px 4px; /* border-radius: 60px 4px → tl/br 60, tr/bl 4 */
  --svc-pad-y: clamp(60px, 9.4vw, 180px);
}

/* ---------- shared ---------- */
.svc-container {
  max-width: 1570px; /* matches the site's .container-large-1 */
  margin-inline: auto;
  padding-inline: 1rem;
}
.svc-section { padding-block: var(--svc-pad-y); }

.svc-h1,
.svc-h2 {
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  margin: 0;
  text-transform: capitalize;
  max-width: 95%;
}

.svc-h2 {
  text-transform: capitalize;
  max-width: 90%;
}

.svc-sub {
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  margin: 0;
}
.svc-body {
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--svc-muted);
  margin: 0;
}

/* Buttons — Figma: p24, radius tl40 br40, Inter 600 24px */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.4vw, 24px) clamp(18px, 1.8vw, 24px);
  border-radius: 40px 0; /* tl 40, br 40 */
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}
.svc-btn:hover { filter: brightness(0.95); }
.svc-btn--mint { background: var(--svc-mint); }
.svc-btn--navy { background: var(--svc-navy); }
.svc-btn--ghost {
  background: transparent;
  padding-inline: 0;
  border-radius: 0;
}
/* Figma gives the secondary "Contact Us" button a fixed 190px width */
.svc-btn--w190 { width: 190px; }

/* Inline click-to-call link inside body copy */
.svc-tel {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.svc-tel:hover { color: var(--svc-mint); }

/* White / grey feature card shell */
.svc-card {
  background: #fff;
  border-radius: var(--svc-radius);
  filter: drop-shadow(var(--svc-drop-shadow));
}

/* Colored 60px icon tile — radius tl20 br20 */
.svc-tile {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.02em;
}
.svc-tile img { width: 35px; height: 35px; display: block; }

/* ============================================================
 * HERO
 * ============================================================ */
.svc-hero {
  position: relative;
  background: #fff;
  overflow: hidden;
}
/* Figma: 2144×999 vector, bottom-anchored, centered, rotated 180° so its
   built-in gradient fades the pattern out toward the headline. Sized at
   ~112% of the viewport (2144/1920) with a fixed aspect ratio so the motif
   scale stays consistent at every screen width — no `cover` cropping. */
.svc-hero__pattern {
  position: absolute;
  inset: auto 0 0 0;
  height: 74%;
  overflow: hidden;
  pointer-events: none;
}
.svc-hero__pattern::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(111.7vw, 1100px);
  aspect-ratio: 2144 / 999;
  transform: translateX(-50%) rotate(180deg);
  background: url("../images/services-pages/hero-pattern.svg") center / 100% 100% no-repeat;
}
/* Safety fade where the clipped pattern meets the white hero top */
.svc-hero__pattern::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 28%;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.svc-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(30px, 4vw, 80px);
  padding-block: clamp(40px, 3.3vw, 63px) clamp(60px, 6.3vw, 120px);
}
.svc-hero__copy {
  max-width: clamp(46.25rem, 41.9643rem + 6.6964vw, 50rem);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vw, 62px);
}
/* From 1920 upward, give the copy a little more room */
@media (min-width: 1920px) {
  .svc-hero__copy { max-width: clamp(46.25rem, 41.9643rem + 6.6964vw, 50rem); }
}
.svc-hero__media {
  flex: 0 1 695px;
  min-width: 0;
}
.svc-hero__media picture,
.svc-hero__media img {
  display: block;
  width: 100%;
  height: clamp(320px, 31vw, 600px);
  object-fit: cover;
  border-radius: var(--svc-radius);
}
.svc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* ============================================================
 * UNDERSTANDING (navy gradient + white "Ready?" card)
 * ============================================================ */
.svc-understand { background: var(--svc-grad); }
.svc-understand__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(30px, 3.5vw, 70px);
}
.svc-understand__copy {
  /* max-width: clamp(33.25rem, 26.1071rem + 11.1607vw, 39.5rem); */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.1vw, 60px);
  color: #fff;
}
.svc-understand__copy .svc-h2,
.svc-understand__copy .svc-body { color: #fff; }
.svc-understand__card {
  flex: 1;
  min-width: 0;
  padding: clamp(28px, 3.1vw, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.1vw, 60px);
}
.svc-understand__card-title {
  font-weight: 600;
  font-size: clamp(26px, 2.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  margin: 0 0 clamp(16px, 1.6vw, 30px);
  padding-bottom: clamp(16px, 1.6vw, 30px);
  border-bottom: 1px solid #e5e5e5;
}
.svc-understand__card-sub {
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  margin: 0;
}
.svc-understand__ctas {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.svc-understand__ctas .svc-btn { width: 100%; }

/* Small compliance note under the section copy (Figma: 13px Light Italic) */
.svc-understand__note {
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 612px;
  margin: 0;
}
.svc-understand__note b,
.svc-understand__note strong { font-weight: 700; }
.svc-understand__note a { color: #fff; text-decoration: underline; }

/* "Worth knowing" banner — Figma: amber tint bg, #fb0 border, radius 29 */
.svc-banner {
  margin-top: 50px;
  background: rgba(255, 166, 0, 0.1);
  border: 1px solid #ffbb00;
  border-radius: 29px;
  padding: 26px 35px;
}
.svc-banner p {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #fff;
}
.svc-banner strong { font-weight: 700; }
/* Dark-text variant for light backgrounds (e.g. inside the checklist column) */
.svc-banner--dark { margin-top: 0; }
.svc-banner--dark p { color: var(--svc-ink); }

/* ============================================================
 * SCENARIOS (photo cards — Construction page)
 * ============================================================ */
.svc-scenarios { background: #fff; }
.svc-scenarios__heading {
  max-width: 900px;
  margin-bottom: clamp(40px, 7.3vw, 140px);
}
.svc-scenarios__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.svc-scenario-card {
  position: relative;
  height: clamp(420px, 31vw, 600px);
  border-radius: var(--svc-radius);
  overflow: hidden;
  background: #0e0e11;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.svc-scenario-card picture,
.svc-scenario-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Navy background overlay across the card + teal glow at top */
.svc-scenario-card::before {
  /* content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(49, 53, 79, 0.00) 0%, #31354F 100%);
  z-index: 1; */
}
.svc-scenario-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 81px;
  opacity: 0.4;
  background: linear-gradient(180deg, #80c0bf 0%, rgba(128, 192, 191, 0) 100%);
}
.svc-scenario-card__copy {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 2.5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
  color: #fff;
}
.svc-scenario-card__copy h3 {
  font-weight: 600;
  font-size: clamp(24px, 1.9vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.svc-scenario-card__copy p {
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  margin: 0;
}
@media (max-width: 1100px) {
  .svc-scenarios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .svc-scenarios__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * EXPECT (cards carousel)
 * ============================================================ */
.svc-expect { background: #fff; }
.svc-expect__inner {
  display: flex;
  align-items: center;
  gap: 0;/*clamp(30px, 7.3vw, 140px);*/
}
.svc-expect__title { flex: 1 1 0; min-width: 0; }
.svc-expect__slider {
  flex: 0 1 900px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.svc-expect__row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 40px);
  width: 100%;
}
.svc-expect__arrow {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--svc-ink);
  display: flex;
}
.svc-expect__arrow svg { width: 20px; height: 37px; }
.svc-expect__arrow:disabled { opacity: 0.25; cursor: default; }
.svc-expect__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* enough room so the 16px/19px offset card shadow never clips */
  padding: 8px 28px 48px 8px;
  min-width: 0;
}
.svc-expect__track::-webkit-scrollbar { display: none; }
.svc-expect-card {
  scroll-snap-align: start;
  flex: 0 0 min(362px, 84vw);
  background: #f8f8f8;
  border-radius: var(--svc-radius);
  filter: drop-shadow(var(--svc-drop-shadow));
  padding: 40px 40px 100px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 40px);
  align-items: flex-start;
}
.svc-expect-card h3 {
  font-weight: 600;
  font-size: clamp(24px, 1.9vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Dots — Figma Frame 39: 12px circles, 12px apart; active #0E0E11, rest #7B7B7B */
.svc-dots {
  display: flex;
  align-items: center;
  gap: 12px;
}
.svc-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7b7b7b;
  transition: background 0.2s;
}
.svc-dots span.is-active { background: var(--svc-ink); }

/* ============================================================
 * REVIEW (optional second, full-width carousel)
 * ============================================================ */
.svc-review { background: #fff; }
.svc-review__heading { margin-bottom: clamp(40px, 7.3vw, 140px); }
.svc-review__slider { width: 100%; }

/* ============================================================
 * ASSIST (checklist)
 * ============================================================ */
.svc-assist { background: #f8f8f8; }
.svc-assist__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.svc-assist__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.1vw, 60px);
}
.svc-assist__copy .svc-h2 { max-width: 100%; text-transform: capitalize; }
.svc-assist__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-assist-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 1.6vw, 30px);
}
.svc-assist-item img {
  width: clamp(36px, 2.6vw, 50px);
  height: clamp(36px, 2.6vw, 50px);
  flex: 0 0 auto;
  display: block;
}
.svc-assist-item p {
  font-weight: 600;
  font-size: clamp(17px, 1.3vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  margin: 0;
}
.svc-assist-item p .hl { color: var(--svc-mint); }
/* Inline SVG icons (About page benefits) — native 50×50 artwork */
.svc-assist-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: clamp(36px, 2.6vw, 50px);
  height: clamp(36px, 2.6vw, 50px);
}
.svc-assist-item__icon svg { width: 100%; height: 100%; display: block; }

/* White variant (About page "Why choose WeFinance", Figma pt180 / pb90) */
.svc-assist--white { background: #fff; }
.svc-assist--white.svc-section { padding-bottom: calc(var(--svc-pad-y) / 2); }

/* ============================================================
 * ADVISERS (emoji tile row — SMSF page)
 * ============================================================ */
.svc-advisers { background: #fff; }
.svc-advisers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.svc-adviser-card {
  background: #f8f8f8;
  border-radius: var(--svc-radius);
  filter: drop-shadow(var(--svc-drop-shadow));
  padding: clamp(32px, 2.6vw, 50px) clamp(24px, 2.1vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 40px);
  align-items: flex-start;
}
.svc-adviser-card p {
  font-weight: 600;
  font-size: clamp(24px, 1.9vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.svc-tile--lg {
  width: 85px;
  height: 85px;
  border-radius: 28px 0;
  font-size: 36px;
}
.svc-advisers__footnote {
  margin: 50px 0 0;
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--svc-muted);
  text-align: center;
}
@media (max-width: 1100px) {
  .svc-advisers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .svc-advisers__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * CTA PANEL (navy, image right)
 * ============================================================ */
.svc-ctapanel__panel {
  background: var(--svc-grad);
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-card-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;/*clamp(30px, 5.2vw, 100px);*/
  padding-left: clamp(24px, 6.3vw, 120px);
}
.svc-ctapanel__copy {
  flex: 1 1 0;
  min-width: 0;
  padding-block: clamp(32px, 3.5vw, 66px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.1vw, 60px);
  color: #fff;
}

.svc-ctapanel__copy .svc-h2{
  text-transform: inherit;
}

.svc-ctapanel__copy .svc-h2,
.svc-ctapanel__copy .svc-body { color: #fff; }
.svc-ctapanel__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2vw, 40px);
}
.svc-ctapanel__ctas .svc-btn--ghost { color: #fff; }
/* Media = pre-composed Figma frame (625×578.571) exported WITH alpha: the photo
   is already masked into the three brand blade arches and the bottom fade to
   #0f0f12 is baked in, so the panel's navy shows through the gaps.
   No object-fit cover / overlay gradient here — that would distort or
   double-darken the artwork. */
.svc-ctapanel__media {
  flex: 1;
  min-width: 0;
  align-self: center; /* frame bottom sits flush with the panel bottom */
  position: relative;
}
.svc-ctapanel__media picture,
.svc-ctapanel__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 625 / 578.571;
  object-fit: contain;
  object-position: bottom right;
}

/* ============================================================
 * STEPS (How we work with you)
 * ============================================================ */
.svc-steps { background: #f8f8f8; }
.svc-steps__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 60px);
  margin-bottom: clamp(40px, 7.3vw, 140px);
  /* flex-wrap: wrap; */
}
.svc-steps__head .svc-body { max-width: 362px; }
.svc-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.svc-step-card {
  background: #fff;
  border-radius: var(--svc-radius);
  filter: drop-shadow(var(--svc-drop-shadow));
  padding: clamp(32px, 2.6vw, 50px) clamp(24px, 2.1vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 40px);
  align-items: flex-start;
}
.svc-step-card h3 {
  font-weight: 600;
  font-size: clamp(24px, 1.9vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ============================================================
 * ENQUIRY (navy gradient + wizard card)
 * ============================================================ */
.svc-enquiry {
  position: relative;
  background: var(--svc-grad);
  overflow: hidden;
}
/* Figma "Frame 40" — the exact pre-composed 1920×404 pattern band exported
   from the design (fade already baked into the asset, so no opacity hacks). */
.svc-enquiry__pattern {
  position: absolute;
  inset: auto 0 0 0;
  height: 47%; /* 404 / 860 per the design frame */
  background: url("../images/services-pages/enquiry-pattern.svg") center bottom / cover no-repeat;
  pointer-events: none;
}
.svc-enquiry__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(30px, 7.3vw, 140px);
}
.svc-enquiry__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.1vw, 60px);
  color: #fff;
}
.svc-enquiry__copy .svc-h2,
.svc-enquiry__copy .svc-body { color: #fff; }
.svc-enquiry__form {
  flex: 1;
  min-width: 0;
}

/* ============================================================
 * ABOUT US PAGE
 * ============================================================ */
/* Hero collage (Figma 5059:2285) — the homepage blade collage (1520×439),
   anchored left of centre and running full-bleed off the right edge; the
   hero's overflow:hidden does the clipping. */
.svc-hero--about .svc-hero__inner { position: relative; }
.svc-hero--about .svc-hero__copy {
  position: relative;
  z-index: 1;
  max-width: min(52%, 800px);
}
.svc-hero__media--collage {
  position: absolute;
  top: 50%;
  left: 54%;
  width: 82%;               /* 1520/1920 ≈ 79%, nudged for the container gutter */
  transform: translateY(-50%);
  flex: none;
  z-index: 0;
  pointer-events: none;
}
.svc-hero__media--collage picture,
.svc-hero__media--collage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

/* Below the desktop layout the collage returns to normal flow, full width */
@media (max-width: 900px) {
  .svc-hero--about .svc-hero__copy { max-width: none; }
  .svc-hero__media--collage {
    position: static;
    width: 100%;
    transform: none;
    margin-top: clamp(16px, 3vw, 32px);
  }
}

/* Meet The Director (navy gradient) */
.svc-director { background: var(--svc-grad); }
.svc-director__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(30px, 4.5vw, 86px);
}
.svc-director__photo {
  flex: 0 1 695px;
  min-width: 0;
}
.svc-director__photo picture,
.svc-director__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 40vw, 762px);
  object-fit: cover;
  object-position: top center;
  border-radius: var(--svc-radius);
}
.svc-director__copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: 632px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.1vw, 60px);
  color: #fff;
  justify-content: center;
}
.svc-director__copy .svc-h2 { color: #fff; }
.svc-director__copy .svc-body { color: rgba(255, 255, 255, 0.85); }
.svc-director__name {
  margin: 0;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 24px);
  letter-spacing: -0.02em;
  color: var(--svc-mint);
}

/* About steps — second row (2 wide cards + navy CTA card) */
.svc-steps__grid--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}
.svc-step-card--cta {
  background: var(--svc-grad);
  justify-content: space-between;
}
.svc-step-card--cta h3 { color: var(--svc-mint); }
.svc-step-card--cta p { color: #fff; }
.svc-step-card--cta .svc-btn { width: 100%; }

@media (max-width: 900px) {
  .svc-director__inner { flex-direction: column; }
  .svc-director__copy { max-width: none; }
  .svc-steps__grid--wide { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * Responsive breakpoints
 * ============================================================ */
@media (max-width: 1100px) {
  .svc-expect__inner { flex-direction: column; align-items: stretch; }
  .svc-expect__slider { flex-basis: auto; }
  .svc-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --svc-radius: 40px 4px; } /* softer card corners on small screens */
  .svc-hero__pattern { height: 60%; }
  .svc-hero__pattern::before,
  .svc-enquiry__pattern::before { width: max(180vw, 900px); } /* keep motif legible when stacked */
  .svc-hero__inner,
  .svc-understand__inner,
  .svc-assist__inner,
  .svc-enquiry__inner { flex-direction: column; align-items: stretch; }
  .svc-hero__copy,
  .svc-understand__copy,
  .svc-assist__copy,
  .svc-enquiry__copy { max-width: none; }
  .svc-hero__media,
  .svc-understand__card { flex-basis: auto; }
  .svc-ctapanel__panel { flex-direction: column; padding-left: 0; }
  .svc-ctapanel__copy { padding: clamp(24px, 6vw, 40px); }
  .svc-ctapanel__media { width: 100%; }
}
@media (max-width: 620px) {
  .svc-steps__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-btn { white-space: normal; text-align: center; }
  .svc-expect__arrow { display: none; }

  /* Hero / section CTA buttons go full width and stack on phones */
  .svc-hero__ctas,
  .svc-ctapanel__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .svc-hero__ctas .svc-btn,
  .svc-ctapanel__ctas .svc-btn,
  .svc-btn--w190 { width: 100%; }
}