/* ===== Tokens =====
Color: Ink #14191D · Porcelain #F6F3EC · Champagne #B89B6C · Cabinet Green #2F4538 · White #FFFFFF
Type: Fraunces (display) · Inter (body) · JetBrains Mono (shade codes / captions)
Signature: the "shade strip" — a row of dental shade tabs (A1→D4) used as a structural divider
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#14191D;
  --porcelain:#F6F3EC;
  --champagne:#B89B6C;
  --cabinet:#2F4538;
  --white:#FFFFFF;
  --ink-60: rgba(20,25,29,.6);
  --ink-30: rgba(20,25,29,.3);
  --line: rgba(20,25,29,.12);
  --max: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--porcelain);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.08;
}
h1{font-size:clamp(2.6rem, 6vw, 5rem); font-weight:600;}
h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem);}
h3{font-size:1.3rem;}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--champagne);
}

.mono{font-family:'JetBrains Mono', monospace;}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--cabinet);
  outline-offset:3px;
}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,236,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:'Fraunces', serif;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.logo span{color:var(--champagne);}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{
  font-size:0.88rem;
  font-weight:500;
  color:var(--ink-60);
  position:relative;
  padding:4px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:100%; height:1px;
  background:var(--champagne);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  border-radius:2px;
  font-size:0.85rem; font-weight:600;
  border:1px solid var(--ink);
  transition:all .25s ease;
}
.btn-dark{background:var(--ink); color:var(--white);}
.btn-dark:hover{background:var(--cabinet); border-color:var(--cabinet);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--ink-30);}
.btn-outline:hover{border-color:var(--ink);}

/* ===== Shade strip — signature element ===== */
.shade-strip{
  display:flex; width:100%; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.shade-strip .tab{
  flex:1; height:34px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:0.62rem; letter-spacing:.05em;
  color:rgba(20,25,29,.45);
  border-right:1px solid var(--line);
}
.shade-strip .tab:last-child{border-right:none;}
/* 8 tabs, ivory -> champagne gradient, evoking a VITA shade guide */
.shade-strip .tab:nth-child(1){background:#FBF9F4;}
.shade-strip .tab:nth-child(2){background:#F6F1E7;}
.shade-strip .tab:nth-child(3){background:#EFE7D6;}
.shade-strip .tab:nth-child(4){background:#E6D9BE;}
.shade-strip .tab:nth-child(5){background:#DBC9A2;}
.shade-strip .tab:nth-child(6){background:#CDB686;}
.shade-strip .tab:nth-child(7){background:#BFA371;color:rgba(20,25,29,.6);}
.shade-strip .tab:nth-child(8){background:var(--champagne); color:var(--ink);}

/* ===== Hero ===== */
.hero{
  padding:120px 0 0;
  position:relative;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
  padding-bottom:90px;
}
.hero h1{margin:18px 0 26px;}
.hero p.lede{
  font-size:1.12rem; color:var(--ink-60); max-width:480px; margin-bottom:36px;
}
.hero-cta{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.hero-visual{
  aspect-ratio:4/5;
  background:linear-gradient(160deg, #1d2520 0%, var(--cabinet) 55%, #3c5240 100%);
  border-radius:2px;
  position:relative;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-visual .shade-mark{
  padding:32px;
  color:var(--porcelain);
}
.hero-visual .shade-mark .eyebrow{color:rgba(246,243,236,.55);}
.hero-visual .shade-mark .big{
  font-family:'Fraunces', serif; font-size:3rem; font-weight:500; margin-top:6px;
}
.hero-visual::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 30% 20%, rgba(246,243,236,.10), transparent 45%);
}

/* ===== Sections ===== */
section{padding:90px 0;}
section.tight{padding:60px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:54px; flex-wrap:wrap;
}
.section-head p{color:var(--ink-60); max-width:420px;}

.divider{height:1px; background:var(--line); border:none;}

/* Grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:40px;}
.cell{background:var(--porcelain); padding:40px 36px;}
.cell:hover{background:var(--white);}

.card{
  padding:36px;
  border:1px solid var(--line);
  background:var(--white);
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{border-color:var(--champagne); transform:translateY(-2px);}
.card .num{font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--champagne); letter-spacing:.1em;}
.card h3{margin:14px 0 10px;}
.card p{color:var(--ink-60); font-size:.95rem;}

/* Stats */
.stats{display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{flex:1; padding:34px 0; text-align:left; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .num{font-family:'Fraunces', serif; font-size:2.4rem; color:var(--cabinet);}
.stat .label{font-size:.8rem; color:var(--ink-60); margin-top:4px;}

/* Quote / testimonial */
.quote{
  font-family:'Fraunces', serif; font-size:1.6rem; font-weight:500; line-height:1.35;
  max-width:760px;
}
.quote-attr{margin-top:20px; font-size:.85rem; color:var(--ink-60);}

/* Footer */
footer{
  background:var(--ink); color:var(--porcelain); padding:70px 0 30px; margin-top:60px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px;}
footer h3{color:var(--white); font-size:1.1rem;}
footer .logo{color:var(--white);}
footer p{color:rgba(246,243,236,.55); font-size:.9rem; max-width:280px; margin-top:14px;}
footer .col a{display:block; font-size:.88rem; color:rgba(246,243,236,.7); margin-bottom:10px;}
footer .col a:hover{color:var(--champagne);}
footer .col h4{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--champagne); margin-bottom:18px; font-family:'JetBrains Mono', monospace; font-weight:500;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid rgba(246,243,236,.12);
  font-size:.78rem; color:rgba(246,243,236,.45); flex-wrap:wrap; gap:10px;
}

/* Page header (non-home pages) */
.page-head{padding:150px 0 60px;}
.page-head .eyebrow{margin-bottom:14px;}

/* Forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field.full{grid-column:1/-1;}
label{font-size:.8rem; font-weight:600; color:var(--ink-60);}
input, textarea, select{
  font-family:'Inter', sans-serif;
  font-size:.95rem;
  padding:13px 14px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  border-radius:1px;
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--cabinet); outline-offset:1px; border-color:var(--cabinet);}
textarea{resize:vertical; min-height:120px;}

/* Map / info block */
.info-block{
  background:var(--white); border:1px solid var(--line); padding:36px;
}
.info-row{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line);}
.info-row:last-child{border-bottom:none;}
.info-row .k{font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--champagne); min-width:90px; padding-top:2px;}
.info-row .v{font-size:.95rem;}

/* Team */
.team-card{background:var(--white); border:1px solid var(--line);}
.team-photo{height:280px; background:linear-gradient(155deg,#e9e2d2,#cdb686);}
.team-info{padding:24px;}
.team-info .role{font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.08em; color:var(--champagne); text-transform:uppercase; margin-top:4px;}

@media (max-width: 860px){
  .nav-links{display:none;}
  .hero-inner{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats{flex-wrap:wrap;}
  .stat{flex:1 1 50%; border-bottom:1px solid var(--line);}
  .form-grid{grid-template-columns:1fr;}
}

[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}