/* Handyman Booking OS: the theme "Sunrise" (W10, the redesign to the approved target, D-164), built by tools/dev/build-themes.php from tools/themes/sunrise.json and tools/themes/sunrise.css. Do not edit by hand. */
/* GENERATED by bin/compile-themes.php from resources/themes/*.json (osdot/module-theme). Do not edit by hand. */

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-cinematic: 900ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --easing-expressive: cubic-bezier(0.16, 1, 0.3, 1);
  --touch: 2.75rem;
  --focus-width: 3px;
  --container-narrow: 40rem;
  --container-text: 46rem;
  --container-wide: 76rem;
  --font-ui: Inter, "Inter Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

/* Sunrise — Warm and friendly: cream paper, a bright sunrise orange with dark text on it, bold black headings and black pill buttons. */
[data-theme="sunrise"] {
  --font-display: Poppins, "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: Inter, "Inter Fallback", "Segoe UI", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --display-transform: none;
  --eyebrow-tracking: 0.08em;
  --radius-control: 999px;
  --radius-card: 24px;
  --radius-media: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgb(26 18 12 / 0.04), 0 18px 40px -18px rgb(255 116 2 / 0.28);
  --shadow-raised: 0 24px 56px -20px rgb(26 18 12 / 0.30);
}
[data-theme="sunrise"][data-mode="light"], [data-theme="sunrise"][data-mode="auto"], [data-theme="sunrise"]:not([data-mode]) {
  color-scheme: light;
  --bg: #FFF4EB;
  --surface: #FFFFFF;
  --surface-2: #FFE8D4;
  --sunken: #FFDDC0;
  --text: #1A120C;
  --text-muted: #57473B;
  --text-subtle: #6B5646;
  --border: #F3DCC6;
  --border-strong: #A07E63;
  --primary: #1A120C;
  --primary-hover: #6B3A1E;
  --on-primary: #FFF4EB;
  --on-primary-hover: #FFF4EB;
  --secondary-hover: #1A120C;
  --on-secondary-hover: #FF7402;
  --selected-hover: #8DBDF0;
  --on-selected-hover: #1A120C;
  --accent: #1A120C;
  --on-accent: #FFF4EB;
  --success: #1E7A46;
  --warning: #8A5C00;
  --danger: #C0261A;
  --info: #1F5E99;
  --focus: #1A120C;
  --overlay: rgb(26 18 12 / 0.60);
  --topline: #1A120C;
  --on-topline: #FFF4EB;
  --footer: #1A120C;
  --on-footer: #FFF4EB;
  --scrim: 26 18 12;
  --scrim-accent: #FF7402;
  --brand: #FF7402;
  --on-brand: #1A120C;
  --brand-hover: #8DBDF0;
  --on-brand-hover: #1A120C;
  --st-booked-fg: #1E40AF;
  --st-booked-bg: #E8EFFE;
  --st-arrived-fg: #0F5F59;
  --st-arrived-bg: #DDF3EF;
  --st-in-progress-fg: #5B21B6;
  --st-in-progress-bg: #EFE8FD;
  --st-completed-fg: #166534;
  --st-completed-bg: #E3F4E8;
  --st-no-show-fg: #9A3412;
  --st-no-show-bg: #FDEEDF;
  --st-cancelled-fg: #4B5563;
  --st-cancelled-bg: #ECEFF2;
  --st-hold-fg: #854D0E;
  --st-hold-bg: #FEF3D6;
}
[data-theme="sunrise"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #17100B;
  --surface: #21170F;
  --surface-2: #2D2016;
  --sunken: #0F0A06;
  --text: #FFF1E4;
  --text-muted: #DCC6B2;
  --text-subtle: #BFA690;
  --border: #3A2B1F;
  --border-strong: #8F735B;
  --primary: #FFF4EB;
  --primary-hover: #FF7402;
  --on-primary: #1A120C;
  --on-primary-hover: #1A120C;
  --secondary-hover: #FFF1E4;
  --on-secondary-hover: #1A120C;
  --selected-hover: #8DBDF0;
  --on-selected-hover: #1A120C;
  --accent: #FF7402;
  --on-accent: #1A120C;
  --success: #6FD49A;
  --warning: #F5C055;
  --danger: #FF8A7A;
  --info: #8DBDF0;
  --focus: #FF7402;
  --overlay: rgb(0 0 0 / 0.65);
  --topline: #FF7402;
  --on-topline: #1A120C;
  --footer: #0F0A06;
  --on-footer: #FFF1E4;
  --scrim: 0 0 0;
  --scrim-accent: #FF7402;
  --brand: #FF7402;
  --on-brand: #1A120C;
  --brand-hover: #8DBDF0;
  --on-brand-hover: #1A120C;
  --st-booked-fg: #A9C2FF;
  --st-booked-bg: #16233F;
  --st-arrived-fg: #6EE7D6;
  --st-arrived-bg: #0E2A28;
  --st-in-progress-fg: #CDBEFE;
  --st-in-progress-bg: #241A3D;
  --st-completed-fg: #8FEFB2;
  --st-completed-bg: #12291B;
  --st-no-show-fg: #FDBA74;
  --st-no-show-bg: #33220F;
  --st-cancelled-fg: #B4BCC6;
  --st-cancelled-bg: #1E242B;
  --st-hold-fg: #FCD34D;
  --st-hold-bg: #2F2610;
}
@media (prefers-color-scheme: dark) {
  [data-theme="sunrise"][data-mode="auto"] {
    color-scheme: dark;
    --bg: #17100B;
    --surface: #21170F;
    --surface-2: #2D2016;
    --sunken: #0F0A06;
    --text: #FFF1E4;
    --text-muted: #DCC6B2;
    --text-subtle: #BFA690;
    --border: #3A2B1F;
    --border-strong: #8F735B;
    --primary: #FFF4EB;
    --primary-hover: #FF7402;
    --on-primary: #1A120C;
    --on-primary-hover: #1A120C;
    --secondary-hover: #FFF1E4;
    --on-secondary-hover: #1A120C;
    --selected-hover: #8DBDF0;
    --on-selected-hover: #1A120C;
    --accent: #FF7402;
    --on-accent: #1A120C;
    --success: #6FD49A;
    --warning: #F5C055;
    --danger: #FF8A7A;
    --info: #8DBDF0;
    --focus: #FF7402;
    --overlay: rgb(0 0 0 / 0.65);
    --topline: #FF7402;
    --on-topline: #1A120C;
    --footer: #0F0A06;
    --on-footer: #FFF1E4;
    --scrim: 0 0 0;
    --scrim-accent: #FF7402;
    --brand: #FF7402;
    --on-brand: #1A120C;
    --brand-hover: #8DBDF0;
    --on-brand-hover: #1A120C;
    --st-booked-fg: #A9C2FF;
    --st-booked-bg: #16233F;
    --st-arrived-fg: #6EE7D6;
    --st-arrived-bg: #0E2A28;
    --st-in-progress-fg: #CDBEFE;
    --st-in-progress-bg: #241A3D;
    --st-completed-fg: #8FEFB2;
    --st-completed-bg: #12291B;
    --st-no-show-fg: #FDBA74;
    --st-no-show-bg: #33220F;
    --st-cancelled-fg: #B4BCC6;
    --st-cancelled-bg: #1E242B;
    --st-hold-fg: #FCD34D;
    --st-hold-bg: #2F2610;
  }
}

/* The theme's own colours (tools/themes/sunrise.json adapter_roles): fills its stylesheet draws, never text where they would fail AA. */
[data-theme="sunrise"][data-mode="light"], [data-theme="sunrise"][data-mode="auto"], [data-theme="sunrise"]:not([data-mode]) {
  --rating: #1A120C;
  --sun-hover: #8DBDF0;
  --ink: #1A120C;
  --on-ink: #FFF4EB;
  --peach: #FFE8D4;
  --glow: radial-gradient(780px 640px at calc(50% + 380px) 46%, #FFE3CC 0%, rgb(255 227 204 / 0) 70%);
}
[data-theme="sunrise"][data-mode="dark"] {
  --rating: #FF7402;
  --sun-hover: #8DBDF0;
  --ink: #1A120C;
  --on-ink: #FFF4EB;
  --peach: #2D2016;
  --glow: radial-gradient(780px 640px at calc(50% + 380px) 46%, rgb(255 116 2 / 0.16) 0%, rgb(255 116 2 / 0) 70%);
  --shadow-card: 0 1px 0 rgb(0 0 0 / 0.3), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  --shadow-raised: 0 24px 56px -20px rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
  [data-theme="sunrise"][data-mode="auto"] {
  --rating: #FF7402;
  --sun-hover: #8DBDF0;
  --ink: #1A120C;
  --on-ink: #FFF4EB;
  --peach: #2D2016;
  --glow: radial-gradient(780px 640px at calc(50% + 380px) 46%, rgb(255 116 2 / 0.16) 0%, rgb(255 116 2 / 0) 70%);
  --shadow-card: 0 1px 0 rgb(0 0 0 / 0.3), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  --shadow-raised: 0 24px 56px -20px rgb(0 0 0 / 0.8);
}
}
/* W2b (F-49): the homepage sections' motion, from the pack's motion spec §2 (module-theme's reveal hooks). */
[data-theme="sunrise"] [data-section] { --reveal-shift: 1.125rem; --reveal-range: 40%; }
[data-theme="sunrise"] [data-section="categories"], [data-theme="sunrise"] [data-section="faq"] { --reveal-shift: 0; }

/* The theme's stylesheet (tools/themes/sunrise.css): the approved target's look over the product's markup. */
/* Sunrise (W10): the approved target docs/design-targets/sunrise/ (D-164) drawn over the product's own markup —
   presentation only. "The sun rising behind her": cream paper, one bright orange used as fills that carry dark text (the
   theme's own colour `sun`, never text on cream), bold black Poppins headings with one word on an orange mark, black pills
   with an orange round arrow, the round photo on a peach ring with an orange disc and dots — and, while the frame shows the
   theme's own picture, her head breaking out of the circle (HERO-SUN-CUT, D-165). */
[data-theme="sunrise"] {
  --arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A120C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --arrow-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7402' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* type: bold black headings; the marked word dark on an orange mark (6.8:1) */
[data-theme="sunrise"] :is(h1, h2, h3):not(.cinehero *) { color: var(--text); letter-spacing: -0.02em; }
[data-theme="sunrise"] :is(.section__head h2, .shop-section__head h2, .cms-about h2) { font: 800 clamp(2rem, 1.3rem + 1.8vw, 2.875rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
[data-theme="sunrise"] .section__head { max-width: none; margin-bottom: 2.75rem; }
[data-theme="sunrise"] .accent-word { background: var(--brand); color: var(--on-brand); white-space: nowrap; padding: 0 .16em .1em; border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the eyebrow: a peach pill with an orange dot */
[data-theme="sunrise"] :is(.eyebrow, .splithero__eyebrow) { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--peach);
  color: var(--text); font: 600 14px/1 var(--font-body); letter-spacing: 0; text-transform: none; }
[data-theme="sunrise"] :is(.eyebrow, .splithero__eyebrow)::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--brand); }

/* buttons: black pills (cream in Dark) with the orange round arrow; under the pointer orange with dark text */
[data-theme="sunrise"] .btn { border-radius: 999px; font: 600 16px/1 var(--font-display); letter-spacing: 0; border-width: 2px; }
[data-theme="sunrise"] .btn:not(.btn--sm) { min-height: 56px; padding-inline: 26px; }
[data-theme="sunrise"] .btn:not(.btn--primary, .btn--accent, .btn--danger, .btn--ghost) { --btn-bd: var(--text); --btn-fg: var(--text); color: var(--text); }
[data-theme="sunrise"] .btn--primary { gap: 14px; }
[data-theme="sunrise"] .btn--primary::after { content: ""; width: 42px; height: 42px; flex: none; margin-right: -19px; border-radius: 50%; background: var(--arrow-ink) center / 18px no-repeat, var(--brand); }
[data-theme="sunrise"] .btn--primary.btn--sm::after, [data-theme="sunrise"] .site-header .btn--primary::after { width: 32px; height: 32px; margin-right: -12px; background-size: 15px, auto; }
[data-theme="sunrise"] .btn--primary:is(:hover, :active):not([disabled], [aria-disabled="true"]) { --btn-bg: var(--brand); --btn-fg: var(--on-brand); --btn-bd: var(--brand); background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
[data-theme="sunrise"] .btn--primary:is(:hover, :active)::after { background: var(--arrow-sun) center / 18px no-repeat, var(--ink); }

/* the top line and the header (cream, a hairline). U11 (F-140, D-225): the top line's text in rem (13 and 12 px at normal text
   size) with a line height of 1.35, so wrapped lines do not touch; on a phone the line wraps when it needs to (no one-line
   rule), its parts 4 px apart */
[data-theme="sunrise"] .site-topline { font: 500 0.8125rem/1.35 var(--font-body); }
[data-theme="sunrise"] .site-topline__row { min-height: 42px; align-items: center; gap: 4px 28px; }
[data-theme="sunrise"] .site-topline__part:last-child { margin-left: auto; font-weight: 700; }
[data-theme="sunrise"] .site-topline__part::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand); vertical-align: 1px; }
/* STEP 8 pass A (DI-77, D-228): in Dark the top line is the orange fill, so its dots take the line's own text colour (6.8:1;
   on-topline, a text pair the registry holds at 4.5:1 at least) — in Dark, and in the device's Dark */
[data-theme="sunrise"][data-mode="dark"] .site-topline__part::before { background: var(--on-topline); }
@media (prefers-color-scheme: dark) { [data-theme="sunrise"][data-mode="auto"] .site-topline__part::before { background: var(--on-topline); } }
[data-theme="sunrise"] .site-topline a { color: inherit; text-decoration: none; }
[data-theme="sunrise"] .site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
[data-theme="sunrise"] .site-header__inner { min-height: 88px; gap: 8px 32px; }
[data-theme="sunrise"] .brand__mark { display: none; }
[data-theme="sunrise"] .brand__name { font: 800 26px/1 var(--font-display); letter-spacing: -0.03em; color: var(--text); }
[data-theme="sunrise"] .site-nav ul { gap: 6px; }
[data-theme="sunrise"] .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 500 15px/1 var(--font-body); color: var(--text); }
[data-theme="sunrise"] .site-nav a:hover { background: var(--secondary-hover); color: var(--on-secondary-hover); text-decoration: none; }
[data-theme="sunrise"] .site-nav a[aria-current] { font-weight: 700; text-decoration: none; }
[data-theme="sunrise"] .site-nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--brand); }
[data-theme="sunrise"] .site-header__account:not(.btn--ghost) { --btn-bd: transparent; --btn-bg: transparent; --btn-fg: var(--text); font-weight: 500; padding-inline: 14px; }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .site-topline { font-size: 0.75rem; }
  [data-theme="sunrise"] .site-topline__row { min-height: var(--touch); gap: 4px 14px; justify-content: center; }
  [data-theme="sunrise"] .site-topline__part:nth-child(2):not(:last-child) { display: none; }
  [data-theme="sunrise"] .site-topline__part:last-child { margin-left: 0; }
  /* STEP 8 pass A (F-144, D-228): the top line's "Call" link has a 44 px tap area on a phone — negative margins take the extra
     height back from its line of text, a one-row line is 44 px (was 38) so the whole area is inside it, and the link sits
     above the header (the base's z-index 10) so none of it is covered */
  [data-theme="sunrise"] .site-topline a { position: relative; z-index: 11; display: inline-flex; align-items: center; max-width: 100%; min-height: var(--touch); margin-block: calc((1lh - var(--touch)) / 2); overflow-wrap: anywhere; }
  [data-theme="sunrise"] .brand__name { font-size: 21px; }
}

