/* ============================================================
   TRU-SMILE DENTAL LAB — styles.css  (v2 — full rebuild)
   ============================================================ */

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  --navy:        #0d1f3c;
  --navy-dark:   #0a1828;
  --teal:        #2a7fa5;
  --teal-light:  #4da6c8;
  --sky:         #d6eef8;
  --white:       #ffffff;
  --grey-light:  #f4f6f9;
  --grey:        #e0e6ed;
  --grey-mid:    #8a9ab0;
  --text:        #1a2a3a;
  --text-light:  #4a5a6a;

  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans',  'Segoe UI', sans-serif;

  --radius:    8px;
  --radius-lg: 16px;
  --shadow:    0 4px 20px rgba(13,31,60,0.10);
  --shadow-lg: 0 8px 40px rgba(13,31,60,0.16);
  --transition: 0.25s ease;
  --max-w: 1200px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; transition: color var(--transition); }
ul    { list-style: none; }

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(13,31,60,0.08);
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 2px 20px rgba(13,31,60,0.14); }

.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
  height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Logo — large and brand-recognizable */
.nav-logo img { height: 80px; width: auto; display: block; }

/* Desktop links */
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 600;
  color: var(--navy); letter-spacing: 0.02em; padding: 4px 0; position: relative;
}
.nav-links a::after {
  content:''; position: absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--teal);
  transform:scaleX(0); transition:transform var(--transition); transform-origin:left;
}
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover { color: var(--teal); }

/* CTA button */
.btn-nav {
  background: var(--navy) !important; color: var(--white) !important;
  padding: 11px 24px !important; border-radius: var(--radius);
  font-weight: 700 !important; transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-nav::after { display:none !important; }
.btn-nav:hover  { background: var(--teal) !important; transform: translateY(-1px); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; z-index:1010;
}
.hamburger span { display:block; width:26px; height:2px; background:var(--navy); border-radius:2px; transition:transform var(--transition), opacity var(--transition); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed; top:88px; left:0; right:0;
  background:var(--white); box-shadow:0 8px 24px rgba(13,31,60,0.12);
  padding:24px; flex-direction:column; gap:20px; z-index:999;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:var(--font-head); font-size:1rem; font-weight:600; color:var(--navy); padding:10px 0; border-bottom:1px solid var(--grey); }
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu a:hover { color:var(--teal); }
.mobile-menu .btn-nav { text-align:center; display:block; margin-top:8px; border-bottom:none !important; }

.page-offset { padding-top: 88px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-size:0.9rem; font-weight:700; letter-spacing:0.03em;
  padding:13px 28px; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  white-space:nowrap; text-decoration:none;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(13,31,60,0.18); }
.btn-primary        { background:var(--navy);  color:var(--white); border-color:var(--navy); }
.btn-primary:hover  { background:var(--teal);  border-color:var(--teal); color:var(--white); }
.btn-outline        { background:transparent;  color:var(--navy); border-color:var(--navy); }
.btn-outline:hover  { background:var(--navy);  color:var(--white); }
.btn-outline-white        { background:transparent; color:var(--white); border-color:var(--white); }
.btn-outline-white:hover  { background:var(--white); color:var(--navy); }
.btn-white        { background:var(--white); color:var(--navy); border-color:var(--white); }
.btn-white:hover  { background:var(--sky);   border-color:var(--sky); }
.btn-teal        { background:var(--teal); color:var(--white); border-color:var(--teal); }
.btn-teal:hover  { background:var(--teal-light); border-color:var(--teal-light); color:var(--white); }

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.section    { padding: 80px 24px; }
.section-sm { padding: 48px 24px; }
.container  { max-width: var(--max-w); margin: 0 auto; }

.section-label {
  display:inline-block; font-family:var(--font-head);
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:12px;
}
.section-title    { font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:var(--navy); line-height:1.2; margin-bottom:16px; }
.section-subtitle { font-size:clamp(0.95rem,1.5vw,1.05rem); color:var(--text-light); max-width:560px; line-height:1.7; }
.text-center { text-align:center; }

/* ============================================================
   FOOTER  (v2 — larger logo, working hours, updated links)
   ============================================================ */
.footer { background:var(--navy-dark); color:var(--white); padding:64px 24px 0; }

.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 260px;
  gap: 40px;
}

/* Brand column */
.footer-brand .footer-logo { width: 200px; height: auto; margin-bottom: 20px; }

.footer-social { display:flex; gap:12px; margin-top:20px; }
.footer-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.10); color:var(--white);
  transition:background var(--transition);
}
.footer-social a:hover { background:var(--teal); }
.footer-social svg { width:16px; height:16px; fill:currentColor; }

.footer-contact { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.footer-contact a {
  font-size:0.875rem; color:rgba(255,255,255,0.75);
  display:flex; align-items:flex-start; gap:8px; transition:color var(--transition);
}
.footer-contact a:hover { color:var(--white); }
.footer-contact svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; margin-top:3px; }

/* Nav columns */
.footer-nav h4 {
  font-family:var(--font-head); font-size:0.78rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:16px;
}
.footer-nav ul { display:flex; flex-direction:column; gap:10px; }
.footer-nav ul li a { font-size:0.875rem; color:rgba(255,255,255,0.75); transition:color var(--transition); }
.footer-nav ul li a:hover { color:var(--white); }

.footer-cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; }

/* Working hours column */
.footer-hours h4 {
  font-family:var(--font-head); font-size:0.78rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:16px;
}
.footer-hours ul { display:flex; flex-direction:column; gap:10px; }
.footer-hours ul li { font-size:0.82rem; color:rgba(255,255,255,0.70); line-height:1.5; }
.footer-hours ul li strong { color:rgba(255,255,255,0.90); display:block; font-size:0.83rem; }

/* Bottom bar */
.footer-bottom {
  max-width:var(--max-w); margin:48px auto 0; padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer-tagline { font-family:var(--font-head); font-size:0.95rem; font-weight:700; letter-spacing:0.08em; color:rgba(255,255,255,0.30); text-transform:uppercase; }
.footer-copy    { font-size:0.8rem; color:rgba(255,255,255,0.30); }

/* ============================================================
   HOME — HERO  (v2: text left, image is background only)
   ============================================================ */
.hero {
  position:relative; min-height:620px;
  display:flex; align-items:center; overflow:hidden;
}

/* Full-bleed background image */
.hero-bg {
  position:absolute; inset:0;
  background-image: url('assets/herosection1.png');
  background-size: cover;
  background-position: center right;
  z-index:0;
}
/* Dark gradient left-to-right so text is legible */
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(
    to right,
    rgba(10,24,40,0.92) 0%,
    rgba(10,24,40,0.75) 45%,
    rgba(10,24,40,0.25) 75%,
    rgba(10,24,40,0.10) 100%
  );
}

.hero-inner {
  position:relative; z-index:2;
  max-width:var(--max-w); margin:0 auto; padding:100px 48px;
  width:100%;
}

/* Only text — no floating image element */
.hero-content { max-width:560px; }

.hero-eyebrow {
  display:inline-block; font-family:var(--font-head);
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:20px;
  padding:7px 16px; border:1px solid rgba(77,166,200,0.45); border-radius:20px;
}

.hero h1 {
  font-family:var(--font-head); font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:800; line-height:1.1; color:var(--white); margin-bottom:14px;
}
.hero h1 em { font-style:normal; color:var(--teal-light); }

.hero-sub  { font-size:0.82rem; color:rgba(255,255,255,0.6); margin-bottom:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.hero-desc { font-size:1.05rem; color:rgba(255,255,255,0.8); margin-bottom:40px; line-height:1.7; max-width:480px; }

.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }

/* Proudly Canadian badge — positioned bottom-right of hero */
.hero-badge {
  position:absolute; bottom:32px; right:48px; z-index:3;
}
.hero-badge img { width:64px; height:auto; }

/* ── Stats Bar ───────────────────────────────────────────── */
.stats-bar { background:var(--navy); padding:28px 24px; }
.stats-inner { max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:center; }
.stat-item  { display:flex; flex-direction:column; align-items:center; padding:0 64px; }
.stat-item:not(:last-child) { border-right:1px solid rgba(255,255,255,0.2); }
.stat-number { font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; color:var(--white); line-height:1; }
.stat-label  { font-size:0.78rem; color:rgba(255,255,255,0.55); letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; }

/* ── Full Service Section ────────────────────────────────── */
.full-service { padding:80px 24px; background:var(--white); }
.full-service-header { margin-bottom:48px; }

/* Department 2×2 grid — consistent card composition */
.dept-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:var(--max-w); margin:0 auto;
}

