[hidden] { display: none !important; }

:root {
  color-scheme:light;
  --brand-blue:#1f8bac;
  --brand-blue-deep:#176b86;
  --brand-lime:#c3d62f;
  --bg:#f7f8f4;
  --ink:#17252a;
  --muted:#65747a;
  --line:#dfe5e2;
  --card:#fff;
  --dark:#12313b;
  --accent:var(--brand-lime);
  --accent2:var(--brand-blue);
  --danger:#c94b55;
  --shadow:0 24px 70px rgba(18,49,59,.10);
  --radius:28px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit
}
button,a {
  cursor:pointer
}
a {
  text-decoration:none;
  color:inherit
}
.page {
  min-height:100vh
}
.topbar {
  height:82px;
  background:rgba(245,246,241,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(18,49,59,.08);
  position:sticky;
  top:0;
  z-index:20
}
.topbar-inner {
  width:min(1240px,calc(100% - 48px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand img {
  width:196px;
  height:auto;
  display:block
}
.top-actions {
  display:flex;
  align-items:center;
  gap:18px
}
.live {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.live i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand-blue);
  box-shadow:0 0 0 5px rgba(31,139,172,.14)
}
.header-contact {
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:11px 18px;
  font-weight:750;
  color:var(--ink)
}
.progress {
  width:min(1240px,calc(100% - 48px));
  margin:0 auto;
  padding:18px 0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#a2aaa5
}
.progress span {
  padding:7px 10px;
  border-radius:999px
}
.progress .done {
  color:var(--ink);
  background:#eaf3f5
}
.progress .current {
  color:var(--dark);
  background:var(--accent)
}
.progress b {
  width:34px;
  height:1px;
  background:#d7e3e6
}
.booking-layout {
  width:min(1240px,calc(100% - 48px));
  margin:18px auto 60px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
  align-items:start
}
.booking-main {
  min-width:0
}
.hero-line {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin-bottom:22px
}
.eyebrow {
  display:inline-block;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:950;
  color:#5d6b65
}
.hero-line h1 {
  font-size:clamp(38px,5vw,66px);
  letter-spacing:-3px;
  line-height:.98;
  margin:10px 0 14px;
  max-width:750px
}
.hero-line p {
  max-width:680px;
  color:var(--muted);
  line-height:1.65;
  margin:0;
  font-size:15px
}
.session-chip {
  background:var(--dark);
  color:#fff;
  padding:11px 15px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
  white-space:nowrap
}
.step-card,.user-block {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
  margin-bottom:18px
}
.step-head {
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px
}
.step-head>span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#edf3f4;
  font-size:11px;
  font-weight:950
}
.step-head small,.calendar-top small,.slots-top small {
  font-size:9px;
  letter-spacing:1.4px;
  font-weight:950;
  color:#87918b
}
.step-head h2 {
  margin:4px 0 0;
  font-size:22px;
  letter-spacing:-.6px
}
.services-head {
  margin-top:34px
}
.field-select,.field-input,#countryCode {
  width:100%;
  height:54px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#f7faf9;
  color:var(--ink);
  padding:0 15px;
  outline:none
}
.field-select:focus,.field-input:focus,#countryCode:focus {
  border-color:var(--brand-blue);
  box-shadow:0 0 0 4px rgba(31,139,172,.14);
  background:#fff
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.service-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:16px;
  min-height:112px;
  color:var(--ink);
  transition:.18s ease
}
.service-card:hover:not(.disabled) {
  transform:translateY(-2px);
  border-color:var(--brand-blue);
  box-shadow:0 10px 25px rgba(18,49,59,.07)
}
.service-card.active {
  border-color:var(--dark);
  background:var(--dark);
  color:#fff
}
.service-card.disabled {
  opacity:.46;
  cursor:not-allowed
}
.service-card.disabled .tooltiptext {
  display:none
}
.service-card>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:5px
}
.service-card strong {
  font-size:13px
}
.service-card em {
  font-size:10px;
  font-style:normal;
  color:#7b8680;
  line-height:1.4
}
.service-card.active em {
  color:#b8c4be
}
.service-icon {
  width:32px;
  height:32px;
  border-radius:9px;
  background:#edf5f6;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:950
}
.service-card.active .service-icon {
  background:var(--accent);
  color:var(--dark)
}
.service-card i {
  margin-left:auto;
  font-style:normal;
  color:#9aa49e
}
.service-card.active i {
  color:var(--accent)
}
.booking-step {
  margin-top:30px
}
.placeholder {
  min-height:170px;
  border:1px dashed #d2e0e3;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:left;
  color:#87918b;
  background:#f7faf9
}
.placeholder>span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#edf5f6;
  color:var(--ink);
  font-weight:900
}
.placeholder strong {
  display:block;
  color:var(--ink);
  font-size:13px
}
.placeholder p {
  margin:5px 0 0;
  font-size:12px
}
.calendar-shell {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.calendar-card,.slots-card {
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  background:#f7faf9
}
.calendar-top,.slots-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}
.calendar-top h3,.slots-top h3 {
  margin:4px 0 0;
  font-size:18px
}
.calendar-nav {
  display:flex;
  gap:6px
}
.calendar-nav button {
  width:36px;
  height:36px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px
}
.weekdays,.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px
}
.weekdays span {
  text-align:center;
  font-size:9px;
  font-weight:900;
  color:#9ba49f;
  padding-bottom:7px
}
.calendar-date {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.calendar-date.available {
  background:#fff;
  border:1px solid #dfe8e9
}
.calendar-date.available:hover {
  border-color:var(--brand-blue)
}
.calendar-date.selected {
  background:var(--dark);
  color:#fff
}
.calendar-date.disabled {
  color:#c3c9c4
}
.slots-top>span {
  font-size:9px;
  font-weight:900;
  color:#89938d;
  background:#edf3f4;
  padding:6px 8px;
  border-radius:8px
}
.slots-grid {
  display: block;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.slot-btn {
  height:44px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  font-size:12px;
  font-weight:750
}
.slot-section {
  width:100%;
  margin:0 0 18px;
}
.slot-group-title {
  display: block;
  width: 100%;
  margin: 18px 0 10px;
  text-align: left;
  font-weight: 850;
  line-height: 1.35;
}
.slot-grid-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.slot-grid-row .slot-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  white-space: nowrap;
}
.slot-btn:hover,.slot-btn.selected {
  background:var(--dark);
  border-color:var(--dark);
  color:#fff
}
.loading-state {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.loading-spinner {
  width:22px;
  height:22px;
  border:2px solid #dfe8e9;
  border-top-color:var(--dark);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:0 auto 10px
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.user-block {
  padding:30px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.form-grid label,.lead-form label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  font-weight:850;
  color:#52615a
}
.phone-row {
  display:grid;
  grid-template-columns:92px 1fr
}
.phone-row #countryCode {
  border-radius:14px 0 0 14px;
  border-right:0
}
.phone-row .field-input {
  border-radius:0 14px 14px 0
}
.cta-row {
  display:flex;
  justify-content:flex-end;
  margin:18px 0
}
.primary-button,.secondary-button,.danger-button,.text-button,.ghost-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 20px;
  border-radius:14px;
  border:0;
  font-weight:850;
  font-size:12px;
  text-decoration:none
}
.primary-button {
  background:var(--dark);
  color:#fff;
  box-shadow:0 14px 30px rgba(18,49,59,.15)
}
.primary-button:hover {
  transform:translateY(-1px)
}
.secondary-button {
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line)
}
.danger-button {
  background:#b83e49;
  color:#fff
}
.text-button {
  background:transparent;
  color:#a33d46
}
.ghost-button {
  width:100%;
  margin-top:16px;
  background:#eff5f6;
  color:var(--ink)
}
.primary-button:disabled,.danger-button:disabled {
  opacity:.55;
  cursor:not-allowed
}
.summary-panel {
  position:sticky;
  top:105px;
  background:var(--dark);
  color:#fff;
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow)
}
.summary-kicker {
  color:#b8c4be;
  font-size:9px;
  letter-spacing:1.5px;
  font-weight:950
}
.summary-panel h2 {
  font-size:24px;
  letter-spacing:-1px;
  margin:7px 0 24px
}
.summary-list {
  display:grid;
  gap:0
}
.summary-list>div {
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap:15px
}
.summary-list span {
  font-size:10px;
  color:#9ba8a2
}
.summary-list strong {
  text-align:right;
  font-size:11px;
  max-width:160px
}
.summary-note {
  display:flex;
  gap:10px;
  margin-top:22px;
  padding:14px;
  border-radius:15px;
  background:rgba(255,255,255,.06)
}
.summary-note span {
  width:22px;
  height:22px;
  border-radius:7px;
  background:var(--accent);
  color:var(--dark);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900
}
.summary-note p {
  margin:0;
  font-size:10px;
  color:#b5c0bb;
  line-height:1.5
}
.previous {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10)
}
.previous h3 {
  font-size:11px;
  margin:0 0 4px
}
.summary-list.compact>div {
  padding:9px 0
}
.summary-list.compact strong {
  font-size:10px
}
.existing-booking {
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:0;
  background:#eaf3f5;
  border-radius:18px;
  padding:14px 18px;
  margin-bottom:16px
}
.existing-booking div {
  padding:3px 14px;
  border-right:1px solid #d7e7eb
}
.existing-booking div:last-child {
  border:0
}
.existing-booking span {
  display:block;
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#77847d;
  font-weight:900
}
.existing-booking strong {
  display:block;
  margin-top:5px;
  font-size:11px
}
.home-layout {
  width:min(1240px,calc(100% - 48px));
  margin:50px auto 70px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:stretch
}
.home-hero {
  position:relative;
  overflow:hidden;
  min-height:650px;
  border-radius:34px;
  background:var(--dark);
  color:#fff;
  padding:58px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero-mark {
  position:absolute;
  right:-40px;
  top:-70px;
  font-size:260px;
  line-height:1;
  font-weight:950;
  color:rgba(255,255,255,.035);
  letter-spacing:-25px
}
.home-hero .eyebrow {
  color:var(--accent)
}
.home-hero h1 {
  font-size:clamp(52px,6vw,84px);
  line-height:.92;
  letter-spacing:-5px;
  max-width:720px;
  margin:24px 0
}
.home-hero h1 span {
  color:var(--accent)
}
.home-hero>p {
  max-width:590px;
  color:#b9c6c0;
  line-height:1.7;
  font-size:16px
}
.hero-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:auto;
  padding-top:45px
}
.hero-stats div {
  padding:16px;
  border-top:1px solid rgba(255,255,255,.12)
}
.hero-stats strong {
  display:block;
  color:var(--accent);
  font-size:17px
}
.hero-stats span {
  font-size:10px;
  color:#9eaba5
}
.lead-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:34px;
  padding:36px;
  box-shadow:var(--shadow);
  align-self:center
}
.card-top h2 {
  font-size:31px;
  letter-spacing:-1.5px;
  margin:10px 0
}
.card-top p {
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:22px
}
.lead-form {
  display:grid;
  gap:13px
}
.lead-form .primary-button {
  width:100%;
  margin-top:5px
}
.form-message {
  display:none;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  font-size:12px
}
.form-message.error {
  display:block;
  background:#fff0f1;
  color:#a33c46
}
.form-message.success {
  display:block;
  background:#edf9f0;
  color:#236c45
}
.micro-note {
  margin-top:14px;
  font-size:10px;
  color:#87918b;
  display:flex;
  gap:8px
}
.micro-note span {
  color:var(--brand-blue)
}
.status-main {
  width:min(760px,calc(100% - 48px));
  margin:42px auto 70px
}
.status-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow)
}
.status-hero {
  text-align:center;
  padding:54px 40px 40px;
  background:linear-gradient(145deg,#edf5f6,#f7faf9)
}
.status-hero.warning {
  background:#fff7e8
}
.status-hero.error-hero {
  background:#fff1f2
}
.status-hero.success-hero {
  background:#edf5f6
}
.status-icon {
  width:68px;
  height:68px;
  border-radius:22px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  background:var(--dark);
  color:var(--accent);
  font-size:32px;
  font-weight:950
}
.warning .status-icon {
  background:#f0a43b;
  color:#fff
}
.error-hero .status-icon {
  background:#c84c56;
  color:#fff
}
.success-hero .status-icon {
  background:#3d9560;
  color:#fff
}
.status-hero h1 {
  font-size:clamp(38px,6vw,58px);
  letter-spacing:-3px;
  margin:10px 0
}
.status-hero p {
  margin:auto;
  max-width:540px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65
}
.booking-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)
}
.booking-details>div {
  padding:18px 24px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.booking-details>div:nth-child(even) {
  border-right:0
}
.booking-details span {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8b958f;
  font-weight:900
}
.booking-details strong {
  display:block;
  margin-top:6px;
  font-size:13px
}
.status-actions {
  display:flex;
  gap:10px;
  justify-content:center;
  padding:24px;
  flex-wrap:wrap
}
.status-error {
  margin:18px 24px 0;
  padding:12px;
  border-radius:12px;
  background:#fff0f1;
  color:#b43f49;
  text-align:center;
  font-size:12px;
  font-weight:800
}

.cancel-status {
  padding:0 24px;
  color:#b43f49;
  font-size:12px
}
.policy-card {
  width:min(900px,calc(100% - 48px));
  margin:40px auto 70px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.policy-head {
  padding:48px;
  background:var(--dark);
  color:#fff
}
.policy-head .eyebrow {
  color:var(--accent)
}
.policy-head h1 {
  font-size:48px;
  letter-spacing:-3px;
  margin:10px 0
}
.policy-head p {
  color:#b8c5bf
}
.policy-card article {
  padding:42px;
  font-size:14px;
  line-height:1.8;
  color:#425049
}
.policy-card h2 {
  font-size:20px;
  color:var(--ink);
  margin-top:32px
}
.policy-card a {
  color:var(--brand-blue-deep)
}
.router-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--dark);
  color:#fff
}
.router-card {
  text-align:center;
  padding:40px
}
.router-logo img {
  width:210px;
  filter:brightness(0) invert(1);
  margin-bottom:50px
}
.router-spinner {
  width:38px;
  height:38px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:0 auto 24px
}
.router-card .eyebrow {
  color:var(--accent)
}
.router-card h1 {
  font-size:36px;
  margin:10px 0
}
.router-card p {
  color:#aebbb5
}
.dql-contact-overlay {
  position:fixed;
  inset:0;
  background:rgba(9,20,17,.62);
  backdrop-filter:blur(8px);
  display:none;
  place-items:center;
  padding:20px;
  z-index:100
}
.dql-contact-overlay.is-open {
  display:grid
}
.dql-contact-dialog {
  width:min(520px,100%);
  background:#fff;
  border-radius:28px;
  padding:30px;
  box-shadow:0 30px 100px rgba(0,0,0,.25)
}
.modal-head {
  display:flex;
  justify-content:space-between;
  gap:20px
}
.modal-eyebrow {
  font-size:9px;
  letter-spacing:1.4px;
  font-weight:950;
  color:#7b8780
}
.modal-head h2 {
  margin:6px 0;
  font-size:28px;
  letter-spacing:-1px
}
.dql-contact-close {
  border:0;
  background:#edf5f6;
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:24px
}
.dql-contact-dialog>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.contact-actions {
  display:grid;
  gap:8px;
  margin-top:22px
}
.contact-actions a {
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.contact-actions a:hover {
  border-color:var(--brand-blue);
  background:#f6fafb
}
.contact-actions span {
  font-size:10px;
  color:#89938d;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900
}
.contact-actions strong {
  font-size:12px
}
.dql-modal-open {
  overflow:hidden
}
.input-error {
  border-color:#c94b55!important;
  box-shadow:0 0 0 4px rgba(201,75,85,.08)!important
}
@media(max-width:1000px) {
  .booking-layout,.home-layout {
    grid-template-columns:1fr
  }
  .summary-panel {
    position:relative;
    top:auto;
    order:2
  }
  .home-hero {
    min-height:500px
  }
  .calendar-shell {
    grid-template-columns:1fr
  }
  .service-grid {
    grid-template-columns:1fr
  }
  .existing-booking {
    grid-template-columns:1fr 1fr
  }
  .existing-booking div:nth-child(2) {
    border-right:0
  }
}
@media(max-width:640px) {
  .topbar {
    height:70px
  }
  .topbar-inner,.progress,.booking-layout,.home-layout,.status-main,.policy-card {
    width:calc(100% - 24px)
  }
  .brand img {
    width:160px
  }
  .live {
    display:none
  }
  .header-contact {
    padding:9px 14px
  }
  .progress {
    padding:12px 0;
    gap:5px;
    font-size:8px
  }
  .progress b {
    width:14px
  }
  .booking-layout,.home-layout {
    margin-top:10px
  }
  .hero-line {
    display:block
  }
  .hero-line h1 {
    font-size:44px;
    letter-spacing:-2.5px
  }
  .hero-line p {
    font-size:13px
  }
  .session-chip {
    display:inline-block;
    margin-top:16px
  }
  .step-card,.user-block {
    padding:20px;
    border-radius:22px
  }
  .service-grid {
    gap:8px
  }
  .service-card {
    min-height:88px;
    padding:13px
  }
  .calendar-shell {
    display:block
  }
  .slots-card {
    margin-top:12px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .summary-panel {
    padding:20px;
    border-radius:22px
  }
  .home-layout {
    margin-bottom:35px
  }
  .home-hero {
    min-height:500px;
    padding:30px;
    border-radius:26px
  }
  .home-hero h1 {
    font-size:50px;
    letter-spacing:-3px
  }
  .hero-stats {
    grid-template-columns:1fr;
    gap:0
  }
  .lead-card {
    padding:24px;
    border-radius:26px
  }
  .status-main {
    margin-top:18px
  }
  .status-card {
    border-radius:26px
  }
  .status-hero {
    padding:40px 22px 30px
  }
  .booking-details {
    grid-template-columns:1fr
  }
  .booking-details>div,.booking-details>div:nth-child(even) {
    border-right:0
  }
  .policy-card {
    margin-top:20px
  }
  .policy-head {
    padding:34px 24px
  }
  .policy-head h1 {
    font-size:40px
  }
  .policy-card article {
    padding:24px
  }
  .router-card h1 {
    font-size:30px
  }
  .router-logo img {
    width:170px
  }
}
/* Accessibility and responsive hardening */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}
img, svg, video {
  max-width: 100%;
}
input, select, textarea, button {
  max-width: 100%;
}
.booking-layout > *, .home-layout > *, .calendar-shell > *, .form-grid > * {
  min-width: 0;
}
.policy-card article {
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .topbar-inner, .progress, .booking-layout, .home-layout, .status-main, .policy-card {
    width: calc(100% - 20px);
  }
  .brand img {
    width: 138px;
  }
  .header-contact {
    padding: 9px 11px;
    font-size: 11px;
  }
  .hero-line h1 {
    font-size: clamp(34px, 10vw, 42px);
  }
  .step-card, .user-block {
    padding: 16px;
  }
  .calendar-card, .slots-card {
    padding: 14px;
  }
  .weekdays, .calendar-grid {
    gap: 3px;
  }
  .calendar-date {
    border-radius: 8px;
    font-size: 11px;
  }
  .phone-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .primary-button, .secondary-button, .danger-button, .text-button, .ghost-button {
    min-height: 46px;
    padding-inline: 14px;
  }
  .cta-row > button, .cta-row > a {
    width: 100%;
  }
  .home-hero {
    padding: 24px;
  }
  .home-hero h1 {
    font-size: clamp(38px, 11vw, 48px);
  }
  .status-actions {
    padding: 18px;
  }
  .status-actions > a, .status-actions > button {
    flex: 1 1 100%;
  }
  .policy-head h1 {
    font-size: clamp(32px, 9vw, 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Content hierarchy refinements: keep the user's next action ahead of secondary information. */
.booking-layout {
  align-items:start;
}
.booking-main {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.booking-main .hero-line {
  order:0;
}
.booking-main #existingBookingSummary {
  order:1;
}
.booking-main #bookingFlow {
  order:2;
}
.booking-main #userInfoSection {
  order:3;
}
.booking-main .cta-row {
  order:4;
}
.booking-layout > .summary-panel {
  order:5;
}
/* Keep the primary booking task first on smaller screens; summary is supporting content. */
@media (max-width:1000px) {
  .booking-layout > .summary-panel {
    order:2;
  }
  .booking-main {
    order:1;
  }
}
@media (max-width:640px) {
  .booking-layout > .summary-panel {
    order:2;
    margin-top:0;
  }
  .booking-main .hero-line {
    margin-bottom:18px;
  }
  .booking-main .step-card,
  .booking-main .user-block {
    margin-bottom:14px;
  }
  .step-head h2 {
    font-size:20px;
    line-height:1.25;
  }
  .summary-panel h2 {
    font-size:20px;
  }
}



/* Responsive booking flow: canonical rules */
.topbar { background:#fff; backdrop-filter:none; }
.header-contact { background:var(--dark); border-color:var(--dark); color:#fff; }
.loading-state {
  width:100%; min-height:110px; padding:24px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
}
.calendar-grid .loading-state,
#slotsGrid .loading-state,
.slots-grid .loading-state { grid-column:1 / -1; justify-self:stretch; align-self:stretch; }
.loading-spinner { margin:0 auto 10px; }
.status-hero:not(.error-hero) { background:linear-gradient(145deg,#f4faf5 0%,#e8f4e9 100%); }
.confirm-slider-wrap { display:none; }
@media (max-width:1000px) {
  .booking-layout { display:flex; flex-direction:column; }
  .booking-main { order:1; width:100%; }
  .booking-layout > .summary-panel { order:2; width:100%; }
  .confirm-slider-wrap {
    order:3; display:block; width:100%; box-sizing:border-box; padding:18px;
    margin:0 0 28px; border:1px solid #d8e7dc; border-radius:20px;
    background:linear-gradient(145deg,#fff 0%,#f1f8f1 100%);
    box-shadow:0 8px 24px rgba(18,49,59,.07);
  }
  .confirm-slider-label {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    color:var(--dark); font-size:15px; font-weight:800; margin-bottom:12px;
  }
  .confirm-slider-label::after {
    content:'DRAG  →'; color:var(--brand-blue-deep); font-size:11px;
    font-weight:850; letter-spacing:.08em;
  }
  .confirm-slider {
    appearance:none; -webkit-appearance:none; display:block; width:100%;
    height:54px; padding:5px; margin:0; border:1px solid #d3e5d8;
    border-radius:999px; outline:none;
    background:linear-gradient(90deg,rgba(68,151,98,.16),rgba(195,214,47,.23)),#edf5ee;
    cursor:grab; touch-action:pan-y;
  }
  .confirm-slider::-webkit-slider-thumb {
    appearance:none; -webkit-appearance:none; width:44px; height:44px;
    border:3px solid #fff; border-radius:50%;
    background-color:#24784d;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:22px;
    box-shadow:0 3px 10px rgba(18,49,59,.22);
  }
  .confirm-slider::-moz-range-thumb {
    width:38px; height:38px; border:3px solid #fff; border-radius:50%;
    background-color:#24784d;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
    box-shadow:0 3px 10px rgba(18,49,59,.22);
  }
  .confirm-slider:focus-visible { outline:3px solid rgba(36,120,77,.3); outline-offset:3px; }
  .confirm-slider:disabled { opacity:.65; cursor:wait; }
  .confirm-slider-hint { display:block; color:var(--muted); font-size:12px; font-weight:600; text-align:center; margin-top:8px; }
  .booking-main .hero-line { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .booking-main .hero-line > div:first-child { width:100%; }
  .booking-main .hero-line h1 { max-width:100%; text-wrap:balance; }
  .booking-main .hero-line p { margin-bottom:0; }
  .booking-main .session-chip { position:static; display:inline-flex; align-self:flex-start; margin:0; max-width:100%; }
  .calendar-grid { align-items:stretch; }
  .calendar-grid .calendar-date { display:flex; align-items:center; justify-content:center; text-align:center; font-size:16px; font-weight:700; line-height:1; padding:0; }
  .booking-main .cta-row { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  body.reschedule-page #existingBookingSummary { display:none; }
  body.reschedule-page #bookingFlow > .step-head:first-child,
  body.reschedule-page #bookingFlow > #centre,
  body.reschedule-page #bookingFlow > .services-head,
  body.reschedule-page #bookingFlow > .service-grid { display:none; }
  body.reschedule-page .booking-main #bookingArea { order:2; }
  body.reschedule-page .booking-main .hero-line { order:0; }
  body.reschedule-page .booking-layout > .summary-panel { order:3; }
  body.reschedule-page .confirm-slider-wrap { order:4; }
  body.reschedule-page #bookingSummary { border:1px solid #dfe8e5; }
  body.reschedule-page #previousBookingSummary { display:block; margin-top:16px; padding-top:14px; border-top:1px solid #e4ece9; }
  body.reschedule-page #bookingSummary .summary-list:not(.compact) > div:nth-child(-n+2) { display:none; }
}
@media (max-width:640px) {
  .confirm-slider-wrap { padding:16px; border-radius:16px; }
  body.reschedule-page .hero-line h1 { font-size:clamp(30px,8vw,38px); line-height:1.08; letter-spacing:-1.2px; }
  body.reschedule-page #returnToConfirmationBtn { display:flex; width:100%; justify-content:center; margin:0 0 12px; }
  .slot-grid-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .slot-grid-row .slot-btn { font-size:11px; padding-inline:4px; }
  .calendar-date { min-height:38px; font-size:14px; }
}

.privacy-footer { width:min(1240px,calc(100% - 48px)); margin:0 auto; padding:20px 0 28px; text-align:center; font-size:12px; color:var(--muted); }
.privacy-footer a { text-decoration:underline; text-underline-offset:3px; }
.brand { cursor:default; }