:root{--ink:#12263a;--ink2:#0d1c2c;--cream:#f6f1e7;--cream2:#ece4d3;--brass:#c2a272;--brass-d:#8a6c3f;--line:rgba(194,162,114,.28)}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:1.05rem;line-height:1.75;color:var(--ink);background:var(--cream);overflow-x:hidden}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:300;line-height:1.12}
h1{font-size:clamp(2.6rem,5.5vw,4.4rem);color:var(--cream);margin-bottom:1.1rem}
h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.1rem}
h1 em,h2 em{font-style:italic;font-weight:300}
a{color:var(--brass-d)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem;font-weight:500}
.eyebrow.dark{color:var(--brass-d)}
.lede{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.3rem;line-height:1.5;color:rgba(246,241,231,.85)}
.lede-dark{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.2rem;line-height:1.6;color:#33475b}

/* nav */
.site-nav{background:rgba(13,28,44,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:.5rem 0}
.site-nav .navbar-brand{display:flex;align-items:center;gap:.7rem;color:var(--cream);font-family:'Fraunces',serif;font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;line-height:1.2;white-space:normal}
.site-nav .navbar-brand small{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--brass);margin-top:.2rem}
.nav-logo{width:44px;height:44px;border-radius:50%}
.site-nav .nav-link{color:rgba(246,241,231,.82);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;padding:.6rem .8rem;transition:color .3s}
.site-nav .nav-link:hover{color:var(--brass)}
.navbar-toggler{border-color:rgba(246,241,231,.4);background:var(--cream)}
.btn-ghost-nav{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(246,241,231,.35);border-radius:0;padding:.55rem 1rem;transition:.3s}
.btn-ghost-nav:hover{background:var(--brass);color:var(--ink2);border-color:var(--brass)}

/* buttons */
.btn{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;border-radius:0;padding:15px 32px;font-weight:600;transition:.3s}
.btn-brass{background:var(--brass);color:var(--ink2);border:1px solid var(--brass)}
.btn-brass:hover{background:transparent;color:var(--brass);border-color:var(--brass)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(246,241,231,.35)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-ink{background:var(--ink);color:var(--cream);border:1px solid var(--ink)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn-ghost-dark{background:transparent;color:var(--ink);border:1px solid rgba(18,38,58,.35)}
.btn-ghost-dark:hover{border-color:var(--brass-d);color:var(--brass-d)}

/* hero */
.hero{background:linear-gradient(180deg,var(--ink2),var(--ink));padding:72px 0 0;position:relative}
.hero .container{padding-bottom:64px}
.hero-photo{border:1px solid var(--line);padding:10px}
.hero-photo img{display:block;width:100%;aspect-ratio:1000/655;object-fit:cover;object-position:50% 40%;max-height:min(66vh,480px)}
.hero-facts{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.hero-facts li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--brass);margin-right:.6rem;vertical-align:middle}

/* signature: tooth shade guide strip */
.shade-strip{display:flex;height:34px}
.shade-strip i{flex:1;border-right:1px solid rgba(18,38,58,.12)}
.shade-strip i:nth-child(1){background:#fbf9f3}.shade-strip i:nth-child(2){background:#f8f4e9}.shade-strip i:nth-child(3){background:#f5efe0}
.shade-strip i:nth-child(4){background:#f2eadb}.shade-strip i:nth-child(5){background:#efe5d2}.shade-strip i:nth-child(6){background:#ebe0ca}
.shade-strip i:nth-child(7){background:#e8dbc2}.shade-strip i:nth-child(8){background:#e4d6bb}.shade-strip i:nth-child(9){background:#e0d0b3}
.shade-strip i:nth-child(10){background:#dccaab}.shade-strip i:nth-child(11){background:#d8c5a3}.shade-strip i:nth-child(12){background:#d4c09b}
.site-footer .shade-strip{margin-bottom:56px}

/* sections */
.section{padding:96px 0}
.section-dark{background:var(--ink);color:var(--cream)}
.section-dark h2{color:var(--cream)}
.section-cream2{background:var(--cream2)}
.frame{display:block;width:100%;border:1px solid var(--line);padding:8px;background:transparent}
.whiten .frame{border-color:rgba(194,162,114,.4)}

.index-list{list-style:none;padding:0;margin:0;counter-reset:none}
.index-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);font-family:'Fraunces',serif;font-weight:300;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2}
.index-list li:first-child{border-top:1px solid var(--line)}
.index-list em{font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-d)}

.pic-card{border-top:1px solid var(--line);padding-top:1rem;height:100%}
.pic-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:1rem}
.pic-card h3{font-size:1.5rem;margin-bottom:.4rem}
.pic-card p{margin:0;color:#33475b}

.shore{position:relative;height:clamp(220px,34vw,380px);overflow:hidden;background:var(--ink)}
.shore img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block}
.shore::after{content:"";position:absolute;inset:0;background:rgba(13,28,44,.45)}
.shore-text{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem}
.shore-text p{margin:0;font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--cream);text-shadow:0 0 4px rgba(0,0,0,1),0 2px 20px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.8)}

/* contact */
.contact-block{font-family:'Fraunces',serif;font-weight:300;font-size:1.3rem;line-height:1.5;margin-bottom:1rem;font-style:normal}
.contact-block a{color:var(--ink);text-decoration-color:var(--brass)}
.hours{width:100%;max-width:420px;border-collapse:collapse}
.hours th,.hours td{padding:.6rem 0;border-bottom:1px solid var(--line);font-weight:400;font-size:.98rem}
.hours th{color:#33475b}
.hours td{text-align:right}
.map{border:1px solid var(--line);padding:8px;height:100%;min-height:380px}
.map iframe{width:100%;height:100%;min-height:364px;border:0;display:block}

/* footer */
.site-footer{background:var(--ink2);color:rgba(246,241,231,.8);padding-bottom:40px}
.foot-logo{width:84px;height:84px;border-radius:50%;margin-bottom:1rem}
.foot-name{font-family:'Fraunces',serif;text-transform:uppercase;letter-spacing:.2em;font-weight:300;font-size:1rem;color:var(--cream);margin-bottom:.4rem}
.foot-line{font-size:.9rem;margin-bottom:1rem}
.site-footer a{color:var(--brass)}
.foot-power{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin:0}

@media (max-width:991px){
  .section{padding:64px 0}
  .hero{padding-top:40px}
  .site-nav .navbar-collapse{padding:.5rem 0 1rem}
  .btn-ghost-nav{display:inline-block;margin-top:.5rem}
}
@media (max-width:575px){
  .btn{padding:14px 22px}
  .shade-strip{height:24px}
}