/* the split hero ("Side by side"): the copy left, the round photo right — a peach ring, the orange disc and three orange dots
   behind it, the 10 px cream rim, the rating badge a black circle; the glow anchored to the container */
[data-theme="sunrise"] .splithero { --splithero-panel: var(--peach); --splithero-panel-alpha: 1; --splithero-badge: var(--primary); --splithero-on-badge: var(--on-primary);
  background: var(--glow), var(--bg); padding-block: 56px 72px; gap: 40px; }
@media (min-width: 48rem) { [data-theme="sunrise"] .splithero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 640px; } }
[data-theme="sunrise"] .splithero__copy { gap: 0; }
[data-theme="sunrise"] .splithero__title { margin: 24px 0; font: 800 clamp(2.875rem, 1.5rem + 3.6vw, 4.75rem)/1.04 var(--font-display); letter-spacing: -0.035em; }
[data-theme="sunrise"] .splithero__title .accent-word { display: inline-block; margin-top: 10px; padding: 0 .2em .16em; border-radius: 22px; transform: rotate(-1.6deg); }
[data-theme="sunrise"] .splithero__text { font-size: 19px; line-height: 1.6; max-width: 30em; }
[data-theme="sunrise"] .splithero__cta { gap: 14px 18px; margin-top: 36px; }
[data-theme="sunrise"] .splithero__media { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-left: auto; margin-right: 8px; }
[data-theme="sunrise"] .splithero[data-frame="round"] .splithero__panel { position: absolute; z-index: -1; inset: -6%; width: auto; margin: 0; border-radius: 50%; background: var(--peach); opacity: 1; }
[data-theme="sunrise"] .splithero__media::before { content: ""; position: absolute; z-index: 0; width: 86%; aspect-ratio: 1; right: -2%; bottom: 0; border-radius: 50%; background: var(--brand); }
[data-theme="sunrise"] .splithero[data-frame="round"] .splithero__frame { position: absolute; z-index: 1; width: 86%; left: 4%; top: 3%; margin: 0; outline: 10px solid var(--bg); box-shadow: var(--shadow-raised); background: var(--sunken); }
[data-theme="sunrise"] .splithero__frame img { transform: scale(1.18); transform-origin: 50% 22%; }
/* the orange dots (one drawn by the panel's shadow-free pseudo-element, two by the media's) */
[data-theme="sunrise"] .splithero__panel::before, [data-theme="sunrise"] .splithero__panel::after { content: ""; position: absolute; border-radius: 50%; background: var(--brand); }
[data-theme="sunrise"] .splithero__panel::before { width: 30px; height: 30px; left: 6%; top: 8%; }
[data-theme="sunrise"] .splithero__panel::after { width: 22px; height: 22px; right: -1%; top: 26%; }
/* her head out of the circle: the cut-out of the theme's own picture over the frame, the same scale, shown above the rim only */
[data-theme="sunrise"] .splithero__media:has(img[src*="/theme-defaults/HERO-SUN-"]) .splithero__frame img { transform: scale(1.5); transform-origin: 50% 62%; }
[data-theme="sunrise"] .splithero__media:has(img[src*="/theme-defaults/HERO-SUN-"])::after { content: ""; position: absolute; z-index: 2; width: 86%; left: 4%; top: 3%; aspect-ratio: 1; pointer-events: none;
  background: url("/img/theme-defaults/HERO-SUN-CUT-1024.webp") center / 100% 100% no-repeat; transform: scale(1.5); transform-origin: 50% 62%; clip-path: inset(-40% -40% 76% -40%); }
