/* Vienna Family Dental: country inn. Painted green wood, claret wool, ink, autumn light. */
:root {
  --green: #1f3b2d;
  --green-deep: #13261d;
  --green-ink: #0d1b14;
  --claret: #7c2229;
  --claret-deep: #521519;
  --ink: #1d1b18;
  --paper: #f1ebdf;
  --paper-2: #e6dccb;
  --amber: #c98a3c;
  --blue: #3a76b5;
  --rule: rgba(29, 27, 24, .28);
  --display: "Cinzel", "Trajan Pro", serif;
  --text: "Spectral", Georgia, serif;
  --wrap: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 1.125rem/1.6 var(--text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: .02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.4vw, 3.15rem); }
h3 { font-size: 1.2rem; letter-spacing: .06em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.25rem; font-style: italic; line-height: 1.55; }
.small { font-size: .95rem; }

/* The ornament: tapered rules from the logo, a dogwood blossom between */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--amber); margin: 0 auto 18px; }
.orn::before, .orn::after { content: ""; height: 3px; width: 90px; background: currentColor; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.orn::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.orn svg { width: 22px; height: 22px; fill: currentColor; }
.orn.left { justify-content: flex-start; }
.orn.left::before { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; font: 600 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; background: var(--claret); color: #fff; border: 0; box-shadow: inset 0 0 0 4px var(--claret), inset 0 0 0 5px rgba(255,255,255,.55); cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--claret-deep); box-shadow: inset 0 0 0 4px var(--claret-deep), inset 0 0 0 5px rgba(255,255,255,.55); }
.call { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.call:hover { color: var(--amber); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.actions .note { font-size: .95rem; }

/* Frames: a painted-wood moulding, a mat, and a plate */
.frame { margin: 0; background: var(--paper); padding: 10px; border: 7px solid var(--green-deep); box-shadow: 0 0 0 1px var(--amber) inset, 0 14px 28px -14px rgba(0,0,0,.55); position: relative; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.claret { border-color: var(--claret-deep); }
.frame.dark { border-color: #2b1d14; }
.plate { display: table; margin: 12px auto 0; padding: 5px 14px 4px; font: 600 .7rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: linear-gradient(#d9b06c, #b98a45); border: 1px solid #8a6630; text-align: center; max-width: 92%; }

/* Utility bar and header */
.util { background: var(--green-ink); color: #d9d2c3; font-size: .9rem; }
.util .wrap { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; }
.util a { text-decoration: none; }
.site-head { background: var(--green); color: #fff; border-bottom: 1px solid rgba(201,138,60,.6); position: sticky; top: 0; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 78px; }
.site-head .logo img { height: 42px; width: auto; }
.site-head nav { display: flex; gap: 22px; margin-left: auto; font-size: .98rem; }
.site-head nav a { text-decoration: none; opacity: .92; }
.site-head nav a:hover { color: var(--amber); }
.site-head .head-call { font-size: 1.05rem; }
.site-head .btn { min-height: 46px; padding: 0 22px; }

/* Hero */
.hero { position: relative; height: clamp(640px, calc(100vh - 116px), 900px); overflow: hidden; color: #fff; background: var(--green-deep); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,27,20,.55), rgba(13,27,20,0) 55%), linear-gradient(0deg, rgba(13,27,20,.45), transparent 40%); }
.hero .wrap { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding-bottom: 64px; }
.hero-card { width: 610px; background: rgba(19,38,29,.93); padding: 40px 46px 34px; outline: 1px solid rgba(201,138,60,.8); outline-offset: -10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.hero-card .where { font-size: 1rem; letter-spacing: .02em; color: #e8dfcd; margin-bottom: 18px; }
.hero h1 { font-size: clamp(3.2rem, 6.2vw, 5.6rem); font-weight: 500; line-height: .98; margin-bottom: 20px; }
.hero-card p.lede { color: #f1ebdf; margin-bottom: 26px; }
.hero .call { color: #fff; }
.proof { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(241,235,223,.25); font-size: .98rem; color: #e8dfcd; }
.proof .stars { color: var(--amber); letter-spacing: 2px; }
.proof a { color: #fff; }
.hero .credit { position: absolute; right: 24px; bottom: 16px; z-index: 1; font-size: .78rem; color: rgba(255,255,255,.8); font-style: italic; }

/* Section shell */
section { position: relative; }
.pad { padding: 110px 0; }
.head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.head p { margin-top: 18px; }

/* How we keep house */
.house { background: url(img/plaster.jpg) center/cover; }
.house-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.house-grid .frame { aspect-ratio: 4 / 5; }
.house-grid h3 { margin: 26px 0 8px; }
.house-grid p { font-size: 1.02rem; }
.house-grid .q { font-style: italic; }

/* Services on claret paneling */
.services { background: var(--claret-deep) url(img/panel-claret.jpg) center/cover; color: #f6efe3; }
.services .orn { color: var(--amber); }
.svc { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 30px; }
.svc a { text-decoration: none; color: inherit; display: block; }
.svc .tile .frame { aspect-ratio: 4 / 3; border-color: #2b1d14; }
.svc .tile.tall { grid-row: span 2; }
.svc .tile.tall .frame { aspect-ratio: auto; height: calc(100% - 92px); min-height: 420px; }
.svc .tile h3 { margin: 18px 0 4px; color: #fff; }
.svc .tile p { font-size: 1rem; color: #ead9c8; margin: 0; }
.svc .tile:hover h3 { color: var(--amber); }
.svc .art { background: var(--paper); display: grid; place-items: center; }
.svc .art svg { width: 62%; height: auto; --ink: var(--green-deep); --shape: #e3c79a; }
.svc-more { margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(201,138,60,.55); display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; font-size: 1.02rem; }
.svc-more a { color: #f6efe3; text-decoration: none; border-bottom: 1px solid rgba(246,239,227,.35); }
.svc-more a:hover { color: var(--amber); }

/* Results: a gallery wall */
.results { background: var(--paper); }
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 30px; align-items: start; }
.case .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case .pair figure { margin: 0; position: relative; }
.case .pair img { aspect-ratio: 1 / 1.08; object-fit: cover; width: 100%; height: auto; }
.case .pair span { position: absolute; left: 6px; top: 6px; font: 600 .66rem/1 var(--display); letter-spacing: .14em; background: rgba(241,235,223,.92); padding: 5px 7px; }
.case p { font-size: .98rem; margin: 14px 0 0; line-height: 1.5; }
.case.feature p { font-size: 1.05rem; }
.case.feature { grid-column: span 2; grid-row: span 2; }
.case.feature .pair img { aspect-ratio: 3 / 4; }
.kadie { margin: 0; padding: 30px 28px; background: var(--green); color: #f1ebdf; outline: 1px solid rgba(201,138,60,.8); outline-offset: -8px; }
.kadie blockquote { font-size: 1.02rem !important; }
.kadie blockquote { margin: 0; font-style: italic; font-size: 1.12rem; line-height: 1.6; }
.kadie cite { display: block; margin-top: 16px; font: 600 .78rem/1.3 var(--display); letter-spacing: .12em; font-style: normal; color: var(--amber); }
.results .actions { justify-content: center; margin-top: 20px; }

/* Nervous: wool photo ground */
.nerves { min-height: 760px; color: #fff; display: flex; align-items: center; overflow: hidden; }
.nerves > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.nerves::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,27,20,0) 30%, rgba(13,27,20,.55)); }
.nerves .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding: 100px 0; }
.nerves-card { width: 600px; background: var(--claret-deep); padding: 48px 50px 42px; outline: 1px solid rgba(201,138,60,.8); outline-offset: -10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.nerves-card h2 { margin-bottom: 22px; }
.nerves-card ul { list-style: none; padding: 0; margin: 0 0 26px; border-top: 1px solid rgba(241,235,223,.25); }
.nerves-card li { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(241,235,223,.25); font-size: 1.04rem; }
.nerves-card li b { font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .1em; color: #f0d9b0; }
.nerves-card blockquote { margin: 0 0 28px; font-style: italic; font-size: 1.08rem; padding-left: 18px; border-left: 2px solid var(--amber); }
.nerves-card cite { display: block; font: 600 .74rem/1.3 var(--display); letter-spacing: .12em; font-style: normal; margin-top: 8px; color: #f0d9b0; }
.nerves .call { color: #fff; }

/* Dr Paino */
.doctor { background: var(--paper); }
.doc-grid { display: grid; grid-template-columns: 480px 1fr; gap: 80px; align-items: center; }
.doc-grid .frame.lead { aspect-ratio: 4 / 5; border-width: 12px; padding: 16px; }
.doc-grid .frame.lead img { object-position: 50% 20%; }
.doc-grid h2 { margin-bottom: 28px; }
.pull { font-size: 1.45rem; line-height: 1.5; font-style: italic; margin: 0 0 26px; padding: 0; position: relative; }
.pull::before { content: "\201C"; font-family: var(--display); font-size: 5rem; line-height: 0; position: absolute; left: -46px; top: 38px; color: var(--amber); }
.doc-grid .creds { font-size: 1rem; color: #4a453e; }
.colleagues { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
.colleague { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.colleague .frame { padding: 5px; border-width: 5px; aspect-ratio: 4 / 5; }
.colleague .frame img { object-position: 50% 15%; }
.colleague h3 { font-size: 1rem; margin-bottom: 6px; }
.colleague p { font-size: .95rem; margin: 0; line-height: 1.5; }

/* Team: the portrait hall on green paneling */
.team { background: var(--green-deep) url(img/panel-green.jpg) center/cover; color: #f1ebdf; }
.hall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 46px 34px; max-width: 1120px; margin: 0 auto; }
.hall figure { margin: 0; text-align: center; }
.hall .frame { aspect-ratio: 4 / 5; border-color: #2b1d14; padding: 7px; }
.hall .frame img { object-position: 50% 18%; }
.hall .plate { margin-top: 14px; }
.hall figcaption p { font-size: .95rem; color: #dcd3c2; margin: 8px 0 0; line-height: 1.45; }
.hall .row2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; padding: 0 10%; }

/* Neighbourhood */
.town-photo { position: relative; height: 680px; overflow: hidden; }
.town-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.town-photo .wrap { position: relative; height: 100%; display: flex; align-items: flex-start; padding-top: 70px; }
.town-card { width: 520px; background: rgba(241,235,223,.96); padding: 40px 44px 30px; outline: 1px solid var(--green); outline-offset: -10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.town-card h2 { margin-bottom: 18px; }
.town-card .plate-note { font-size: .82rem; font-style: italic; color: #5a544b; margin: 0; }
.town-strip { background: var(--green-deep); padding: 0 0 80px; }
.town-strip figure { margin: 0; }
.town-strip .row { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 34px; align-items: end; margin-top: -120px; position: relative; z-index: 2; }
.town-strip .frame { border-color: #2b1d14; }
.town-strip .a .frame { aspect-ratio: 3 / 2; }
.town-strip .b .frame { aspect-ratio: 4 / 3; }
.town-strip .c .frame { aspect-ratio: 3 / 4; }
.town-strip .plate { margin-top: 14px; }

/* Paying */
.paying { background: var(--paper); }
.pay-grid { display: grid; grid-template-columns: 420px 1fr; gap: 90px; align-items: center; }
.pay-grid .frame { aspect-ratio: 2 / 3; border-color: var(--claret-deep); }
.pay-grid h2 { margin-bottom: 22px; }
.tariff { margin: 30px 0 30px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 6px 0; }
.tariff div { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tariff div:last-child { border-bottom: 0; }
.tariff dt { font: 600 .84rem/1.3 var(--display); letter-spacing: .1em; white-space: nowrap; }
.tariff dt::after { content: ""; }
.tariff .dots { flex: 1; border-bottom: 1px dotted rgba(29,27,24,.5); transform: translateY(-4px); min-width: 20px; }
.tariff dd { margin: 0; text-align: right; max-width: 60%; font-size: 1rem; }
.placeholder { background: #f6e3b5; padding: 0 4px; font-style: italic; }

/* Reviews and reading */
.words { background: var(--claret); color: #f6efe3; padding: 96px 0; }
.words-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.big-quote { margin: 0; }
.big-quote blockquote { margin: 0; font-size: 1.7rem; line-height: 1.45; font-style: italic; }
.big-quote cite { display: block; margin-top: 22px; font: 600 .82rem/1.3 var(--display); letter-spacing: .14em; font-style: normal; color: #f0d9b0; }
.rating { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rating .num { font: 500 3rem/1 var(--display); }
.rating .stars { color: #f0c073; letter-spacing: 3px; font-size: 1.2rem; }
.rating a { color: #fff; }
.reading h3 { font-size: 1.05rem; margin-bottom: 20px; color: #f0d9b0; }
.reading ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(246,239,227,.3); }
.reading li { border-bottom: 1px solid rgba(246,239,227,.3); }
.reading a { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 16px 0; text-decoration: none; font-size: 1.08rem; line-height: 1.4; }
.reading a:hover { color: #f0c073; }
.reading svg { width: 54px; height: 54px; --ink: #f6efe3; --shape: rgba(240,192,115,.35); }

/* Booking */
.book { min-height: 860px; display: flex; align-items: center; overflow: hidden; }
.book > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.book::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,27,20,.6), rgba(13,27,20,.1) 70%); }
.book .wrap { position: relative; z-index: 1; padding: 100px 0; }
.register { width: 900px; max-width: 100%; background: var(--paper); display: grid; grid-template-columns: 1.25fr 1fr; outline: 1px solid var(--green); outline-offset: -12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.register .form { padding: 52px 48px 44px; }
.register h2 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); margin-bottom: 14px; }
.register .intro { font-size: 1.02rem; margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label { display: block; font: 600 .78rem/1.3 var(--display); letter-spacing: .12em; margin-bottom: 6px; }
.field label i { font: italic 400 .9rem var(--text); letter-spacing: 0; text-transform: none; color: #5a544b; }
.field input, .field select { width: 100%; height: 48px; font: 400 1.05rem var(--text); color: var(--ink); background: #fbf8f2; border: 0; border-bottom: 2px solid var(--ink); padding: 0 12px; border-radius: 0; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--claret); background: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.register .btn { width: 100%; margin-top: 8px; }
.register .after { font-size: .95rem; margin: 16px 0 0; }
.register .details { background: var(--green); color: #f1ebdf; padding: 52px 40px 44px; }
.details h3 { font-size: .95rem; color: #f0d9b0; margin-bottom: 12px; }
.details table { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 30px; }
.details td { padding: 7px 0; border-bottom: 1px solid rgba(241,235,223,.2); }
.details td:last-child { text-align: right; }
.details address { font-style: normal; margin-bottom: 14px; line-height: 1.5; }
.details a { color: #fff; }
.details .big-call { display: block; font: 500 1.5rem/1.2 var(--display); text-decoration: none; margin-bottom: 8px; color: #fff; }
.details p { font-size: .95rem; }
.details .pain p { font-size: 1rem; }
.details .pain { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(241,235,223,.25); }
.foot .credits { font-size: .78rem; color: #8f8879; margin: 18px 0 0; max-width: 900px; }

/* Footer */
.foot { background: var(--green-ink); color: #cfc7b7; padding: 80px 0 110px; font-size: .98rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot img { height: 46px; width: auto; margin-bottom: 22px; }
.foot h3 { font-size: .82rem; color: #f0d9b0; margin-bottom: 14px; letter-spacing: .14em; }
.foot ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--amber); }
.foot address { font-style: normal; line-height: 1.7; }
.foot .fine { margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(207,199,183,.2); display: flex; justify-content: space-between; gap: 20px; font-size: .85rem; flex-wrap: wrap; }

.thumb-bar { display: none; }

/* Tablet */
@media (max-width: 1180px) {
  .site-head nav { display: none; }
  .site-head .head-call { margin-left: auto; }
  .doc-grid { grid-template-columns: 380px 1fr; gap: 56px; }
  .pay-grid { grid-template-columns: 340px 1fr; gap: 56px; }
}
@media (max-width: 960px) {
  .house-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 1fr 1fr; }
  .svc .tile.tall { grid-row: auto; grid-column: span 2; }
  .svc .tile.tall .frame { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .cases { grid-template-columns: 1fr 1fr; }
  .case.feature { grid-column: span 2; grid-row: auto; }
  .doc-grid, .pay-grid, .words-grid { grid-template-columns: 1fr; }
  .hall { grid-template-columns: repeat(3, 1fr); }
  .hall .row2 { display: contents; }
  .register { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* Phone */
@media (max-width: 640px) {
  body { font-size: 1.06rem; }
  .wrap { width: calc(100% - 36px); }
  .util { display: none; }
  .site-head .wrap { height: 64px; gap: 14px; }
  .site-head .logo img { height: 30px; }
  .site-head .head-call { font-size: .95rem; }
  .site-head .btn { display: none; }
  .pad { padding: 76px 0; }
  .head { margin-bottom: 40px; }
  .orn::before, .orn::after { width: 54px; }
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero > img { position: relative; height: 330px; object-position: 50% 50%; }
  .hero::after { display: none; }
  .hero .wrap { width: 100%; padding: 0; margin-top: -70px; }
  .hero-card { width: auto; margin: 0 12px 12px; padding: 30px 26px 26px; background: var(--green-deep); }
  .hero h1 { font-size: 3.2rem; }
  .hero-card .where { font-size: .95rem; margin-bottom: 12px; }
  .hero-card p.lede { font-size: 1.1rem; }
  .hero .credit { top: 294px; bottom: auto; right: 14px; }
  .house-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .house-grid h3 { font-size: 1rem; margin-top: 16px; }
  .house-grid p { font-size: .95rem; }
  .svc { grid-template-columns: 1fr 1fr; gap: 20px; }
  .svc .tile h3 { font-size: 1rem; }
  .svc .tile p { font-size: .92rem; }
  .cases { grid-template-columns: 1fr; }
  .case.feature { grid-column: auto; }
  .kadie { padding: 28px 24px; }
  .nerves { min-height: 0; display: block; }
  .nerves > img { position: relative; height: 320px; }
  .nerves::before { display: none; }
  .nerves .wrap { width: 100%; padding: 0; margin-top: -60px; }
  .nerves-card { width: auto; margin: 0 12px; padding: 34px 26px 30px; }
  .nerves-card li { grid-template-columns: 1fr; gap: 2px; }
  .nerves { background: var(--claret-deep); padding-bottom: 12px; }
  .pull { font-size: 1.22rem; }
  .pull::before { display: none; }
  .colleagues { grid-template-columns: 1fr; }
  .hall { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .hall .row2 figure:last-child { grid-column: span 2; width: calc(50% - 10px); justify-self: center; }
  .town-photo { height: auto; }
  .town-photo > img { position: relative; height: 300px; }
  .town-photo .wrap { width: 100%; padding: 0; margin-top: -50px; }
  .town-card { width: auto; margin: 0 12px; padding: 32px 26px 24px; }
  .town-photo { background: var(--green-deep); }
  .town-strip { padding: 34px 0 76px; }
  .town-strip .row { grid-template-columns: 1fr; margin-top: 0; gap: 30px; }
  .town-strip .a .frame, .town-strip .b .frame, .town-strip .c .frame { aspect-ratio: 3 / 2; }
  .town-strip .c .frame img { object-position: 50% 30%; }
  .words { padding: 76px 0; }
  .pay-grid .frame { aspect-ratio: 3 / 2; }
  .pay-grid .frame img { object-position: 50% 40%; }
  .tariff div { flex-wrap: wrap; }
  .tariff .dots { display: none; }
  .tariff dd { max-width: none; text-align: left; width: 100%; }
  .big-quote blockquote { font-size: 1.3rem; }
  .book { display: block; min-height: 0; background: var(--green-deep); }
  .book > img { position: relative; height: 300px; }
  .book::before { display: none; }
  .book .wrap { width: 100%; padding: 0 12px 12px; margin-top: -60px; }
  .register .form { padding: 36px 26px 30px; }
  .register .details { padding: 34px 26px 30px; }
  .two { grid-template-columns: 1fr; gap: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .thumb-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
  .thumb-bar a { display: flex; align-items: center; justify-content: center; height: 58px; font: 600 .86rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
  .thumb-bar .t-call { background: var(--green); color: #fff; }
  .thumb-bar .t-book { background: var(--claret); color: #fff; }
}