:root {
  --navy:#14213e;
  --gold:#a77f3b
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  color:var(--navy);
  background:#fbf9f7;
  font-family:Arial,sans-serif;
  font-size:16px;
  line-height:1.4
}
h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif
}
a {
  color:inherit
}
p {
  margin:0 0 12px
}
h2 {
  font-size:39px;
  line-height:1.05;
  margin:0
}
.container {
  width:94%;
  max-width:1320px
}
header {
  background:#fffdfb
}
.navbar {
  min-height:83px;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none
}
.brand b {
  font:60px/.9 Georgia;
  letter-spacing:-4px
}
.brand span {
  border-left:1px solid var(--gold);
  padding-left:18px;
  font-size:13px;
  letter-spacing:3px;
  line-height:1.1
}
.nav-link {
  color:var(--navy);
  font-size:15px;
  margin:0 6px
}
.phone {
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  border-left:1px solid var(--gold);
  padding-left:20px;
  margin:0 22px 0 15px;
  font-weight:600
}
.btn {
  border-radius:30px;
  padding:10px 30px;
  font-size:18px;
  font-weight:600;
  line-height:1.2
}
.btn:hover {
  filter:brightness(.94)
}
.gold {
  background:linear-gradient(110deg,#b99a65,#947039);
  border:1px solid #b4935b;
  color:white
}
.gold:hover,.navy:hover {
  color:white
}
.small-btn {
  font-size:14px;
  white-space:nowrap;
  padding:11px 18px
}
.navy {
  background:linear-gradient(110deg,#283d63,#192a49);
  color:white;
  min-width:245px
}
.outline {
  border:1.5px solid var(--gold);
  font-family:Georgia;
  color:#74501c;
  min-width:220px
}
.hero {
  padding:30px 0 40px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 90%,#e7dccd,transparent 45%),linear-gradient(130deg,#f4efe9,#fff 65%,#ede3d8)
}
.hero:after {
  content:'';
  position:absolute;
  width:130%;
  height:220px;
  border:2px solid white;
  border-radius:50%;
  bottom:-195px;
  left:-10%;
  transform:rotate(-8deg);
  pointer-events:none
}
.eyebrow {
  font:600 19px Georgia;
  letter-spacing:2px;
  color:#886021;
  display:flex;
  align-items:center;
  gap:20px
}
.eyebrow i {
  height:1px;
  width:120px;
  background:var(--gold)
}
h1 {
  font-size:clamp(44px,5.4vw,76px);
  line-height:.99;
  letter-spacing:-2.5px;
  margin:16px 0 22px
}
.intro {
  font-size:19px;
  color:#352f37;
  max-width:650px;
  line-height:1.4;
  margin-bottom:25px
}
.portrait {
  width:350px;
  max-width:100%;
  margin:auto;
  border:3px solid #ceb17e;
  border-radius:180px 180px 0 0;
  overflow:hidden;
  background:#d9d9d9;
  aspect-ratio:280/294
}
.portrait img {
  width:100%;
  height:100%;
  object-fit:cover
}
.benefits {
  border:1px solid white;
  border-radius:20px;
  background:linear-gradient(120deg,#f1eae1,#f2eeea);
  padding:24px 18px
}
.benefit {
  display:flex;
  gap:25px;
  align-items:center;
  padding:0 28px
}
.benefit+.benefit {
  border-left:1px solid #bd9860
}
.benefit h3 {
  font-size:24px;
  margin:0 0 5px
}
.benefit p {
  font-size:15px;
  color:#35323a;
  margin:0
}
.benefit img {
  flex-shrink:0
}
.gallery {
  padding-top:38px;
  padding-bottom:32px
}
.heading {
  text-align:center;
  margin-bottom:16px
}
.heading h2 {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px
}
.heading h2:before,.heading h2:after {
  content:'';
  width:150px;
  height:1px;
  background:var(--gold)
}
.heading .eyebrow {
  display:block;
  font:600 14px Arial;
  letter-spacing:3px;
  margin:10px 0 0
}
.reference {
  background:#f1e9de;
  border-radius:20px;
  text-align:center;
  font:italic 21px Georgia;
  padding:8px 15px;
  margin:0 30px 16px
}
.gallery-card {
  height:325px;
  margin:0;
  border:1px solid #d7c9b7;
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(120deg,#f5f0e9,#eeebe7)
}
.supplied img {
  width:100%;
  height:295px;
  object-fit:cover
}
.supplied figcaption {
  text-align:center;
  background:#f1e5d1;
  font:italic 12px Georgia;
  padding:8px
}
.placeholder-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.placeholder-card h3 {
  font-size:31px;
  margin:18px 5px 14px
}
.placeholder-card i {
  height:1px;
  width:35px;
  background:var(--gold);
  margin-bottom:16px
}
.placeholder-card p {
  font-size:13px;
  letter-spacing:4px
}
.education {
  padding:26px 42px;
  background:linear-gradient(120deg,#f4eee6,#efedeb);
  border-radius:18px;
  margin-bottom:24px
}
.education h2 {
  font-size:37px
}
.education p {
  font-size:15px;
  line-height:1.4;
  margin-bottom:8px
}
.education p:last-child {
  margin:0
}
.qualifications {
  border-left:1px solid #bd9860;
  border-right:1px solid #bd9860;
  padding-left:40px;
  padding-right:35px
}
.conversation {
  background:linear-gradient(110deg,#25395b,#172746);
  color:white;
  padding:18px 0
}
.conversation h2 {
  font-size:41px;
  font-style:italic;
  border-right:1px solid #d8bb82;
  padding-right:36px
}
.conversation .btn {
  font:20px Georgia
}
.reviews {
  padding:35px 0 15px
}
.italic {
  font:italic 16px Georgia;
  margin-top:8px
}
.slider-window {
  overflow:hidden
}
.slider-track {
  display:flex;
  gap:20px;
  transition:transform .5s ease
}
.review {
  flex:0 0 calc((100% - 40px)/3);
  display:flex;
  gap:15px;
  align-items:flex-start;
  min-height:118px;
  border:1px solid #e5dcd0;
  border-radius:15px;
  background:linear-gradient(120deg,#f3ede4,#f7f4ef);
  padding:23px 26px
}
.review>span {
  font:bold 55px/.8 Georgia;
  color:var(--gold)
}
blockquote {
  font:italic 22px/1.35 Georgia;
  margin:0
}
.slider-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:16px
}
.slider-controls button {
  border:1px solid #c5aa80;
  background:transparent;
  color:var(--navy);
  border-radius:25px;
  min-width:32px;
  height:32px
}
#pause {
  font-size:12px;
  padding:0 12px
}
#dots {
  display:flex;
  gap:8px
}
#dots button {
  min-width:8px;
  width:8px;
  height:8px;
  padding:0;
  border:0;
  background:#d6c6af
}
#dots button.active {
  background:#99753e
}
.faq {
  padding:18px 0 30px
}
.faq h2 {
  font-size:33px
}
.accordion-item {
  border:1px solid #dfd4c6!important;
  border-radius:10px!important;
  overflow:hidden;
  margin-bottom:7px;
  background:#f7f4ef
}
.accordion-button {
  font-size:17px;
  font-weight:600;
  color:var(--navy);
  padding:12px 30px;
  background:transparent
}
.accordion-button:not(.collapsed) {
  color:var(--navy);
  background:#eee5d8;
  box-shadow:none
}
.accordion-body {
  font-size:16px;
  padding:15px 30px
}
.consultation {
  border:1px solid #bf9d69;
  border-radius:22px;
  background:linear-gradient(120deg,#f3ece1,#f4f1ed);
  padding:25px 42px;
  margin-bottom:22px
}
.consultation h2 {
  font-size:38px
}
.consultation form {
  padding-left:32px;
  border-left:1px solid #bd9860
}
.form-label {
  font-size:14px;
  font-weight:600;
  margin-bottom:5px
}
.form-control,.form-select {
  font-size:13px;
  min-height:37px;
  border-color:#c9beb0;
  background-color:#fcfaf8
}
.request {
  min-width:340px;
  max-width:100%;
  font:18px Georgia
}
#formStatus {
  font-size:14px;
  margin:12px 0 0;
  text-align:center
}
#formStatus:empty {
  display:none
}
footer {
  background:linear-gradient(110deg,#253a5a,#172745);
  color:white;
  padding:25px 0 10px
}
footer .brand {
  color:#f9f0db
}
footer .brand b {
  font-size:53px
}
footer h3 {
  font:bold 16px Arial;
  margin:0 0 7px
}
footer a:not(.brand) {
  display:block;
  text-decoration:none;
  font-size:14px;
  line-height:1.4
}
footer a:hover {
  text-decoration:underline
}
.tagline {
  font-size:12px;
  color:#ddcba5;
  margin-top:17px
}
.footer-contact {
  border-left:1px solid #dbc58d;
  align-self:center;
  padding-left:35px
}
.footer-contact a:not(.brand),.footer-contact p {
  font-size:19px
}
.footer-bottom {
  border-top:1px solid #dbc58d;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:22px;
  padding-top:10px;
  font-size:12px
}
.footer-bottom span:last-child {
  font-style:italic;
  font-family:Georgia
}
a:focus-visible,button:focus-visible {
  outline:3px solid #af853e;
  outline-offset:3px
}
@media(max-width:1199px) {
  .navbar {
    gap:10px
  }
  .brand {
    gap:12px
  }
  .brand b {
    font-size:48px
  }
  .brand span {
    font-size:11px;
    padding-left:10px
  }
  .nav-link {
    font-size:13px;
    margin:0 3px
  }
  .phone {
    font-size:13px;
    margin-right:12px;
    padding-left:12px
  }
  .small-btn {
    font-size:12px;
    padding:10px 14px
  }
  .benefit {
    padding:0 16px;
    gap:15px
  }
  .benefit h3 {
    font-size:21px
  }
  .education h2 {
    font-size:31px
  }
  .review {
    padding:20px
  }
  blockquote {
    font-size:20px
  }
}
@media(max-width:991px) {
  .navbar {
    padding:15px 0
  }
  .navbar-collapse {
    padding-top:20px
  }
  .nav-link {
    font-size:16px
  }
  .phone {
    display:inline-block;
    margin:12px 20px 15px 0;
    border:0;
    padding:0
  }
  .hero {
    text-align:center;
    padding:35px 0
  }
  .hero-buttons,.eyebrow {
    justify-content:center
  }
  .intro {
    margin:0 auto 25px
  }
  h1 {
    font-size:64px
  }
  .portrait {
    width:300px;
    margin-top:15px
  }
  .benefit {
    padding:0 12px;
    gap:10px
  }
  .benefit h3 {
    font-size:19px
  }
  .benefit p {
    font-size:13px
  }
  .benefit img {
    width:36px
  }
  .qualifications {
    border:0;
    padding-left:12px
  }
  .education {
    padding:30px
  }
  .conversation h2 {
    font-size:35px
  }
  .consultation form {
    padding:0;
    border:0
  }
  .footer-contact {
    border:0;
    padding-left:12px
  }
  .gallery-card {
    height:280px
  }
  .supplied img {
    height:250px
  }
  .placeholder-card h3 {
    font-size:23px
  }
  .placeholder-card p {
    font-size:10px
  }
  .review {
    flex-basis:calc((100% - 20px)/2)
  }
}
@media(max-width:767px) {
  .container {
    width:91%
  }
  h1 {
    font-size:49px;
    letter-spacing:-1.6px
  }
  .eyebrow {
    font-size:14px;
    letter-spacing:1.5px
  }
  .eyebrow i {
    display:none
  }
  .intro {
    font-size:17px
  }
  .btn {
    font-size:15px;
    padding:11px 22px
  }
  .benefits {
    padding:10px 25px
  }
  .benefit {
    padding:20px 0;
    gap:25px
  }
  .benefit+.benefit {
    border-left:0;
    border-top:1px solid #d8c6a9
  }
  .benefit h3 {
    font-size:24px
  }
  .benefit p {
    font-size:15px
  }
  .benefit img {
    width:48px
  }
  h2 {
    font-size:34px
  }
  .heading h2 {
    gap:14px
  }
  .heading h2:before,.heading h2:after {
    width:45px
  }
  .reference {
    margin:0 0 20px;
    font-size:17px
  }
  .gallery-card {
    height:300px
  }
  .supplied {
    height:auto
  }
  .supplied img {
    height:auto
  }
  .placeholder-card h3 {
    font-size:31px
  }
  .placeholder-card p {
    font-size:12px
  }
  .education h2 {
    font-size:34px
  }
  .education .row>div+div {
    border-top:1px solid #d8c6a9;
    padding-top:22px
  }
  .conversation {
    text-align:center;
    padding:25px 0
  }
  .conversation h2 {
    font-size:33px;
    border:0;
    padding:0
  }
  .review {
    flex-basis:100%;
    min-height:130px
  }
  .faq h2 {
    font-size:28px
  }
  .faq .heading h2:before,.faq .heading h2:after {
    width:25px
  }
  .accordion-button {
    font-size:15px;
    padding:15px 18px
  }
  .consultation {
    padding:28px
  }
  .consultation h2 {
    font-size:35px
  }
  .request {
    min-width:0;
    width:100%
  }
  .footer-bottom {
    flex-direction:column
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}
/* Gary Vela burgundy reference design */
:root {
  --navy:#590e20;
  --gold:#a7703e
}
body {
  background:#fcf9f6;
  color:#590e20
}
header {
  border-bottom:1px solid #ba8c59;
  background:#fcf8f3
}
.nav-link {
  font-family:Georgia;
  font-size:16px
}
.gold,.navy {
  background:linear-gradient(115deg,#7c1730,#570d20);
  border-color:#681028;
  color:#fff
}
.outline {
  color:#590e20
}
.brand span {
  border-color:#590e20
}
.phone {
  border:0
}
.hero {
  padding:0;
  background:radial-gradient(ellipse at 20% 100%,#e8dcd0,transparent 45%),linear-gradient(120deg,#f7f1eb,#fffaf6 55%,#e9dfd5)
}
.hero .col-lg-7 {
  padding:38px 12px 45px 55px
}
.hero h1 {
  font-weight:400
}
.hero .intro {
  max-width:540px
}
.hero:after {
  display:none
}
.portrait {
  width:380px;
  border-radius:200px 200px 0 0;
  border-bottom:0;
  aspect-ratio:304/340
}
.hero .row {
  align-items:end!important
}
.eyebrow {
  color:#8b5429;
  font-size:23px
}
.benefits {
  width:100%;
  max-width:none;
  border:0;
  border-radius:0;
  padding:22px max(3%,calc((100vw - 1320px)/2));
  background:linear-gradient(100deg,#f8f3ee,#fbf8f5,#f5efea)
}
.benefit {
  padding:0 26px
}
.benefit h3 {
  font-weight:600
}
.gallery {
  padding-top:22px
}
.gallery-subtitle {
  font:italic 21px Georgia;
  color:#8b5429;
  margin:3px 0
}
.reference {
  max-width:650px;
  margin:0 auto 16px;
  font:16px Georgia;
  background:#eee0d4
}
.gallery-card {
  height:340px
}
.supplied img {
  height:312px
}
.supplied figcaption {
  background:#f0e6dc
}
.placeholder-card h3 {
  font-size:34px
}
.education {
  background:none;
  padding:25px 25px 18px;
  border-radius:0
}
.education h2 {
  font-size:40px
}
.qualifications {
  border-left:0;
  padding-left:48px
}
.qualifications p {
  position:relative;
  border-bottom:1px solid #d7bda6;
  padding:7px 0;
  font:16px/1.1 Georgia
}
.qualifications p:last-child {
  border:0
}
.education-icon {
  position:absolute;
  left:-42px;
  top:5px;
  color:#a16c34;
  font-size:28px
}
.conversation {
  background:radial-gradient(ellipse at 20% 150%,#922b42,transparent 45%),linear-gradient(150deg,#4f0c1d,#77192f 55%,#4b0a19);
  padding:19px 0
}
.conversation .gold {
  background:#fff8ec;
  color:#590e20;
  border-color:#d9c3b0
}
.reviews {
  padding-top:20px
}
.review {
  justify-content:center;
  text-align:center;
  min-height:85px;
  padding:18px 28px
}
.review>span {
  display:none
}
blockquote {
  font-size:20px
}
.reviews .heading h2 {
  font-size:37px
}
.faq {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:40px;
  padding:15px 12px 25px
}
.faq-intro {
  border-right:1px solid #c9ab91;
  padding-left:10px
}
.faq-intro h2 {
  font-size:43px
}
.faq-intro p {
  font:italic 20px/1.1 Georgia;
  margin:4px 0
}
.accordion-button {
  font:600 16px Georgia;
  padding:10px 22px
}
.consultation {
  border:0;
  background:linear-gradient(120deg,#f2e9e1,#f6f1eb);
  padding:20px 35px
}
.consultation h2 {
  font-size:40px
}
.request-kicker {
  font:17px Georgia;
  letter-spacing:4px;
  margin:0;
  text-align:center;
  color:#875327
}
.consultation-copy {
  font-size:15px;
  color:#493638;
  line-height:1.15;
  margin:3px 0 0
}
.form-layout {
  display:grid;
  grid-template-columns:1fr 235px;
  gap:25px;
  align-items:center
}
.form-label {
  color:#590e20
}
.request {
  min-width:0;
  width:100%;
  font-weight:bold
}
.consultation form {
  padding-left:35px
}
.form-control,.form-select {
  font-size:14px
}
.form-control::placeholder {
  font-style:italic
}
footer {
  background:radial-gradient(ellipse at 20% 100%,#8b263d,transparent 50%),linear-gradient(130deg,#5f1024,#430a18);
  padding-top:20px
}
.footer-bottom {
  border-color:#c8ab96
}
.footer-contact {
  border-color:#c8ab96
}
@media(max-width:1199px) {
  .hero .col-lg-7 {
    padding-left:20px
  }
  .portrait {
    width:340px
  }
  .form-layout {
    grid-template-columns:1fr 200px;
    gap:20px
  }
  .education h2 {
    font-size:34px
  }
  .benefit h3 {
    font-size:21px
  }
  .eyebrow {
    font-size:20px
  }
  .placeholder-card h3 {
    font-size:28px
  }
}
@media(max-width:991px) {
  .hero .col-lg-7 {
    padding:35px 12px 0
  }
  .hero .intro {
    margin-left:auto;
    margin-right:auto
  }
  .portrait {
    margin-top:0;
    width:330px
  }
  .hero .row {
    justify-content:center
  }
  .benefits {
    padding:22px 3%
  }
  .benefit {
    padding:0 12px
  }
  .benefit h3 {
    font-size:19px
  }
  .education .qualifications {
    padding-left:55px
  }
  .education h2 {
    font-size:36px
  }
  .consultation form {
    padding-left:0
  }
  .consultation-copy {
    max-width:400px
  }
  .request-kicker {
    text-align:left
  }
  .form-layout {
    grid-template-columns:1fr 220px
  }
  .gallery-card {
    height:300px
  }
  .supplied img {
    height:272px
  }
  .faq {
    grid-template-columns:190px 1fr;
    gap:25px
  }
}
@media(max-width:767px) {
  .hero .col-lg-7 {
    padding-top:30px
  }
  .hero .eyebrow {
    font-size:18px
  }
  .portrait {
    width:300px
  }
  .benefits {
    padding:5px 7%
  }
  .benefit {
    padding:20px 0
  }
  .benefit h3 {
    font-size:23px
  }
  .reference {
    font-size:14px;
    padding:10px
  }
  .gallery-card {
    height:320px
  }
  .supplied {
    height:auto
  }
  .supplied img {
    height:auto
  }
  .placeholder-card h3 {
    font-size:33px
  }
  .education {
    padding:15px 10px 30px
  }
  .education h2 {
    font-size:36px
  }
  .education .qualifications {
    padding-left:55px
  }
  .qualifications p {
    font-size:16px
  }
  .faq {
    display:block;
    padding:20px 0
  }
  .faq-intro {
    border:0;
    padding:0 0 20px;
    text-align:center
  }
  .faq-intro p br {
    display:none
  }
  .faq-intro p {
    line-height:1.3
  }
  .form-layout {
    display:block
  }
  .request {
    margin-top:22px
  }
  .consultation {
    padding:25px
  }
  .consultation h2 {
    font-size:38px
  }
  .conversation .btn {
    font-size:17px
  }
  .review {
    min-height:100px
  }
  .footer-contact {
    border:0
  }
}
/* FINAL PORTRAIT: no CSS frame;
SVG excludes the gold pixels in the source. */

.hero .portrait img {
  display: block;
  width: 100%;
  height: 100%;
  transform: none !important;
  object-fit: contain;
}
/* Actual supplied gallery files. */
.gallery .patient-photo {
  height: 400px;
  border: 0;
  background: transparent;
}
.gallery .patient-photo a {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery .patient-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .gallery .patient-photo {
    height: auto;
  }
  .gallery .patient-photo img {
    height: auto;
  }
}

/* Gary Vela biography and credentials. */
.experience-kicker { font-size: 17px; color: #875327; margin: 10px 0; }
.gary-background { padding: 40px 0; }
.gary-background .heading h2 { font-size: 38px; }
.gary-background .heading h2::before, .gary-background .heading h2::after { width: 90px; flex-shrink: 0; }
.gary-bio { font-size: 18px; line-height: 1.75; color: #493638; margin: 0 auto 30px; max-width: 1120px; }
.gary-panel { height: 100%; border: 1px solid #decbb9; border-radius: 18px; padding: 30px; background: #f3ece4; }
.gary-panel h3 { font-size: 28px; margin: 0 0 22px; }
.gary-panel p { font-size: 16px; line-height: 1.7; color: #493638; }
.gary-credentials { list-style: none; padding: 0; margin: 0; }
.gary-credentials li { border-bottom: 1px solid #dcc7b1; padding: 15px 0; }
.gary-credentials li:first-child { padding-top: 0; }
.gary-credentials li:last-child { border: 0; padding-bottom: 0; }
.gary-credentials h4 { font: 600 18px/1.4 Georgia, serif; margin: 0 0 6px; }
.gary-credentials p { margin: 0; }
.gary-details { margin-top: 0; }
.gary-connect { margin-top: 26px; text-align: center; padding: 30px; border: 1px solid #decbb9; border-radius: 18px; background: #f7f1e9; }
.gary-connect h3 { font-size: 29px; }
.gary-connect p { max-width: 760px; margin: 12px auto 22px; color: #493638; line-height: 1.7; }
@media (max-width: 767px) {
  .gary-background { padding: 30px 0; }
  .gary-background .heading h2 { font-size: 29px; }
  .gary-background .heading h2::before, .gary-background .heading h2::after { display: none; }
  .gary-bio { font-size: 16px; }
  .gary-panel { padding: 24px; }
  .gary-panel h3 { font-size: 25px; }
}

/* Michael Stefan: retain the established layout with the new square portrait. */
.hero .portrait { aspect-ratio: 3 / 4; padding: 5px; border: 2px solid #b4935b !important; border-radius: 200px 200px 12px 12px; background: #f8f2eb; }
.hero .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none !important; border-radius: inherit; }
.stefan-credential-column { display: flex; flex-direction: column; gap: 24px; }
.stefan-credential-column .gary-panel { height: auto; }
.gallery .patient-photo { height: auto; aspect-ratio: 3 / 4; background: #f3ece4; }
.gallery .patient-photo a { display: block; width: 100%; height: 100%; }
.gallery .patient-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }