/* =============================================================================
   LAW VIJAY — CLIENT CSS  (shared across all client pages)
============================================================================= */

/* Font: Elms Sans (variable, Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:wght@100..900&display=swap');

/* 1. TOKENS */
:root {
  --teal:        #0D9488;
  --teal-hover:  #0F766E;
  --teal-light:  #CCFBF1;
  --teal-subtle: #F0FDFA;
  --slate-900:   #0F172A;
  --slate-700:   #334155;
  --slate-500:   #64748B;
  --slate-200:   #E2E8F0;
  --slate-100:   #F1F5F9;
  --slate-50:    #F8FAFC;
  --white:       #FFFFFF;
  --text:        #1E293B;
  --muted:       #64748B;
  --border:      #E2E8F0;
  --error:       #DC2626;
  --error-bg:    #FEF2F2;
  --success:     #15803D;
  --success-bg:  #F0FDF4;
  --shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:   0 8px 28px rgba(15,23,42,.12);
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --header-h:    64px;
}

/* 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:var(--font); font-size:.9375rem; background:var(--slate-50); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p { margin:0; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; }
.container { max-width:1180px; margin:0 auto; padding:0 1.5rem; }

/* 3. SITE HEADER — unified across ALL pages */

/* ── Header bar ── */
.sh-header {
  position:sticky; top:0; z-index:200;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.sh-header__inner {
  display:flex; align-items:center;
  justify-content:space-between;
  height:72px; gap:1rem;
  flex-wrap:nowrap; overflow:visible;
}

/* ── Logo ── */
.sh-logo {
  display:flex; align-items:center; gap:.625rem;
  font-size:1.5rem; letter-spacing:-.02em;
  text-decoration:none; flex-shrink:0;
  order:1; line-height:1;
}
.sh-logo img { height:36px; }
.sh-logo:hover { text-decoration:none; }
.sh-logo__legal {
  font-family: "Elms Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 212;
  font-style: normal;
  color:var(--text);
}
.sh-logo__vijay {
  font-family: "Elms Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 794;
  font-style: normal;
  color:var(--teal);
  letter-spacing: 0.004em;
}

@media (max-width:480px) {
  .sh-logo { font-size:1.2rem; }
  .sh-logo img { height:28px; }
}

/* ── Desktop nav (centre) ── */
.sh-nav {
  display:flex; align-items:center; gap:1.75rem;
  flex:1; justify-content:center;
  min-width:0; overflow:hidden;
  order:2;
}
.sh-nav__link {
  font-size:.875rem; font-weight:500; color:var(--text);
  text-decoration:none;
  transition:color .15s;
  white-space:nowrap; flex-shrink:0;
}
.sh-nav__link:hover,
.sh-nav__link.active { color:var(--teal); text-decoration:none; }

/* ── Right action buttons ── */
.sh-actions {
  display:flex; align-items:center; gap:.75rem;
  flex-shrink:0; order:3;
}

/* ── Shared button base ── */
.sh-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1.35rem; border-radius:999px;
  font-size:.875rem; font-weight:600; white-space:nowrap;
  text-decoration:none !important; line-height:1;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
  cursor:pointer;
}
.sh-btn:hover { text-decoration:none; }