/* the rating badge: a black circle (cream in Dark) with the orange star and the "Demo" chip */
[data-theme="sunrise"] .splithero__badge { z-index: 3; width: 146px; height: 146px; min-width: 0; padding: 0; border-radius: 50%; place-content: center; gap: 2px; }
@media (min-width: 48rem) { [data-theme="sunrise"] .splithero__badge { top: 34%; right: auto; left: -9%; } }
[data-theme="sunrise"] .splithero__badge-rating { font: 800 30px/1 var(--font-display); letter-spacing: -0.02em; }
[data-theme="sunrise"] .splithero__star { color: var(--brand); } /* on the black (cream in Dark) badge */
[data-theme="sunrise"] .splithero__badge-count { font: 500 12px/1.25 var(--font-body); max-width: 96px; }
[data-theme="sunrise"] .splithero__badge-demo { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .splithero { padding-block: 28px 56px; gap: 28px; }
  [data-theme="sunrise"] .splithero__copy { order: 0; }
  [data-theme="sunrise"] .splithero__media { order: 1; width: calc(100% - 44px); margin: 18px auto 10px; }
  [data-theme="sunrise"] .splithero__badge { position: absolute; width: 112px; height: 112px; left: -12%; top: 4%; margin: 0; }
  [data-theme="sunrise"] .splithero__badge-rating { font-size: 24px; }
  [data-theme="sunrise"] .splithero__text { font-size: 16.5px; }
  [data-theme="sunrise"] .splithero__cta .btn { width: 100%; justify-content: space-between; }
  [data-theme="sunrise"] .splithero__cta .btn:not(.btn--primary) { justify-content: center; }
}
[data-page-width="full"][data-theme="sunrise"] .splithero__media { width: min(100%, 680px); margin-inline: auto; }

/* the slideshow (Sunrise's default hero): the marked word keeps its orange mark over the picture */
[data-theme="sunrise"] .cinehero .accent-word { display: inline-block; margin-top: .12em; background: var(--brand); color: var(--on-brand); }
[data-theme="sunrise"] .cinehero .btn:not(.btn--primary, :hover, :active) { --btn-bd: #FFFFFF; --btn-fg: #FFFFFF; color: #FFFFFF; }

/* What we do: the solid orange band; the trades as cream pills, "All 13 services" black with an orange arrow */
[data-theme="sunrise"] .cms-band--categories { background: var(--brand); color: var(--on-brand); padding-block: 44px 48px; }
[data-theme="sunrise"] .cms-band--categories .section__head { margin-bottom: 30px; }
[data-theme="sunrise"] .cms-band--categories .section__head h2 { color: var(--on-brand); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); }
[data-theme="sunrise"] .cms-band--categories .accent-word { background: var(--ink); color: var(--brand); }
[data-theme="sunrise"] .cms-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 14px; }
[data-theme="sunrise"] .cms-strip__item { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; min-height: 60px; padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; background: var(--on-ink); color: var(--ink);
  font: 600 15px/1.25 var(--font-display); text-decoration: none; box-shadow: 0 10px 24px -12px rgb(26 18 12 / .45); }
[data-theme="sunrise"] .cms-strip__item::before { content: ""; width: 12px; height: 12px; margin-left: 10px; flex: none; border-radius: 50%; background: var(--brand); }
/* DI-81 (STEP 9 pass D): on the brand band, the dark pill is the band's own text colour (on-brand) with the brand as its
   text, so an owner's new brand colour reaches them; the cream pills are Sunrise's own cream and ink. Unchanged at Sunrise's
   own colours, in Light and Dark */
[data-theme="sunrise"] .cms-strip__item:hover { background: var(--on-brand); color: var(--brand); }
[data-theme="sunrise"] .cms-strip li:last-child .cms-strip__item { background: var(--on-brand); color: var(--brand); }
[data-theme="sunrise"] .cms-strip li:last-child .cms-strip__item::before { width: 40px; height: 40px; margin-left: 0; background: var(--arrow-sun) center / 18px no-repeat, #2D2016; }
[data-theme="sunrise"] .cms-strip li:last-child .cms-strip__item:hover { background: var(--on-ink); color: var(--ink); }

/* Popular services: the copy left, the photo right, the price large, Book a black pill */
[data-theme="sunrise"] .quick { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 24px; }
[data-theme="sunrise"] .quick__item { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
[data-theme="sunrise"] .quick__item--picture { grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto auto 1fr; gap: 10px 20px; padding: 14px 14px 14px 28px; min-height: 224px; }
[data-theme="sunrise"] .quick__item--picture > :not(.quick__media) { margin-inline: 0; }
[data-theme="sunrise"] .quick__media { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: auto; height: 100%; margin: 0; border-radius: 20px; }
[data-theme="sunrise"] .quick__item h3 { grid-column: 1; margin-top: 14px; font: 700 23px/1.2 var(--font-display); letter-spacing: -0.02em; }
[data-theme="sunrise"] .quick__meta { grid-column: 1; flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
[data-theme="sunrise"] .quick__price { font: 800 30px/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--text); }
[data-theme="sunrise"] .quick__book { grid-column: 1; align-self: end; margin-bottom: 6px; }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .quick__item--picture { grid-template-columns: minmax(0, 1fr) 118px; padding: 10px 10px 10px 18px; min-height: 0; gap: 8px 14px; }
  [data-theme="sunrise"] .quick__item h3 { font-size: 19px; margin-top: 10px; }
  [data-theme="sunrise"] .quick__price { font-size: 24px; }
}

/* How it works: the peach band, centred, orange numbered circles on an orange line */
[data-theme="sunrise"] .section--alt { background: var(--peach); }
[data-theme="sunrise"] .cms-band--how .section__head { justify-items: center; text-align: center; }
[data-theme="sunrise"] .cms-steps { position: relative; gap: 32px; }
[data-theme="sunrise"] .cms-steps::before { content: ""; position: absolute; top: 31px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 2px; background: var(--brand); }
[data-theme="sunrise"] .cms-steps__item { position: relative; padding: 86px 0 0; text-align: center; background: none; border: 0; box-shadow: none; }
[data-theme="sunrise"] .cms-steps__item::before { top: 0; left: 50%; inset-inline-start: 50%; width: 64px; height: 64px; margin-left: -32px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand);
  font: 800 24px/1 var(--font-display); box-shadow: 0 0 0 10px var(--peach); }
[data-theme="sunrise"] .cms-steps__item h3 { font: 700 21px/1.25 var(--font-display); }
[data-theme="sunrise"] .cms-steps__item p { max-width: 18em; margin-inline: auto; font-size: 15.5px; }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .cms-steps { gap: 0; }
  [data-theme="sunrise"] .cms-steps::before { top: 32px; bottom: 60px; left: 31px; right: auto; width: 3px; height: auto; }
  [data-theme="sunrise"] .cms-steps__item { padding: 6px 0 28px 82px; min-height: 92px; text-align: left; }
  [data-theme="sunrise"] .cms-steps__item::before { left: 32px; }
  [data-theme="sunrise"] .cms-steps__item p { margin-inline: 0; }
}

