/* ============================================================
   Bluegrass Oral Pathology — stylesheet
   Fonts: IM Fell English SC (display) · Poppins (body)
   ============================================================ */

:root{
  --navy:#1f2d4d;            /* matched to wave-border navy */
  --navy-deep:#182842;
  --gold:#a0855d;
  --gold-light:#c0a374;
  --sage:#7f8a6c;
  --sage-band:#cdd7bd;       /* matched to wave-border sage */
  --sage-light:#c6d1b1;
  --cream:#faf7f0;
  --cream-2:#f2ece0;
  --ink:#2b2b2b;
  --muted:#5d5d5d;
  --white:#ffffff;
  --maxw:1180px;
  --shadow:0 14px 34px rgba(24,40,66,.10);
  --shadow-sm:0 6px 16px rgba(24,40,66,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.nowrap{white-space:nowrap}

/* ---- Display type helpers ---- */
.section-title{
  font-family:'IM Fell English SC',Georgia,serif;
  font-weight:400;
  color:var(--navy);
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.15;
  text-align:center;
  letter-spacing:.5px;
}
.section-title--sm{text-align:left;font-size:clamp(1.6rem,3vw,2.3rem)}

.rule-diamond{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--gold);font-size:.7rem;margin:16px auto 34px;
}
.rule-diamond span{display:block;height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule-diamond span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

/* ---- Buttons ---- */
.btn{
  display:inline-block;font-family:'Poppins';font-weight:500;font-size:.86rem;
  letter-spacing:.6px;text-transform:uppercase;padding:14px 30px;border-radius:2px;
  transition:.22s ease;border:1.5px solid transparent;cursor:pointer;
}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--sage{background:#8ca06a;color:#fff}
.btn--sage:hover{background:#788b58;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--sageband{background:var(--sage-band);color:var(--navy)}
.btn--sageband:hover{background:#bccaa4;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--ghost{border-color:var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn--gold{background:var(--gold-light);color:var(--navy)}
.btn--gold:hover{background:var(--navy);color:var(--gold-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--navygold{background:var(--navy);color:var(--gold-light)}
.btn--navygold:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--goldhover:hover{background:var(--gold-light);color:var(--navy)}
.btn--navywhite{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navywhite:hover{background:#fff;color:var(--navy);border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ============================================================
   Launch announcement bar
   ============================================================ */
.announce{background:linear-gradient(90deg,#8f7549 0%,#c0a374 50%,#8f7549 100%);
  color:#fff;text-align:center}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:16px;
  min-height:42px;padding:8px 26px;font-size:.84rem;font-weight:500;letter-spacing:1.4px;
  text-transform:uppercase}
.announce strong{font-weight:600}
.announce__dot{font-size:.6rem;opacity:.85}
@media (max-width:560px){ .announce__inner{font-size:.72rem;letter-spacing:.8px;gap:10px} }

/* Holiday notice (shown Dec 15 – Jan 5 via script) */
.holiday{background:linear-gradient(90deg,#2f4433 0%,#425a45 50%,#2f4433 100%);color:#f3efe4}
.holiday .announce__inner{text-transform:none;letter-spacing:.5px;font-weight:400;font-size:.86rem}
.holiday .announce__dot{color:#c0a374}

/* ============================================================
   Top bar
   ============================================================ */
.topbar{background:var(--navy-deep);color:#dfe4ec;font-size:.78rem;letter-spacing:.4px}
.topbar__inner{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;min-height:38px;padding-top:6px;padding-bottom:6px}
.topbar__sep{color:var(--gold);font-size:.55rem}
.topbar__item{white-space:nowrap}

/* ============================================================
   Header / Nav  (enlarged logo ~2.5x)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-2)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  min-height:150px;gap:20px}
.brand__logo{height:128px;width:auto}
.mainnav{display:flex;align-items:center;gap:24px}
.mainnav a{font-size:.8rem;font-weight:500;letter-spacing:.8px;text-transform:uppercase;
  white-space:nowrap;color:var(--navy);position:relative;padding:6px 0;transition:.2s}
.mainnav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--gold);transition:.25s}
.mainnav a:hover::after,.mainnav a.is-active::after{width:100%}
.mainnav a:hover{color:var(--gold)}

/* mobile nav toggle */
.navtoggle{display:none}
.navtoggle__btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.navtoggle__btn span{display:block;width:26px;height:2px;background:var(--navy);transition:.25s}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 500px at 78% -10%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#fdfbf6 0%, var(--cream) 100%);
}
.hero__maps{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero__map-us{position:absolute;right:-40px;top:70px;width:min(42vw,520px);opacity:.32;filter:grayscale(1)}
.hero__map-ky{position:absolute;right:156px;bottom:8px;width:min(30vw,350px);opacity:.5}

/* Watercolor tooth — tilted art piece on the left, balances the maps on the right */
.hero__tooth{position:absolute;left:min(2vw,40px);top:55%;transform:translateY(-50%) rotate(-12deg);
  width:min(24vw,300px);opacity:.48;pointer-events:none;z-index:1}

.hero__inner{position:relative;z-index:2;text-align:center;padding:74px 26px 88px;max-width:820px;margin:0 auto}
.hero__eyebrow{font-size:.82rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin-top:-32px;margin-bottom:24px;position:relative;z-index:3}
.hero__title{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;color:var(--navy);
  font-size:clamp(2.8rem,7.5vw,5.4rem);line-height:1.02;letter-spacing:1px}
.hero__mission{max-width:640px;margin:6px auto 34px;font-size:1.06rem;color:#43413c}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   Scalloped dividers (colors matched to bands => seamless)
   ============================================================ */
.scallop{width:100%;display:block;margin-bottom:-2px;pointer-events:none}
.scallop--flip{transform:scaleY(-1)}                 /* solid edge points down into sage band */
.scallop--bottom{margin-bottom:0;margin-top:-2px}     /* sage scallop hanging below the band */

/* ============================================================
   Navy mission band  (vintage microscope accent)
   ============================================================ */
.band-navy{position:relative;background:var(--navy);color:#eef1f6;overflow:hidden}
.band-navy__scope{position:absolute;right:5%;top:34%;height:56%;opacity:.62;pointer-events:none;transform:scaleX(-1)}
.band-navy__horse{position:absolute;left:5%;top:34%;height:56%;opacity:.72;pointer-events:none}
.band-navy__inner{position:relative;z-index:2;max-width:900px;text-align:center;padding:12px 26px 54px}
.band-navy__lead{font-size:1.16rem;font-weight:300;line-height:1.75;color:#e7ebf2}
.band-navy__accent{font-family:'IM Fell English SC',Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:var(--gold-light);margin-top:26px;line-height:1.5}

/* ============================================================
   Why choose — circular "microscope-field" cards
   ============================================================ */
.why{padding:74px 0 44px;background:var(--cream)}
.why__faqlink{text-align:center;margin-top:42px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;align-items:start}
.card{text-align:center}
.card__media{width:100%;max-width:210px;aspect-ratio:1/1;margin:0 auto 20px;border-radius:50%;
  overflow:hidden;border:4px solid var(--gold);background:var(--cream-2);
  box-shadow:0 12px 26px rgba(24,40,66,.16);transition:.28s}
.card:hover .card__media{transform:translateY(-6px);box-shadow:0 18px 34px rgba(24,40,66,.22)}
.card__media img,.card__media video{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card__media img{transform:scale(1.06)}
/* video: show the whole (un-cropped) frame inside the circle */
.card__media--video video{object-fit:cover}
.card__title{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;color:var(--navy);
  font-size:1.28rem;margin-bottom:8px;line-height:1.2}
.card__text{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:230px;margin:0 auto}

/* ============================================================
   Sage roots band  (confluent color, scalloped top & bottom)
   ============================================================ */
.band-sage{background:var(--sage-band);color:#37402a}
.band-sage__inner{display:flex;align-items:center;gap:50px;padding:28px 26px}
.band-sage__ky{width:min(38%,360px);flex:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.12))}
.band-sage__copy{flex:1}
.band-sage__copy p{margin-top:14px;font-size:1.02rem;color:#3f4732;max-width:560px}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--navy-deep);color:#cdd4df;padding-top:56px}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:36px;padding-bottom:46px}
.footer__brand{text-align:center}
.footer__logo{height:auto;width:min(300px,100%);margin:0 auto;background:#fff;padding:18px 22px;border-radius:8px}
.footer__tag{margin:16px auto 0;font-size:.9rem;color:#aeb7c6;max-width:260px}
.footer__col{text-align:center}
.footer__col h4{font-family:'IM Fell English SC',Georgia,serif;font-weight:400;color:#fff;
  font-size:1.12rem;margin-bottom:6px;letter-spacing:.5px}
/* small gold line + diamond under footer headings (added by site.js) */
.mini-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 11px;line-height:1}
.mini-rule span{display:block;height:1px;width:34px;background:var(--gold-light);opacity:.75}
.mini-rule i{font-size:.5rem;font-style:normal;color:var(--gold-light)}
.footer__col p{font-size:.92rem;line-height:1.9;color:#c2cad6}
.footer__col a:hover{color:var(--gold-light)}
.footer__bar{border-top:1px solid rgba(255,255,255,.10);font-size:.8rem;color:#8b96a8;
  padding:18px 0;text-align:center}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr);gap:30px}
  .hero__tooth{width:min(26vw,210px)}
  .band-navy__scope,.band-navy__horse{display:none}
}
@media (max-width:820px){
  .site-header__inner{min-height:110px}
  .brand__logo{height:88px}
  .navtoggle__btn{display:flex}
  .mainnav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--cream);border-bottom:1px solid var(--cream-2);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .navtoggle:checked ~ .mainnav{max-height:360px}
  .mainnav a{width:100%;padding:15px 26px;border-top:1px solid var(--cream-2)}
  .navtoggle:checked ~ .navtoggle__btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .navtoggle__btn span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navtoggle__btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero__tooth{left:-46px;top:50%;width:190px;opacity:.26}
  .band-sage__inner{flex-direction:column;text-align:center;gap:26px}
  .band-sage__copy p{margin-left:auto;margin-right:auto}
  .section-title--sm{text-align:center}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .topbar__inner{gap:8px;font-size:.72rem}
  .hero__inner{padding:54px 22px 66px}
  .hero__eyebrow{letter-spacing:1.2px;font-size:.72rem}
  .cards{grid-template-columns:1fr 1fr;gap:26px}
  .cards .card:last-child{grid-column:1 / -1}
  .cards .card:last-child .card__media{width:calc((100% - 26px)/2)}
  .footer__inner{grid-template-columns:1fr;gap:26px}
  .hero__map-us{width:min(40vw,150px);right:8px;top:135px}
  .hero__map-ky{left:50%;right:auto;bottom:-4px;transform:translateX(-50%);width:min(48vw,185px)}
}