/* WashiWow v2 — a calmer canvas for the six colours in the original logo. */
:root {
  --cream: #fbf8f1;
  --paper: #fffdf9;
  --ink: #202b2b;
  --muted: #64716f;
  --aqua: #319da3;
  --aqua-dark: #126e73;
  --yellow: #f8d308;
  --line: #e8e5dc;
  --navy: #15393b;
  --mint: #e9f5f0;
  --brand-red: #ed1010;
  --brand-lime: #70c900;
  --brand-magenta: #c45694;
  --brand-ochre: #a78922;
  --shadow: 0 22px 65px rgba(27, 66, 62, .1);
  --heading-font: "Century Gothic", CenturyGothic, "Avenir Next", "Trebuchet MS", sans-serif;
}

html { scroll-padding-top: 105px; }
body { background: var(--cream); color: var(--ink); }
h1, h2, h3, .brand, .price-card-title, .growth-photo-copy strong,
.why-feature-copy h3, .footer-opening h2, .faq-help strong,
.contact-partner-card h3, .footer-contact h3 {
  font-family: var(--heading-font) !important;
}
h1, h2, h3 { letter-spacing: -.055em !important; }
.section-shell { width: min(1240px, calc(100% - 64px)); }
.section-pad { padding-block: clamp(82px, 8vw, 122px); }
.kicker { color: var(--aqua-dark); }
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary, .site-header .header-actions .btn:first-child {
  background: var(--aqua-dark); color: white; box-shadow: 0 12px 25px rgba(18, 110, 115, .17);
}
.btn-primary:hover, .site-header .header-actions .btn:first-child:hover { background: #0a5559; }
.btn-outline { border: 1px solid #b6d5d0; border-radius: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--brand-magenta); }

.announcement { height: 3px; background: var(--navy); color: #e5f4ef; }
.announcement strong { background: var(--yellow); color: var(--ink); }
.header-intro { display: none; }
.site-header, .site-header.open {
  width: 100%; height: auto; margin: 0; padding: 0 max(32px, calc((100vw - 1240px) / 2));
  display: grid; grid-template-columns: 205px minmax(0, 1fr) auto;
  grid-template-rows: 1fr; align-items: center; gap: clamp(20px, 3vw, 48px);
  background: #fff; box-shadow: 0 8px 25px rgba(20, 52, 51, .04);
}
.site-header:after { height: 4px; }
.site-header .brand {
  grid-column: 1; grid-row: 1; justify-self: start; align-self: center;
  margin: 0; width: 180px; height: auto; margin-bottom: 8px;
}
.site-header .brand-logo, .site-header .brand-logo img {
  position: static; display: block; width: 170px; height: auto; max-width: 100%;
}
.site-header .brand-logo picture { display: block; }
.site-header nav {
  grid-column: 2; grid-row: 1; justify-self: center; align-self: center;
  gap: clamp(15px, 1.7vw, 28px); white-space: nowrap; font-size: 14px;
}
.site-header nav .nav-highlight { color: var(--ink); }
.site-header .header-actions { grid-column: 3; grid-row: 1; gap: 8px; }
.site-header .header-actions .btn { height: 45px; min-height: 45px; border-radius: 10px; font-size: 12px; padding-inline: 15px; }
.site-header .header-actions .header-partner-link { background: #f3f8f5; color: var(--aqua-dark); }
.site-header .header-actions .header-partner-link:hover { background: #e3f2eb; }

.hero {
  min-height: 665px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 85px); padding: 84px 0 101px;
}
.hero:before {
  background: radial-gradient(circle at 0 25%, #fff4c8 0, transparent 31%),
    radial-gradient(circle at 100% 80%, #e5f5ef 0, transparent 38%), var(--cream);
}
.hero .eyebrow { color: var(--aqua-dark); background: #e6f3ed; border-radius: 999px; padding: 10px 15px; font-size: 10px; }
.hero .spark { color: var(--brand-magenta); }
.hero h1 {
  max-width: 700px; margin: 23px 0 26px;
  font: 700 clamp(54px, 5.5vw, 78px)/1.045 var(--heading-font);
  letter-spacing: -.06em !important;
}
.hero h1 em { color: var(--aqua-dark); font-weight: 700; }
.hero-copy > p { max-width: 540px; color: #536863; font-size: 17px; line-height: 1.75; }
.hero-actions { margin: 33px 0 28px; }
.hero-actions .btn { min-height: 54px; padding-inline: 22px; }
.trust-row b { color: var(--aqua-dark); background: #def0e9; }
.hero-image-wrap { position: relative; border-radius: 38px 38px 125px 38px; }
.hero-image-wrap:before {
  inset: -14px -14px 18px 18px; border-radius: 42px 42px 130px 42px;
  background: linear-gradient(150deg, var(--yellow), var(--brand-lime) 33%, var(--aqua) 67%, var(--brand-magenta));
  transform: rotate(2deg);
}
.hero-image-wrap img { height: 525px; border-radius: 36px 36px 123px 36px; object-position: 61% center; }
.hero-photo-note { left: -25px; bottom: 25px; border-radius: 14px; border-left-color: var(--yellow); }
.hero-float { border-radius: 13px; }
.hero-float-care { border-left-color: var(--brand-lime); }
.hero-float-partner { border-left-color: var(--brand-magenta); }
.proof-bar {
  position: relative; overflow: hidden; margin-top: -15px; border-radius: 17px;
  background: var(--navy); color: #e7f3ef;
  box-shadow: 0 18px 42px rgba(21, 57, 59, .12);
}
.proof-bar:after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: linear-gradient(90deg,
    var(--brand-red) 0 16.67%, var(--yellow) 16.67% 33.33%,
    var(--brand-lime) 33.33% 50%, var(--aqua) 50% 66.67%,
    var(--brand-magenta) 66.67% 83.33%, var(--brand-ochre) 83.33% 100%);
}
.proof-bar p { font-weight: 700; }
.proof-bar p span { color: var(--yellow); }
.proof-bar > div { color: #e7f3ef; }
.proof-bar > div > span { white-space: nowrap; }
.proof-bar i:first-of-type { color: var(--aqua); }
.proof-bar i:last-of-type { color: var(--brand-magenta); }

.service-spotlight { background: #fff; }
.service-spotlight-head h2, .section-heading h2, .why-intro h2, .faq-intro h2,
.availability-copy h2 { font-family: var(--heading-font); font-weight: 700; letter-spacing: -.055em; }
.service-spotlight-head h2 em, .section-heading h2 em { color: var(--aqua-dark); }
.spotlight-card { border-radius: 18px; border-color: #e7ebe5; box-shadow: 0 13px 30px rgba(19, 58, 52, .045); }
.spotlight-card:hover { box-shadow: 0 20px 44px rgba(19, 58, 52, .11); }
.spotlight-media, .spotlight-media img { border-radius: 13px 13px 0 0; }
.spotlight-content h3 { color: var(--ink); }
.service-mini-list { color: var(--aqua-dark); }

.how { background: linear-gradient(135deg, #f4f9f6, #faf9f3); }
.how .section-heading .kicker { color: var(--aqua-dark); }
.how .section-heading h2 em { color: var(--aqua-dark); }
.how .journey-switch { border: 1px solid #dfe9e3; background: #fff; box-shadow: 0 6px 20px rgba(18, 65, 55, .05); }
.how .journey-tab.is-active { background: var(--aqua-dark); color: #fff; }
.how .journey-panel article {
  background: #fff; border-color: #e4e9e3; border-top: 3px solid var(--step-accent);
  border-radius: 17px; box-shadow: 0 12px 28px rgba(18, 65, 55, .045);
}
.how .journey-panel article > span { color: var(--aqua-dark); }
.how .journey-panel article:after { background: #fff; color: var(--aqua-dark); border: 1px solid #dce8e1; }
.how #journey-customers article:nth-child(1) { --step-accent: var(--aqua); }
.how #journey-customers article:nth-child(2) { --step-accent: var(--yellow); }
.how #journey-customers article:nth-child(3) { --step-accent: var(--brand-magenta); }
.how #journey-ironwalas article:nth-child(1) { --step-accent: var(--brand-lime); }
.how #journey-ironwalas article:nth-child(2) { --step-accent: var(--brand-ochre); }
.how #journey-ironwalas article:nth-child(3) { --step-accent: var(--brand-red); }
.partner-story { background: #fff; color: var(--ink); }
.partner-story .kicker { color: var(--aqua-dark); }
.partner-story h2 { color: var(--ink); }
.partner-story h2 em { color: var(--aqua-dark); }
.partner-story-copy > p { color: var(--muted); }
.partner-points span { color: var(--ink); }
.partner-points span:before { background: var(--brand-lime); }
.partner-paths { background: var(--cream); }
.path-card { border-radius: 22px; }
.growth-photo { border-radius: 20px 20px 0 0; }
.growth-number { color: #fff; }
.path-card .growth-body > a { color: var(--aqua-dark); }
.growth-step.is-active .growth-step-icon { background: var(--aqua-dark); }
.pricing { background: #fff; }
.price-card { border-radius: 18px; }
.price-card-title { font-weight: 700; }
.price-filter.is-active, .faq-filters button.is-active { background: var(--aqua-dark); border-color: var(--aqua-dark); }
.pricing-callout {
  background: var(--navy); border: 1px solid #315553; border-radius: 20px;
  box-shadow: 0 18px 40px rgba(21, 57, 59, .1);
}
.pricing-callout:after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: linear-gradient(90deg,
    var(--brand-red) 0 16.67%, var(--yellow) 16.67% 33.33%,
    var(--brand-lime) 33.33% 50%, var(--aqua) 50% 66.67%,
    var(--brand-magenta) 66.67% 83.33%, var(--brand-ochre) 83.33% 100%);
}
.pricing-pickup-art { background: #205051; border-color: var(--aqua); color: #d5f0e9; }
.pricing-callout p { color: #d5e7e2; }
.pricing-callout p > span { color: var(--yellow); }
.pricing-callout b { color: #fff; font-family: var(--heading-font); font-size: clamp(21px, 2vw, 27px); }
.pricing-callout .btn { background: var(--yellow); color: var(--ink); font-weight: 800; }
.benefits { background: linear-gradient(135deg, #fafaf6, #f7f5ee); }
.benefits .why-intro .kicker, .benefits .why-intro h2 em { color: var(--aqua-dark); }
.why-feature-copy, .faq-intro { background: var(--navy); }
.benefits .why-feature-count { color: var(--yellow); }
.benefits .why-feature-line {
  width: 96px; height: 3px;
  background: linear-gradient(90deg,
    var(--brand-red) 0 16.67%, var(--yellow) 16.67% 33.33%,
    var(--brand-lime) 33.33% 50%, var(--aqua) 50% 66.67%,
    var(--brand-magenta) 66.67% 83.33%, var(--brand-ochre) 83.33% 100%);
}
.benefits .why-option { border-color: #e5e9e3; }
.benefits .why-option-number { display: inline-flex; align-items: center; gap: 7px; color: #657775; }
.benefits .why-option-number:before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: var(--benefit-accent);
}
.benefits .why-option:nth-child(1), .benefits .why-option:nth-child(7) { --benefit-accent: var(--aqua); }
.benefits .why-option:nth-child(2) { --benefit-accent: var(--yellow); }
.benefits .why-option:nth-child(3) { --benefit-accent: var(--brand-lime); }
.benefits .why-option:nth-child(4) { --benefit-accent: var(--brand-magenta); }
.benefits .why-option:nth-child(5) { --benefit-accent: var(--brand-ochre); }
.benefits .why-option:nth-child(6) { --benefit-accent: var(--brand-red); }
.benefits .why-option:nth-child(8) { --benefit-accent: var(--yellow); }
.benefits .why-option.is-active {
  background: #eaf5f0; border-color: var(--aqua-dark); color: var(--aqua-dark);
  box-shadow: inset 0 3px var(--aqua-dark);
}
.faq { background: linear-gradient(135deg, #f3f8f5, #faf8f1); }
.faq .faq-intro { background: var(--navy); }
.faq .faq-intro .kicker { color: var(--yellow); }
.faq .faq-intro h2 em { color: #b8e8e2; }
.faq .faq-intro .faq-help .btn { background: var(--yellow); color: var(--ink); }
.faq .faq-content-head span:first-child { color: var(--aqua-dark); }
.faq .faq-filters button.is-active { background: var(--aqua-dark); border-color: var(--aqua-dark); color: #fff; }
.faq .faq-list details { border-radius: 12px; border-color: #e2e9e3; }
.faq .faq-list details[open] { border-color: #91bfb8; }
.faq .faq-list summary small { position: relative; padding-left: 10px; color: #657775; }
.faq .faq-list summary small:before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 3px; background: var(--faq-accent);
}
.faq .faq-list details:nth-child(1), .faq .faq-list details:nth-child(7) { --faq-accent: var(--aqua); }
.faq .faq-list details:nth-child(2) { --faq-accent: var(--yellow); }
.faq .faq-list details:nth-child(3) { --faq-accent: var(--brand-lime); }
.faq .faq-list details:nth-child(4) { --faq-accent: var(--brand-magenta); }
.faq .faq-list details:nth-child(5) { --faq-accent: var(--brand-ochre); }
.faq .faq-list details:nth-child(6) { --faq-accent: var(--brand-red); }
.faq .faq-list details[open] summary span { background: var(--aqua-dark); color: #fff; }
.availability { background: #fff; }
.availability-card { background: var(--navy); border-radius: 26px; }
.contact-partner-card { background: var(--cream); border-radius: 18px; }
.site-footer { background: #112626; }
.site-footer .footer-bottom { padding-bottom: 100px; }
.footer-brand .brand { width: 180px; padding: 4px; border-radius: 10px; }
.footer-brand .brand-logo, .footer-brand .brand-logo img { width: 172px; height: auto; }
.footer-opening-link { border-radius: 11px; }

.floating-call {
  position: fixed; z-index: 60; right: 24px;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 76px; height: 76px; border: 3px solid transparent; border-radius: 50%;
  background: linear-gradient(var(--navy), var(--navy)) padding-box,
    conic-gradient(var(--brand-red), var(--yellow), var(--brand-lime), var(--aqua), var(--brand-magenta), var(--brand-ochre), var(--brand-red)) border-box;
  box-shadow: 0 12px 30px rgba(13, 54, 55, .28);
  color: #fff; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.floating-call:before {
  content: ""; position: absolute; inset: -7px; border: 2px solid var(--aqua);
  border-radius: 50%; pointer-events: none;
  animation: floating-call-pulse 2.8s ease-out infinite;
}
.floating-call svg { width: 25px; height: 25px; color: var(--yellow); }
.floating-call-label { font: 800 11px/1 "DM Sans", sans-serif; letter-spacing: .04em; }
.floating-call:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13, 54, 55, .33); }
.floating-call:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 7px; }
.floating-call-tooltip {
  position: absolute; right: calc(100% + 13px); bottom: 50%;
  width: 218px; padding: 12px 15px; border: 1px solid #dbe8e3; border-radius: 14px;
  background: #fff; box-shadow: 0 14px 36px rgba(13, 54, 55, .18);
  color: var(--ink); text-align: left; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(8px, 50%);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.floating-call-tooltip strong, .floating-call-tooltip span, .floating-call-tooltip b { display: block; }
.floating-call-tooltip strong { color: var(--aqua-dark); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.floating-call-tooltip span { margin: 4px 0; font-size: 12px; line-height: 1.35; }
.floating-call-tooltip b { font-size: 13px; }
.floating-call:hover .floating-call-tooltip, .floating-call:focus-visible .floating-call-tooltip {
  opacity: 1; visibility: visible; transform: translate(0, 50%);
}
@keyframes floating-call-pulse {
  0% { transform: scale(.9); opacity: .7; }
  75%, 100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-call, .floating-call-tooltip { transition: none; }
  .floating-call:before { animation: none; opacity: 0; }
}

@media (max-width: 1160px) {
  .site-header, .site-header.open { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 14px; }
  .site-header .brand, .site-header .brand-logo, .site-header .brand-logo img { width: 176px; }
  .site-header nav { gap: 12px; font-size: 12px; }
  .site-header .header-actions .header-partner-link { display: none; }
}
@media (max-width: 980px) {
  .floating-call { display: none; }
  .site-header, .site-header.open {
    height: 96px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr;
    gap: 16px; padding: 0 24px; border-radius: 0;
  }
  .site-header .brand {
    grid-column: 1; grid-row: 1; margin: 0; width: 124px;
    height: auto; flex: 0 1 124px; overflow: visible;
  }
  .site-header .brand-logo, .site-header .brand-logo img {
    display: block; width: 100%; height: auto; overflow: visible;
  }
  .site-header nav { display: none; }
  .site-header .header-actions { display: none; }
  .site-header .menu-button {
    grid-column: 2; grid-row: 1; display: block; justify-self: end;
    width: 44px; height: 44px; border: 1px solid #dfe9e3;
    background: #f4f8f6;
  }
  .site-header.open nav { display: flex; top: 100%; left: 24px; right: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 69px; }
  .hero-copy, .hero-visual { min-width: 0; }
}
@media (max-width: 720px) {
  .section-shell { width: calc(100% - 36px); }
  .section-pad { padding-block: clamp(44px, 10vw, 52px); }
  .site-footer .footer-bottom { padding-bottom: 80px; }
  .proof-bar { margin-top: 12px; padding: 18px; }
  .site-header, .site-header.open { height: 96px; padding-inline: 18px; }
  .site-header.open nav { left: 18px; right: 18px; }
  .hero { min-height: 0; padding: 32px 0 46px; gap: 28px; }
  .hero h1 { margin: 15px 0 18px; font-size: clamp(42px, 11vw, 60px); }
  .hero-actions { margin: 24px 0 20px; }
  .hero-copy > p { font-size: 16px; }
  .hero-image-wrap img { height: 390px; }
  .hero-image-wrap:before { height: 390px; }
  .hero-photo-note { left: auto; bottom: auto; }
  .service-spotlight-head { margin-bottom: 24px; }
  .service-spotlight-head > div:last-child { margin-top: 12px; }
  .service-spotlight-grid { gap: 12px; }
  .spotlight-media { height: 185px; }
  .spotlight-content { min-height: 0; padding: 20px 20px 49px; }
  .how .section-heading { margin-bottom: 22px; }
  .journey-switch { margin-bottom: 20px; }
  .journey-panel article { padding: 20px; }
  .partner-story-grid { gap: 24px; }
  .partner-story h2, .partner-paths h2 { margin: 12px 0 18px; }
  .partner-points { gap: 10px; margin: 20px 0 24px; }
  .partner-story-visual { gap: 12px; padding-block: 0; }
  .story-card { padding: 17px; }
  .partner-paths .section-heading { margin-bottom: 24px; }
  .path-grid { gap: 18px; }
  .growth-body { padding: 24px 22px 27px; }
  .growth-story { margin-bottom: 18px; }
  .future-note { margin-top: 18px; }
  .pricing-intro .section-heading { margin-bottom: 24px; }
  .pricing-intro .section-heading p { margin-top: 16px; }
  .price-doodle-tag { margin-bottom: 20px; }
  .price-grid, .price-grid.is-filtered { gap: 14px; }
  .pricing-callout { margin-top: 22px; padding: 22px 18px; gap: 12px; }
  .why-layout { gap: 24px; }
  .why-feature-copy { padding: 24px; }
  .why-feature-copy h3 { margin-top: 17px; }
  .why-feature-line { margin-top: 18px; }
  .faq-layout { gap: 22px; }
  .faq-intro { min-height: 0; padding: 25px; }
  .faq-intro h2 { margin: 14px 0; }
  .faq-help { margin-top: 22px; padding: 18px; }
  .availability-card { gap: 24px; padding: 28px 22px 34px; }
  .contact-partner-card { padding: 25px; }
  .contact-partner-card:before { margin-bottom: 18px; }
  .footer-opening { gap: 18px; padding-block: 34px 28px; }
  .footer-top { gap: 27px; padding-top: 30px; }
  .footer-bottom { margin-top: 32px; }
  .footer-brand .brand { width: 170px; }
  .footer-brand .brand-logo, .footer-brand .brand-logo img { width: 154px; }
}
/* Service detail pages: scoped to keep the homepage presentation unchanged. */
.service-detail .sd-skip { position: fixed; top: 12px; left: 16px; z-index: 1000; padding: 14px 20px; background: var(--navy); color: white; border-radius: 10px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.service-detail .sd-skip:focus { clip-path: none; width: auto; height: auto; }
.service-detail .sd-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 28px; font-size: 12px; color: var(--muted); }
.service-detail .sd-breadcrumb a:hover { color: var(--aqua-dark); text-decoration: underline; }
.service-detail .sd-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; padding-block: 44px 68px; }
.service-detail .sd-hero-copy { min-width: 0; }
.service-detail h1 { font-size: clamp(40px, 4.5vw, 66px); line-height: 1.08; margin: 20px 0 24px; font-weight: 700; }
.service-detail h1 em, .service-detail h2 em { font-style: normal; color: var(--aqua-dark); }
.service-detail .sd-hero-copy > p { font-size: 17px; line-height: 1.85; color: var(--muted); max-width: 520px; }
.service-detail .sd-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; margin-top: 30px; }
.service-detail .sd-text-link { font-weight: 700; font-size: 14px; color: var(--aqua-dark); text-underline-offset: 5px; }
.service-detail .sd-text-link:hover { text-decoration: underline; }
.service-detail .sd-hero-note { display: flex; align-items: center; gap: 9px; margin-top: 26px; font-size: 12px; color: var(--muted); }
.service-detail .sd-hero-note > span { color: var(--aqua-dark); font-size: 24px; }
.service-detail .sd-hero-visual { position: relative; margin: 0; padding: 12px; border: 1px solid #dfdfd4; border-radius: 120px 24px 24px 24px; background: #fff; box-shadow: var(--shadow); }
.service-detail .sd-hero-visual > img { width: 100%; height: 450px; object-fit: cover; border-radius: 109px 16px 16px 16px; }
.service-detail .sd-image-stamp { position: absolute; top: 28px; right: 25px; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--navy); text-align: center; font-size: 12px; line-height: 1.3; transform: rotate(9deg); box-shadow: 0 4px 16px #15393b20; }
.service-detail .sd-image-stamp b { font-size: 24px; }
.service-detail figcaption { display: flex; align-items: center; gap: 14px; padding: 15px 12px 4px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.service-detail figcaption > span { color: var(--aqua-dark); font-size: 27px; }
.service-detail .sd-promise { background: var(--navy); color: #fff; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--brand-red) 16.6%, var(--yellow) 16.6% 33.3%, var(--brand-lime) 33.3% 50%, var(--aqua) 50% 66.6%, var(--brand-magenta) 66.6% 83.3%, var(--brand-ochre) 83.3%) 1; }
.service-detail .sd-promise > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 25px; }
.service-detail .sd-promise span { font-size: 10px; letter-spacing: .13em; color: #b7d6d2; }
.service-detail .sd-promise p { margin: 0; font-size: 15px; }
.service-detail .sd-promise i { color: var(--yellow); font-size: 23px; font-style: normal; }
.service-detail h2 { font-size: clamp(29px, 3.2vw, 44px); line-height: 1.15; margin: 14px 0 22px; font-weight: 700; }
.service-detail h3 { font-size: 22px; line-height: 1.25; }
.service-detail .sd-care { background: #fff; }
.service-detail .sd-section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 35px; }
.service-detail .sd-section-intro h2 { max-width: 480px; }
.service-detail .sd-section-intro > p, .service-detail .sd-care-card p, .service-detail .sd-steps p, .service-detail .sd-faq p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.service-detail .sd-care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-detail .sd-care-card { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); border-top: 3px solid var(--aqua); }
.service-detail .sd-care-card:nth-child(2) { border-top-color: var(--yellow); }
.service-detail .sd-care-card:nth-child(3) { border-top-color: var(--brand-magenta); }
.service-detail .sd-number { color: var(--aqua-dark); font-size: 13px; letter-spacing: .08em; }
.service-detail .sd-care-card h3 { margin: 25px 0 12px; }
.service-detail .sd-care-card p { margin: 0; }
.service-detail .sd-process { background: linear-gradient(120deg, #edf5ef, var(--cream)); }
.service-detail .sd-process-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }
.service-detail .sd-steps { list-style: none; padding: 0; margin: 35px 0 0; }
.service-detail .sd-steps li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid #dbe5dc; }
.service-detail .sd-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.service-detail .sd-steps li > span { flex: 0 0 40px; height: 40px; background: white; color: var(--aqua-dark); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.service-detail .sd-steps h3 { font-size: 19px; margin: 0 0 7px; }
.service-detail .sd-steps p { margin: 0; }
.service-detail .sd-care-note { padding: 40px; border-radius: 24px 72px 24px 24px; background: var(--navy); color: #fff; position: relative; }
.service-detail .sd-note-symbol { display: block; color: var(--yellow); font-size: 65px; line-height: 1; margin-bottom: 30px; }
.service-detail .sd-care-note .kicker { color: #b6dfd6; }
.service-detail .sd-care-note h2 { font-size: clamp(28px, 3vw, 38px); }
.service-detail .sd-care-note p { color: #d2e5df; font-size: 15px; line-height: 1.85; }
.service-detail .sd-care-note a { display: flex; justify-content: space-between; padding: 20px 0; margin-top: 20px; border-top: 1px solid #55716c; color: var(--yellow); font-weight: 700; }
.service-detail .sd-care-note small { color: #b6d1ca; font-size: 11px; }
.service-detail .sd-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; }
.service-detail .sd-faq > div > p { max-width: 310px; }
.service-detail .sd-questions details { border-bottom: 1px solid #d7dfd7; }
.service-detail .sd-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 23px 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.service-detail .sd-questions summary::-webkit-details-marker { display: none; }
.service-detail .sd-questions summary span { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #e4efea; color: var(--aqua-dark); transition: transform .2s; }
.service-detail .sd-questions details[open] summary span { transform: rotate(45deg); }
.service-detail .sd-questions details > p { margin: 0; padding: 0 38px 22px 0; }
.service-detail .sd-related { background: #fff; }
.service-detail .sd-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.service-detail .sd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-detail .sd-related-card { display: block; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); transition: transform .2s, box-shadow .2s; }
.service-detail .sd-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-detail .sd-related-card img { width: 100%; height: 230px; object-fit: cover; }
.service-detail .sd-related-card > div { padding: 24px; }
.service-detail .sd-related-card small { color: var(--aqua-dark); font-size: 11px; }
.service-detail .sd-related-card h3 { margin: 8px 0 24px; }
.service-detail .sd-related-card div > span { display: flex; justify-content: space-between; color: var(--aqua-dark); font-size: 13px; font-weight: 700; }
.service-detail .sd-booking { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; margin-block: 70px 35px; padding: 48px; background: var(--navy); color: white; border-radius: 22px; border-bottom: 5px solid var(--yellow); }
.service-detail .sd-booking .kicker { color: #b6dfd6; }
.service-detail .sd-booking h2 em { color: #b6dfd6; }
.service-detail .sd-booking p { color: #d2e5df; line-height: 1.8; font-size: 15px; max-width: 540px; }
.service-detail .sd-booking-action { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.service-detail .sd-booking-action > a:not(.btn) { font-size: 18px; }
.service-detail .sd-booking-action small { font-size: 11px; color: #b6d1ca; }
.service-detail .sd-service-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding-block: 0 45px; }
.service-detail .sd-service-nav a { font-size: 12px; color: var(--muted); padding-block: 5px; }
.service-detail .sd-service-nav a:hover, .service-detail .sd-service-nav [aria-current] { color: var(--aqua-dark); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 980px) {
  .service-detail .sd-hero { gap: 28px; }
  .service-detail .sd-hero-visual > img { height: 400px; }
  .service-detail .sd-section-intro, .service-detail .sd-process-grid, .service-detail .sd-faq { gap: 35px; }
  .service-detail .sd-care-card { padding: 24px; }
  .service-detail .sd-care-note { padding: 30px; }
  .service-detail .sd-related-card img { height: 190px; }
  .service-detail .sd-booking { padding: 32px; gap: 25px; }
}
@media (max-width: 720px) {
  .service-detail .sd-breadcrumb { padding-top: 20px; font-size: 11px; gap: 9px; }
  .service-detail .sd-hero, .service-detail .sd-section-intro, .service-detail .sd-process-grid, .service-detail .sd-faq, .service-detail .sd-booking { grid-template-columns: 1fr; }
  .service-detail .sd-hero { padding-block: 30px 40px; gap: 32px; }
  .service-detail h1 { font-size: clamp(38px, 9vw, 57px); }
  .service-detail .sd-hero-copy > p { font-size: 16px; }
  .service-detail .sd-hero-visual > img { height: 360px; }
  .service-detail .sd-image-stamp { width: 85px; height: 85px; }
  .service-detail .sd-promise > div { flex-wrap: wrap; gap: 10px; justify-content: center; padding-block: 20px; }
  .service-detail .sd-promise span { flex-basis: 100%; text-align: center; margin-bottom: 8px; }
  .service-detail .sd-promise p { font-size: 11px; }
  .service-detail .sd-promise i { font-size: 14px; }
  .service-detail .sd-section-intro { gap: 0; margin-bottom: 24px; }
  .service-detail .sd-care-grid, .service-detail .sd-related-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-detail .sd-care-card h3 { margin-top: 14px; }
  .service-detail .sd-steps { margin-top: 20px; }
  .service-detail .sd-note-symbol { margin-bottom: 22px; }
  .service-detail .sd-faq { gap: 24px; }
  .service-detail .sd-faq > div > p { max-width: none; }
  .service-detail .sd-related-heading { align-items: end; }
  .service-detail .sd-related-heading h2 { margin-bottom: 0; }
  .service-detail .sd-related-heading > a { flex-shrink: 0; font-size: 12px; }
  .service-detail .sd-related-card { display: grid; grid-template-columns: 115px 1fr; }
  .service-detail .sd-related-card img { height: 100%; min-height: 165px; }
  .service-detail .sd-related-card > div { padding: 22px 18px; }
  .service-detail .sd-related-card h3 { font-size: 21px; margin-bottom: 20px; }
  .service-detail .sd-booking { margin-block: 42px 24px; padding: 28px; }
  .service-detail .sd-booking-action { align-items: flex-start; }
  .service-detail .sd-booking-action .btn { width: 100%; }
  .service-detail .sd-service-nav { gap: 8px 16px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-detail { scroll-behavior: auto; }
  .service-detail *, .service-detail *::before, .service-detail *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 400px) {
  .site-header, .site-header.open { padding-inline: 16px; }
  .site-header.open nav { left: 16px; right: 16px; }
  .hero h1 { font-size: clamp(37px, 10vw, 42px); }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-image-wrap img, .hero-image-wrap:before { height: 330px; }
}