/* ============================================================
   SeaBrook Dental Laboratory — Design tokens
   Direction: "the spec sheet and the fan of shade tabs" —
   a B2B dental lab that runs on precision, but is still a
   craft. Cool porcelain surfaces, a technical grotesk for
   structure, a humanist serif for voice, and a signature
   strip of tooth-shade tabs standing in for the generic
   hairline rule / gradient-blob divider.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* surfaces */
  --porcelain: #EEF0E9;
  --porcelain-2: #E3E7DD;
  --white: #FBFAF6;

  /* ink */
  --ink: #16221F;
  --ink-soft: #46524C;
  --ink-faint: #7C877E;

  /* brand teal */
  --teal: #1F5C57;
  --teal-deep: #12302D;
  --teal-pale: #DCEAE6;

  /* shade-tab ramp (signature motif) */
  --shade-1: #F4E9C9;
  --shade-2: #EBD9A0;
  --shade-3: #DEC177;
  --shade-4: #CBA255;
  --shade-5: #B37F3E;
  --shade-6: #8A5B2C;

  --line: #CBD1C4;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1200px;
  --radius: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--porcelain);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin:0; padding:0; list-style:none; }

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

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--teal);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--teal);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--teal); color: var(--white); }
.btn-primary:hover{ background: var(--teal-deep); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--white); }
.btn-on-dark{ background: var(--white); color: var(--teal-deep); }
.btn-on-dark:hover{ background: var(--shade-2); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(238,240,233,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing: -0.01em; }
.brand .brand-mark{ width:34px;height:34px; border-radius:50%; background: var(--teal); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:0.8rem; font-family: var(--font-mono); }
.brand span.dim{ color: var(--ink-faint); font-weight:400; font-family: var(--font-mono); font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav ul{ display:flex; align-items:center; gap: 26px; }
.main-nav a{ font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft); position:relative; padding: 6px 0; }
.main-nav a:hover, .main-nav a.active{ color: var(--teal); }
.main-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--teal); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top: 100%; left: -20px; margin-top: 14px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  min-width: 260px; padding: 8px; box-shadow: 0 18px 40px rgba(20,30,28,0.12);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .18s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{ display:block; padding: 10px 12px; border-radius: 2px; font-family: var(--font-body); font-size:0.92rem; }
.dropdown a:hover{ background: var(--teal-pale); color: var(--teal-deep); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ font-family: var(--font-mono); font-size:0.85rem; white-space:nowrap; }
.header-phone strong{ display:block; color: var(--ink-faint); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:500; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

/* ---------- shade strip signature ---------- */
.shade-strip{
  display:flex; align-items:flex-end; gap: 6px; height: 120px;
}
.shade-strip .tab{
  flex:1; border-radius: 3px 3px 2px 2px;
  display:flex; align-items:flex-end; justify-content:center;
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--teal-deep);
  padding-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(20,30,28,0.08);
  transform-origin: bottom center;
  transition: transform .35s ease, box-shadow .2s ease;
}
.shade-strip .tab:hover{ transform: translateY(-10px); box-shadow: inset 0 0 0 1px rgba(20,30,28,0.15), 0 10px 18px rgba(20,30,28,0.12); }
.shade-strip[data-anim="in"] .tab{ animation: fanIn .6s cubic-bezier(.2,.8,.2,1) both; }
.shade-strip .tab:nth-child(1){ animation-delay: .02s; }
.shade-strip .tab:nth-child(2){ animation-delay: .07s; }
.shade-strip .tab:nth-child(3){ animation-delay: .12s; }
.shade-strip .tab:nth-child(4){ animation-delay: .17s; }
.shade-strip .tab:nth-child(5){ animation-delay: .22s; }
.shade-strip .tab:nth-child(6){ animation-delay: .27s; }
@keyframes fanIn{ from{ transform: translateY(18px) scaleY(.7); opacity:0; } to{ transform: translateY(0) scaleY(1); opacity:1; } }

.divider-strip{ display:flex; height:8px; }
.divider-strip span{ flex:1; }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 80px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items:center; }
.hero h1{ font-size: clamp(2.4rem, 4.6vw, 3.6rem); max-width: 14ch; }
.hero-lede{ font-size: 1.15rem; max-width: 46ch; color: var(--ink-soft); }
.hero-actions{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }
.hero-panel{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.hero-panel .shade-strip{ height: 150px; margin-bottom: 18px; }
.hero-panel-caption{ font-family: var(--font-mono); font-size:0.75rem; color: var(--ink-faint); display:flex; justify-content:space-between; }

/* ---------- stat bar ---------- */
.statbar{ background: var(--teal-deep); color: var(--white); padding: 26px 0; }
.statbar .container{ display:flex; flex-wrap:wrap; gap: 24px; justify-content:space-between; }
.stat{ font-family: var(--font-mono); font-size:0.85rem; display:flex; align-items:center; gap:10px; color: rgba(251,250,246,0.92); }
.stat b{ color: var(--white); font-size:1rem; }

/* ---------- sections ---------- */
section{ padding: 88px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.alt-bg{ background: var(--porcelain-2); }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }

.card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 30px rgba(20,30,28,0.08); }
.card .icon{ width:44px; height:44px; margin-bottom:18px; color: var(--teal); }
.card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.card p{ font-size:0.96rem; margin-bottom: 14px; }
.card .card-link{ font-family: var(--font-mono); font-size:0.78rem; color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em; }
.card .card-link:hover{ text-decoration: underline; }

