/* ============================================================================
   GURJAR HOSPITAL - STYLESHEET
   One file = one request = fast. Sections are marked with big banners like this.
   Tip: search (Ctrl+F) for a banner name, e.g. "SERVICE CARDS", to jump to it.
   Colours / fonts / sizes are the variables at the top (:root). Change them there.
   ========================================================================= */

/* ======================================================================
   VARIABLES (colours, fonts, sizes) - EDIT HERE FIRST
   ====================================================================== */
:root {
  --c-primary: #0e4a4d;  /* deep teal: headings, dark sections, header button */
  --c-primary-rgb: 14,74,77;
  --c-primary-light: #176468;  /* lighter teal: links, footer gradient, in-page WhatsApp button */
  --c-primary-light-rgb: 23,100,104;
  --c-accent: #6a58a6;  /* lavender: main call-to-action buttons, highlights */
  --c-accent-dark: #554591;  /* lavender hover */
  --c-accent-soft: #cdc3e8;  /* light lavender: decorations, soft borders */
  --c-accent-soft-rgb: 205,195,232;
  --c-tint: #ece8f6;  /* very light lavender: alternate section background */
  --c-bg: #fffcf6;  /* cream: page background */
  --c-bg-rgb: 255,252,246;
  --c-bg-alt: #f3eee3;  /* deeper cream: alternate section background */
  --c-card: #fffdf9;  /* card surface */
  --c-text: #263d3f;  /* body text */
  --c-muted: #587072;  /* secondary text */
  --c-line: #ddd8e8;  /* thin borders */
  --c-footer: #093c3e;  /* footer background */
  --c-footer-line: #1f5b5e;  /* footer divider lines */
  --c-on-dark: #e8f1ee;  /* text on dark teal */
  --c-on-dark-muted: #c3d6d2;  /* secondary text on dark teal */
  --c-hero-glow: #e3dcf3;  /* soft glow behind the home hero */
  --c-input-border: #b8c7c5;  /* form field border */
  --c-danger: #5b2a6e;  /* form error text */
  --c-white: #ffffff;  /* white */
  --c-white-rgb: 255,255,255;
  --c-whatsapp: #176468;  /* in-page WhatsApp buttons */
  --c-whatsapp-float: #25d366;   /* the floating WhatsApp button (official WhatsApp green) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;         /* card corner roundness */
  --container: 1160px;    /* maximum page width */
  --header-h: 72px;       /* header height */
  --dock-h: 52px;         /* height of the mobile Call / Book bar */
}