.dept-card {
  position:relative; display:block; height:300px;
  border-radius:var(--radius-lg); overflow:hidden;
  /*
    cover fills the card edge-to-edge with no gaps.
    center 40% keeps the product visible in the upper zone
    while anchoring the palm/hand in the lower zone.
  */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40%;
  text-decoration:none; cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.dept-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* Consistent overlay across all cards */
.dept-card-overlay {
  position:absolute; inset:0;
  background:rgba(13,31,60,0.52);
  transition:background var(--transition);
}
.dept-card:hover .dept-card-overlay { background:rgba(13,31,60,0.35); }

.dept-card-content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px;
}
.dept-card-content h3 {
  font-family:var(--font-head); font-size:1.25rem; font-weight:800;
  color:var(--white); margin-bottom:6px; line-height:1.2;
}
.dept-arrow {
  font-family:var(--font-head); font-size:0.78rem; font-weight:600;
  letter-spacing:0.06em; color:var(--teal-light);
  transition:letter-spacing var(--transition), color var(--transition);
}
.dept-card:hover .dept-arrow { letter-spacing:0.1em; color:var(--white); }

/* ── Differences ─────────────────────────────────────────── */
.differences { background:var(--grey-light); }
.differences-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; }

.diff-card {
  background:var(--white); border-radius:var(--radius-lg); padding:32px 24px;
  box-shadow:var(--shadow); border-top:3px solid transparent;
  transition:border-color var(--transition), transform var(--transition);
}
.diff-card:hover { border-top-color:var(--teal); transform:translateY(-4px); }

.diff-icon {
  width:56px; height:56px; background:var(--sky); border-radius:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
/* Outline-style icons use stroke, not fill */
.diff-icon svg { width:26px; height:26px; stroke:var(--teal); fill:none; }
.diff-card h3 { font-family:var(--font-head); font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
.diff-card p  { font-size:0.875rem; color:var(--text-light); line-height:1.6; }

/* ── Digital & Analog CTA ────────────────────────────────── */
.digital-analog { background:var(--navy); padding:72px 24px; text-align:center; }
.digital-analog h2 { font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--white); margin-bottom:16px; }
.digital-analog p  { color:rgba(255,255,255,0.75); margin-bottom:8px; font-size:1rem; }
.contact-links { display:flex; align-items:center; justify-content:center; gap:32px; margin:24px 0 32px; flex-wrap:wrap; }
.contact-link-item { display:flex; align-items:center; gap:8px; color:var(--teal-light); font-size:0.95rem; font-weight:600; transition:color var(--transition); }
.contact-link-item:hover { color:var(--white); }
.contact-link-item svg { width:16px; height:16px; fill:currentColor; }

/* ── Partner ─────────────────────────────────────────────── */
.partner { padding:80px 24px; text-align:center; background:var(--white); }
.partner-box { max-width:680px; margin:0 auto; border:2px solid var(--grey); border-radius:var(--radius-lg); padding:60px 48px; }
.partner-eyebrow { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; }
.partner h2 { font-family:var(--font-head); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:var(--navy); margin-bottom:12px; }
.partner p  { color:var(--text-light); margin-bottom:32px; }
.partner-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   SOLUTIONS PAGE
   ============================================================ */
.solutions-hero { position:relative; height:360px; overflow:hidden; }
.solutions-hero img { width:100%; height:100%; object-fit:cover; object-position:center; }
.solutions-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(13,31,60,0.5) 0%,rgba(13,31,60,0.1) 100%); }