.sh-btn--outline {
  background:transparent;
  color:#0D9488 !important;
  border:2px solid #0D9488;
  text-decoration:none !important;
}
.sh-btn--outline:hover { background:#F0FDFA; text-decoration:none !important; }

.sh-btn--primary {
  background:#0D9488 !important;
  color:#ffffff !important;
  border:2px solid #0D9488;
  box-shadow:0 4px 12px rgba(13,148,136,.25);
  text-decoration:none !important;
}
.sh-btn--primary:hover { background:#0F766E !important; border-color:#0F766E; }

.sh-btn--full { width:100%; justify-content:center; }

/* ── Legacy aliases for index.html hero buttons ── */
/* These map old btn-primary/btn-outline class names to the same sh-btn styles */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1.4rem; border-radius:999px;
  font-size:.9rem; font-weight:600; white-space:nowrap;
  text-decoration:none !important; line-height:1; cursor:pointer;
  background:#0D9488 !important;
  color:#ffffff !important;
  border:2px solid #0D9488;
  box-shadow:0 4px 12px rgba(13,148,136,.25);
  transition:background .15s, border-color .15s;
}
.btn-primary:hover { background:#0F766E !important; border-color:#0F766E; text-decoration:none; }

.btn-outline {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1.4rem; border-radius:999px;
  font-size:.9rem; font-weight:600; white-space:nowrap;
  text-decoration:none !important; line-height:1; cursor:pointer;
  background:transparent;
  color:#0D9488 !important;
  border:2px solid #0D9488;
  transition:background .15s;
}
.btn-outline:hover { background:#F0FDFA; text-decoration:none; }

/* ── Hamburger button (hidden desktop, visible mobile) ── */
.sh-hamburger {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px;
  background:none; border:none; cursor:pointer; padding:4px;
  order:0; flex-shrink:0;
}
.sh-hamburger span {
  display:block; height:2px; width:100%;
  background:var(--text); border-radius:2px;
  transition:transform .25s, opacity .25s;
}
.sh-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.sh-hamburger.open span:nth-child(2) { opacity:0; }
.sh-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
.sh-drawer {
  display:none;
  position:fixed; top:72px; left:0; bottom:0;
  width:280px; max-width:85vw;
  background:#fff; border-right:1px solid var(--border);
  box-shadow:4px 0 24px rgba(15,23,42,.12);
  z-index:199; overflow-y:auto;
  transform:translateX(-100%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .25s ease, visibility 0s linear .25s;
}
.sh-drawer.open {
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .25s ease, visibility 0s;
}

.sh-drawer__inner {
  display:flex; flex-direction:column;
  padding:1.5rem 1.25rem; gap:1.5rem; min-height:100%;
}
.sh-drawer__nav {
  display:flex; flex-direction:column; gap:.25rem;
}
.sh-drawer__link {
  display:block; padding:.75rem .875rem;
  font-size:.9375rem; font-weight:500; color:var(--text);
  border-radius:8px; text-decoration:none;
  transition:background .12s, color .12s;
}
.sh-drawer__link:hover,
.sh-drawer__link.active {
  background:var(--teal-subtle); color:var(--teal);
  text-decoration:none;
}
.sh-drawer__actions {
  display:flex; flex-direction:column; gap:.625rem;
  margin-top:auto; padding-top:1.5rem;
  border-top:1px solid var(--border);
}

/* ── Overlay (behind drawer) ── */
.sh-overlay {
  display:none;
  position:fixed; inset:0; z-index:198;
  background:rgba(15,23,42,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s, visibility 0s linear .25s;
}
.sh-overlay.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s, visibility 0s;
}

/* ── User menu (logged in) ── */
.sh-user-menu { position:relative; order:3; flex-shrink:0; }
.sh-user-menu__trigger {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .875rem; border:1.5px solid var(--border);
  border-radius:999px; background:#fff;
  cursor:pointer; font-size:.875rem; font-weight:500; color:var(--text);
  transition:border-color .15s, background .15s;
}
.sh-user-menu__trigger:hover { border-color:var(--teal); }
.sh-user-menu__avatar {
  width:26px; height:26px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; flex-shrink:0;
}
.sh-user-menu__name { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-user-menu__chevron { width:13px; height:13px; color:var(--muted); transition:transform .2s; }
.sh-user-menu__trigger:hover .sh-user-menu__chevron { transform:rotate(180deg); }

.sh-user-menu__dropdown {
  display:none; position:fixed;
  background:#fff; border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.12);
  min-width:220px; overflow:hidden; z-index:9999;
}
.sh-user-menu__dropdown.open { display:block; }

.sh-user-menu__info {
  padding:.875rem 1rem .625rem;
  border-bottom:1px solid var(--border);
}
.sh-user-menu__info-name  { font-size:.9rem; font-weight:600; color:var(--text); }
.sh-user-menu__info-phone { font-size:.78rem; color:var(--muted); margin-top:.15rem; }

.sh-user-menu__item {
  display:block; padding:.7rem 1rem;
  font-size:.875rem; color:var(--text);
  text-decoration:none; transition:background .12s;
}
.sh-user-menu__item:hover { background:var(--slate-50); text-decoration:none; color:var(--text); }
.sh-user-menu__item--danger { color:#dc2626; }
.sh-user-menu__item--danger:hover { background:#fef2f2; color:#dc2626; }

/* ── Responsive — show hamburger, hide desktop nav ── */
@media (max-width: 1024px) {
  .sh-hamburger { display:flex; }
  .sh-nav       { display:none; }
  .sh-drawer    { display:block; }
  .sh-overlay   { display:block; }
  .sh-actions .sh-btn--outline { display:none; }
}

/* 4. HERO */
.ch-hero {
  background:linear-gradient(135deg, var(--slate-900) 0%, #1a2744 60%, #0e2040 100%);
  color:var(--white); padding:4.5rem 0 3.5rem; text-align:center;
}
.ch-hero__eyebrow {
  font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-light); margin-bottom:.75rem;
}
.ch-hero__title {
  font-size:clamp(1.9rem, 4vw, 3rem); font-weight:700;
  letter-spacing:-.02em; line-height:1.15; margin-bottom:.875rem;
}
.ch-hero__title span { color:var(--teal-light); }
.ch-hero__sub {
  font-size:1rem; color:rgba(255,255,255,.7);
  max-width:520px; margin:0 auto 2.25rem; line-height:1.65;
}

/* 5. SEARCH BAR */
.search-bar {
  max-width:580px; margin:0 auto; position:relative; display:flex; align-items:center;
}
.search-bar__icon { position:absolute; left:1rem; color:var(--muted); pointer-events:none; }
.search-bar__icon svg { width:18px; height:18px; }
.search-bar__input {
  width:100%; padding:.875rem 1rem .875rem 3rem;
  border:none; border-radius:var(--radius-full);
  font-size:.9375rem; font-family:var(--font);
  background:var(--white); color:var(--text); outline:none;
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  transition:box-shadow .2s;
}
.search-bar__input:focus { box-shadow:0 4px 24px rgba(0,0,0,.28), 0 0 0 3px rgba(13,148,136,.3); }
.search-bar__input::placeholder { color:#94A3B8; }
.search-bar__btn {
  position:absolute; right:.375rem;
  background:var(--teal); color:var(--white); border:none;
  border-radius:var(--radius-full); padding:.5rem 1.25rem;
  font-size:.875rem; font-weight:600; cursor:pointer; transition:background .15s;
}
.search-bar__btn:hover { background:var(--teal-hover); }

/* 6. CATEGORY PILLS */
.cat-section { padding:2rem 0 .5rem; }
.cat-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.cat-pill {
  padding:.4rem 1rem; border-radius:var(--radius-full);
  border:1.5px solid var(--border); background:var(--white);
  color:var(--muted); font-size:.825rem; font-weight:500; cursor:pointer;
  transition:all .15s;
}
.cat-pill:hover { border-color:var(--teal); color:var(--teal); }
.cat-pill.active { background:var(--teal); border-color:var(--teal); color:var(--white); }

/* 7. SERVICES GRID */
.services-section { padding:1.25rem 0 5rem; }
.services-section__hd {
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.25rem;
}
.services-section__title { font-size:1.05rem; font-weight:600; }
.services-section__count { font-size:.825rem; color:var(--muted); }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

.service-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  text-decoration:none; color:inherit;
}
.service-card:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:var(--teal); text-decoration:none;
}
.service-card__img {
  height:136px;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-hover) 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.service-card__img img { width:100%; height:100%; object-fit:cover; }
.service-card__img-placeholder svg { width:36px; height:36px; color:rgba(255,255,255,.45); }

.service-card__body { padding:1.125rem; flex:1; display:flex; flex-direction:column; gap:.4rem; }
.service-card__cat { font-size:.7rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.05em; }
.service-card__name { font-size:.9375rem; font-weight:600; line-height:1.3; }
.service-card__desc { font-size:.825rem; color:var(--muted); line-height:1.5; flex:1; }
.service-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.75rem; border-top:1px solid var(--border); margin-top:.4rem;
}
.service-card__price { font-size:.9rem; font-weight:700; }
.service-card__price span { font-size:.75rem; font-weight:400; color:var(--muted); }
.service-card__days { font-size:.75rem; color:var(--muted); display:flex; align-items:center; gap:.3rem; }
.service-card__days svg { width:12px; height:12px; }

.services-empty { grid-column:1/-1; text-align:center; padding:4rem 2rem; color:var(--muted); }
.services-empty svg { width:36px; height:36px; margin:0 auto .75rem; }

/* 8. HOW IT WORKS (homepage teaser) */
.hiw-teaser { padding:4rem 0 5rem; background:var(--white); }
.section-label { font-size:.75rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.4rem; }
.section-title { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; margin-bottom:.625rem; }
.section-sub   { font-size:.9375rem; color:var(--muted); max-width:520px; line-height:1.65; }

.hiw-steps {
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative; margin-top:2.5rem;
}
.hiw-steps::before {
  content:''; position:absolute; top:26px; left:10%; right:10%;
  height:2px; background:var(--border); z-index:0;
}
.hiw-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 .5rem; position:relative; z-index:1; }
.hiw-step__icon {
  width:52px; height:52px; border-radius:50%;
  background:var(--white); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); box-shadow:var(--shadow-sm); margin-bottom:1rem;
  transition:all .2s;
}
.hiw-step__icon svg { width:20px; height:20px; }
.hiw-step.active .hiw-step__icon { background:var(--teal); border-color:var(--teal); color:var(--white); box-shadow:0 4px 16px rgba(13,148,136,.35); }
.hiw-step__title { font-size:.8125rem; font-weight:600; margin-bottom:.25rem; }
.hiw-step__desc  { font-size:.75rem; color:var(--muted); line-height:1.4; }

/* 9. SERVICE DETAIL PAGE */
.service-hero {
  background:linear-gradient(135deg, var(--slate-900) 0%, #1a2744 100%);
  color:var(--white); padding:3.5rem 0;
}
.service-hero__inner { display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:center; }
.service-hero__cat {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-full); padding:.3rem .875rem;
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:1.25rem;
}
.service-hero__title { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; letter-spacing:-.02em; margin-bottom:.875rem; line-height:1.15; }
.service-hero__desc  { font-size:1rem; color:rgba(255,255,255,.72); line-height:1.65; margin-bottom:1.75rem; }
.service-hero__meta  { display:flex; gap:2rem; }
.service-hero__meta-item { display:flex; flex-direction:column; gap:.2rem; }
.service-hero__meta-label { font-size:.7rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.04em; }
.service-hero__meta-value { font-size:1.2rem; font-weight:700; }
.service-hero__img {
  border-radius:var(--radius-lg); overflow:hidden; height:220px;
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
}
.service-hero__img img  { width:100%; height:100%; object-fit:cover; }
.service-hero__img svg  { width:56px; height:56px; color:rgba(255,255,255,.2); }

.service-body { padding:3.5rem 0 5rem; }
.service-body__grid { display:grid; grid-template-columns:1fr 320px; gap:2.5rem; align-items:start; }
.service-body__desc { font-size:.9375rem; color:var(--muted); line-height:1.75; white-space:pre-line; }
.service-body__needs { margin-top:2rem; }
.service-body__needs h3 { font-size:.9375rem; font-weight:700; margin-bottom:.875rem; }
.service-body__need-item { display:flex; align-items:center; gap:.625rem; font-size:.875rem; color:var(--muted); padding:.35rem 0; }
.service-body__need-item svg { width:15px; height:15px; color:var(--teal); flex-shrink:0; }

.service-book-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-md);
  position:sticky; top:calc(var(--header-h) + 1.5rem);
}
.service-book-card__label { font-size:.75rem; color:var(--muted); margin-bottom:.2rem; }
.service-book-card__price { font-size:1.9rem; font-weight:700; margin-bottom:.25rem; }
.service-book-card__days  { font-size:.825rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; margin-bottom:1.5rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); }
.service-book-card__days svg { width:14px; height:14px; }
.service-book-card__note  { font-size:.775rem; color:var(--muted); text-align:center; margin-top:.75rem; }