/* ======================================================================
   BASE / RESET
   Page-wide defaults: box sizing, body font + colour, headings, links, images.
   ====================================================================== */
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body {
  margin:0;
  font:400 1.0625rem/1.65 var(--font-body);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg {
  max-width:100%;
}
a {
  color:var(--c-primary-light);
}
h1,h2,h3 {
  font-family:var(--font-heading);
  color:var(--c-primary);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1 {
  font-size:clamp(2.3rem,5.2vw,3.9rem);
}
h2 {
  font-size:clamp(1.7rem,3.2vw,2.5rem);
}
h3 {
  font-size:1.3rem;
}
p {
  margin:0 0 1em;
  max-width:68ch;
}
img[data-fallback] {
  object-fit:contain;
}

/* ======================================================================
   LAYOUT HELPERS, ICONS, ACCESSIBILITY
   .wrap = centred page container used by every section. .ic = inline icons. .skip = "skip to content" link.
   ====================================================================== */
.wrap {
  width:min(var(--container),100% - 2.5rem);
  margin-inline:auto;
}
.ic {
  width:1.25em;
  height:1.25em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
:focus-visible {
  outline:3px solid var(--c-accent-soft);
  outline-offset:3px;
  border-radius:6px;
}
.skip {
  position:absolute;
  left:-999px;
  top:0;
  background:var(--c-primary);
  color:var(--c-white);
  padding:.6rem 1rem;
  z-index:100;
}
.skip:focus {
  left:0;
}

/* ======================================================================
   HEADER + NAVIGATION (all pages)
   Sticky top bar: logo (.brand), menu links (.nav), phone button (.nav-cta), hamburger (.burger) on phones.
   ====================================================================== */
.hdr {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(var(--c-bg-rgb),.94);
  backdrop-filter:blur(10px);
  transition:box-shadow .2s;
}
.hdr.s {
  box-shadow:0 6px 24px rgba(var(--c-primary-rgb),.1);
}
.hdr-in {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  gap:1rem;
}
.brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--c-primary);
  font:600 1.2rem/1.1 var(--font-heading);
}
.brand svg {
  width:40px;
  height:40px;
}
.brand small {
  display:block;
  font:500 .72rem var(--font-body);
  color:var(--c-muted);
  margin-top:.2rem;
}
.nav {
  display:flex;
  align-items:center;
  gap:.4rem;
}
.nav a:not(.btn) {
  padding:.5rem .85rem;
  border-radius:99px;
  text-decoration:none;
  color:var(--c-text);
  font-weight:500;
}
.nav a:not(.btn):hover {
  background:var(--c-bg-alt);
}
.nav a[aria-current] {
  background:var(--c-bg-alt);
  color:var(--c-primary);
  font-weight:600;
}
.nav-cta {
  margin-left:.5rem;
}
.burger {
  display:none;
  background:none;
  border:1px solid var(--c-line);
  border-radius:12px;
  width:44px;
  height:44px;
  color:var(--c-primary);
  cursor:pointer;
  place-items:center;
}
.brand img {
  width:44px;
  height:44px;
  flex:none;
  aspect-ratio:1/1;
  object-fit:contain;
  overflow:visible;
}

/* ======================================================================
   BUTTONS
   .btn + one colour class: btn-rose (lavender), btn-teal, btn-wa, btn-line (outline), btn-light, btn-ghost.
   ====================================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.35rem;
  border-radius:99px;
  font:600 1rem var(--font-body);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s,background .15s,color .15s;
  min-height:46px;
}
.btn:hover {
  transform:translateY(-2px);
}
.btn-rose {
  background:var(--c-accent);
  color:var(--c-white);
}
.btn-rose:hover {
  background:var(--c-accent-dark);
}
.btn-teal {
  background:var(--c-primary);
  color:var(--c-white);
}
.btn-wa {
  background:var(--c-whatsapp);
  color:var(--c-white);
}
.btn-line {
  border-color:var(--c-primary);
  color:var(--c-primary);
  background:transparent;
}
.btn-line:hover {
  background:var(--c-primary);
  color:var(--c-white);
}
.btn-light {
  background:var(--c-white);
  color:var(--c-primary);
}
.btn-ghost {
  border-color:rgba(var(--c-white-rgb),.55);
  color:var(--c-white);
}
.btn-ghost:hover {
  background:rgba(var(--c-white-rgb),.14);
}
.btns {
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

/* ======================================================================
   HOME: HERO BANNER
   Top section of the home page: badge, big heading, buttons and the arch-shaped hospital photo.
   ====================================================================== */
.hero {
  background:radial-gradient(800px 520px at 88% 25%,var(--c-hero-glow),transparent 70%),var(--c-bg-alt);
  padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);
  overflow:hidden;
}
.hero-in {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
}
.lead {
  font-size:1.2rem;
  color:var(--c-text);
  margin-bottom:1.6rem;
}
.live {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:99px;
  padding:.4rem .95rem;
  font-weight:600;
  font-size:.95rem;
  color:var(--c-primary);
  margin-bottom:1.3rem;
}
.live i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--c-whatsapp);
  box-shadow:0 0 0 0 rgba(var(--c-primary-light-rgb),.55);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow:0 0 0 10px rgba(var(--c-primary-light-rgb),0) }
  100% { box-shadow:0 0 0 0 rgba(var(--c-primary-light-rgb),0) }
}
.hero-a {
  position:relative;
  max-width:440px;
  margin-inline:auto;
  width:100%;
}
.chip {
  position:absolute;
  left:-6%;
  bottom:7%;
  display:flex;
  gap:.8rem;
  align-items:center;
  background:var(--c-card);
  border-radius:var(--radius);
  padding:.9rem 1.1rem;
  box-shadow:0 16px 40px rgba(var(--c-primary-rgb),.18);
  max-width:260px;
  z-index:2;
}
.chip .ic {
  width:2rem;
  height:2rem;
  color:var(--c-accent);
}
.chip span {
  font-size:.88rem;
  line-height:1.35;
  color:var(--c-muted);
}
.chip b {
  display:block;
  color:var(--c-primary);
  font-size:1rem;
}
.hero-t>* {
  animation:rise .7s both;
}
@keyframes rise {
  from { opacity:0;transform:translateY(18px) }
}
.hero-a:before {
  content:"";
  position:absolute;
  inset:6% -5% -4% 8%;
  background:var(--c-tint);
  border-radius:210px 210px 32px 32px;
  transform:rotate(3deg);
}
.hero-img {
  position:relative;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:7/9;
  object-fit:cover;
  border-radius:210px 210px 28px 28px;
  box-shadow:0 24px 60px rgba(var(--c-primary-rgb),.22);
}

