:root{
  /* Graf Orthodontics palette */
  --graf-ink: #2E4A62;
  --graf-ink-2: #35524A;
  --graf-slate: #627C85;
  --graf-brand: #779CAB;  /* main color */
  --graf-surface: #F0F8FF;

  /* App tokens (use these throughout) */
  --ink: var(--graf-ink);
  --muted: var(--graf-slate);
  --bg: #ffffff;
  --soft: var(--graf-surface);
  --brand: var(--graf-brand);
  --border: rgba(46, 74, 98, .14);

  --radius-lg: 20px;
}

*{box-sizing:border-box;}
html{
  scroll-behavior: smooth;
  max-width:100%;
  overflow-x:hidden;
}
html,body{
  height:100%;
  width:100%;
}
body{
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  max-width:100%;
}

.fw-extrabold{font-weight:800;}

.link-muted{
  color:var(--muted);
  text-decoration:none;
}
.link-muted:hover{color:var(--ink); text-decoration:underline;}

/* ===== STICKY HEADER ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.site-header.scrolled{
  box-shadow: 0 2px 20px rgba(46, 74, 98, 0.12);
}

/* Offset body for fixed header */
body{
  padding-top: 110px; /* Adjust based on header height */
}

.site-nav{
  position: relative;
  z-index: 1020;
  background: #fff;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in-up{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible{
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible{
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right{
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.visible{
  opacity: 1;
  transform: translateX(0);
}

.scale-in{
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-in.visible{
  opacity: 1;
  transform: scale(1);
}

/* Staggered animation delays for children */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.5s; }

/* Fellow-style utility bar */
.topbar{
  background: var(--graf-ink);
  color: rgba(255,255,255,.92);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding: .45rem 0;
  font-size: .75rem;
  letter-spacing: 0.03em;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:24px;
  min-width: 0;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:24px;
}

.topbar-link{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  letter-spacing: 0.02em;
}

.topbar-link:hover{color:#fff; text-decoration:underline;}

.topbar-blog{
  color:rgba(255,255,255,.92);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar-blog:hover{
  color:#fff;
  text-decoration:underline;
}

.topbar-text{
  color: rgba(255,255,255,.80);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.topbar-cta{
  text-decoration:none;
  font-weight:700;
  letter-spacing:.03em;
  text-transform: uppercase;
  font-size: .72rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(240,248,255,.92);
  color: var(--graf-ink);
  border: 1px solid rgba(240,248,255,.70);
}

.topbar-cta:hover{
  background:#fff;
  color: var(--graf-ink);
}

.navbar{
  --bs-navbar-padding-y: 1.05rem;
}

.navbar-brand{padding: .15rem 0;}

/* Centered logo nav (Fellow-style) */
.site-nav-inner{
  align-items:center;
}

.nav-left,
.nav-right{
  flex: 1 1 0;
  gap: 1.75rem;
}

.nav-left{justify-content: flex-start;}
.nav-right{justify-content: flex-end;}

.brand-center{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0 !important;
  margin: 0 40px;
}

.brand-center-mark{
  max-width: 180px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mobile-brand{
  display:none;
  padding:0 !important;
}

.mobile-brand-mark{
  max-width:150px;
  max-height:46px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.navbar .nav-link{
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--graf-ink);
}

.navbar .nav-link:hover{color: var(--graf-ink-2);}

/* Hide dropdown arrow/caret */
.navbar .dropdown-toggle::after{
  display: none;
}

.dropdown-menu{
  border-radius: 16px;
  border: 1px solid var(--border);
}

.dropdown-item{
  font-weight: 700;
}

.dropdown-item:active{
  background: rgba(119,156,171,.18);
  color: var(--graf-ink);
}

.brand-badge{
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(119,156,171,.22), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6fbff);
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(13,19,33,.08);
}

.brand-mark{
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.04);
}

.brand-name{font-weight:900; letter-spacing:0;}



.btn-xs{padding:.35rem .55rem; font-size:.8rem;}

.hero{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(1200px 420px at 12% 0%, rgba(119,156,171,.22), transparent 60%),
    radial-gradient(900px 360px at 88% 12%, rgba(53,82,74,.10), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Hero full-bleed background image version (like Fellow) */
.hero-fullbleed{
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-fullbleed::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(120, 140, 160, 0.55);
  z-index: 1;
}

.hero-fullbleed .hero-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  z-index: 0;
}

.hero-fullbleed .container{
  position: relative;
  z-index: 2;
}

.home-hero{
  background: var(--graf-ink);
}

.home-hero::before{
  background: linear-gradient(90deg, rgba(26, 43, 58, .94) 0%, rgba(46, 74, 98, .82) 34%, rgba(46, 74, 98, .38) 54%, rgba(46, 74, 98, .05) 100%);
}

.home-hero .hero-bg{
  left:31%;
  width:69%;
  object-position:left top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 8%, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 8%, #000 24%);
}

.home-hero .hero-content{
  max-width: 540px;
}

.home-hero-copy{
  max-width: 620px;
}

.hero-content{
  animation: heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-tagline{
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.1;
  font-style: italic;
  color: var(--graf-ink);
  letter-spacing: 0;
}

.hero-tagline-light{
  color: #fff;
}

@media (max-width: 768px){
  .hero-tagline{
    font-size: 2.5rem;
  }
}

.hero-card{
  position:relative;
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(13,19,33,.10);
  border:1px solid var(--border);
}

/* Make Bootstrap carousel controls feel more "premium" over photography */
.hero-card .carousel-control-prev,
.hero-card .carousel-control-next{
  width: 48px;
}

.hero-card .carousel-control-prev-icon,
.hero-card .carousel-control-next-icon{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.20));
}

.hero-image{width:100%; height:440px; object-fit:cover; display:block;}

.hero-card-overlay{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding:14px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  border:1px solid var(--border);
}

.badge-soft{
  display:inline-block;
  font-size:.82rem;
  font-weight:800;
  color:#0b1220;
  margin-bottom:6px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.stat{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.stat-value{font-weight:800;}
.stat-label{color:var(--muted); font-size:.9rem;}

.section{background:transparent;}
.section-soft{background:var(--soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-dark{background:#0b1220; color:#fff; border-top:1px solid #0b1220;}
.section-dark .text-muted{color:rgba(255,255,255,.72) !important;}

.feature-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  background:#fff;
  box-shadow: 0 8px 22px rgba(13,19,33,.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(13,19,33,.10);
}

.home-all-services{
  min-width:240px;
  padding:1rem 2.5rem;
  border-width:2px;
  border-radius:999px;
  font-size:1.35rem;
  font-weight:800;
}

.home-feature-card h3{
  margin-bottom:1rem;
  text-align:center;
  font-weight:900;
}

.home-feature-card p{
  font-weight:700;
  text-align:center;
}

.service-tile{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(13,19,33,.06);
  overflow:hidden;
  height:100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(13,19,33,.12);
}

.service-media{
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:var(--soft);
}

.service-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-tile-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:24px;
}

.service-title{font-size:1.1rem; font-weight:900; letter-spacing:0; line-height:1.25; margin:0;}
.service-desc{color:var(--muted); line-height:1.55; margin-top:12px;}
.service-cta{margin-top:auto; padding-top:14px; font-weight:800; color: var(--graf-ink);}

@media (min-width: 768px) and (max-width: 991.98px){
  .service-tile-body{min-height:236px;}
}

.feature-icon{
  width:42px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(119,156,171,.18);
  color: var(--graf-ink);
  font-weight:900;
  margin-bottom:10px;
}

.feature-icon svg{display:block;}

.about-right-image{
  height: 420px;
  object-fit: cover;
}

.section.section-reviews{
  background: linear-gradient(180deg, #ffffff 0%, rgba(240,248,255,.72) 100%);
}

.reviews-carousel{
  padding-bottom: 34px;
}

.reviews-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:6px 48px 20px;
}

.reviews-grid.reviews-grid-single{
  grid-template-columns:minmax(0, 1fr);
  max-width:720px;
  margin:0 auto;
}

.review-card{
  min-height:300px;
  border:1px solid rgba(46, 74, 98, .13);
  border-radius:16px;
  padding:24px;
  background:#fff;
  box-shadow: 0 16px 36px rgba(13,19,33,.07);
  display:flex;
  flex-direction:column;
}

.review-stars{
  color:#d49a3a;
  font-size:.88rem;
  letter-spacing:2px;
  margin-bottom:16px;
}

.review-card h3{
  font-size:1.12rem;
  line-height:1.25;
  font-weight:900;
  letter-spacing:0;
  margin-bottom:12px;
}

.review-card p{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.68;
  margin-bottom:18px;
  white-space:pre-line;
}

.review-author{
  margin-top:auto;
  font-weight:800;
  color:var(--graf-ink);
}

.review-source{
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

.reviews-carousel .carousel-control-prev,
.reviews-carousel .carousel-control-next{
  width:40px;
  opacity:1;
}

.reviews-carousel .carousel-control-prev-icon,
.reviews-carousel .carousel-control-next-icon{
  width:38px;
  height:38px;
  border-radius:999px;
  background-color:var(--graf-ink);
  background-size:52%;
  box-shadow: 0 10px 24px rgba(13,19,33,.16);
}

.reviews-indicators{
  bottom:0;
  margin-bottom:0;
}

.reviews-indicators [data-bs-target]{
  width:9px;
  height:9px;
  border:0;
  border-radius:999px;
  background-color:rgba(46, 74, 98, .35);
}

.reviews-indicators .active{
  background-color:var(--graf-ink);
}

@media (min-width: 768px){
  .reviews-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .review-card{
    min-height:340px;
  }
}

@media (min-width: 992px){
  .reviews-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .review-card{
    min-height:360px;
  }
}

@media (max-width: 575px){
  .topbar-inner{
    gap:8px;
    font-size:.68rem;
  }

  .topbar-left,
  .topbar-right{
    gap:8px;
  }

  .topbar-blog{
    font-size:.66rem;
  }

  .topbar-cta{
    padding:.44rem .62rem;
    font-size:.62rem;
  }

  .reviews-grid{
    padding:4px 38px 20px;
  }

  .review-card{
    min-height:0;
    padding:22px;
  }

  .review-card p{
    font-size:.95rem;
  }

  .reviews-carousel .carousel-control-prev,
  .reviews-carousel .carousel-control-next{
    width:32px;
  }

  .reviews-carousel .carousel-control-prev-icon,
  .reviews-carousel .carousel-control-next-icon{
    width:32px;
    height:32px;
  }
}

.blog-card{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:28px;
  height:100%;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(13,19,33,.06);
  padding:20px;
  color:inherit;
  overflow:hidden;
}

.blog-card:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

.blog-date{color:var(--muted); font-size:.9rem; margin-bottom:8px;}
.blog-title{font-weight:900; font-size:1.35rem; line-height:1.3; margin-bottom:8px;}
.blog-summary{color:var(--muted);}
.blog-card-cta{margin-top:14px; font-weight:800; color:#1d4ed8;}

.blog-card-content{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding:12px 0 12px 10px;
}

.blog-card-media{
  flex:0 0 min(38%, 360px);
  min-height:220px;
  border-radius:14px;
  overflow:hidden;
  background:var(--soft);
}

.blog-card-thumbnail{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-post-figure{
  max-width:760px;
  margin-inline:auto;
}

.blog-post-image{
  display:block;
  width:100%;
  height:auto;
}

.prose p{
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.quote{
  font-size:46px;
  line-height:1;
  color: rgba(119,156,171,.85);
  font-weight:900;
}

.page-hero{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, var(--soft));
}

.form-card{
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(13,19,33,.06);
}

.info-card{
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(13,19,33,.06);
}

.site-footer{
  background:#0b1220;
  color:#fff;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.footer-logo-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(260px, 100%);
  padding:12px 16px;
  border-radius:10px;
  background:#fff;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  text-decoration:none;
}

.footer-logo{
  width:100%;
  height:auto;
  display:block;
}

.footer-brand-name{
  color:#fff;
  font-weight:800;
}

.site-footer .text-muted{
  color: rgba(255,255,255,.72) !important;
}

.site-footer p{
  color: rgba(255,255,255,.72);
}

.site-footer .btn-outline-light{
  --bs-btn-color: rgba(255,255,255,.92);
  --bs-btn-border-color: rgba(255,255,255,.35);
  --bs-btn-hover-bg: rgba(255,255,255,.10);
  --bs-btn-hover-border-color: rgba(255,255,255,.45);
}

.footer-title{font-weight:800; margin-bottom:10px;}
.footer-link{color:rgba(255,255,255,.78); text-decoration:none;}
.footer-link:hover{color:#fff; text-decoration:underline;}

.footer-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  padding:.45rem .8rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  color:rgba(255,255,255,.9);
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible{
  border-color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.1);
  color:#fff;
}

/* Bootstrap primary override */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #627C85;
  --bs-btn-hover-border-color: #627C85;
  --bs-btn-active-bg: #2E4A62;
  --bs-btn-active-border-color: #2E4A62;
}

/* Client-review content photography and page-specific components */
.content-hero-media,
.page-hero-media,
.adult-invisalign-media,
.marpe-treatment-media,
.tad-treatment-media,
.page-body-media,
.smile-guarantee-retainer-media{
  aspect-ratio:4 / 3;
  background:var(--soft);
}

.services-hero-media{
  aspect-ratio:4 / 3;
  background:var(--soft);
}

.services-hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.content-hero-image,
.page-hero-media__image,
.adult-invisalign-image,
.marpe-treatment-image,
.tad-treatment-image,
.page-body-media__image,
.smile-guarantee-retainer-image,
.graf-smile-hero-image,
.content-card-image,
.doctor-portrait__image,
.doctor-gallery__image,
.braces-typodont-image,
.enamel-gum-treatment-image,
.enamel-gum-hero-image,
.expansion-treatment-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.content-hero-media--cleft{
  aspect-ratio:2 / 1;
}

.content-hero-media--cleft .content-hero-image{
  object-fit:contain;
  object-position:center;
}

.content-hero-media--severe .content-hero-image{
  object-position:center 34%;
}

.content-hero-media--omfs{
  width:min(100%, 440px);
  aspect-ratio:941 / 1328;
  margin-inline:auto;
}

.content-hero-media--omfs .content-hero-image{
  object-fit:contain;
  object-position:center;
}

.page-hero-media--herbst,
.page-hero-media--invisalign-teens{
  width:min(100%, 440px);
  aspect-ratio:4 / 5;
  margin-inline:auto;
}

.page-hero-media--herbst .page-hero-media__image,
.page-hero-media--invisalign-teens .page-hero-media__image{
  object-fit:contain;
  object-position:center;
}

.braces-typodont-media{
  aspect-ratio:1223 / 869;
  background:var(--soft);
}

.braces-typodont-image{
  object-fit:contain;
  object-position:center;
}

.marpe-treatment-media{
  aspect-ratio:1 / 1;
}

.enamel-gum-hero-media{
  aspect-ratio:1415 / 1112;
  background:var(--soft);
}

.enamel-gum-hero-image{
  object-fit:contain;
  object-position:center;
}

.enamel-gum-photo-credit{
  font-size:.72rem;
}

.doctor-portrait{
  aspect-ratio:1 / 1;
  background:var(--soft);
}

.doctor-portrait--brandon{
  width:min(100%, 440px);
  aspect-ratio:2 / 3;
  margin-inline:auto;
}

.doctor-portrait--brian{
  width:min(100%, 520px);
  aspect-ratio:3548 / 3147;
  margin-inline:auto;
}

.doctor-portrait--brandon .doctor-portrait__image,
.doctor-portrait--brian .doctor-portrait__image{
  object-fit:contain;
  object-position:center;
}

.doctor-gallery{
  display:grid;
  gap:1.25rem;
}

.doctor-gallery__item{
  aspect-ratio:4 / 3;
  margin:0;
  overflow:hidden;
  border-radius:1rem;
  background:var(--soft);
}

.doctor-gallery--vertical .doctor-gallery__item:first-child .doctor-gallery__image{
  object-position:center 38%;
}

.doctor-gallery--vertical .doctor-gallery__item--uncropped .doctor-gallery__image{
  object-fit:contain;
  object-position:center;
}

.doctor-gallery--vertical .doctor-gallery__item--uncropped{
  aspect-ratio:3 / 4;
}

.doctor-gallery--story{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.doctor-gallery--story .doctor-gallery__item{
  aspect-ratio:3 / 2;
}

.doctor-gallery--brian-story{
  grid-template-columns:repeat(12, minmax(0, 1fr));
}

.doctor-gallery--brian-story .doctor-gallery__item{
  grid-column:1 / -1;
}

.doctor-gallery--brian-story .doctor-gallery__item--lake-powell{
  aspect-ratio:3968 / 2545;
}

.doctor-gallery--brian-story .doctor-gallery__item--dad{
  grid-column:span 4;
  aspect-ratio:3 / 4;
}

.doctor-gallery--brian-story .doctor-gallery__item--family{
  grid-column:span 8;
  aspect-ratio:3 / 2;
}

.doctor-gallery--brian-story .doctor-gallery__image{
  object-fit:contain;
  object-position:center;
}

@media (max-width: 767px){
  .doctor-gallery--story,
  .doctor-gallery--brian-story{
    grid-template-columns:1fr;
  }

  .doctor-gallery--brian-story .doctor-gallery__item--dad,
  .doctor-gallery--brian-story .doctor-gallery__item--family{
    grid-column:1 / -1;
  }
}

.treatment-inclusions__list{
  display:grid;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:treatment-inclusion;
}

.treatment-inclusions__item{
  position:relative;
  padding:1.4rem 1.5rem 1.4rem 4.75rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(13,19,33,.05);
  counter-increment:treatment-inclusion;
}

.treatment-inclusions__item::before{
  content:counter(treatment-inclusion);
  position:absolute;
  top:1.35rem;
  left:1.4rem;
  display:grid;
  width:2.35rem;
  height:2.35rem;
  place-items:center;
  border-radius:999px;
  background:var(--graf-ink);
  color:#fff;
  font-weight:900;
}

.why-feature-card h3{
  text-align:center;
  font-weight:900;
}

.why-choose-page-sections{
  display:flex;
  flex-direction:column;
}

.content-card-media{
  aspect-ratio:4 / 3;
  background:var(--soft);
}

.severe-case-item,
.expansion-treatment-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:1rem;
  background:#fff;
  box-shadow:0 10px 28px rgba(13,19,33,.08);
}

.severe-case-media,
.expansion-treatment-media{
  aspect-ratio:1 / 1;
  background:var(--soft);
}

.severe-case-media .content-card-image{
  object-fit:contain;
  object-position:center;
}

.severe-case-media--class-ii{
  aspect-ratio:1099 / 1008;
}

.severe-case-media--class-iii{
  aspect-ratio:1123 / 1013;
}

.severe-case-media--open-bite{
  aspect-ratio:1122 / 1233;
}

.severe-case-media--asymmetry{
  aspect-ratio:1169 / 1029;
}

.severe-case-copy,
.expansion-treatment-copy{
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  box-shadow:none;
}

.severe-case-copy{
  padding:1rem 1.15rem;
}

.severe-case-copy h3{
  margin-bottom:.45rem;
}

.expansion-treatment-card{
  display:flex;
  flex-direction:column;
}

.expansion-treatment-image{
  object-fit:contain;
  object-position:center;
}

.expansion-treatment-media--rpe{
  aspect-ratio:4 / 3;
}

.expansion-treatment-media--herbst{
  aspect-ratio:4 / 5;
}

.expansion-treatment-media--marpe{
  aspect-ratio:1 / 1;
}

.expansion-treatment-copy{
  flex:1;
}

.graf-smile-hero-media{
  aspect-ratio:3 / 2;
  background:var(--soft);
}

.graf-smile-hero-image{
  object-position:center 38%;
}

.smile-guarantee-steps{
  display:grid;
  gap:1.5rem;
  margin-bottom:0;
}

.smile-guarantee-step{
  display:grid;
  grid-template-columns:4rem minmax(0, 1fr);
  align-items:start;
  gap:1.25rem;
}

.smile-guarantee-step-number{
  display:grid;
  width:4rem;
  height:4rem;
  place-items:center;
  border-radius:999px;
  background:var(--graf-ink);
  color:#fff;
  box-shadow:0 10px 24px rgba(13,19,33,.16);
  font-size:1.5rem;
  font-weight:900;
}

.smile-guarantee-step-content{
  min-width:0;
}

@media (max-width: 991px){
  body{
    padding-top: 100px;
  }
  .topbar-left .topbar-text{display:none;}
  .topbar-inner{gap:16px;}
  .topbar-right{gap:12px;}
  .mobile-brand{
    display:flex;
    align-items:center;
    margin-right:auto;
  }
  .site-nav .navbar-toggler{
    margin-left:auto;
  }
  .site-nav-inner .brand-center{display:none;}
  .nav-left,
  .nav-right{
    flex: 0 0 100%;
    justify-content: flex-start;
  }
  .site-nav-inner{
    gap:0;
    align-items:flex-start;
    padding: 14px 0 8px;
  }
  .site-nav-inner > .navbar-nav{
    width:100%;
    gap:0;
  }
  .site-nav-inner > .navbar-nav > .nav-item{
    width:100%;
  }
  .site-nav-inner > .navbar-nav > .nav-item > .nav-link{
    display:flex;
    align-items:center;
    min-height:3.25rem;
    padding:.75rem 0;
  }
  .hero-image{height:360px;}
  .photo-stack{min-height:360px;}
  .stack-img-1{width:86%; height:300px;}
  .stack-img-2{width:62%; height:230px;}
  .hero{
    min-height: auto;
    padding: 60px 0;
  }
  .hero-fullbleed{
    min-height: auto;
    padding: 80px 0;
  }
}

@media (max-width: 768px){
  .site-header,
  main,
  .site-footer{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .page-hero .row > [class*="col-"]:first-child{
    text-align:center;
  }

  .page-hero .row > [class*="col-"]:first-child > .d-flex{
    align-items:center;
    justify-content:center;
  }

  .home-hero{
    display:block;
    min-height:auto;
    padding:0;
    background: var(--graf-ink);
  }

  .home-hero::before{
    top:0;
    bottom:auto;
    height:430px;
    background: linear-gradient(180deg, rgba(46,74,98,.08) 0%, rgba(46,74,98,.28) 100%);
  }

  .home-hero .hero-bg{
    position:relative;
    display:block;
    left:0;
    width:100%;
    height:430px;
    object-position:43% top;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .home-hero .container{
    padding-top:32px !important;
    padding-bottom:42px !important;
  }

  .home-hero .row{
    min-height:auto !important;
  }

  .home-hero .hero-tagline{
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .home-hero .hero-content{
    max-width:none;
    margin-inline:auto;
    text-align:center;
  }

  .home-hero-copy{
    margin-inline:auto;
  }

  .home-hero .hero-content > .d-flex,
  .home-apart-heading-row,
  .home-family-copy .d-flex{
    justify-content:center;
  }

  .home-apart-heading-row,
  .home-family-copy{
    text-align:center;
  }

  .home-hero .btn{
    width:100%;
  }

  .home-all-services{
    width:auto;
    min-width:220px;
  }

  .blog-card{
    flex-direction:column;
    gap:16px;
    padding:16px;
  }

  .blog-card-content{
    padding:4px;
  }

  .blog-card-media{
    flex-basis:auto;
    width:100%;
    min-height:0;
    aspect-ratio:4 / 3;
  }

  .content-hero-media--cleft{
    aspect-ratio:4 / 3;
  }

  .smile-guarantee-step{
    grid-template-columns:3rem minmax(0, 1fr);
    gap:.85rem;
  }

  .smile-guarantee-step-number{
    width:3rem;
    height:3rem;
    font-size:1.15rem;
  }

  .smile-guarantee-step-content{
    padding:1.25rem;
  }

  .smile-guarantee-hero-copy{
    order:2;
  }

  .smile-guarantee-hero-media-column{
    order:1;
  }

  .smile-guarantee-intro{
    text-align:center;
  }

  .office-visit-title{
    text-align:center;
  }

  .contact-questions{
    display:none;
  }

  .why-choose-page-sections > .why-choose-section--difference{
    order:-1;
  }

  .site-footer .row > *{
    text-align:center;
  }

  .site-footer .footer-brand,
  .site-footer .footer-actions,
  .site-footer .footer-social-links{
    justify-content:center;
  }

  .site-footer .footer-logo-card{
    margin-inline:auto;
  }

  .treatment-inclusions__item{
    padding:4.25rem 1.25rem 1.25rem;
  }

  .treatment-inclusions__item::before{
    top:1.15rem;
    left:1.25rem;
  }
}

.whitening-intro{
  text-align:center;
}

/* ===== SECTION STYLING ===== */
.section{
  background:transparent;
  padding: 80px 0;
}

.section-soft{
  background:var(--soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.section-dark{
  background: linear-gradient(135deg, var(--graf-ink) 0%, var(--graf-ink-2) 100%);
  color:#fff;
}

.section-dark .text-muted{color:rgba(255,255,255,.72) !important;}

/* ===== ENHANCED TYPOGRAPHY ===== */
.display-tagline{
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
}

.section-title{
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

/* ===== STATS SECTION ===== */
.stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.stat-item{
  text-align: center;
  padding: 30px 20px;
}

.stat-number{
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--graf-brand);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label{
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}

/* ===== CTA BANNER ===== */
.cta-banner{
  background: linear-gradient(135deg, var(--graf-brand) 0%, var(--graf-slate) 100%);
  border-radius: 24px;
  padding: 60px 40px;
  color: #fff;
  text-align: center;
}

.cta-banner h2{
  color: #fff;
}

.cta-banner .btn-light{
  background: #fff;
  color: var(--graf-ink);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-banner .btn-light:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* ===== LINE ART DECORATION ===== */
.line-art{
  stroke: var(--graf-brand);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.6;
}

/* ===== PARALLAX HELPER ===== */
.parallax-slow{
  will-change: transform;
}

/* ===== BLOB DECORATION ===== */
.blob-decoration{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  pointer-events: none;
}

.blob-1{
  width: 400px;
  height: 400px;
  background: var(--graf-brand);
  top: -100px;
  right: -100px;
}

.blob-2{
  width: 300px;
  height: 300px;
  background: var(--graf-ink-2);
  bottom: -50px;
  left: -100px;
}