/* Vienna Family Dental: the family album.
   Navy album boards from the logo's blue, white-bordered prints held by photo corners, captions in pen. */

:root {
  --board: #1b2d43;
  --corner: #0e1928;
  --print: #fbfaf5;      /* the logo's own paper */
  --glassine: #e9ecea;
  --ink: #2a241f;        /* the logo's "DENTAL" */
  --blue: #2f6aa5;
  --blue-light: #9cc3e6;
  --pen-light: #ebe6da;
  --pen-dark: #22406a;

  --serif: "Besley", Georgia, serif;
  --hand: "Nothing You Could Do", "Segoe Print", cursive;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font: 400 18px/1.6 var(--serif);
  color: var(--ink);
  background: var(--glassine);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 2px; }
.glassine :focus-visible, .top :focus-visible { outline-color: var(--blue); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--print); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ---------- grounds ---------- */

.board {
  background-color: var(--board);
  /* a faint board grain, so the page reads as card, not a flat fill */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--pen-light);
  --pen: var(--pen-light);
  --c: var(--corner);
  --link: var(--blue-light);
}
.glassine {
  background: var(--glassine);
  color: var(--ink);
  --pen: var(--pen-dark);
  --c: var(--board);
  --link: var(--blue);
}

section { padding: clamp(72px, 9vw, 128px) 0; }

h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }

.board a:not(.btn), .glassine a:not(.btn) { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.board a:not(.btn):hover, .glassine a:not(.btn):hover { text-decoration-thickness: 2px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font: 600 17px/1 var(--serif);
  padding: 17px 26px 16px;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.btn-ink { background: var(--board); color: var(--print); }
.btn-ink:hover { background: var(--blue); }
.btn-paper { background: var(--print); color: var(--board); box-shadow: 0 2px 0 var(--corner); }
.btn-paper:hover { background: #fff; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.call { font-size: 18px; text-decoration: none !important; color: inherit !important; }
.call strong { white-space: nowrap; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- the print: the one memorable thing ---------- */

.print {
  margin: 0;
  position: relative;
  transform: rotate(var(--r, 0deg));
}
.mount {
  position: relative;
  background: var(--print);
  padding: clamp(7px, 0.9vw, 12px);
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 14px 26px -12px rgba(0,0,0,.55);
}
.glassine .mount { box-shadow: 0 1px 1px rgba(20,30,45,.22), 0 14px 24px -14px rgba(20,30,45,.45); }
.mount img { width: 100%; object-fit: cover; }
/* photo corners: four paper pockets over the print's corners */
.mount::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  --s: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(135deg, var(--c) 50%, transparent 50.5%) top left / var(--s) var(--s) no-repeat,
    linear-gradient(225deg, var(--c) 50%, transparent 50.5%) top right / var(--s) var(--s) no-repeat,
    linear-gradient(45deg, var(--c) 50%, transparent 50.5%) bottom left / var(--s) var(--s) no-repeat,
    linear-gradient(315deg, var(--c) 50%, transparent 50.5%) bottom right / var(--s) var(--s) no-repeat;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.08));
}
.pen {
  font: 400 21px/1.25 var(--hand);
  color: var(--pen);
  margin-top: 14px;
  padding-left: 4px;
}

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--print);
  box-shadow: 0 1px 0 rgba(27,45,67,.12);
}
.top-in { display: flex; align-items: center; gap: 28px; height: 84px; }
.brand { flex-shrink: 0; }
.brand img { width: 190px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 16px; white-space: nowrap; }
.nav a { text-decoration: none; color: var(--ink); }
.nav a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }
.top-call { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--board); text-decoration: none; white-space: nowrap; }
.top-call svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.top .btn { padding: 14px 20px 13px; font-size: 16px; white-space: nowrap; }

/* ---------- 1. hero ---------- */

.hero { padding: 64px 0 72px; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
h1 {
  font-size: clamp(46px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--print);
}
.lede { font-size: 20px; line-height: 1.6; margin-top: 28px; max-width: 30em; color: var(--pen-light); }
.rating { margin-top: 26px; font-size: 16px; }

.cluster { position: relative; }
.hero-cluster { aspect-ratio: 1 / .92; }
.hero-cluster .print { position: absolute; }
.p-brush { left: 17%; top: 0; width: 54%; z-index: 2; }
.p-brush img { aspect-ratio: 4 / 5; object-position: 86% 40%; }
.p-brush .pen { position: absolute; left: 104%; top: 6%; width: 8em; margin: 0; }
.p-depot { right: 0; top: 34%; width: 34%; z-index: 3; }
.p-depot img { aspect-ratio: 4 / 3; }
.p-depot .pen { margin-left: 22%; }
.p-toddler { left: 0; bottom: 4%; width: 30%; z-index: 3; }
.p-toddler img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.p-toddler .pen { width: 9.5em; }

/* the one orchestrated moment: the hero's prints settle onto the page */
@media (prefers-reduced-motion: no-preference) {
  .hero-cluster .print { animation: settle .9s cubic-bezier(.2,.8,.2,1) both; }
  .hero-cluster .p-brush { animation-delay: .1s; }
  .hero-cluster .p-depot { animation-delay: .35s; }
  .hero-cluster .p-toddler { animation-delay: .55s; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(-18px) rotate(calc(var(--r) * -2.5)); }
    to { opacity: 1; transform: rotate(var(--r)); }
  }
}

