/* Center City Orthodontics: prototype styles.
   Values come from the Figma frame "Center City Orthodontics Design Option 2"
   (Free Stuff (Arpan), node 210:1139). Self-contained: nothing here is
   shared with the portfolio site. Desktop matches the 1440px frame (content
   sits in a 1431px column, as in the file); the tablet and mobile layouts
   are adaptations, since the file has no frames for them. */

:root {
  /* Colour */
  --blue: #276195;        /* nav, address bar */
  --blue-deep: #004c8f;   /* review badge */
  --green: #83bd57;       /* buttons, accents */
  --green-dark: #6fa646;  /* button hover (darkened --green) */
  --ink: #131313;         /* utility bar, footer */
  --charcoal: #303030;    /* menu bar, tile labels, contact panel */
  --hero-bg: #414042;
  --grey-bg: #f2f2f2;     /* alternating sections */
  --white: #ffffff;
  --award-bg: #fefefe;
  --text: #444444;        /* body copy */
  --text-80: rgba(68, 68, 68, 0.8);
  --text-70: rgba(68, 68, 68, 0.7);
  --text-30: rgba(68, 68, 68, 0.3);
  --rule: rgba(68, 68, 68, 0.49);
  --text-strong: #382e27; /* section headings */
  --text-dark: #252525;
  --teal: #163c3d;        /* "About Doctor" */
  --sage: #535b53;        /* doctor bio */
  --muted: #666666;       /* feature copy */
  --navy-15: rgba(3, 25, 44, 0.15);
  --navy-70: rgba(3, 25, 44, 0.7);
  --sand: #e4d9d1;        /* footer links, form border */
  --sand-2: #c9b4a7;      /* menu bar top rule */
  --bar-line: #a4a4a4;    /* menu bar dividers */
  --white-20: rgba(255, 255, 255, 0.2);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-80: rgba(255, 255, 255, 0.8);
  --error: #d64545;

  /* Type */
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --josefin: "Josefin Sans", "Inter", sans-serif;
  --gilda: "Gilda Display", Georgia, serif;
  --castoro: "Castoro", Georgia, serif;
  --lexend: "Lexend", "Inter", sans-serif;

  --hero-h1: 70.435px;
  --why-h2: 68.671px;
  --welcome-h2: 85.863px;
  --smiles-h2: 57.242px;
  --section-h2: 50.882px;
  --reviews-h2: 47.702px;
  --invis-h2: 42.932px;
  --doctor-h2: 42.733px;
  --card-h3: 31.528px;
  --feature-h3: 27.826px;

  /* Layout */
  --frame: 1431px;        /* content column in the Figma frame */
  --gutter: 57.23px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 15.764px/26.765px var(--inter);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-weight: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 80;
  padding: 10px 16px; background: var(--green); color: var(--white); border-radius: 8px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--frame); margin: 0 auto; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 52.84px; padding: 0 23.72px; border: 0.994px solid var(--green); border-radius: 26.832px;
  font: 700 11.429px/11.448px var(--inter); letter-spacing: 2.5441px; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s;
}
.btn img { flex: none; transition: transform .2s; }
.btn:hover img { transform: translateX(3px); }
.btn--green { background: var(--green); color: var(--white); }
.btn--green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn--lg { height: 59.445px; padding: 0 26px 0 28px; font-size: 12.857px; line-height: 12.88px; letter-spacing: 2.8621px; gap: 18px; }
.btn--ghost-dark { border-color: var(--text-30); color: var(--text); }
.btn--ghost-dark:hover { border-color: var(--text); }