/* About us: the copy beside the sun (an orange disc in a peach ring) */
[data-theme="sunrise"] .cms-band--about > .container { position: relative; }
@media (min-width: 64rem) {
  [data-theme="sunrise"] .cms-band--about > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; }
  [data-theme="sunrise"] .cms-band--about > .container::before { content: ""; order: 2; justify-self: center; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%; margin: 60px; background: radial-gradient(circle, var(--brand) 0 38%, transparent 38.5%), var(--peach); box-shadow: 0 0 0 40px color-mix(in srgb, var(--peach) 60%, transparent), 0 0 0 80px color-mix(in srgb, var(--peach) 30%, transparent); }
}
[data-theme="sunrise"] .cms-about { gap: 20px; }
[data-theme="sunrise"] .cms-about__text { color: var(--text-muted); font-size: 18px; }

/* What customers say: the score left, the cards right with the orange quote circle */
@media (min-width: 64rem) {
  [data-theme="sunrise"] .rev-section > .container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 72px; align-items: center; }
  [data-theme="sunrise"] .rev-section .section__head { grid-column: 1; grid-row: 1; margin: 0; }
  [data-theme="sunrise"] .rev-section .rev-grid { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); gap: 22px; position: relative; }
  [data-theme="sunrise"] .rev-section .rev-grid > :first-child { margin-right: 64px; }
  [data-theme="sunrise"] .rev-section .rev-grid > :last-child { margin-left: 64px; }
  [data-theme="sunrise"] .rev-section .rev-section__links { grid-column: 1; grid-row: 2; }
}
[data-theme="sunrise"] .rev-summary { display: grid; justify-items: start; gap: 10px; margin-top: 28px; }
[data-theme="sunrise"] .rev-summary .rev-stars { display: inline-flex; align-items: baseline; gap: 3px; font-size: 22px; }
[data-theme="sunrise"] .rev-summary .rev-stars__figure { order: -1; margin-right: 14px; font: 800 64px/1 var(--font-display); letter-spacing: -0.04em; color: var(--text); }
[data-theme="sunrise"] .rev-stars__star.is-on { color: var(--rating); }
[data-theme="sunrise"] .rev-figures-demo { background: transparent; border: 1px solid currentColor; color: var(--text-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="sunrise"] .rev-card { border-radius: var(--radius-card); padding: 26px 28px; box-shadow: var(--shadow-card); }
[data-theme="sunrise"] .rev-card__reply { background: var(--peach); border: 0; border-radius: 16px; }
[data-theme="sunrise"] [data-section="reviews"] .rev-grid::before { content: ""; position: absolute; right: 0; top: -46px; width: 84px; height: 84px; border-radius: 50%; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A120C'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4h4v4H4v2h4a2 2 0 0 0 2-2zm10 0h-4a2 2 0 0 0-2 2v4h4v4h-4v2h4a2 2 0 0 0 2-2z'/%3E%3C/svg%3E") center / 40px no-repeat, var(--brand); }
@media (max-width: 63.99rem) { [data-theme="sunrise"] [data-section="reviews"] .rev-grid::before { display: none; } }

/* Recent work: rounded tall photos, the middle one lower */
[data-theme="sunrise"] .gallery { gap: 24px; }
[data-theme="sunrise"] .gallery .ph { aspect-ratio: 4 / 4.6; border-radius: var(--radius-media); }
@media (min-width: 48rem) { [data-theme="sunrise"] .gallery .ph:nth-child(2) { margin-top: 40px; } }

/* Shop: the peach band, white cards, the picture rounded */
[data-theme="sunrise"] .shop-section { background: var(--peach); padding-block: clamp(4rem, 2rem + 4vw, 6.5rem); }
[data-theme="sunrise"] .shop-section__head { align-items: flex-end; margin-bottom: 2.75rem; }
[data-theme="sunrise"] .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 24px; }
[data-theme="sunrise"] .product-card { background: var(--surface); border: 0; border-radius: var(--radius-card); padding: 12px; box-shadow: var(--shadow-card); }
[data-theme="sunrise"] .product-card__link { color: var(--text); text-decoration: none; }
[data-theme="sunrise"] .product-card__media { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
[data-theme="sunrise"] .product-card__name { display: block; padding: 18px 10px 0; font: 600 18px/1.3 var(--font-display); }
[data-theme="sunrise"] .product-card__price { padding: 8px 10px 8px; margin: 0; font: 800 22px/1 var(--font-display); }

/* Visit us: the hours card (today an orange pill), the contact column an orange card with rings, the place photo */
@media (min-width: 64rem) { [data-theme="sunrise"] .visit--3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } }
[data-theme="sunrise"] .visit__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 36px 40px; box-shadow: var(--shadow-card); }
[data-theme="sunrise"] .visit__col + .visit__col { position: relative; overflow: hidden; background: var(--brand); color: var(--on-brand); border: 0; }
[data-theme="sunrise"] .visit__col + .visit__col::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: 340px; height: 340px; border-radius: 50%; border: 44px solid rgb(255 255 255 / .16); box-shadow: 0 0 0 44px rgb(255 255 255 / .08); }
[data-theme="sunrise"] .visit__col + .visit__col :is(h3, a, p) { position: relative; z-index: 1; color: var(--on-brand); }
[data-theme="sunrise"] .visit__col + .visit__col a { font: 800 26px/1.1 var(--font-display); letter-spacing: -0.02em; }
/* W11 (batch 38's check): "Get directions" on the orange card is the target's black pill with cream text in both modes (Dark drew near-black
   text on the near-black outline fill); under the pointer cream with the ink (the chart's outline hover in Dark) */
