/* =====================================================================
   Fitzmann Medical & Dental Clinic — logo-matched theme
   Load AFTER the page's own <style> (and after the Tailwind script):
   <link rel="stylesheet" href="fitzmann-medical-theme.css">
   Logo colours: Sky blue #0a9be6 · Leaf green #78bd3b
   ===================================================================== */

:root{
  /* cool, clean clinical surfaces */
  --paper:#f5fafc;
  --paper-deep:#e9f3f8;
  --card:#ffffff;

  --ink:#0e2230;
  --ink-soft:#415868;

  /* "teal" slots -> logo blue (deepened where text sits on it) */
  --teal:#0877b9;          /* buttons: white text passes AA */
  --teal-deep:#0b3f66;     /* headings accents, dark panels */
  --teal-mist:#dcf0fb;

  /* "clay" slots -> logo green */
  --clay:#5a9e24;          /* stars, icons, quote marks */
  --clay-deep:#2f6a14;     /* dark green panels (white text passes AA) */
  --clay-mist:#e5f4d6;

  --sky:#0a9be6;           /* exact logo blue, decorative */
  --leaf:#78bd3b;          /* exact logo green, decorative */
  --line:rgba(14,34,48,.13);

  --r-lg:20px;
  --r-xl:28px;

  /* ECG pulse from the logo, reused as a motif */
  --pulse-green:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14'%3E%3Cpath d='M0 8h8l3-7 5 12 3-8 2 3h9' fill='none' stroke='%235a9e24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pulse-wide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='60' viewBox='0 0 420 60'%3E%3Cpath d='M0 36h150l14-26 22 48 14-36 10 14h210' fill='none' stroke='%230a9be6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

::selection{background:var(--leaf);color:#0e2230}
:focus-visible{outline-color:var(--sky)}
.grain{opacity:.03}

/* ---------- Header: the logo's blue-over-green split as a rule ---------- */
.site-head{background:rgba(245,250,252,.95);border-bottom:0}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:linear-gradient(#0a9be6 0 50%,#78bd3b 50% 100%);
}
.brand-name{color:var(--teal-deep);letter-spacing:-.03em}
.main-nav a:hover,.mobile-menu a:hover{color:var(--teal)}

/* ---------- Type: editorial ---------- */
h1,h2,h3,.font-display{font-weight:500;letter-spacing:-.025em}
.hero h1{font-weight:500;font-size:clamp(2.6rem,5.8vw,4.3rem);line-height:1.04}
.hl{color:var(--teal);font-style:italic}
.section-head h2,.font-display.text-3xl{max-width:22ch}

/* section labels: sentence case with a small pulse mark */
.eyebrow,
.tracking-wide.uppercase{
  display:flex!important;align-items:center;gap:10px;
  text-transform:none!important;letter-spacing:.01em!important;
  font-size:15px!important;font-weight:600!important;color:var(--teal-deep)!important;
}
.eyebrow::before,
.tracking-wide.uppercase::before{
  content:"";width:30px;height:14px;flex:none;
  background:var(--pulse-green) center/contain no-repeat;
}
.section-head[style*="text-align:center"] .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn-teal{background:var(--teal)}
.btn-teal:hover{background:var(--teal-deep)}
.btn-light{background:#fff;color:var(--clay-deep)}
.link-arrow:hover{color:var(--teal)}
a[href="about.html"][style]{background:var(--teal-deep)!important}
a[href="about.html"][style]:hover{background:var(--teal)!important}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(55% 50% at 90% 6%, rgba(10,155,230,.16), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, rgba(120,189,59,.16), transparent 70%),
    var(--paper);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:18px;height:60px;pointer-events:none;
  background:var(--pulse-wide) repeat-x left center;opacity:.22;
}
.hero .wrap{position:relative;z-index:1}
.glow{background:var(--sky);opacity:.28}
.art-frame{border:0;box-shadow:0 30px 60px -28px rgba(11,63,102,.5)}
/* recolour the illustration */
.art-frame svg rect[fill="#fbf7ee"],
.art-frame svg rect[fill="#fffdf7"],
.art-frame svg circle[fill="#fffdf7"]{fill:#fff}
.art-frame svg [stroke="#e3d9c4"]{stroke:#cfe2ec}
.art-frame svg > path:last-child{fill:var(--leaf);opacity:1}   /* the plant goes leaf green */

/* ---------- Cards (Tailwind + custom) ---------- */
.rounded-3xl{border-radius:var(--r-lg)!important}
#services .rounded-3xl{background:#fff!important;transition:border-color .2s,transform .2s}
#services .rounded-3xl:hover{border-color:var(--sky)!important;transform:translateY(-3px)}
#services svg[stroke="var(--teal-deep)"]{stroke:var(--teal)}
.card,.quote,.step,.form-card{background:#fff}
.card .ic-lg,.meta-row .ic{color:var(--teal)}

/* About + quotes sit on a tinted field so white cards read as paper */
#about,.quotes{background:var(--paper-deep)!important}

/* ---------- Testimonials ---------- */
.quote .mark{color:var(--leaf);font-size:64px}
.stars{color:var(--clay)}
.quote footer{color:var(--teal-deep)}

/* ---------- FAQ ---------- */
.faq-list details{background:#fff;border-radius:var(--r-lg);transition:border-color .2s}
.faq-list details[open]{border-color:var(--sky)}
.faq-list .chev{color:var(--teal)}

/* ---------- Consulting band: deep green into deep blue ---------- */
.band{background:linear-gradient(120deg,var(--clay-deep) 0%,#1d5a3a 45%,var(--teal-deep) 120%)}
.band .pill{background:rgba(255,255,255,.15);color:#dff3c6}
.band p{color:rgba(255,255,255,.88)}

/* ---------- Contact form ---------- */
.field input,.field select,.field textarea{border-color:#cfe0ea;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sky);border-color:transparent}
.form-done .big-check{background:var(--clay-mist);color:var(--clay-deep)}
.form-note{color:var(--ink-soft)}

/* ---------- Footer ---------- */
footer.site-foot{background:var(--teal-deep);color:#fff;border-top:0;position:relative}
footer.site-foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(#0a9be6 0 50%,#78bd3b 50% 100%);
}
.foot-brand{color:#fff}
.foot-grid p,.foot-bottom{color:rgba(255,255,255,.78)}
.foot-grid h4{color:var(--leaf)!important;text-transform:none;letter-spacing:.01em;font-size:15px}
.foot-grid ul a:hover{color:var(--leaf)}
.foot-grid a[href="#consulting"]{color:#c4eb93!important}
.foot-bottom{border-top-color:rgba(255,255,255,.2)}

@media(max-width:960px){
  :root{--r-lg:18px;--r-xl:24px}
  .hero::after{bottom:6px}
}