/* ---- Header ------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 40; background: var(--white); }
.header-inner { display: flex; max-width: var(--frame); height: 129.9px; margin: 0 auto; }
.logo { flex: none; display: grid; place-items: center; width: 228.97px; background: var(--white); }
.logo img { width: 128.78px; height: 128.78px; object-fit: contain; }
.header-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.utility {
  display: flex; align-items: center; gap: 46px; height: 57.23px; padding-left: 80px;
  background: var(--ink); border-bottom: 1.118px solid var(--white-20);
}
.utility-link {
  display: inline-flex; align-items: center; gap: 13px; color: var(--white);
  font: 400 11.404px/11.448px var(--inter); letter-spacing: 1.7173px; text-transform: uppercase; white-space: nowrap;
}
.utility-link img { width: 16px; height: 16px; padding: 1.6px; }
.utility-link:hover { color: var(--green); }
.nav { position: relative; display: flex; align-items: stretch; gap: 15.9px; height: 72.67px; padding-left: 40.34px; background: var(--blue); }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 0;
  border: 0; border-top: 3.354px solid transparent; background: none; color: var(--white); cursor: pointer;
  font: 500 12.857px/15.451px var(--inter); letter-spacing: 1.288px; text-transform: uppercase; white-space: nowrap;
}
.nav-link img { width: 14.3px; height: 14.53px; transform: rotate(180deg); transition: transform .2s; }
.nav > .nav-link:first-child { width: 156.52px; border-top-color: var(--white); font-weight: 600; margin-top: -1px; }
.nav > .dropdown:nth-child(2) .nav-link { width: 128.2px; }
.nav > .nav-link:nth-child(3) { width: 165.47px; }
.nav > .dropdown:nth-child(4) .nav-link,
.nav > .dropdown:nth-child(5) .nav-link { width: 165.96px; }
.nav > a.nav-link:not(.is-active):hover, .dropdown .nav-link:hover { color: var(--white-80); }
.nav-contact {
  align-self: center; display: grid; place-items: center; height: 40.56px; width: 119.57px; margin-left: 33px;
  border: 1.118px solid var(--white); border-radius: 22.36px; background: var(--white-20); color: var(--white);
  font: 600 12.857px/15.451px var(--inter); letter-spacing: 1.288px; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.nav-contact:hover { background: var(--white); color: var(--blue); }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; left: 0; top: 100%; z-index: 5; min-width: 230px;
  display: grid; padding: 8px; background: var(--white); border-top: 3px solid var(--green);
  box-shadow: 0 18px 40px rgba(3, 25, 44, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.dropdown-menu a { padding: 11px 14px; font: 500 14px/20px var(--inter); color: var(--text); }
.dropdown-menu a:hover { background: var(--grey-bg); color: var(--blue); }
.dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropdown:hover .nav-link img, .dropdown.open .nav-link img { transform: none; }
.menu-toggle { flex: none; display: grid; place-items: center; width: 128.78px; padding: 0; border: 0; background: var(--white); cursor: pointer; }
.menu-toggle img { width: 24.32px; height: 24.32px; }
.menu-toggle:hover img { opacity: .7; }

/* ---- Drawer ------------------------------------------------------------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(19, 19, 19, 0.5); opacity: 0; transition: opacity .25s; }
.drawer-scrim.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(380px, 100%);
  display: flex; flex-direction: column; overflow-y: auto; padding: 0 28px 32px;
  background: var(--white); box-shadow: -20px 0 50px rgba(0, 0, 0, .2);
  transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
}
.drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 84px; margin-bottom: 8px; border-bottom: 1px solid var(--grey-bg); }
.drawer-head span { font: 500 25.714px/25.759px var(--inter); color: var(--green); }
.drawer-close { position: relative; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.drawer-close span::before, .drawer-close span::after,
.lightbox-close span::before, .lightbox-close span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: currentColor; transform: rotate(45deg);
}
.drawer-close span::after, .lightbox-close span::after { transform: rotate(-45deg); }
.drawer > a, .drawer summary {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--grey-bg);
  font: 500 15px/20px var(--inter); letter-spacing: 1.288px; text-transform: uppercase; color: var(--text-dark); cursor: pointer;
}
.drawer summary { list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.drawer details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.drawer details a { display: block; padding: 10px 0 10px 16px; font: 400 15px/22px var(--inter); color: var(--text); }
.drawer details a:hover, .drawer > a:hover { color: var(--blue); }
.drawer details[open] { padding-bottom: 8px; border-bottom: 1px solid var(--grey-bg); }
.drawer details[open] summary { border-bottom: 0; }
.drawer-actions { display: grid; gap: 12px; margin-top: 28px; }
.drawer-actions .btn { justify-content: center; }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; height: 733.84px; overflow: hidden; background: var(--hero-bg); color: var(--white); }
.hero-slides, .hero-shade { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero-slide.is-current { opacity: 1; }
/* Figma's gradient puts the 0.8 stop after the 0.465 one (39.95% vs 39.32%), which browsers draw as a
   hard edge. The PDF export renders it as a soft tint, so the stops are smoothed to match that. */
.hero-shade { background: linear-gradient(89.94deg, rgba(1, 82, 137, 0.62) 0%, rgba(51, 108, 156, 0.465) 39.322%, rgba(109, 138, 178, 0) 61.388%); }
.hero-copy { position: relative; height: 100%; padding: 221.6px 0 0 59.63px; }
.hero h1 { max-width: 600px; font: 500 var(--hero-h1)/81px var(--josefin); text-transform: uppercase; }
.hero-sub { margin-top: 15.8px; font: 400 19.006px/1.25 var(--josefin); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13.42px; margin-top: 39.3px; }
.hero-btn {
  display: grid; place-items: center; width: 173.29px; height: 50.31px; padding-top: 3px; border-radius: 26.832px;
  font: 700 13.416px/1 var(--josefin); letter-spacing: 1.3416px; text-transform: uppercase; transition: background-color .2s, color .2s, border-color .2s;
}
.hero-btn--green { background: var(--green); border: 1.118px solid var(--green); color: var(--white); }
.hero-btn--green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.hero-btn--line { border: 1.988px solid var(--white-50); color: #f5f5f5; }
.hero-btn--line:hover { background: var(--white); border-color: var(--white); color: var(--blue); }
.hero-dots { position: absolute; left: 42.94px; bottom: 66px; display: flex; gap: 4.47px; }
.hero-dots button { position: relative; width: 61.49px; height: 3.354px; padding: 0; border: 0; background: rgba(255, 255, 255, 0.3); cursor: pointer; }
.hero-dots button::before { content: ""; position: absolute; inset: -10px 0; }
.hero-dots button[aria-selected="true"] { background: var(--green); }
.hero-dots button:hover { background: var(--white-80); }
.hero-dots button[aria-selected="true"]:hover { background: var(--green); }
.address-bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.3em;
  min-height: 38.76px; padding: 4px 0 4px 91px; background: var(--blue); color: var(--white);
  font: 400 15.901px/20px var(--inter); letter-spacing: 1.7173px; text-transform: uppercase; text-align: center;
}

/* ---- Eyebrows ----------------------------------------------------------- */
.eyebrow { display: flex; align-items: center; gap: 38.15px; height: 28.59px; font: 400 14.012px/20.989px var(--inter); color: var(--text); }
.eyebrow-line { flex: none; width: 63.6px; height: 0.994px; background: var(--rule); }