/* 10. HOW IT WORKS PAGE */
.hiw-page-hero { background:linear-gradient(135deg,var(--slate-900) 0%,#1a2744 100%); color:var(--white); padding:4rem 0; text-align:center; }
.hiw-timeline { padding:5rem 0; }
.hiw-timeline__list { max-width:700px; margin:0 auto; }
.hiw-tl-step { display:grid; grid-template-columns:72px 1fr; gap:0; }
.hiw-tl-left { display:flex; flex-direction:column; align-items:center; }
.hiw-tl-icon { width:52px; height:52px; border-radius:50%; background:var(--teal); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(13,148,136,.3); flex-shrink:0; z-index:1; }
.hiw-tl-icon svg { width:22px; height:22px; }
.hiw-tl-line { width:2px; background:var(--border); flex:1; margin:4px 0; }
.hiw-tl-step:last-child .hiw-tl-line { display:none; }
.hiw-tl-content { padding:.1rem 0 3rem 1.75rem; }
.hiw-tl-step:last-child .hiw-tl-content { padding-bottom:0; }
.hiw-tl-num { font-size:.72rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }
.hiw-tl-title { font-size:1.15rem; font-weight:700; margin-bottom:.625rem; }
.hiw-tl-desc { font-size:.9rem; color:var(--muted); line-height:1.65; }

.hiw-faq { padding:4rem 0 5rem; background:var(--white); }
.hiw-faq__list { max-width:700px; margin:1.75rem auto 0; display:flex; flex-direction:column; gap:.75rem; }
.hiw-faq__item { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.hiw-faq__q { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; font-size:.9375rem; font-weight:600; cursor:pointer; background:var(--white); border:none; width:100%; text-align:left; color:var(--text); transition:background .12s; }
.hiw-faq__q:hover { background:var(--slate-50); }
.hiw-faq__q svg { width:17px; height:17px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
.hiw-faq__item.open .hiw-faq__q svg { transform:rotate(180deg); }
.hiw-faq__a { display:none; padding:0 1.25rem 1rem; font-size:.875rem; color:var(--muted); line-height:1.65; }
.hiw-faq__item.open .hiw-faq__a { display:block; }

/* 11. SIGNUP PAGE */
.signup-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--slate-900) 0%,#1a2744 100%); padding:2rem; }
.signup-wrap { width:100%; max-width:560px; }
.signup-brand { text-align:center; margin-bottom:1.75rem; }
.signup-brand__name    { font-size:1.6rem; font-weight:700; color:var(--white); }
.signup-brand__tagline { font-size:.875rem; color:rgba(255,255,255,.5); margin-top:.25rem; }
.signup-card { background:var(--white); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.28); overflow:hidden; }
.signup-card__header { padding:1.75rem 1.75rem 0; }
.signup-card__title { font-size:1.15rem; font-weight:700; margin-bottom:.3rem; }
.signup-card__sub   { font-size:.875rem; color:var(--muted); }
.signup-card__body  { padding:1.5rem 1.75rem 1.75rem; display:flex; flex-direction:column; gap:1rem; }
.signup-row { display:grid; grid-template-columns:1fr 1fr; gap:.875rem; }
.signup-group { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.signup-label { font-size:.825rem; font-weight:600; color:var(--text); }
.signup-input {
  width:100%; min-width:0; box-sizing:border-box;
  padding:.65rem .875rem; border:1.5px solid var(--border); border-radius:8px;
  font-size:.9rem; font-family:var(--font); color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.signup-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.signup-input::placeholder { color:#94A3B8; }
.signup-password-wrap { position:relative; }
.signup-password-wrap .signup-input { width:100%; padding-right:4rem; }
.signup-password-toggle {
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:var(--teal); font-size:.8rem; font-weight:700;
  cursor:pointer; padding:.25rem;
}
.signup-password-rules { list-style:none; padding:0; margin:.55rem 0 0; display:grid; gap:.25rem; font-size:.78rem; color:var(--muted); }
.signup-password-rules li::before { content:'○'; display:inline-block; width:1.1rem; font-weight:700; }
.signup-password-rules li.valid { color:var(--success); }
.signup-password-rules li.valid::before { content:'✓'; }
.signup-password-rules li.invalid { color:var(--error); }
.signup-password-rules li.invalid::before { content:'✕'; }
.signup-phone-row { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; transition:border-color .15s; }
.signup-phone-row:focus-within { border-color:var(--teal); }
.signup-phone-prefix { padding:.65rem .875rem; font-weight:600; font-size:.9rem; background:var(--slate-50); border-right:1px solid var(--border); flex-shrink:0; color:var(--text); }
.signup-phone-input { border:none; outline:none; padding:.65rem .875rem; font-size:.9rem; font-family:var(--font); flex:1 1 auto; width:100%; min-width:0; background:transparent; color:var(--text); }
.signup-btn { width:100%; padding:.825rem; background:var(--teal); color:var(--white); border:none; border-radius:8px; font-size:.9375rem; font-weight:600; cursor:pointer; transition:background .15s; }
.signup-btn:hover { background:var(--teal-hover); }
.signup-btn:disabled { opacity:.6; cursor:not-allowed; }
.signup-alert { padding:.625rem .875rem; border-radius:6px; font-size:.825rem; font-weight:500; display:none; }
.signup-alert.error   { display:block; background:var(--error-bg); color:var(--error); }
.signup-alert.success { display:block; background:var(--success-bg); color:var(--success); }
.signup-login { text-align:center; font-size:.825rem; color:var(--muted); margin-top:.25rem; }
.signup-login a { color:var(--teal); font-weight:600; }

/* 12. ACCOUNT PAGE */
.account-page { padding:2.5rem 0 5rem; }
.account-card { max-width:540px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.account-card__header { padding:1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:1rem; }
.account-card__avatar { width:52px; height:52px; border-radius:50%; background:var(--teal); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; flex-shrink:0; }
.account-card__name  { font-size:1.05rem; font-weight:600; }
.account-card__phone { font-size:.825rem; color:var(--muted); }
.account-card__body  { padding:1.75rem; display:flex; flex-direction:column; gap:1.1rem; }
.account-card__footer { padding:1.25rem 1.75rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.75rem; }

.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-label { font-size:.825rem; font-weight:600; color:var(--text); }
.form-input {
  padding:.6rem .875rem; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.9rem; font-family:var(--font); color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.form-input::placeholder { color:#94A3B8; }
.form-alert { padding:.6rem .875rem; border-radius:var(--radius-sm); font-size:.825rem; font-weight:500; display:none; }
.form-alert.error   { display:block; background:var(--error-bg); color:var(--error); }
.form-alert.success { display:block; background:var(--success-bg); color:var(--success); }

/* 13. BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.375rem; border-radius:var(--radius-full);
  font-size:.875rem; font-weight:600; cursor:pointer; border:1.5px solid transparent;
  transition:all .15s; text-decoration:none; white-space:nowrap;
}
.btn svg { width:15px; height:15px; }
.btn--primary { background:var(--teal); color:var(--white); border-color:var(--teal); }
.btn--primary:hover { background:var(--teal-hover); border-color:var(--teal-hover); text-decoration:none; }
.btn--outline { background:transparent; color:var(--teal); border-color:var(--teal); }
.btn--outline:hover { background:var(--teal-subtle); text-decoration:none; }
.btn--ghost  { background:transparent; color:var(--text); border-color:var(--border); }
.btn--ghost:hover  { background:var(--slate-50); text-decoration:none; }
.btn--danger { background:var(--error); color:var(--white); border-color:var(--error); }
.btn--sm  { padding:.4rem .875rem; font-size:.8rem; }
.btn--lg  { padding:.825rem 2rem; font-size:.9375rem; }
.btn--full { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* 14. FOOTER */
.ch-footer { background:var(--slate-900); color:var(--white); padding:3.5rem 0 2rem; }
.ch-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.ch-footer__brand { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.ch-footer__tagline { font-size:.825rem; color:rgba(255,255,255,.5); line-height:1.6; max-width:260px; }
.ch-footer__heading { font-size:.72rem; font-weight:600; color:var(--teal-light); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.875rem; }
.ch-footer__links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.ch-footer__links a { color:rgba(255,255,255,.6); font-size:.85rem; transition:color .15s; }
.ch-footer__links a:hover { color:var(--white); text-decoration:none; }
.ch-footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; font-size:.8rem; color:rgba(255,255,255,.35); text-align:center; }

/* 15. RESPONSIVE */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .hiw-steps { grid-template-columns:repeat(3,1fr); }
  .hiw-steps::before { display:none; }
  .service-hero__inner { grid-template-columns:1fr; }
  .service-hero__img { display:none; }
  .service-body__grid { grid-template-columns:1fr; }
  .service-book-card { position:static; }
  .ch-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .services-grid { grid-template-columns:1fr; }
  .ch-nav { display:none; }
  .hiw-steps { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
  .ch-footer__grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .signup-page { padding:1rem; align-items:flex-start; min-height:100svh; }
  .signup-wrap { max-width:100%; margin-top:1rem; }
  .signup-brand { margin-bottom:1.25rem; }
  .signup-card { border-radius:16px; }
  .signup-card__header { padding:1.4rem 1.25rem 0; }
  .signup-card__body { padding:1.25rem; }
  .signup-row { grid-template-columns:1fr; }
  .signup-input, .signup-phone-input { font-size:16px; }
  .signup-btn { min-height:44px; }
}
@media (max-width:500px) {
  .hiw-steps { grid-template-columns:1fr; }
}