[data-theme="sunrise"] .visit__col + .visit__col a.btn { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink); background: var(--ink); color: var(--on-ink); border-color: var(--ink); font: 600 16px/1 var(--font-display); letter-spacing: 0; }
[data-theme="sunrise"] .visit__col + .visit__col a.btn:is(:hover, :active) { --btn-bg: var(--on-ink); --btn-fg: var(--ink); --btn-bd: var(--on-ink); background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
[data-theme="sunrise"] .visit__col h3 { font: 800 28px/1.15 var(--font-display); margin-bottom: 22px; }
[data-theme="sunrise"] .hours li { padding: 11px 16px; font-size: 16px; }
[data-theme="sunrise"] .hours li > :last-child { font-weight: 600; white-space: nowrap; }
[data-theme="sunrise"] .hours li.is-today { background: var(--brand); color: var(--on-brand); border: 0; border-radius: 999px; font-weight: 700; }
[data-theme="sunrise"] .hours li.is-today .muted { color: var(--brand); background: var(--on-brand); padding: 4px 8px; border-radius: 999px; margin-left: 10px; font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
[data-theme="sunrise"] .visit__photo { max-height: none; min-height: 100%; aspect-ratio: auto; border-radius: var(--radius-media); }
@media (max-width: 63.99rem) { [data-theme="sunrise"] .visit__photo { min-height: 240px; } [data-theme="sunrise"] .visit__col { padding: 26px 20px; } }

/* the closing band: orange edge to edge, the sun rising in rings on its right; the black pill and the outlined one */
[data-theme="sunrise"] .cms-band--cta { position: relative; overflow: hidden; background: var(--brand); color: var(--on-brand); padding-block: 96px; }
[data-theme="sunrise"] .cms-band--cta::after { content: ""; position: absolute; right: max(16px, 50% - 640px); bottom: -260px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, #FFF4EB 0 23%, rgb(255 244 235 / .2) 23.5%); box-shadow: 0 0 0 60px rgb(255 244 235 / .45), 0 0 0 120px rgb(255 244 235 / .25), 0 0 0 180px rgb(255 244 235 / .12); opacity: .5; }
[data-theme="sunrise"] .cms-cta { position: relative; z-index: 1; display: block; padding: 0; background: none; border: 0; color: var(--on-brand); }
[data-theme="sunrise"] .cms-cta h2 { max-width: 12em; color: var(--on-brand); font: 800 clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem)/1.12 var(--font-display); letter-spacing: -0.035em; }
[data-theme="sunrise"] .cms-cta .accent-word { display: inline-block; margin-top: 10px; padding: 0 .18em .16em; background: var(--on-brand); color: var(--brand); transform: rotate(-1.4deg); }
[data-theme="sunrise"] .cms-cta p { margin-top: 22px; font: 500 19px/1.5 var(--font-body); }
[data-theme="sunrise"] .cms-cta__actions { margin-top: 36px; gap: 14px 18px; }
[data-theme="sunrise"] .cms-cta .btn { --btn-bg: transparent; --btn-fg: var(--on-brand); --btn-bd: var(--on-brand); background: transparent; color: var(--on-brand); border-color: var(--on-brand); }
[data-theme="sunrise"] .cms-cta .btn--primary { --btn-bg: var(--on-brand); --btn-fg: var(--on-ink); background: var(--on-brand); color: var(--on-ink); }
[data-theme="sunrise"] .cms-cta .btn:is(:hover, :active) { --btn-bg: var(--on-ink); --btn-fg: var(--ink); --btn-bd: var(--on-ink); background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
[data-theme="sunrise"] .cms-cta .btn--primary:is(:hover, :active)::after { background: var(--arrow-sun) center / 18px no-repeat, var(--ink); }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .cms-band--cta { padding-block: 64px 72px; }
  [data-theme="sunrise"] .cms-band--cta::after { width: 300px; height: 300px; right: -80px; bottom: -170px; }
  [data-theme="sunrise"] .cms-cta .btn { width: 100%; justify-content: space-between; }
  [data-theme="sunrise"] .cms-cta .btn:not(.btn--primary) { justify-content: center; }
}

/* footer: ink, the column heads in orange */
[data-theme="sunrise"] .site-footer h2 { font: 700 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
[data-theme="sunrise"] .site-footer__business h2 { font: 800 24px/1 var(--font-display); letter-spacing: -0.03em; text-transform: none; color: var(--on-footer); }
[data-theme="sunrise"] .site-footer__menu a { color: var(--on-footer); text-decoration: none; }
[data-theme="sunrise"] .site-footer__menu a:hover { color: var(--brand); }
[data-theme="sunrise"][data-mode="dark"] .site-footer { border-top: 1px solid var(--border); }

/* U11 (F-141, F-142; D-225): touch targets of 44 px on a phone. The footer menu's links are 44 px high with the list's gap
   taken into them; the homepage questions take 10 px of their row's space above and below into the question, so the closed
   and the open list keep their spacing; "Visit us"'s phone and e-mail links on the orange card (26 px / 1.1) are 44 px high,
   their type unchanged, and a long address still breaks inside the card (a flex box would keep the word whole and the card
   would cut it) */
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .site-footer__menu ul { gap: 0; }
  [data-theme="sunrise"] .site-footer__menu a { display: inline-flex; align-items: center; min-height: var(--touch); }
  [data-theme="sunrise"] .faq details { padding-block: calc(var(--space-4) - 0.625rem); }
  [data-theme="sunrise"] .faq details[open] { padding-bottom: var(--space-4); }
  [data-theme="sunrise"] .faq summary { min-height: var(--touch); padding-block: 0.625rem; }
  [data-theme="sunrise"] .faq details > .cms-rich { margin-top: -0.625rem; }
  [data-theme="sunrise"] .visit__col + .visit__col a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--touch); max-width: 100%; overflow-wrap: anywhere; }
}