/* ======================================================================
   HOME: FEATURE STRIP
   Four short highlights that overlap the bottom of the hero.
   ====================================================================== */
.strip { position:relative; z-index:2; margin-top:-34px; }
.strip-in { display:grid; grid-template-columns:repeat(4,1fr); background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); box-shadow:0 18px 44px rgba(var(--c-primary-rgb),.12); overflow:hidden; }
.strip-i { display:flex; gap:.85rem; align-items:center; padding:1.1rem 1.3rem; border-right:1px solid var(--c-line); }
.strip-i:last-child { border-right:0; }
.strip-i .sic { margin:0; width:46px; height:46px; flex:none; border-radius:14px; }
.strip-i b { display:block; color:var(--c-primary); font:600 1rem/1.25 var(--font-body); }
.strip-i small { display:block; color:var(--c-muted); font-size:.85rem; line-height:1.3; }

/* ======================================================================
   SECTION WRAPPERS + HEADINGS
   .sec = one horizontal band of the page; .tint / .lav = coloured backgrounds; .sh = section heading block.
   ====================================================================== */
.sec {
  padding:clamp(3rem,7vw,5.5rem) 0;
}
.tint {
  background:var(--c-bg-alt);
}
.sh {
  max-width:720px;
  margin-bottom:2rem;
}
.lnk {
  font-weight:600;
  color:var(--c-accent);
  text-underline-offset:4px;
}
.more {
  margin:2rem 0 0;
}
.lav {
  background:var(--c-tint);
}
.sh .btns {
  margin-top:1rem;
}
.sh p {
  margin-bottom:0;
}

/* ======================================================================
   IMAGE + TEXT BLOCKS
   Two-column layout used on Home (intro), About (story) and the Contact photo. .pic = rounded photo frame.
   ====================================================================== */
.pic {
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(var(--c-primary-rgb),.14);
  background:var(--c-tint);
}
.pic img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--c-tint);
}
.split2 {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
}
.pic.tall {
  aspect-ratio:4/5;
}
.pic.tall img {
  object-position:50% 35%;
}