/* ---- Why us + perks ----------------------------------------------------- */
.why { padding: 75.5px 0 114.35px; }
.why-grid {
  display: grid; align-items: start;
  /* column edges from the frame: 79.5 | 221.9 | 588.8 | 717.6 | 856.6 | 1351.5 */
  grid-template-columns: 79.5fr 142.4fr 366.9fr 128.8fr 139fr 494.9fr 79.5fr;
}
.why-head { grid-column: 3 / 6; grid-row: 1; padding-top: 160.7px; }
.why-title {
  max-width: 542.6px; margin-top: 29.1px;
  font: 400 var(--why-h2)/68.691px var(--gilda); letter-spacing: -2.0611px; text-transform: uppercase; color: var(--text); opacity: .7;
}
.why-photo { grid-column: 6; grid-row: 1; position: relative; aspect-ratio: 494.91 / 679.75; overflow: hidden; }
.why-photo-main { width: 102.4%; max-width: none; height: auto; margin-left: -6.1%; }
.why-badge { position: absolute; left: 65.26%; top: 1.3%; width: 32.93%; height: auto; }
.perks-photo { grid-column: 2 / 4; grid-row: 2; padding-top: 79.5px; overflow: hidden; }
.perks-photo img { width: 100%; height: auto; aspect-ratio: 509.32 / 407.5; object-fit: cover; object-position: 0 50%; }
.perks-copy { grid-column: 5 / 7; grid-row: 2; max-width: 420px; padding-top: 152.6px; }
.perks-copy h3 { max-width: 409.2px; margin-top: 38px; font: 600 19.081px/30.529px var(--inter); color: var(--text); }
.perks-copy p:not(.eyebrow) { max-width: 419.4px; margin-top: 15.1px; font: 400 15.304px/28.999px var(--inter); color: var(--text); }
.perks-copy .btn { margin-top: 22.9px; }

/* ---- About Doctor ------------------------------------------------------- */
.doctor { padding: 22.6px 0 101.5px; }
.doctor-grid { display: grid; grid-template-columns: 541.61px 529.69px; column-gap: 79.5px; padding-left: 122.2px; }
.doctor-photo { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 11.925px; }
.doctor-copy h2 { margin-top: 54.9px; font: 400 var(--doctor-h2)/51.28px var(--castoro); letter-spacing: -0.9938px; color: var(--teal); }
.doctor-bio { margin-top: 2.7px; font: 300 15.901px/28.82px var(--lexend); letter-spacing: -0.159px; color: var(--sage); }
.doctor-key { margin-top: 7.5px; font: 700 15.901px/28.82px var(--inter); letter-spacing: -0.159px; color: var(--sage); }
.doctor-list { list-style: disc; padding-left: 23.85px; font: 300 15.901px/28.82px var(--inter); letter-spacing: -0.159px; color: var(--sage); }
.doctor-copy .btn { margin-top: 22.8px; }

/* ---- Section heads (solutions, awards) ---------------------------------- */
.section-head { text-align: center; }
.section-head h2 { font: 600 var(--section-h2)/55.97px var(--inter); letter-spacing: -1.0176px; color: var(--text-strong); }
.section-head p { margin-top: 9.6px; font: 300 21.665px/36.76px var(--inter); color: var(--text-80); }

/* ---- Smarter dental solutions ------------------------------------------- */
.solutions { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 121.7px 24px 111.6px; background: var(--grey-bg); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28.83px; width: 100%; max-width: 1201.49px; }
.card { display: flex; flex-direction: column; background: var(--white); border: 1.118px solid var(--navy-15); text-align: center; }
.card-img { width: 100%; height: 429.3px; object-fit: cover; }
.card-img--rapid { object-position: 78% 50%; }
.card:nth-child(2) p { max-width: 251.2px; }
.card-body { display: flex; flex-direction: column; align-items: center; padding: 41.6px 16px 46.5px; }
.card h3 { font: 600 var(--card-h3)/34.636px var(--inter); letter-spacing: -0.6294px; color: var(--text); }
.card p { max-width: 278.6px; min-height: 53.53px; margin-top: 33.8px; color: var(--text-80); }
.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 17px; width: 100%; max-width: 293.55px; height: 53.72px; margin-top: 51.2px;
  border: 1.118px solid var(--text-30); color: var(--text);
  font: 700 11.627px/11.594px var(--inter); letter-spacing: 1.288px; text-transform: uppercase; transition: border-color .2s, background-color .2s;
}
.btn-outline img { transition: transform .2s; }
.btn-outline:hover { border-color: var(--text); }
.btn-outline:hover img { transform: translateX(3px); }

/* ---- Reviews ------------------------------------------------------------ */
.reviews { padding: 79.5px 59.63px 161.6px; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80.83px; }
.reviews-head h2 { font: 500 var(--reviews-h2)/55.652px var(--inter); color: var(--text-dark); }
.slider-arrows { display: flex; gap: 48.4px; }
.slider-btn {
  display: grid; place-items: center; width: 79.5px; height: 79.5px; padding: 0;
  border: 1.988px solid var(--green); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .2s;
}
.slider-btn img { width: 37.76px; height: 37.76px; }
.slider-btn--next img { transform: scaleX(-1); }
.slider-btn:hover { background: rgba(131, 189, 87, 0.12); }
.review-stage { display: flex; margin-top: 31.8px; padding: 71.55px; background: var(--grey-bg); }
.review-badge { flex: none; width: 391.1px; min-height: 429.3px; padding: 104px 40px 40px 74px; background: var(--blue-deep); color: var(--white); }
.review-badge h3 { font: 600 var(--card-h3)/37.778px var(--inter); }
.review-badge p { margin-top: 14.4px; font: 400 17.217px/29.191px var(--inter); }
.review-google { width: 153.33px; height: 50.31px; margin-top: 16.6px; }
.review-stars { width: 150px; height: auto; margin: 10px 0 0 3.4px; }
.review-track { flex: 1; display: grid; background: var(--white); overflow: hidden; }
.review { grid-area: 1 / 1; padding: 59.5px 87px 48px 86.1px; transition: opacity .35s, transform .35s; }
.review:not(.is-current) { opacity: 0; visibility: hidden; transform: translateX(24px); }
.review blockquote { max-width: 609.3px; font: 400 17.217px/29.191px var(--inter); color: var(--text); }
.review figcaption { margin-top: 29.19px; font: 700 17.217px/29.191px var(--inter); color: var(--text); }
.review-track.nudge { animation: nudge .4s ease; }
@keyframes nudge { 30% { transform: translateX(-10px); } 60% { transform: translateX(6px); } }

/* ---- Invisalign --------------------------------------------------------- */
.invisalign { background: var(--grey-bg); padding: 143.1px var(--gutter); }
.invisalign-grid { display: grid; grid-template-columns: 257.6px 1fr; column-gap: 28.61px; }
.invisalign-intro { padding-top: 60.7px; }
.invisalign-intro h2 { font: 600 var(--invis-h2)/51.518px var(--inter); letter-spacing: -0.8586px; color: var(--text-strong); }
.invisalign-intro p { max-width: 228.4px; margin-top: 28.2px; color: var(--text-strong); }
.invisalign-intro .btn { margin-top: 29.1px; width: 178.08px; padding-left: 26.12px; gap: 14px; border-width: 1.118px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35.8px; }
.tile { position: relative; height: 429.32px; overflow: hidden; background: var(--charcoal); }
.tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover > img { transform: scale(1.04); }
.tile--white { background: var(--white); }
.tile--contain > img { width: 91.16%; height: auto; margin: 2.1px auto 0; object-fit: contain; }
.tile--itero > img { width: 116.4%; max-width: none; height: auto; margin: -24.4px 0 0 -11.7%; object-fit: initial; }
.tile--crop > img { position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none; height: auto; object-fit: initial; }
.tile:hover.tile--contain > img, .tile:hover.tile--itero > img { transform: none; }
.tile-label {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  width: 238.23px; height: 104.43px; padding: 0 24px 0 43.1px; background: var(--charcoal); color: var(--white);
  font: 600 15.764px/23.612px var(--inter);
}
.tile-label img { flex: none; width: 13.24px; height: 10.25px; transition: transform .2s; }
.tile-label:hover img { transform: translateX(4px); }
.tile:nth-child(3) .tile-label { width: 244.19px; }
.tile:nth-child(4) .tile-label { width: 218.2px; padding-right: 22px; }
.tile:nth-child(5) .tile-label { width: 232.93px; }
.tile:nth-child(6) .tile-label { width: 250.28px; padding-right: 25.5px; }

/* ---- Smiles gallery ----------------------------------------------------- */
.smiles { padding: 106.3px var(--gutter) 133px; text-align: center; }
.smiles h2 { font: 600 var(--smiles-h2)/62.966px var(--inter); letter-spacing: -1.1448px; color: var(--text-strong); }
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11.12px 10.81px; max-width: 1316.6px; margin: 50.3px auto 0; }
.gallery button { display: block; width: 100%; height: 286.15px; padding: 0; border: 0; overflow: hidden; background: var(--grey-bg); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s; }
.gallery button:hover img { transform: scale(1.04); }

/* ---- Awards ------------------------------------------------------------- */
.awards { padding: 118.6px var(--gutter) 118.6px; background: var(--grey-bg); }
.awards .section-head h2 { line-height: 39.75px; }
.awards .section-head p { margin-top: 19.25px; line-height: 31.8px; }
.award-grid { display: grid; grid-template-columns: repeat(6, 178.88px); justify-content: center; gap: 44.72px 29.81px; margin-top: 44.72px; }
.award-grid li { position: relative; height: 112.3px; overflow: hidden; border-radius: 15.901px; background: var(--award-bg); }
.award-grid img { width: 100%; height: 100%; object-fit: contain; }
.award--zoom img { position: absolute; left: 2.06%; top: -17.12%; width: 95.89%; height: 134.25%; object-fit: fill; }
.award--zoom-b img { left: 2.78%; top: -15.82%; width: 94.44%; height: 131.64%; }

/* ---- Beautiful teeth / smile / you -------------------------------------- */
.features { position: relative; min-height: 894.42px; overflow: hidden; }
.features-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.features-panel {
  position: relative; display: flex; flex-direction: column; gap: 62px;
  width: 357.77px; min-height: 894.42px; margin-left: max(0px, calc((100% - var(--frame)) / 2 + 119.63px)); padding: 44.5px 25px 35px;
  background: var(--white); text-align: center;
}
.feature { display: flex; flex-direction: column; align-items: center; }
.feature > img { width: 83.48px; height: 83.48px; }
.feature:nth-child(2) > img { width: 89.44px; height: 89.44px; }
.feature-icon { display: grid; place-items: center; width: 83.48px; height: 83.48px; border-radius: 50%; background: #2986fd; }
.feature-icon img { width: 40.75px; height: 47.7px; }
.feature h3 { margin-top: 4px; font: 600 var(--feature-h3)/42.641px var(--inter); color: var(--text); opacity: .9; }
.feature p { max-width: 294.2px; margin-top: -2px; font: 400 17.888px/28.621px var(--inter); color: var(--muted); }
.feature:nth-child(2) h3 { margin-top: 7px; }
.feature:nth-child(2) p { margin-top: -4px; }
.feature:nth-child(3) h3 { margin-top: 12px; }
.feature:nth-child(3) p { max-width: 308.1px; margin-top: 3px; }

/* ---- About us posts ----------------------------------------------------- */
.about { padding: 83.48px 0 110.5px; }
.about-inner { padding: 0 114.29px; }
.about-eyebrow { display: flex; align-items: center; height: 32.17px; font: 400 15.764px/23.612px var(--inter); color: var(--text); }
.about-eyebrow .eyebrow-line { width: 71.55px; height: 1.118px; margin: 0 43px 0 42.6px; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 71.55px; margin-top: 57.27px; }
.post > a:first-child { display: block; height: 200.34px; overflow: hidden; }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post > a:first-child:hover img { transform: scale(1.04); }
.post h3 { height: 51.65px; margin-top: 41.2px; font: 600 21.466px/27.906px var(--inter); color: var(--text); }
.post--video h3 { font: 500 var(--feature-h3)/35.776px var(--inter); color: var(--text-dark); }
.post h3 a:hover { color: var(--blue); }
.post-more { display: inline-block; vertical-align: top; font: 400 14.311px/17.173px var(--inter); color: var(--text-70); }
.post-more:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Philadelphia Orthodontist banner ----------------------------------- */
.welcome { position: relative; display: grid; justify-items: center; min-height: 754.29px; padding: 156.1px 24px 114px; overflow: hidden; color: var(--white); text-align: center; }
.welcome::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(3, 21, 36, 0.1); }
.welcome-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-copy { position: relative; z-index: 2; display: grid; justify-items: center; width: 100%; max-width: 1202.11px; }
.welcome h2 { max-width: 717.5px; font: 400 var(--welcome-h2)/85.863px var(--inter); letter-spacing: -3.4345px; }
.welcome-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; width: 100%; margin-top: 43.5px; }
.welcome-rule::before, .welcome-rule::after { content: ""; height: 1.118px; background: var(--white); }
.welcome-rule span { font: 400 11.404px/13px var(--inter); letter-spacing: 4.2932px; text-transform: uppercase; margin-right: -4.3px; }
.welcome-text { max-width: 600px; margin-top: 57.1px; font: 300 24.373px/41.355px var(--inter); color: var(--white-80); }
.welcome .btn { margin-top: 56.6px; width: 166.9px; padding-left: 28.6px; }

/* ---- Contact ------------------------------------------------------------ */
.contact { padding: 100px 0 100.6px; }
.contact-grid { display: grid; grid-template-columns: 500.87px 1fr; column-gap: 107.33px; padding-left: 107.33px; align-items: start; }
.form { min-height: 841.64px; padding: 114.5px 35.78px 48px; background: var(--grey-bg); border: 1.118px solid var(--sand); }
.form-title { font: 600 10.062px/15.026px var(--inter); letter-spacing: 1.0017px; text-transform: uppercase; color: var(--text-strong); text-align: center; }
.fields { display: grid; margin-top: 14px; }
.fields label + label { margin-top: -0.994px; }
.fields input, .fields textarea {
  display: block; width: 100%; height: 80.13px; margin: 0; padding: 0 20.15px;
  border: 0.994px solid rgba(0, 0, 0, 0.1); border-radius: 0; background: transparent; color: var(--text-strong);
  font: 400 13.975px/22.036px var(--inter);
}
.fields textarea { height: 160.28px; padding-top: 25.8px; resize: vertical; }
.fields ::placeholder { color: var(--navy-70); opacity: 1; }
.fields input:focus, .fields textarea:focus { outline: none; border-color: var(--green); position: relative; }
.fields .invalid { border-color: var(--error) !important; position: relative; }
.consent { display: flex; align-items: center; gap: 14.3px; min-height: 35.74px; margin-top: 24.8px; font: 400 15.764px/18.894px var(--inter); color: var(--text-strong); cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-box { flex: none; position: relative; width: 21.46px; height: 21.46px; border: 2.236px solid var(--green); border-radius: 50%; }
.consent input:checked + .consent-box::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--green); outline-offset: 3px; }
.consent.invalid .consent-box { border-color: var(--error); }
.submit {
  display: flex; align-items: center; gap: 22.7px; width: 300.21px; height: 58.01px; margin-top: 18.5px; padding: 0 0 0 40px;
  border: 0; border-radius: 26.832px; background: var(--green); color: var(--white); cursor: pointer;
  font: 500 12.857px/17.173px var(--inter); letter-spacing: 1.9319px; text-transform: uppercase; transition: background-color .2s;
}
.submit:hover { background: var(--green-dark); }
.submit img { width: 14.17px; height: 14.17px; transition: transform .2s; }
.submit:hover img { transform: translateX(3px); }
.form-status { margin-top: 16px; font: 400 15px/22px var(--inter); color: var(--text-strong); }
.form-status:empty { display: none; }
.form-status.ok { padding: 12px 16px; background: rgba(131, 189, 87, 0.15); border-left: 3px solid var(--green); }
.contact-photo { min-height: 841.86px; padding: 63.48px 54.6px 62.86px 54.67px; background: var(--charcoal); margin-top: -0.55px; }
.contact-photo-frame { height: 715.52px; overflow: hidden; }
/* Figma fills an 858px-tall box with the photo and clips it at 715px. */
.contact-photo-frame img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 0; }

/* ---- Menu bar ----------------------------------------------------------- */
.menubar { display: grid; grid-template-columns: 420.9fr 589.26fr 420.9fr; min-height: 193.79px; background: var(--charcoal); border-top: 1.118px solid var(--sand-2); }
.menubar-cell { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 0 5px; border: 0; background: none; color: var(--green); font: 500 25.714px/25.759px var(--inter); }
.menubar-menu { gap: 17.4px; border-right: 1.118px solid var(--bar-line); cursor: pointer; }
.menubar-book { gap: 18.5px; border-left: 1.118px solid var(--bar-line); }
.menubar-icon { display: grid; place-items: center; width: 25.75px; height: 25.75px; background: var(--green); }
.menubar-icon img { width: 25.75px; height: 25.75px; }
.menubar-menu:hover, .menubar-book:hover { color: #a6d57f; }
.menubar-social { gap: 17.89px; }
.menubar-social a { display: grid; place-items: center; width: 71.55px; height: 71.55px; transition: opacity .2s; }
.menubar-social a:hover { opacity: .7; }
.menubar-social img { width: 17.17px; height: 17.17px; }

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); border-bottom: 1.118px solid rgba(255, 255, 255, 0.1); }
.footer-inner { display: grid; grid-template-columns: 300.52px auto 1fr 71.55px; padding: 114.47px var(--gutter) 113.4px; }
.footer-logo { width: 300.52px; height: 315.34px; border-right: 1px solid #3d3d3d; background: #b69f8f; }
.footer-logo img { width: 100%; height: 100%; object-fit: cover; }
.footer-links { display: grid; grid-template-columns: 268.35px 268.35px; grid-auto-rows: 45.06px; grid-auto-flow: row; margin-left: 114.3px; padding-top: 0.3px; }
.footer-links a { display: flex; align-items: center; height: 45.06px; padding-bottom: 1px; font: 300 21.466px/23.612px var(--inter); color: var(--sand); white-space: nowrap; }
.footer-links a:hover { color: var(--green); }
.footer-social { grid-column: 4; display: grid; gap: 14.3px; align-content: start; margin-top: -21.44px; }
.footer-social a { display: grid; place-items: center; width: 71.55px; height: 71.55px; transition: opacity .2s; }
.footer-social a:hover { opacity: .7; }
.footer-social img { width: 17.17px; height: 17.17px; }

.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; max-width: var(--frame); margin: 0 auto; padding: 36.89px var(--gutter) 35.78px; }
.legal ul { display: flex; flex-wrap: wrap; gap: 6px 41px; }
.legal ul + ul { gap: 6px 39.3px; }
.legal a { display: block; font: 300 12.857px/29.68px var(--inter); color: var(--text); }
.legal a:hover { color: var(--blue); }

/* ---- Lightbox ----------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 24px; background: rgba(19, 19, 19, 0.92); }
.lightbox[hidden] { display: none; }
.lightbox figure { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.lightbox-img { max-height: calc(100vh - 120px); width: auto; max-width: 100%; object-fit: contain; }
.lightbox-count { font: 400 14px/20px var(--inter); color: var(--white-80); }
.lightbox-nav { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1.988px solid var(--green); border-radius: 50%; background: transparent; cursor: pointer; }
.lightbox-nav img { width: 30px; height: 30px; }
.lightbox-next img { transform: scaleX(-1); }
.lightbox-nav:hover { background: rgba(131, 189, 87, 0.15); }
.lightbox-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; background: none; color: var(--white); cursor: pointer; }

/* ---- Toast (links to pages this prototype doesn't include) -------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--white);
  font: 400 15px/22px var(--inter); box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   Narrow desktop (≤ 1380px): keep the desktop layout, let fixed columns flex
   ========================================================================= */
@media (max-width: 1380px) {
  .why-title { font-size: clamp(52px, 4.8vw, 68.671px); line-height: 1; }
  .doctor-grid { grid-template-columns: 1fr 1fr; padding: 0 64px; column-gap: 64px; }
  .contact-grid { grid-template-columns: minmax(0, 500.87px) 1fr; column-gap: 64px; padding-left: 64px; }
  .award-grid { grid-template-columns: repeat(6, minmax(0, 178.88px)); gap: 32px 2.1%; }
  .footer-inner { grid-template-columns: 260px auto 1fr 71.55px; }
  .footer-logo { width: 260px; height: 273px; }
  .footer-links { margin-left: 64px; grid-template-columns: 230px 230px; }
}

/* =========================================================================
   Tablet (≤ 1180px): adapted, no Figma frame
   ========================================================================= */
@media (max-width: 1180px) {
  :root {
    --hero-h1: 56px; --why-h2: 52px; --welcome-h2: 64px; --smiles-h2: 46px; --section-h2: 42px;
    --reviews-h2: 40px; --invis-h2: 38px; --doctor-h2: 38px; --card-h3: 26px; --feature-h3: 25px;
    --gutter: 32px;
  }
  html { scroll-padding-top: 96px; }

  /* Header: logo | blue band with the two utility links and Contact | menu */
  .header { box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
  .header-inner { height: 88px; }
  .logo { width: 120px; }
  .logo img { width: 80px; height: 80px; }
  .header-bars { flex-direction: row; align-items: center; justify-content: flex-end; gap: 28px; padding: 0 28px; background: var(--blue); }
  .utility { height: auto; padding: 0; gap: 28px; background: none; border: 0; }
  .utility-name { display: none; }
  .nav { height: auto; padding: 0; background: none; }
  .nav > :not(.nav-contact) { display: none; }
  .nav-contact { margin: 0; }
  .menu-toggle { width: 88px; }

  .hero { height: 620px; }
  .hero-copy { padding: 170px var(--gutter) 0; }
  .hero h1 { max-width: 480px; line-height: 1.12; }
  .hero-dots { left: var(--gutter); bottom: 48px; }
  .hero-dots button { width: 48px; }
  .address-bar { padding: 8px 24px; font-size: 13px; line-height: 20px; letter-spacing: 1.2px; }

  .why { padding: 72px var(--gutter) 88px; }
  .why-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 72px; }
  .why-head { grid-column: 1; padding-top: 0; align-self: center; }
  .why-title { margin-top: 24px; line-height: 1.04; }
  .why-photo { grid-column: 2; }
  .perks-photo { grid-column: 1; grid-row: 2; padding-top: 0; align-self: center; }
  .perks-copy { grid-column: 2; grid-row: 2; margin: 0; padding: 0; align-self: center; }
  .perks-copy h3 { margin-top: 24px; }

  .doctor { padding: 88px 0; }
  .doctor-grid { padding: 0 var(--gutter); column-gap: 48px; align-items: center; }
  .doctor-copy h2 { margin-top: 0; }

  .solutions { padding: 88px var(--gutter); gap: 48px; }
  .cards { gap: 20px; }
  .card-img { height: 300px; }
  .card-body { padding: 32px 24px 32px; }
  .card p { margin-top: 18px; }
  .btn-outline { margin-top: 28px; }

  .reviews { padding: 80px var(--gutter) 96px; }
  .slider-arrows { gap: 20px; }
  .slider-btn { width: 64px; height: 64px; }
  .slider-btn img { width: 30px; height: 30px; }
  .review-stage { padding: 40px; }
  .review-badge { width: 300px; min-height: 0; padding: 56px 32px 48px 48px; }
  .review { padding: 48px 48px 40px; }

  .invisalign { padding: 88px var(--gutter); }
  .invisalign-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .invisalign-intro { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 40px; padding: 0; }
  .invisalign-intro p, .invisalign-intro .btn { margin: 0; }
  .tiles { gap: 20px; }
  .tile { height: auto; aspect-ratio: 319.6 / 429.3; }
  .tile-label, .tile:nth-child(n) .tile-label { width: auto; max-width: 100%; height: 84px; gap: 24px; padding: 0 22px 0 28px; }

  .smiles { padding: 88px var(--gutter) 96px; }
  .gallery { margin-top: 40px; gap: 8px; }
  .gallery button { height: auto; aspect-ratio: 254.67 / 286.15; }

  .awards { padding: 88px var(--gutter); }
  .award-grid { grid-template-columns: repeat(6, 1fr); gap: 20px 16px; margin-top: 40px; }
  .award-grid li { height: auto; aspect-ratio: 178.88 / 112.3; border-radius: 12px; }

  .features { min-height: 0; }
  .features-panel { width: 340px; min-height: 0; margin-left: var(--gutter); gap: 44px; padding: 44px 24px; }

  .about { padding: 80px 0 88px; }
  .about-inner { padding: 0 var(--gutter); }
  .posts { column-gap: 32px; margin-top: 40px; }
  .post > a:first-child { height: auto; aspect-ratio: 352.8 / 200.34; }
  .post h3 { height: auto; margin: 28px 0 12px; }

  .welcome { min-height: 0; padding: 120px var(--gutter) 112px; }
  .welcome h2 { line-height: 1.05; letter-spacing: -2.5px; }
  .welcome-rule { margin-top: 36px; }
  .welcome-text { margin-top: 40px; font-size: 21px; line-height: 36px; }
  .welcome .btn { margin-top: 40px; }

  .contact { padding: 88px var(--gutter); }
  .contact-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0; align-items: stretch; }
  .form { min-height: 0; padding: 56px 32px 48px; }
  .submit { width: 100%; max-width: 300.21px; }
  .contact-photo { min-height: 0; padding: 40px; margin: 0; display: flex; }
  .contact-photo-frame { flex: 1; height: auto; min-height: 400px; }

  .menubar { min-height: 132px; }
  .menubar-cell { font-size: 22px; }
  .menubar-social a { width: 52px; height: 52px; }
  .menubar-social { gap: 6px; }

  .footer-inner { grid-template-columns: 220px 1fr 52px; padding: 80px var(--gutter); }
  .footer-logo { width: 220px; height: 231px; }
  .footer-links { grid-template-columns: 1fr 1fr; margin-left: 48px; grid-auto-rows: 40px; }
  .footer-links a { height: 40px; font-size: 19px; }
  .footer-social { grid-column: 3; margin-top: -10px; gap: 8px; }
  .footer-social a { width: 52px; height: 52px; }
  .legal { padding: 28px var(--gutter); }
}