.media-panel{
  background: var(--teal-pale); border:1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; padding: 10%;
}
.icon-collage{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden;
}
.icon-collage .cell{ background: var(--porcelain-2); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding: 22%; }
.icon-collage .cell img{ width:100%; height:100%; object-fit:contain; opacity:0.82; }

.about-split{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius: var(--radius); }
.about-media .badge{
  position:absolute; bottom:-22px; left:-22px; background: var(--white);
  border:1px solid var(--line); border-radius: var(--radius); padding: 16px 20px;
  font-family: var(--font-mono); box-shadow: 0 14px 30px rgba(20,30,28,0.1);
}
.about-media .badge b{ display:block; font-family: var(--font-display); font-size:1.6rem; color: var(--teal-deep); }
.about-media .badge span{ font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--ink-faint); }

.feature-list{ margin-top: 22px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.feature-list li{ font-family: var(--font-mono); font-size:0.86rem; padding-left: 22px; position:relative; color: var(--ink-soft); }
.feature-list li::before{ content:"—"; position:absolute; left:0; color: var(--teal); }

.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.why-item{ background: var(--white); padding: 32px; }
.why-item h4{ font-size:1.02rem; margin-bottom:8px; }
.why-item p{ font-size:0.92rem; margin:0; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; counter-reset: step; }
.step{ position:relative; padding-top: 8px; }
.step .num{ font-family: var(--font-mono); font-size:0.8rem; color: var(--teal); display:block; margin-bottom:14px; }
.step h4{ font-size:1.1rem; }

.testimonial-layout{ display:grid; grid-template-columns: 0.5fr 1.5fr; gap: 32px; align-items:start; }
.rating-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.rating-card img{ aspect-ratio: 4/3; object-fit:cover; }
.rating-card .rating-body{ padding: 22px; }
.rating-card .score{ font-family: var(--font-display); font-size:2rem; color: var(--teal-deep); }
.rating-card .score-label{ font-family: var(--font-mono); font-size:0.75rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }

.testimonial-track{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.testimonial{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.testimonial p{ font-style: italic; font-size:1rem; color: var(--ink); }
.testimonial footer{ margin-top: 16px; font-family: var(--font-mono); font-size:0.78rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.blog-card h3{ font-size:1.05rem; }
.blog-card p{ font-size:0.92rem; }
.blog-card-icon{
  background: var(--teal-pale); border-radius: var(--radius); aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center; margin-bottom: 16px;
}
.blog-card-icon img{ width:36px; height:36px; opacity:0.85; }

.cta-band{ background: var(--teal-deep); color: var(--white); padding: 70px 0; text-align:center; }
.cta-band h2{ color: var(--white); }
.cta-band p{ color: rgba(251,250,246,0.85); max-width: 50ch; margin-left:auto; margin-right:auto; }
.cta-band .hero-actions{ justify-content:center; }

/* ---------- contact block ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
.contact-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.contact-card .label{ font-family: var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--ink-faint); margin-bottom:8px; display:block; }
.contact-card .value{ font-family: var(--font-mono); font-size:0.95rem; }
.map-embed{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; height: 100%; min-height: 280px; }
.map-embed iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full{ grid-column: 1 / -1; }
label{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--ink-faint); display:block; margin-bottom:6px; }
input, textarea, select{
  width:100%; font-family: var(--font-body); font-size:1rem; padding: 12px 14px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink);
}
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--teal); outline-offset:1px; }
textarea{ min-height: 130px; resize: vertical; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: rgba(251,250,246,0.75); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4{ color: var(--white); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; font-family: var(--font-mono); margin-bottom: 18px; }
.site-footer a{ color: rgba(251,250,246,0.75); }
.site-footer a:hover{ color: var(--white); }
.footer-brand p{ color: rgba(251,250,246,0.65); font-size:0.92rem; max-width: 34ch; }
.footer-links li{ margin-bottom: 10px; font-size:0.92rem; }
.footer-bottom{ border-top:1px solid rgba(251,250,246,0.14); margin-top: 48px; padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family: var(--font-mono); font-size:0.75rem; color: rgba(251,250,246,0.5); }

.breadcrumb{ font-family: var(--font-mono); font-size:0.78rem; color: var(--ink-faint); padding: 22px 0 0; }
.breadcrumb a:hover{ color: var(--teal); }
.page-hero{ padding: 40px 0 60px; }
.page-hero h1{ font-size: clamp(2.2rem, 4vw, 3rem); max-width: 20ch; }

.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .about-split, .contact-grid{ grid-template-columns: 1fr; }
  .grid-3, .why-grid, .steps, .blog-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .testimonial-track{ grid-template-columns: 1fr; }
  .testimonial-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .main-nav{ position:fixed; inset: 68px 0 0 0; background: var(--porcelain); flex-direction:column; align-items:flex-start; padding: 24px 28px; transform: translateX(100%); transition: transform .25s ease; overflow-y:auto; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .main-nav li{ width:100%; border-bottom:1px solid var(--line); }
  .main-nav a{ display:block; padding: 14px 0; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; margin:0 0 8px; display:none; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
  .header-phone{ display:none; }
  .grid-3, .grid-2, .why-grid, .steps, .blog-grid, .form-grid, .contact-cards{ grid-template-columns: 1fr; }
  section{ padding: 56px 0; }
  .footer-grid{ grid-template-columns: 1fr; }
}