/* Services and prices: white cards, the price bold, the at-address tag orange */
[data-theme="sunrise"] .section__head h1 { font: 800 clamp(2.625rem, 1.5rem + 3vw, 4rem)/1.05 var(--font-display); letter-spacing: -0.035em; }
[data-theme="sunrise"] .prices { grid-template-columns: minmax(0, 1fr); gap: 56px; }
[data-theme="sunrise"] .prices > div > :is(h2, h3) { font: 800 30px/1.15 var(--font-display); letter-spacing: -0.025em; margin-bottom: 22px; }
[data-theme="sunrise"] .price-list > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 12px 24px 12px 12px; }
[data-theme="sunrise"] .price-list > li:not(.has-picture) { padding: 20px 24px; }
[data-theme="sunrise"] .price-list > li + li { margin-top: 16px; }
[data-theme="sunrise"] .price-list li.has-picture { grid-template-columns: 200px minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; }
[data-theme="sunrise"] .price-list li.has-picture > .price-list__thumb { grid-row: 1 / span 6; width: 100%; height: auto; aspect-ratio: 4 / 3; align-self: start; border-radius: 18px; }
[data-theme="sunrise"] .price-list li.has-picture > :is(.name, .price) { margin-top: 12px; }
[data-theme="sunrise"] .price-list .name { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
[data-theme="sunrise"] .price-list .price { font: 800 24px/1.1 var(--font-display); letter-spacing: -0.02em; }
[data-theme="sunrise"] .price-list .variants { border-left: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 14px; margin-top: 12px; }
[data-theme="sunrise"] .price-list .variants li { border: 2px solid var(--border); border-radius: 20px; padding: 14px 18px; }
[data-theme="sunrise"] .home-tag { border: 0; background: var(--brand); color: var(--on-brand); font-weight: 600; }
[data-theme="sunrise"] .prices__visits { border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
[data-theme="sunrise"] .prices + .cluster { margin-top: 32px; }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .price-list li.has-picture { grid-template-columns: 104px minmax(0, 1fr); padding: 10px; column-gap: 14px; }
  [data-theme="sunrise"] .price-list li.has-picture > .price-list__thumb { grid-row: 1 / span 2; aspect-ratio: 1; border-radius: 14px; }
  [data-theme="sunrise"] .price-list li.has-picture > .price { grid-column: 2; margin-top: 0; }
  [data-theme="sunrise"] .price-list li.has-picture > :is(.meta, .home-tag, .variants) { grid-column: 1 / -1; }
  [data-theme="sunrise"] .price-list .name { font-size: 18px; }
}

/* Booking start: the stepper with the orange current step, white panels, the chosen rows peach, the summary's orange head */
@media (min-width: 48rem) {
  [data-theme="sunrise"] .booking-flow .stepper { counter-reset: sun-step; gap: 0; align-items: center; flex-wrap: nowrap; padding: 32px 0 8px; margin-bottom: 28px; }
  [data-theme="sunrise"] .booking-flow .stepper li { counter-increment: sun-step; flex: 1 1 auto; gap: 10px; font: 600 14.5px/1 var(--font-display); color: var(--text-muted); white-space: nowrap; }
  [data-theme="sunrise"] .booking-flow .stepper li::before { content: counter(sun-step); display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); font: 700 14px/1 var(--font-display); }
  [data-theme="sunrise"] .booking-flow .stepper li::after { content: ""; flex: 1; min-width: 12px; height: 2px; margin-inline: 12px; background: var(--border); }
  [data-theme="sunrise"] .booking-flow .stepper li:last-child { flex: 0 0 auto; }
  [data-theme="sunrise"] .booking-flow .stepper li:last-child::after { content: none; }
  [data-theme="sunrise"] .booking-flow .stepper .is-current { color: var(--text); }
  [data-theme="sunrise"] .booking-flow .stepper .is-current::before { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 6px var(--peach); }
  [data-theme="sunrise"] .booking-flow .stepper .is-current::after { background: linear-gradient(90deg, var(--brand) 40%, var(--border) 40%); }
}
[data-theme="sunrise"] .booking-flow h1 { font: 800 clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem)/1.08 var(--font-display); letter-spacing: -0.035em; }
[data-theme="sunrise"] .flow__main > form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px 28px; }
[data-theme="sunrise"] .flow__main .place-choice { border: 0; padding: 0; margin: 0; }
[data-theme="sunrise"] .place-choice legend { font: 700 20px/1.2 var(--font-display); margin-bottom: 16px; }
[data-theme="sunrise"] .choice-card { border-radius: 20px; }
[data-theme="sunrise"] .booking-flow label.choice-card:has(input:checked) { border: 2px solid var(--text); box-shadow: none; background: var(--peach); }
[data-theme="sunrise"] .service-row { border-radius: 20px; }
[data-theme="sunrise"] .service-row.is-selected, [data-theme="sunrise"] .service-row:has(input:checked) { border-color: transparent; background: var(--peach); box-shadow: none; }
[data-theme="sunrise"] .service-row__thumb { border-radius: 50%; overflow: hidden; }
[data-theme="sunrise"] .service-row__name { font: 700 18px/1.25 var(--font-display); }
[data-theme="sunrise"] .service-row__price { font: 800 20px/1 var(--font-display); letter-spacing: -0.02em; }
[data-theme="sunrise"] .flow__summary.card { padding: 0; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
[data-theme="sunrise"] .flow__summary.card > * { margin-inline: 26px; }
[data-theme="sunrise"] .flow__summary .panel-title { margin: 0 0 18px; padding: 20px 26px; background: var(--brand); color: var(--on-brand); font: 800 22px/1 var(--font-display); }
[data-theme="sunrise"] .flow__summary .summary-bar__total { font: 800 34px/1 var(--font-display); letter-spacing: -0.03em; }
[data-theme="sunrise"] .flow__summary > :last-child { margin-bottom: 26px; }
@media (max-width: 47.99rem) { [data-theme="sunrise"] .service-row__price { font-size: 1rem; } [data-theme="sunrise"] .service-row__name { font-size: 1rem; } }
/* W11 (batch 38's check, F-97): the names keep their words whole — module-theme lets a service name break anywhere (inside
   "treatment" at 320 px with the text at 150 %); in the step's narrow column (module-theme 0.7.1's container) they wrap
   between words, a size smaller */
[data-theme="sunrise"] .booking-flow .service-row__name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@container osdot-flow (max-width: 17em) { [data-theme="sunrise"] .booking-flow .service-row__name { font-size: .875em; } }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .cms-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-theme="sunrise"] .cms-strip__item { min-height: 56px; padding: 8px 12px 8px 4px; font-size: 13px; border-radius: 22px; }
}

/* W11 (batch 38: module-cms 0.9.2, module-hero 0.3.1, module-shop 0.4.4, module-booking-flow 0.9.7; F-94, F-98) — the
   homepage's new parts as the approved target draws them: the trades' icons in cream circles on the orange band (the last
   line's black circle with the orange arrow), each step's icon in its orange circle, the points after a dark tick in an
   orange circle (the hero's stacked), the About band beside its photo with the orange circle behind it, "Recent work"'s
   captions as cream pills, the condition label, the place switch as a track and the filter's chips */