/* ---------- 2. services ---------- */

.services-head { max-width: 640px; margin-bottom: 64px; }
.services-head p, .smiles-head p, .team-head p { font-size: 20px; margin-top: 20px; }

.services-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.s-pair { display: grid; grid-template-columns: 1fr 0.8fr; gap: 40px; align-items: start; margin-top: 36px; }
.s-pair .s-text + .s-text { margin-top: 32px; }
.s-text h3 { margin-bottom: 10px; }
.s-text p { max-width: 34em; }
.s-text a { font-weight: 500; }

.s-kids img { aspect-ratio: 5 / 7; object-position: 50% 60%; }
.s-kids-t { margin-top: 16px; }
.s-coffee { margin-top: 48px; }
.s-coffee img { aspect-ratio: 16 / 9; object-position: 60% 50%; }
.s-aligner { margin-top: 6px; }
.s-aligner img { aspect-ratio: 1; }

.more {
  list-style: none;
  margin: 96px 0 0;
  padding: 56px 0 0;
  border-top: 1px solid rgba(27,45,67,.18);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px 40px;
}
.more li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 300px minmax(0, 520px); gap: 56px; align-items: center; }
.more h3 { font-size: 21px; margin-bottom: 8px; }
.more p { font-size: 17px; margin-bottom: 8px; }
.more a { font-size: 17px; font-weight: 500; }
.calm { margin: 0; }
.calm img { aspect-ratio: 4 / 5; }
.calm .pen { font-size: 19px; }
.more li:first-child h3 { font-size: 30px; }
.more li:first-child p { font-size: 18px; max-width: 26em; }

/* ---------- 3. smiles ---------- */

.smiles-head { max-width: 640px; margin-bottom: 64px; }
.smiles h2 { color: var(--print); }
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 28px 40px;
  align-items: end;
  margin-bottom: 72px;
}
.pair .print img { aspect-ratio: 4 / 5; object-position: 50% 70%; }
.pair-note { font-size: 20px; line-height: 1.55; align-self: center; max-width: 22em; }
.pair-b { grid-template-columns: 1.1fr 1fr 1fr; }
.pair-b .pair-note { grid-column: 1; grid-row: 1; }
.pair .pen { font-size: 24px; }
.smalls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 8px; }
.smalls img { aspect-ratio: 5 / 3; }
.smalls .pen { font-size: 19px; }
.smiles-more { margin-top: 40px; font-size: 18px; }
.smiles { padding-bottom: 96px; }

/* ---------- 4. story and letters ---------- */