/* ≤ 900px: stack the two-column blocks that get too narrow */
@media (max-width: 900px) {
  .why-grid { column-gap: 32px; row-gap: 56px; }
  .why-head, .why-photo { grid-column: 1 / -1; grid-row: auto; }
  .why-photo { width: min(100%, 420px); justify-self: center; }
  .perks-photo { grid-row: 3; }
  .perks-copy { grid-row: 3; }
  .doctor-grid { column-gap: 32px; }
  .address-bar { flex-direction: column; }
  .address-bar .sep { display: none; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { flex-direction: row; text-align: left; }
  .card-img { width: 44%; height: auto; min-height: 280px; }
  .card-body { flex: 1; align-items: flex-start; justify-content: center; }
  .btn-outline { width: auto; padding: 0 22px; }
  .review-stage { flex-direction: column; padding: 32px; }
  .review-badge { width: auto; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; padding: 32px; }
  .review-badge h3, .review-badge p { grid-column: 1; }
  .review-google { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: end; }
  .review-stars { grid-column: 2; grid-row: 3; margin: 6px 0 0; }
  .review-badge p br { display: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .award-grid { grid-template-columns: repeat(4, 1fr); }
  .posts { column-gap: 24px; }
  .post--video h3 { font-size: 24px; }
  .contact-grid { column-gap: 24px; }
  .contact-photo { padding: 24px; }
  .features-bg { object-position: 72% 50%; }
  .menubar-cell { font-size: 19px; }
  .menubar-menu, .menubar-book { gap: 12px; }
}

/* =========================================================================
   Mobile (≤ 720px): adapted, no Figma frame
   ========================================================================= */
@media (max-width: 720px) {
  :root {
    --hero-h1: 38px; --why-h2: 40px; --welcome-h2: 44px; --smiles-h2: 34px; --section-h2: 32px;
    --reviews-h2: 30px; --invis-h2: 32px; --doctor-h2: 34px; --card-h3: 24px; --feature-h3: 23px;
    --gutter: 20px;
  }
  html { scroll-padding-top: 72px; }
  body { font-size: 15px; line-height: 25px; }

  .header-inner { height: 72px; }
  .logo { width: 84px; }
  .logo img { width: 64px; height: 64px; }
  .header-bars { gap: 16px; padding: 0 16px; }
  .utility { display: none; }
  .section-head h2, .reviews-head h2, .smiles h2, .invisalign-intro h2 { line-height: 1.15; }
  .nav-contact { width: auto; padding: 0 14px; height: 40px; font-size: 11.5px; letter-spacing: 1px; }
  .menu-toggle { width: 72px; }

  .hero { height: 580px; }
  .hero-shade { background: linear-gradient(180deg, rgba(1, 82, 137, 0.35) 0%, rgba(1, 82, 137, 0.82) 62%); }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) 92px; }
  .hero h1 { max-width: 330px; line-height: 1.1; }
  .hero-sub { font-size: 17px; }
  .hero-actions { margin-top: 28px; gap: 12px; }
  .hero-btn { width: auto; flex: 1 1 140px; max-width: 180px; height: 48px; }
  .hero-dots { left: var(--gutter); right: var(--gutter); bottom: 40px; }
  .hero-dots button { flex: 1; width: auto; }
  .address-bar { flex-direction: column; padding: 10px 12px; font-size: 10.5px; line-height: 18px; letter-spacing: .3px; }
  .address-bar .sep { display: none; }

  .why { padding: 56px var(--gutter) 64px; }
  .why-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .why-head, .why-photo, .perks-photo, .perks-copy { grid-column: 1; grid-row: auto; }
  .doctor-grid { grid-template-columns: 1fr; }
  .why-title { margin-top: 16px; letter-spacing: -1.2px; }
  .perks-copy h3 { font-size: 18px; line-height: 28px; }

  .doctor { padding: 64px 0; }
  .doctor-grid { row-gap: 32px; }
  .doctor-bio, .doctor-key, .doctor-list { font-size: 15px; line-height: 27px; }

  .solutions { padding: 64px var(--gutter); gap: 36px; }
  .section-head p { font-size: 18px; line-height: 30px; margin-top: 12px; }
  .section-head p br { display: none; }
  .card { flex-direction: column; text-align: center; }
  .card-img { width: 100%; min-height: 0; height: auto; aspect-ratio: 4 / 3.4; }
  .card-body { align-items: center; padding: 28px 20px 28px; }
  .card p { margin-top: 12px; min-height: 0; }
  .btn-outline { width: 100%; margin-top: 22px; }

  .reviews { padding: 64px var(--gutter) 72px; }
  .reviews-head { min-height: 0; }
  .slider-arrows { gap: 10px; }
  .slider-btn { width: 48px; height: 48px; border-width: 1.5px; }
  .slider-btn img { width: 24px; height: 24px; }
  .review-stage { margin-top: 24px; padding: 16px; }
  .review-badge { display: block; padding: 28px 24px; }
  .review-google { margin-top: 14px; }
  .review { padding: 28px 24px 28px; }
  .review blockquote, .review figcaption { font-size: 15.5px; line-height: 27px; }
  .review figcaption { margin-top: 20px; }

  .invisalign { padding: 64px var(--gutter); }
  .invisalign-intro { display: block; }
  .invisalign-intro p { margin-top: 12px; }
  .invisalign-intro .btn { margin-top: 20px; }
  .invisalign-grid { row-gap: 32px; }
  .tiles { gap: 12px; }
  .tile-label, .tile:nth-child(n) .tile-label { right: 0; max-width: none; height: auto; min-height: 58px; padding: 10px 14px; gap: 10px; font-size: 13.5px; line-height: 19px; }
  .tile-label br { display: none; }

  .smiles { padding: 64px var(--gutter) 72px; }
  .gallery { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }

  .awards { padding: 64px var(--gutter); }
  .award-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
  .award-grid li { border-radius: 10px; }

  .features { display: flex; flex-direction: column; }
  .features-bg { position: static; height: 300px; object-position: 70% 30%; }
  .features-panel { width: auto; margin: 0; padding: 48px var(--gutter) 56px; gap: 44px; }

  .about { padding: 56px 0 64px; }
  .posts { grid-template-columns: 1fr; row-gap: 36px; margin-top: 28px; }
  .contact-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .contact-photo-frame { min-height: 0; flex: none; width: 100%; aspect-ratio: 4 / 3.4; }
  .post h3 { margin: 20px 0 8px; }

  .welcome { padding: 88px var(--gutter) 88px; }
  .welcome h2 { letter-spacing: -1.5px; }
  .welcome-rule { gap: 16px; margin-top: 28px; }
  .welcome-text { margin-top: 28px; font-size: 18px; line-height: 30px; }
  .welcome .btn { margin-top: 32px; }

  .contact { padding: 56px var(--gutter) 64px; }
  .form { padding: 40px 20px 32px; }
  .fields input { height: 64px; }
  .fields textarea { height: 140px; padding-top: 20px; }
  .consent { font-size: 14.5px; }
  .submit { width: 100%; max-width: none; justify-content: center; padding: 0; }
  .contact-photo { padding: 20px; }

  .menubar { grid-template-columns: 1fr 1fr; grid-template-areas: "menu book" "social social"; min-height: 0; }
  .menubar-menu { grid-area: menu; min-height: 84px; font-size: 20px; gap: 12px; }
  .menubar-book { grid-area: book; min-height: 84px; font-size: 20px; gap: 12px; }
  .menubar-social { grid-area: social; min-height: 64px; border-top: 1.118px solid var(--bar-line); }

  .footer-inner { grid-template-columns: 1fr auto; row-gap: 32px; padding: 56px var(--gutter); }
  .footer-logo { width: 160px; height: 168px; }
  .footer-social { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .footer-links { grid-column: 1 / -1; margin: 0; grid-auto-rows: 38px; column-gap: 16px; }
  .footer-links a { height: 38px; font-size: 16.5px; white-space: normal; line-height: 20px; }
  .legal { flex-direction: column; padding: 24px var(--gutter); }
  .legal ul { gap: 0 24px; }

  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 64px 16px 24px; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox-prev { grid-row: 2; justify-self: end; }
  .lightbox-next { grid-row: 2; justify-self: start; }
  .lightbox-nav { width: 52px; height: 52px; }
}