.solutions-intro { background:var(--white); padding:40px 24px; border-bottom:1px solid var(--grey); }
.solutions-intro-inner { max-width:var(--max-w); margin:0 auto; }
.solutions-intro h2 { font-family:var(--font-head); font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.solutions-intro p  { color:var(--text-light); font-size:0.95rem; }

.accordion-section { max-width:var(--max-w); margin:0 auto; padding:48px 24px 80px; display:flex; flex-direction:column; gap:16px; }
.accordion-item { border:1px solid var(--grey); border-radius:var(--radius); overflow:hidden; }
.accordion-header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; background:var(--navy); border:none; cursor:pointer; text-align:left;
  transition:background var(--transition);
}
.accordion-header:hover { background:#162f52; }
.accordion-title { font-family:var(--font-head); font-size:1rem; font-weight:700; color:var(--white); }
.accordion-icon { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform var(--transition),background var(--transition); }
.accordion-icon svg { width:14px; height:14px; fill:var(--white); }
.accordion-item.open .accordion-icon { transform:rotate(180deg); background:var(--teal); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.accordion-item.open .accordion-body { max-height:2000px; }

.product-table { width:100%; border-collapse:collapse; }
.product-table tr { border-bottom:1px solid var(--grey); }
.product-table tr:last-child { border-bottom:none; }
.product-table td { padding:16px 28px; font-size:0.9rem; color:var(--text); background:var(--white); }
.product-table td:last-child { text-align:right; color:var(--text-light); white-space:nowrap; }
.product-table tr:hover td { background:var(--grey-light); }
.product-table .note-row td { font-weight:600; color:var(--teal); font-size:0.875rem; }

.inlab-list { padding:8px 0; }
.inlab-list li { padding:14px 28px; border-bottom:1px solid var(--grey); font-size:0.9rem; color:var(--text); }
.inlab-list li:last-child { border-bottom:none; }
.inlab-list li:hover { background:var(--grey-light); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero { position:relative; height:340px; overflow:hidden; }
.contact-hero img { width:100%; height:100%; object-fit:cover; object-position:center; }
.contact-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,31,60,0.35) 0%, rgba(13,31,60,0.70) 100%);
  display:flex; align-items:flex-end; padding:40px;
}
.contact-hero-text { color:var(--white); }
.contact-hero-text h1 { font-family:var(--font-head); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; line-height:1.15; }
.contact-hero-text p  { font-size:1rem; color:rgba(255,255,255,0.8); margin-top:8px; }

.contact-info-strip { background:var(--white); border-bottom:1px solid var(--grey); padding:18px 24px; }
.contact-info-strip-inner { max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.contact-info-item { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--navy); font-weight:500; }
.contact-info-item svg { width:16px; height:16px; fill:var(--teal); flex-shrink:0; }
.contact-info-item a { color:var(--navy); transition:color var(--transition); }
.contact-info-item a:hover { color:var(--teal); }

.contact-form-section { padding:60px 24px 80px; background:var(--grey-light); }

.form-card { max-width:680px; margin:0 auto; background:var(--white); border-radius:var(--radius-lg); padding:48px; box-shadow:var(--shadow); }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.form-group:last-child { margin-bottom:0; }
.form-group label { font-family:var(--font-head); font-size:0.8rem; font-weight:600; color:var(--navy); letter-spacing:0.02em; }
.form-group label .req { color:var(--teal); }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:12px 16px; border:1.5px solid var(--grey);
  border-radius:var(--radius); font-family:var(--font-body); font-size:0.9rem;
  color:var(--text); background:var(--white);
  transition:border-color var(--transition), box-shadow var(--transition);
  appearance:none; -webkit-appearance:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(42,127,165,0.12); }
.form-group textarea { resize:vertical; min-height:160px; }

.form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:28px; }
.btn-cancel { background:none; border:none; color:var(--grey-mid); font-family:var(--font-head); font-size:0.875rem; font-weight:700; cursor:pointer; letter-spacing:0.04em; padding:12px 20px; border-radius:var(--radius); transition:color var(--transition), background var(--transition); }
.btn-cancel:hover { color:var(--navy); background:var(--grey-light); }

/* Form feedback messages */
.form-msg { display:none; padding:14px 18px; border-radius:var(--radius); margin-top:16px; font-size:0.9rem; font-weight:600; }
.form-msg.success { display:block; background:#e6f9f0; color:#1a7a4a; border:1px solid #9fdbc4; }
.form-msg.error   { display:block; background:#fef0f0; color:#c0392b; border:1px solid #f5b8b8; }

/* ============================================================
   SEND CASE PAGE
   ============================================================ */
.send-hero { position:relative; height:360px; overflow:hidden; }
.send-hero img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.send-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,31,60,0.85) 0%, rgba(13,31,60,0.25) 70%);
  display:flex; align-items:flex-end;
}
.send-hero-text { padding:40px; color:var(--white); text-align:center; width:100%; }
.send-hero-text h1 { font-family:var(--font-head); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; }
.send-hero-text p  { color:rgba(255,255,255,0.8); margin-top:6px; }

.send-subtext { background:var(--sky); padding:18px 24px; text-align:center; }
.send-subtext p { font-family:var(--font-head); font-size:0.95rem; font-weight:600; color:var(--teal); }