/* About page: show the complete hospital exterior without cropping. */
.about-story {
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
}
.about-story .pic.tall {
  width:100%;
  max-width:500px;
  aspect-ratio:4 / 3;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-story .pic.tall img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.pic.wide {
  aspect-ratio:4/3;
  margin:1.6rem 0 0;
}
.pic.wide img {
  object-position:50% 46%;
}

/* ======================================================================
   SERVICE CARDS (Home + Services)
   Grid of cards: picture (.sc-i), title, text and "Book an appointment" link. Cards line up using CSS subgrid.
   ====================================================================== */
.svc {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.3rem;
  align-items:stretch;
  row-gap:1.3rem;
}
.sc {
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;
  display:grid;
  flex-direction:column;
  height:auto;
  grid-row:span 4;
  grid-template-rows:subgrid;
  row-gap:0;
}
.tint .sc {
  border-color:transparent;
}
.sc p {
  margin:0;
  color:var(--c-muted);
}
.sic {
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--c-tint);
  color:var(--c-accent);
  margin-bottom:1rem;
}
.sic .ic {
  width:26px;
  height:26px;
}
.sc-i {
  position:relative;
  aspect-ratio:4/3;
  background:var(--c-tint);
  flex:none;
  overflow:visible;
  border-radius:0;
}
.sc-i img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  display:block;
  position:absolute;
  inset:0;
  border-radius:0;
}
.sc-i .sic {
  position:absolute;
  left:1rem;
  bottom:-26px;
  margin:0;
  background:var(--c-primary);
  color:var(--c-white);
  border:4px solid var(--c-card);
  width:56px;
  height:56px;
}
.sc-b {
  padding:2.2rem 1.6rem 1.5rem;
  flex:1;
  display:contents;
  flex-direction:column;
}
.sc-b h3 {
  margin-bottom:.55rem;
  padding-top:2.2rem;
  margin:0 0 .55rem;
}
.sc-b p {
  margin:0;
  padding-bottom:1rem;
}
.sc-l {
  margin-top:auto;
  font-weight:600;
  color:var(--c-accent);
  text-decoration:none;
  display:inline-flex;
  gap:.4rem;
  align-items:center;
}
.sc-l:after {
  content:"\2192";
  transition:transform .15s;
}
.sc-l:hover:after {
  transform:translateX(4px);
}
.sc-l:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.sc-b>* {
  padding-inline:1.6rem;
}
.sc-b .sc-l {
  align-self:end;
  padding-bottom:1.5rem;
  margin:0;
}

/* ======================================================================
   HOME: "CARE FOR MOM, CARE FOR BABY" (teal tick panel)
   Left text + dark teal panel with ticks.
   ====================================================================== */
.why {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
}
.why-l {
  background:var(--c-primary);
  color:var(--c-on-dark);
  border-radius:28px;
  padding:clamp(1.6rem,4vw,2.8rem);
}
.why-l h3 {
  color:var(--c-white);
}
.ticks {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
}
.ticks li {
  display:flex;
  gap:.8rem;
  align-items:flex-start;
}
.ticks .ic {
  color:var(--c-accent-soft);
  margin-top:.2rem;
  stroke-width:2.4;
}

/* ======================================================================
   DOCTOR CARDS (Home + About)
   Photo on the left, name / role / qualification on the right.
   ====================================================================== */
.docs {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.3rem;
}
.doc {
  display:grid;
  gap:0;
  background:var(--c-card);
  border-radius:var(--radius);
  padding:0;
  align-items:stretch;
  overflow:hidden;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
}
.doc h3 {
  margin-bottom:.15rem;
}
.role {
  color:var(--c-accent);
  font-weight:600;
  margin-bottom:.5rem;
}
.exp {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  color:var(--c-primary);
  margin:0;
}
.exp .ic {
  color:var(--c-whatsapp);
}
.dock {
  display:none;
  background:var(--c-bg);
}
.lav .doc {
  background:var(--c-card);
  border-color:transparent;
}
.doc img {
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
  object-position:50% 20%;
  display:block;
}
.doc-b {
  padding:1.6rem;
  align-self:center;
}

/* ======================================================================
   TESTIMONIALS (Home + About)
   Patient review cards with small round photo or initial.
   ====================================================================== */