.story-in { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.story-print { max-width: 440px; }
.story-print img { aspect-ratio: 4 / 5; }
.big-quote { margin: 28px 0 0; }
.big-quote p { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.5; font-style: italic; text-indent: -0.4em; }
.story-sign { margin-top: 24px; font-size: 17px; max-width: 36em; color: #4a4239; }

.letters-wrap { margin-top: 120px; }
.letters-h { margin-bottom: 48px; }
.letters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.letter {
  margin: 0;
  background: var(--print);
  padding: 32px 30px 28px;
  box-shadow: 0 1px 1px rgba(20,30,45,.18), 0 12px 22px -16px rgba(20,30,45,.5);
}
/* letters, not cards: a little off square, each at its own angle */
.letter:nth-child(1) { transform: rotate(-.8deg); }
.letter:nth-child(2) { transform: rotate(.6deg) translateY(28px); }
.letter:nth-child(3) { transform: rotate(-.4deg) translateY(6px); }
.letter p { font-size: 18px; line-height: 1.6; }
.letter footer { margin-top: 16px; font-size: 22px; }
.letters-more { margin-top: 64px; }

/* ---------- 5. team ---------- */

.team-head { max-width: 640px; margin-bottom: 64px; }
.team h2 { color: var(--print); }
.faces {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 28px;
}
.faces li:nth-child(even) { margin-top: 28px; }
.faces img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.faces .pen { font-size: 19px; margin-top: 10px; }
.faces li:first-child { grid-column: 1 / 3; grid-row: 1 / 3; margin-top: 0; }
.faces li:first-child .pen, .faces li:nth-child(2) .pen { font-size: 22px; }
.faces li:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 3; margin-top: 28px; }
.team-more { margin-top: 56px; }
.faces .note { display: flex; align-items: center; padding: 0 8px; font-size: 22px; transform: rotate(-2deg); }

/* ---------- 6. visit ---------- */

.visit-in { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.visit-text > p { font-size: 20px; margin-top: 20px; max-width: 28em; }
address { font-style: normal; font-size: 20px; line-height: 1.5; margin-top: 28px; }
address a { font-size: 17px; display: inline-block; margin-top: 6px; }
.hours { margin-top: 32px; border-collapse: collapse; font-size: 17px; }
.hours caption { text-align: left; font-weight: 600; font-size: 20px; padding-bottom: 8px; }
.hours th { text-align: left; font-weight: 400; padding: 6px 32px 6px 0; }
.hours td { padding: 6px 0; font-variant-numeric: tabular-nums; }

.visit-cluster { aspect-ratio: 1 / .8; }
.v-shoe .pen { padding-left: 28px; }
.visit-cluster .print { position: absolute; }
.v-freeman { left: 0; top: 0; width: 58%; z-index: 1; }
.v-freeman .pen { width: 52%; }
.v-freeman img { aspect-ratio: 4 / 3; }
.v-shoe { right: 0; top: 9%; width: 44%; z-index: 2; }
.v-shoe img { aspect-ratio: 3 / 2; }
.v-meadow { left: 32%; top: 58%; width: 46%; z-index: 3; }
.v-meadow img { aspect-ratio: 3 / 2; }

/* ---------- 7. book ---------- */

.book-in { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: start; }
.book-text { padding-top: 24px; }
.book-hours { font-size: 17px; margin-top: 12px; opacity: .85; }
.book-print { width: 280px; margin-top: 48px; }
.book-print img { aspect-ratio: 1; }
.book h2 { color: var(--print); font-size: clamp(40px, 5vw, 68px); }
.book-text p { font-size: 20px; margin-top: 24px; max-width: 30em; }

/* ---------- footer ---------- */

.foot { padding: 64px 0 48px; border-top: 1px solid rgba(255,255,255,.08); font-size: 16px; }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: 40px; }
.foot-logo { width: 220px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a:not(.btn) { display: inline-block; padding: 10px 0; }
.foot .btn { margin-top: 4px; }
.foot-col > p:first-child:not(:only-child) { margin-bottom: 12px; }
.credits { margin-top: 48px; font-size: 13px; opacity: .65; }

.strip { display: none; }

/* the request form, on a print-white card held by corners */
.request {
  position: relative;
  background: var(--print);
  color: var(--ink);
  padding: 36px 36px 32px;
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 18px 30px -14px rgba(0,0,0,.6);
  transform: rotate(-.5deg);
  --c: var(--corner);
}
.request::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none; --s: 34px;
  background:
    linear-gradient(135deg, var(--c) 50%, transparent 50.5%) top left / var(--s) var(--s) no-repeat,
    linear-gradient(225deg, var(--c) 50%, transparent 50.5%) top right / var(--s) var(--s) no-repeat,
    linear-gradient(45deg, var(--c) 50%, transparent 50.5%) bottom left / var(--s) var(--s) no-repeat,
    linear-gradient(315deg, var(--c) 50%, transparent 50.5%) bottom right / var(--s) var(--s) no-repeat;
}
.request h3 { margin-bottom: 20px; }
.request > label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.request input:not([type]), .request input[type=tel] {
  display: block; width: 100%; margin-top: 6px;
  font: 400 17px var(--serif); color: var(--ink);
  padding: 12px 14px; border: 1px solid #b9c1c8; border-radius: 3px; background: #fff;
}
.opts { border: 0; padding: 0; margin: 6px 0 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.opts legend { font-size: 16px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.opts label { font-size: 16px; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; }
.opts input { width: 18px; height: 18px; accent-color: var(--board); margin: 0; }
.request .btn { width: 100%; margin-top: 8px; font-size: 18px; }
.request-note { font-size: 15px; margin-top: 12px; color: #4a4239; }
.call-line { margin-top: 28px; font-size: 18px; }
.pay-band { padding: 56px 0; }
.pay { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 40px; font-size: 17px; }
.pay p { margin: 0; }

/* ---------- smaller screens ---------- */

@media (max-width: 1340px) {
  .nav { display: none; }
  .top-call { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero-in, .story-in, .visit-in, .book-in { grid-template-columns: 1fr; }
  .hero-cluster { max-width: 640px; }
  .services-grid { grid-template-columns: 1fr; gap: 56px; }
  .more { grid-template-columns: 1fr 1fr; }
  .more li:first-child { grid-template-columns: 220px 1fr; gap: 32px; }
  .faces { grid-template-columns: repeat(3, 1fr); }
  .faces li:first-child, .faces li:nth-child(2) { grid-column: auto; grid-row: auto; }
  .letters { grid-template-columns: 1fr; max-width: 560px; }
  .letter:nth-child(n) { transform: rotate(var(--lr, -.5deg)); }
  .letter:nth-child(2) { --lr: .5deg; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .top-in { height: 60px; gap: 14px; }
  .strip { display: block; margin: 0; padding: 7px var(--gut); background: var(--glassine); font-size: 15px; line-height: 1.3; }
  .strip a { font-weight: 600; color: var(--board); }
  .pay { grid-template-columns: 1fr; gap: 12px; }
  .pay-band { padding: 48px 0; }
  .request { padding: 28px 22px 24px; }
  .book-print { display: none; }
  .opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .opts:nth-of-type(1) { grid-template-columns: 1fr 1fr; }
  .opts:nth-of-type(3) { grid-template-columns: repeat(3, 1fr); }
  .opts legend { grid-column: 1 / -1; }
  .opts label { flex-direction: column; gap: 4px; min-height: 52px; justify-content: center; font-size: 15px; }
  .opts:nth-of-type(1) label { flex-direction: row; min-height: 44px; justify-content: flex-start; }
  .brand img { width: 130px; }
  .top-call { display: none !important; }
  .top .btn { margin-left: auto; }
  .top-call { width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--glassine); }
  .top .btn { padding: 13px 16px 12px; font-size: 15px; }

  .hero { padding: 32px 0 64px; }
  h1 { font-size: 42px; }
  .actions { margin-top: 26px; }
  .rating { margin-top: 18px; }
  .lede { font-size: 18px; }
  .hero-cluster { aspect-ratio: 1 / 1.12; margin-top: 12px; }
  .hero-cluster { aspect-ratio: 1 / 1.3; }
  .p-brush { left: 8%; top: 0; width: 68%; }
  .p-brush img { object-position: 62% 25%; }
  .p-brush .pen { display: none; }
  .p-depot { width: 40%; top: 50%; right: -2%; }
  .p-depot .pen { display: none; }
  .p-toddler { width: 44%; bottom: 0; left: 0; }
  .p-toddler .pen { display: block; position: absolute; left: 106%; bottom: 6px; width: 9em; font-size: 18px; margin: 0; }
  .pen { font-size: 19px; }

  .services-head, .smiles-head, .team-head { margin-bottom: 40px; }
  .services-head p, .smiles-head p, .team-head p, .visit-text > p, .book-text p { font-size: 18px; }
  .s-pair { grid-template-columns: 1fr; gap: 0; }
  .s-kids { width: 86%; }
  .s-aligner { width: 74%; justify-self: end; margin-top: 32px; }
  .s-coffee { margin-top: 0; }
  .more { grid-template-columns: 1fr; margin-top: 56px; gap: 32px; }
  .more li:first-child { grid-template-columns: 1fr; gap: 16px; }
  .calm { width: 62%; }

  .pair, .pair-b { grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-bottom: 56px; }
  .pair-note, .pair-b .pair-note { grid-column: 1 / -1; grid-row: auto; font-size: 18px; }
  .pair .pen { font-size: 21px; }
  .smalls { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .smalls .pen { font-size: 17px; }

  .story-in { gap: 48px; }
  .story-print { max-width: 78%; }
  .letters-wrap { margin-top: 88px; }
  .letter { padding: 26px 22px 22px; }

  .faces { grid-template-columns: repeat(6, 1fr); gap: 22px 12px; }
  .faces li { grid-column: span 2; }
  .faces li:nth-child(even) { margin-top: 0; }
  .faces li:nth-child(-n+2) { grid-column: span 3; }
  .faces li:nth-child(2) { margin-top: 20px; }
  .faces .pen { font-size: 17px; margin-top: 6px; padding-left: 2px; }
  .faces .role { display: none; }
  .faces .note { grid-column: 1 / -1; font-size: 18px; }

  .visit-cluster { aspect-ratio: auto; display: flex; flex-direction: column; gap: 4px; }
  .visit-cluster .print { position: relative; inset: auto; }
  .visit-cluster .pen { font-size: 17px; margin-top: 8px; }
  .v-freeman { width: 78%; }
  .v-shoe { width: 70%; align-self: flex-end; margin-top: 0; }
  .v-shoe .pen { text-align: right; padding-right: 6px; }
  .v-meadow { width: 72%; margin-top: 10px; }
  .hours { font-size: 16px; }
  .hours th { padding-right: 18px; }

  .foot-in { grid-template-columns: 1fr; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}