[data-theme="sunrise"] { --tick-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A120C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
[data-theme="sunrise"] :is(.splithero__points, .cms-about__points) li::before { width: 30px; height: 30px; margin: 0; border: 0; border-radius: 50%; transform: none; background: var(--tick-ink) center / 16px no-repeat, var(--brand); }
[data-theme="sunrise"] .splithero__points { flex-direction: column; gap: 12px; margin-top: 28px; }
[data-theme="sunrise"] .splithero__points li { align-items: center; gap: 12px; font: 600 15px/1.3 var(--font-display); color: var(--text); }
/* the strip on the orange band */
[data-theme="sunrise"] .cms-strip--icons { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 24px 16px; }
[data-theme="sunrise"] .cms-strip--icons .cms-strip__item, [data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item { flex-direction: column; justify-content: flex-start; align-items: center; gap: 14px; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--on-brand); text-align: center; font: 600 15px/1.3 var(--font-display); }
[data-theme="sunrise"] .cms-strip--icons .cms-strip__item:has(> .cms-strip__icon, > picture)::before { display: none; }
[data-theme="sunrise"] .cms-strip--icons .cms-strip__icon { width: 96px; height: 96px; padding: 22px; border-radius: 50%; background: var(--on-ink); box-shadow: 0 10px 24px -12px rgb(26 18 12 / .45); transition: background-color .18s; }
[data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item::before { width: 96px; height: 96px; margin: 0; background: var(--arrow-sun) center / 34px no-repeat, var(--on-brand); }
[data-theme="sunrise"] .cms-strip--icons .cms-strip__item:is(:hover, :active), [data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item:is(:hover, :active) { background: none; color: var(--on-brand); }
[data-theme="sunrise"] .cms-strip--icons .cms-strip__item:is(:hover, :active) .cms-strip__icon { background: var(--on-brand); }
[data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item:is(:hover, :active)::before { background: var(--arrow-ink) center / 34px no-repeat, var(--on-ink); }
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] .cms-strip--icons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; }
  [data-theme="sunrise"] .cms-strip--icons .cms-strip__item, [data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item { gap: 10px; font-size: 12px; }
  [data-theme="sunrise"] .cms-strip--icons .cms-strip__icon { width: 66px; height: 66px; padding: 15px; }
  [data-theme="sunrise"] .cms-strip--icons li:last-child .cms-strip__item::before { width: 66px; height: 66px; background-size: 26px, auto; }
}
/* the steps: the icon in the step's orange circle (the circle's number left out: the line and the order say it) */
[data-theme="sunrise"] .cms-steps--icons .cms-steps__item::before { content: ""; }
[data-theme="sunrise"] .cms-steps__icon { position: absolute; z-index: 1; top: 12px; left: 50%; width: 40px; height: 40px; margin: 0 0 0 -20px; }
@media (max-width: 47.99rem) { [data-theme="sunrise"] .cms-steps__icon { top: 18px; left: 12px; margin: 0; } }
/* the About band with its photo */
[data-theme="sunrise"] .cms-band--about > .container:has(.cms-about--media) { display: block; }
[data-theme="sunrise"] .cms-band--about > .container:has(.cms-about--media)::before { display: none; }
[data-theme="sunrise"] .cms-about--media { max-width: none; }
@media (min-width: 64rem) { [data-theme="sunrise"] .cms-about--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 88px; } }
[data-theme="sunrise"] .cms-about--media .cms-about__media { position: relative; isolation: isolate; padding: 24px 0 24px 24px; }
[data-theme="sunrise"] .cms-about--media .cms-about__media::before { content: ""; position: absolute; left: 0; top: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); z-index: -1; }
[data-theme="sunrise"] .cms-about--media .cms-about__media::after { content: ""; position: absolute; right: -18px; bottom: 60px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); }
[data-theme="sunrise"] .cms-about__photo { aspect-ratio: 4 / 3.4; border-radius: var(--radius-media); box-shadow: var(--shadow-raised); }
[data-theme="sunrise"] .cms-about__points { gap: 12px; }
[data-theme="sunrise"] .cms-about__points li { align-items: center; gap: 12px; font-weight: 600; color: var(--text); }
@media (max-width: 47.99rem) { [data-theme="sunrise"] .cms-about--media .cms-about__media { padding: 16px 0 16px 16px; } [data-theme="sunrise"] .cms-about--media .cms-about__media::after { right: 4px; bottom: 30px; width: 16px; height: 16px; } }
/* "Recent work"'s captions: a cream pill over the picture's foot */
[data-theme="sunrise"] .theme-slot__caption { inset-inline: 16px auto; bottom: 16px; padding: 10px 18px; border-radius: 999px; background: var(--bg); color: var(--text); font: 600 15px/1.2 var(--font-display); }
@media (max-width: 47.99rem) { [data-theme="sunrise"] .theme-slot__caption { inset-inline: 8px auto; bottom: 8px; padding: 6px 12px; font-size: 12.5px; } }
/* the shop card's condition: an orange pill with the dark text */
[data-theme="sunrise"] .product-card__condition .badge { display: inline-block; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 600 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; }
/* "Where is the job?" as a track (the chosen place the black pill) and the filter's chips (the chosen one orange) */
[data-theme="sunrise"] :is(.booking-flow .place-choice__switch, .prices__where .segmented) { gap: 6px; padding: 6px; border: 0; border-radius: 999px; background: var(--surface-2); }
[data-theme="sunrise"] .booking-flow .place-choice__option, [data-theme="sunrise"] .prices__where .segmented > a { min-height: 48px; padding-inline: 22px; border: 0; border-radius: 999px; font: 600 15px/1 var(--font-display); }
[data-theme="sunrise"] .booking-flow .place-choice__option + .place-choice__option { border-inline-start: 0; }
[data-theme="sunrise"] :is(.booking-filter, .prices__filter) .chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: 500 14.5px/1 var(--font-body); }
[data-theme="sunrise"] :is(.booking-filter .chip[aria-pressed="true"], .prices__filter .chip.is-on) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
/* W11, the boards' second round: the strip's items without W10's pill shadow; in Dark the icon circles black (the target's),
   cream under the pointer; the About band's points as peach rows (dark brown in Dark) across the column */
[data-theme="sunrise"] .cms-strip--icons .cms-strip__item { box-shadow: none; }
[data-theme="sunrise"][data-mode="dark"] .cms-strip--icons .cms-strip__icon { background: var(--on-brand); }
[data-theme="sunrise"][data-mode="dark"] .cms-strip--icons .cms-strip__item:is(:hover, :active) .cms-strip__icon { background: var(--on-ink); }
@media (prefers-color-scheme: dark) { [data-theme="sunrise"][data-mode="auto"] .cms-strip--icons .cms-strip__icon { background: var(--on-brand); } [data-theme="sunrise"][data-mode="auto"] .cms-strip--icons .cms-strip__item:is(:hover, :active) .cms-strip__icon { background: var(--on-ink); } }
[data-theme="sunrise"] .cms-about__points { justify-self: stretch; gap: 10px; }
[data-theme="sunrise"] .cms-about__points li { padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--peach); }
/* the services page's "Where is the job?" as the target's card, the question in the display type */
[data-theme="sunrise"] .prices__where { gap: 14px; max-width: 36rem; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
[data-theme="sunrise"] .prices__where-label { font: 700 19px/1.2 var(--font-display); color: var(--text); }
@media (max-width: 47.99rem) { [data-theme="sunrise"] .prices__where { padding: 20px; } }
/* the place switch on phones: the two options side by side as the target (one under the other only when the text is enlarged) */
@media (max-width: 47.99rem) {
  [data-theme="sunrise"] :is(.booking-flow .place-choice__switch, .prices__where .segmented) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); width: 100%; border-radius: 30px; }
  [data-theme="sunrise"] .booking-flow .place-choice__option, [data-theme="sunrise"] .prices__where .segmented > a { padding-inline: 10px; font-size: 14px; }
}
/* the hovers of the place switch and the category filter (the W11 hover sheet): module-theme's own hover roles, restated over
   the theme's resting rules — module-theme 0.7.1 sets the services page's option text after its hover rule (F-99) */
[data-theme="sunrise"] .prices__where .segmented > a:not(.is-on):is(:hover, :active) { background: var(--secondary-hover); color: var(--on-secondary-hover); }
[data-theme="sunrise"] .prices__where .segmented > a.is-on:is(:hover, :active) { background: var(--selected-hover); color: var(--on-selected-hover); }
[data-theme="sunrise"] :is(.booking-filter .chip[aria-pressed="true"], .prices__filter .chip.is-on):is(:hover, :active) { background: var(--selected-hover); border-color: var(--selected-hover); color: var(--on-selected-hover); }