.tes {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.3rem;
}
.tq {
  margin:0;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.2rem;
}
.tint .tq {
  border-color:transparent;
}
.tq blockquote {
  margin:0;
  font-family:var(--font-heading);
  font-size:1.06rem;
  line-height:1.6;
  color:var(--c-primary);
}
.tq figcaption {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-weight:600;
  color:var(--c-primary);
}
.av {
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--c-tint);
  color:var(--c-accent);
  display:grid;
  place-items:center;
  font:600 1rem var(--font-heading);
  object-fit:cover;
  flex:none;
}
img.av {
  border:2px solid var(--c-tint);
}
span.av {
  background:var(--c-tint);
  color:var(--c-primary);
}

/* ======================================================================
   ABOUT: CORE VALUES
   Four value cards with a coloured top bar.
   ====================================================================== */
.vals {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.3rem;
}
.vals article {
  background:var(--c-card);
  border-radius:var(--radius);
  padding:1.6rem;
  border-top:5px solid var(--c-accent);
}
.vals article:nth-child(2) {
  border-color:var(--c-primary);
}
.vals article:nth-child(3) {
  border-color:var(--c-accent-soft);
}
.vals article:nth-child(4) {
  border-color:var(--c-whatsapp);
}
.vals p {
  margin:0;
  color:var(--c-muted);
}

/* ======================================================================
   INNER-PAGE TITLE BAND (About, Services, Contact, Privacy)
   Dark teal band with the page heading. Also the privacy page text (.prose).
   ====================================================================== */
.phead {
  background:var(--c-primary);
  color:var(--c-on-dark);
  padding:clamp(2.8rem,6vw,4.5rem) 0;
  position:relative;
  overflow:hidden;
}
.phead:after {
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:var(--c-accent);
  opacity:.7;
  box-shadow:-120px 150px 0 -60px var(--c-primary-light);
}
.phead h1 {
  color:var(--c-white);
  margin-bottom:.3rem;
}
.phead p {
  font-size:1.15rem;
  margin:0;
  position:relative;
  z-index:1;
}
.prose h2 {
  font-size:1.4rem;
  margin-top:1.6rem;
}

/* ======================================================================
   SERVICES: "NOT SURE WHAT CARE YOU NEED?" BAND
   ====================================================================== */
.help {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.help p {
  margin:0;
}

/* ======================================================================
   HOME: VISIT US TILES
   Address / call / hours tiles near the bottom of the Home page.
   ====================================================================== */
.visit { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.3rem; }
.visit article { display:flex; flex-direction:column; gap:.6rem; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); padding:1.5rem; }
.visit h3 { display:flex; align-items:center; gap:.6rem; font-size:1.15rem; margin:0; }
.visit h3 .ic { color:var(--c-accent); }
.visit p { margin:0; color:var(--c-muted); }
.visit .btns { margin-top:auto; padding-top:.7rem; }

/* ======================================================================
   CONTACT: APPOINTMENT FORM + CONTACT DETAILS
   Form card (.card), field styles, success panel (.ok) and the details list (.ilist).
   ====================================================================== */