.workflow-section { padding:60px 24px; background:var(--white); }
.workflow-inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.workflow-card { border-radius:var(--radius-lg); padding:36px; border:2px solid var(--grey); position:relative; overflow:hidden; }
.workflow-type { font-family:var(--font-head); font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal); margin-bottom:10px; }
.workflow-card h2 { font-family:var(--font-head); font-size:1.3rem; font-weight:800; color:var(--navy); margin-bottom:14px; }
.workflow-card p  { font-size:0.9rem; color:var(--text-light); line-height:1.7; margin-bottom:14px; }
.workflow-contact { display:flex; flex-direction:column; gap:8px; margin:20px 0; }
.workflow-contact a { display:inline-flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--navy); font-weight:600; transition:color var(--transition); }
.workflow-contact a:hover { color:var(--teal); }
.workflow-contact svg { width:14px; height:14px; fill:var(--teal); }

/* Scanner carousel */
.scanner-carousel { overflow:hidden; position:relative; margin-top:24px; padding:4px 0; }
.scanner-track { display:flex; gap:10px; animation:scrollScanners 18s linear infinite; width:max-content; }
.scanner-track:hover { animation-play-state:paused; }
.scanner-tag {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:var(--sky); border-radius:20px; font-size:0.8rem;
  font-family:var(--font-head); font-weight:600; color:var(--teal);
  white-space:nowrap; border:1.5px solid rgba(42,127,165,0.2);
}
.scanner-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; }
@keyframes scrollScanners { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Send case form */
.send-form-section { padding:60px 24px 80px; background:var(--grey-light); }
.send-form-card { max-width:860px; margin:0 auto; background:var(--white); border-radius:var(--radius-lg); padding:48px; box-shadow:var(--shadow); }
.send-form-card h2 { font-family:var(--font-head); font-size:1.3rem; font-weight:800; color:var(--navy); margin-bottom:32px; padding-bottom:16px; border-bottom:2px solid var(--grey); }
.form-section-title { font-family:var(--font-head); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin:32px 0 16px; padding-bottom:8px; border-bottom:1px solid var(--grey); }

/* Tooth chart */
.tooth-chart-section { margin:24px 0; }
.tooth-chart-label  { font-family:var(--font-head); font-size:0.8rem; font-weight:600; color:var(--navy); margin-bottom:10px; }
.tooth-grid { display:flex; flex-wrap:wrap; gap:6px; }
.tooth-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:0.75rem; font-weight:600;
  border:1.5px solid var(--grey); border-radius:6px; background:var(--white); color:var(--text);
  cursor:pointer; transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.tooth-btn:hover  { border-color:var(--teal); background:var(--sky); }
.tooth-btn.selected { background:var(--teal); border-color:var(--teal); color:var(--white); }

/* File upload */
.file-upload-area { border:2px dashed var(--grey); border-radius:var(--radius); padding:32px 24px; text-align:center; cursor:pointer; transition:border-color var(--transition),background var(--transition); position:relative; }
.file-upload-area:hover { border-color:var(--teal); background:var(--sky); }
.file-upload-area input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.file-upload-area p    { font-size:0.875rem; color:var(--text-light); margin-bottom:8px; }
.file-upload-area .upload-icon { width:40px; height:40px; margin:0 auto 12px; color:var(--teal); }
.file-upload-area .upload-icon svg { width:100%; height:100%; fill:currentColor; }
.file-upload-area small { font-size:0.78rem; color:var(--grey-mid); }

.consent-group { display:flex; align-items:flex-start; gap:12px; margin:24px 0; }
.consent-group input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; accent-color:var(--teal); margin-top:2px; }
.consent-group label { font-size:0.875rem; color:var(--text-light); line-height:1.5; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero { position:relative; height:440px; overflow:hidden; }
/* Fix: show the full subject, don't over-zoom */
.about-hero img { width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.about-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(13,31,60,0.78) 0%, rgba(13,31,60,0.40) 55%, rgba(13,31,60,0.10) 100%);
  display:flex; align-items:center; padding:60px 48px;
}
.about-hero-content { max-width:520px; }
.about-hero-content .section-label { color:rgba(255,255,255,0.65); }
.about-hero-content h1 { font-family:var(--font-head); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; color:var(--white); line-height:1.15; margin-bottom:20px; }
.about-hero-content p  { font-size:0.95rem; color:rgba(255,255,255,0.80); line-height:1.7; max-width:480px; }