.cgrid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.card {
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:24px;
  padding:clamp(1.4rem,3.5vw,2.4rem);
  box-shadow:0 20px 50px rgba(var(--c-primary-rgb),.08);
}
.card h2 {
  font-size:1.7rem;
}
.row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.fld {
  margin-bottom:1rem;
}
label {
  display:block;
  font-weight:600;
  color:var(--c-primary);
  margin-bottom:.35rem;
  font-size:.95rem;
}
input:not([type=checkbox]),select,textarea {
  width:100%;
  font:inherit;
  color:var(--c-text);
  padding:.75rem .9rem;
  border:1.5px solid var(--c-input-border);
  border-radius:12px;
  background:var(--c-white);
  min-height:48px;
}
input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 4px rgba(var(--c-accent-soft-rgb),.7);
}
.bad {
  border-color:var(--c-accent)!important;
}
.chk {
  display:flex;
  gap:.7rem;
  font-weight:400;
  font-size:.95rem;
  align-items:flex-start;
  background:var(--c-card);
}
.chk input {
  width:20px;
  height:20px;
  margin-top:.2rem;
  accent-color:var(--c-accent);
  flex:none;
}
.err {
  color:var(--c-danger);
  font-weight:600;
  background:var(--c-tint);
  border-radius:10px;
  padding:.6rem .9rem;
}
.note {
  margin:1rem 0 0;
  font-size:.92rem;
  color:var(--c-muted);
}
.ok {
  text-align:center;
}
.ok .btns {
  justify-content:center;
}
.ok p {
  margin-inline:auto;
}
.ok:focus {
  outline:none;
}
.info p {
  color:var(--c-muted);
}
.ilist {
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:1.1rem;
}
.ilist li {
  display:flex;
  gap:.9rem;
  align-items:flex-start;
}
.ilist .ic {
  width:1.6rem;
  height:1.6rem;
  color:var(--c-accent);
  margin-top:.1rem;
}
.ilist a {
  font-weight:600;
  color:var(--c-primary);
}

/* ======================================================================
   CONTACT: GOOGLE MAP
   Responsive map frame (height is set with --map-h).
   ====================================================================== */
.map {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--c-line);
  background:var(--c-white);
}
.map iframe {
  display:block;
  width:100%;
  height:min(var(--map-h,440px),75vw);
  border:0;
}

/* ======================================================================
   "SCHEDULE AN APPOINTMENT" BAND (above footer, all pages)
   ====================================================================== */
.callband {
  background:linear-gradient(120deg,var(--c-primary),var(--c-primary-light));
  color:var(--c-on-dark);
  padding:clamp(2.2rem,5vw,3.4rem) 0;
}
.callband h2 {
  color:var(--c-white);
  margin-bottom:.3rem;
}
.callband p {
  margin:0;
}
.callband-in {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}
.callband .btn-wa {
  background:var(--c-tint);
  color:var(--c-primary);
}
.callband .btn-light {
  background:var(--c-bg);
}

/* ======================================================================
   FOOTER (all pages)
   ====================================================================== */
.ftr {
  background:var(--c-footer);
  color:var(--c-on-dark-muted);
  padding-top:3rem;
  font-size:.98rem;
}
.ftr a {
  color:var(--c-on-dark);
}
.ftr h3 {
  color:var(--c-white);
  font:600 1.05rem var(--font-body);
}
.ftr-in {
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1.2fr;
  gap:2rem;
}
.ftr ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5rem;
}
.brand-l {
  color:var(--c-white);
  margin-bottom:1rem;
}
.big {
  font:600 1.3rem var(--font-heading);
  color:var(--c-accent-soft);
}
.soc {
  display:flex;
  gap:.6rem;
}
.soc a {
  width:42px;
  height:42px;
  border:1px solid var(--c-footer-line);
  border-radius:50%;
  display:grid;
  place-items:center;
}
.soc a:hover {
  background:var(--c-accent);
  border-color:var(--c-accent);
}
.copy {
  border-top:1px solid var(--c-footer-line);
  margin-top:2.5rem;
  padding:1.2rem 0 5rem;
  font-size:.9rem;
}
.brand-l img {
  width:44px;
  height:44px;
}

/* ======================================================================
   MOBILE QUICK BAR (Call / Book, phones only)
   Fixed to the bottom of phone screens.
   ====================================================================== */

/* ======================================================================
   FLOATING WHATSAPP BUTTON (all pages, bottom-left)
   Green round button; opens WhatsApp with a ready-made message. Moves above the mobile bar on phones.
   ====================================================================== */
.wa-float { position:fixed; left:16px; bottom:16px; z-index:80; display:flex; align-items:center; height:58px; border-radius:99px; background:var(--c-whatsapp-float); color:#fff; text-decoration:none; font:600 .95rem/1 var(--font-body); box-shadow:0 10px 26px rgba(0,0,0,.24); transition:transform .15s, box-shadow .15s; }
.wa-float:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.3); }
.wa-float::before { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--c-whatsapp-float); animation:wa-ring 2.6s ease-out infinite; pointer-events:none; }
.wa-float svg { width:58px; height:58px; padding:14px; flex:none; fill:#fff; }
.wa-float span { padding-right:1.2rem; white-space:nowrap; }
@keyframes wa-ring { 0% { transform:scale(1); opacity:.75; } 100% { transform:scale(1.45); opacity:0; } }

/* ======================================================================
   404 PAGE
   ====================================================================== */
.nf { text-align:center; padding:clamp(3rem,8vw,6rem) 0; }
.nf p { margin-inline:auto; }
.nf .btns { justify-content:center; margin-top:1.4rem; }

/* ======================================================================
   RESPONSIVE RULES (tablet <= 900px, phone <= 600px)
   These adjust the sections above on smaller screens. Section names are in the comments.
   ====================================================================== */
@media (max-width: 900px) {
  .hero-in,.split,.why,.cgrid {
    grid-template-columns:1fr;
  }
  .ftr-in {
    grid-template-columns:1fr 1fr;
  }
  .hero-a {
    order:-1;
    max-width:320px;
    margin-bottom:1rem;
  }
  .chip {
    left:-10px;
  }
  .burger {
    display:grid;
  }
  .nav {
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    background:var(--c-white);
    flex-direction:column;
    align-items:stretch;
    padding:1rem 1.25rem 1.4rem;
    border-bottom:1px solid var(--c-line);
    box-shadow:0 18px 30px rgba(var(--c-primary-rgb),.12);
    display:none;
  }
  .nav.open {
    display:flex;
  }
  .nav a:not(.btn) {
    padding:.85rem 1rem;
  }
  .nav-cta {
    margin:.6rem 0 0;
  }
  .dock {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    box-shadow:0 -6px 24px rgba(var(--c-primary-rgb),.15);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .dock a {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.15rem;
    padding:.6rem 0;
    text-decoration:none;
    font-weight:600;
    font-size:.8rem;
    color:var(--c-primary);
  }
  .d-wa {
    color:var(--c-whatsapp)!important;
  }
  .d-book {
    background:var(--c-accent);
    color:var(--c-white)!important;
  }
  .split2 {
    grid-template-columns:1fr;
  }
  .pic.tall {
    aspect-ratio:4/3;
  }
  .about-story .pic.tall {
    max-width:460px;
    width:100%;
  }
  .strip-in { grid-template-columns:1fr 1fr; }
  .strip-i:nth-child(2) { border-right:0; }
  .strip-i:nth-child(-n+2) { border-bottom:1px solid var(--c-line); }
  .wa-float { bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
  .dock { grid-template-columns:1fr 1.7fr; }
}
@media (max-width: 600px) {
  .row {
    grid-template-columns:1fr;
  }
  .ftr-in {
    grid-template-columns:1fr;
  }
  .doc {
    flex-direction:column;
    grid-template-columns:1fr;
  }
  .brand small {
    display:none;
  }
  .btns .btn {
    flex:1 1 100%;
  }
  .chip {
    position:absolute;
    margin:0;
    max-width:230px;
  }
  .doc img {
    height:320px;
  }
  .pic.wide {
    aspect-ratio:1/1;
  }
  .about-story .pic.tall {
    width:94%;
    max-width:420px;
    aspect-ratio:4 / 3;
    margin-inline:auto;
  }
  .strip { margin-top:-22px; }
  .strip-in { grid-template-columns:1fr; }
  .strip-i { border-right:0; border-bottom:1px solid var(--c-line); }
  .strip-i:last-child { border-bottom:0; }
  .wa-float span { display:none; }
  .wa-float { left:12px; }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}