/* Values */
.values-section { padding:80px 24px; background:var(--white); text-align:center; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.value-card { background:var(--sky); border-radius:var(--radius-lg); padding:40px 28px; transition:transform var(--transition),box-shadow var(--transition); }
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.value-card h3 { font-family:var(--font-head); font-size:1rem; font-weight:800; color:var(--navy); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.value-card p  { font-size:0.875rem; color:var(--text-light); line-height:1.7; }

/* Lab section */
.lab-section { padding:80px 24px; background:var(--grey-light); }
.lab-inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.lab-image { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }
.lab-image img { width:100%; height:100%; object-fit:cover; }
.lab-content h2      { font-family:var(--font-head); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; color:var(--navy); line-height:1.2; margin-bottom:8px; }
.lab-content .tagline { font-family:var(--font-head); font-size:1.1rem; font-weight:600; color:var(--teal); margin-bottom:20px; }
.lab-content p       { font-size:0.95rem; color:var(--text-light); line-height:1.75; }

/* Visit our lab — map section */
.visit-section { padding:80px 24px; background:var(--white); }
.visit-inner   { max-width:var(--max-w); margin:0 auto; }
.visit-intro   { max-width:640px; margin:0 auto 40px; text-align:center; }
.visit-intro p { font-size:0.95rem; color:var(--text-light); line-height:1.7; margin-top:12px; }
.map-wrapper {
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:16/6; min-height:320px;
}
.map-wrapper iframe { width:100%; height:100%; border:0; display:block; }
.map-cta { text-align:center; margin-top:28px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .footer-inner { grid-template-columns:240px 1fr 1fr; }
  .footer-hours { grid-column:1 / -1; }
  .differences-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .nav-links  { display:none; }
  .hamburger  { display:flex; }

  /* Hero */
  .hero-inner { padding:80px 24px; }
  .hero h1    { font-size:2rem; }
  .hero-badge { bottom:20px; right:20px; }
  .hero-badge img { width:48px; }

  /* Stats */
  .stat-item { padding:0 24px; }

  /* Dept grid */
  .dept-grid  { grid-template-columns:1fr; }
  .dept-card  { height:240px; }

  /* Differences */
  .differences-grid { grid-template-columns:1fr; gap:16px; }

  /* Contact links */
  .contact-links { flex-direction:column; gap:16px; }

  /* Partner */
  .partner-box    { padding:40px 24px; }
  .partner-buttons { flex-direction:column; align-items:center; }

  /* Solutions hero */
  .solutions-hero { height:240px; }

  /* Contact hero */
  .contact-hero   { height:280px; }
  .contact-hero-overlay { padding:24px; }
  .contact-info-strip-inner { flex-direction:column; gap:12px; }

  /* Forms */
  .form-card      { padding:28px 20px; }
  .form-row       { grid-template-columns:1fr; gap:0; }
  .send-form-card { padding:28px 20px; }

  /* Send hero */
  .send-hero      { height:280px; }
  .send-hero-text { padding:24px; }
  .workflow-inner { grid-template-columns:1fr; }

  /* About */
  .about-hero     { height:360px; }
  .about-hero-overlay { padding:24px 28px; }
  .values-grid    { grid-template-columns:1fr; }
  .lab-inner      { grid-template-columns:1fr; gap:32px; }

  /* Footer */
  .footer-inner   { grid-template-columns:1fr; gap:36px; }
  .footer-cols    { grid-template-columns:1fr; gap:24px; }
  .footer-hours   { grid-column:auto; }
  .footer-bottom  { flex-direction:column; text-align:center; }
  .footer-tagline { order:2; }
  /* Logo sizes — mobile */
  .nav-logo img          { height: 58px; }
  .footer-brand .footer-logo { width: 140px; }

  /* Map */
  .map-wrapper    { aspect-ratio:4/3; }
}

@media (max-width:480px) {
  .stat-item    { padding:0 16px; }
  .stat-number  { font-size:1.4rem; }
  .hero h1      { font-size:1.7rem; }
  .tooth-btn    { width:32px; height:32px; font-size:0.7rem; }
}

/* ── Utilities ───────────────────────────────────────────── */
.select-wrapper { position:relative; }
.select-wrapper::after { content:'▾'; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--teal); pointer-events:none; font-size:0.9rem; }

.field-error input,
.field-error textarea,
.field-error select { border-color:#e05252 !important; }
.error-msg { font-size:0.78rem; color:#e05252; margin-top:4px; }

.fade-in { opacity:0; transform:translateY(16px); transition:opacity 0.5s ease,transform 0.5s ease; }
.fade-in.visible { opacity:1; transform:none; }