/* Forward Oral Surgery, footer.css (builder F, 2 Nov): the x02 footer (S10, S11, D18). Replaces the .foot rules that lived in
   base.css. The form devices (D14) stay in devices.css.

   One painted ground, so no seam can show: .foot paints the body from --foot-curve down, and .foot__curve is ONE ellipse
   (1.6 times the width, its edge meeting x = 0 exactly --foot-curve down) laid over it. The two overlap everywhere except
   the outermost pixel at each side, so no row is ever shared by two antialiased edges (the old svg curve plus a body block
   left a light line at fractional pixel offsets and browser zoom).

   Hover and focus come from the measured devices: the D02 text roll (0.8s, the underline link timing) and the D03 corner
   arrow, which slides in with a colour lift from --ink-3-dark to full ink. Reduced motion: colour only. */

.foot { position: relative; z-index: 2; isolation: isolate; overflow: clip; margin-top: calc(-1 * var(--foot-curve));
  padding-top: calc(var(--foot-curve) + var(--gap-64)); color: var(--ink-invert);
  background: linear-gradient(var(--anchor), var(--anchor)) 0 var(--foot-curve) / 100% 100% no-repeat; }
/* the curve rises over the band above it, so the last band of a page keeps its full bottom space plus the curve */
main > .band:last-child { padding-bottom: calc(var(--pad-sec) + var(--foot-curve)); }
.foot__curve { position: absolute; z-index: -1; top: 0; left: calc(50% - var(--foot-ellipse-w) / 2); width: var(--foot-ellipse-w);
  height: calc(var(--foot-curve) * var(--foot-ellipse-k)); border-radius: var(--r-circle); background: var(--anchor); pointer-events: none; }
.foot__in { container-type: inline-size; background-color: var(--anchor); }   /* the content always sits below the curve: its
   real ground, declared, so contrast readers resolve the dark ground (anchor over anchor, so no edge can show) */

.foot__lbl { display: block; margin: 0 0 var(--gap-16); color: var(--ink-3-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size);
  line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); text-align: left; }

/* ---- footer link: roll + corner arrow + colour lift ------------------------------------------------------------ */
.flink { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: var(--gap-32); color: var(--ink-3-dark);
  transition: color var(--dur-fast) var(--ease-io); }
.flink .roll > span { transition: transform var(--dur-link) var(--ease-out); }
.flink .ico-corner { opacity: 0; transform: translate(calc(-1 * var(--gap-8)), var(--gap-8)); transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-link) var(--ease-out); }
.flink:hover, .flink:focus-visible { color: var(--ink-invert); }
.flink:hover .roll > span, .flink:focus-visible .roll > span { transform: translateY(-100%); }
.flink:hover .ico-corner, .flink:focus-visible .ico-corner { opacity: 1; transform: none; }
.flink--strong, .flink--big { color: var(--ink-invert); }
.flink--u { gap: var(--gap-8); padding-bottom: 2px; border-bottom: 1px solid var(--ink-invert); min-height: 24px; color: var(--ink-invert);
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.flink--u .ico-corner { opacity: 1; transform: none; }
.flink--u:hover .ico-corner, .flink--u:focus-visible .ico-corner { transform: translate(2px, -2px); }

/* ---- top: the call block and the form -------------------------------------------------------------------------- */
.foot__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-40); padding-bottom: calc(var(--gap-64) + var(--gap-32)); }
.foot__call { display: grid; align-content: start; justify-items: start; gap: var(--gap-16); }
.foot__call .foot__lbl { margin: 0; }
.flink--big .ico-corner { width: calc(var(--icon) * 1.5); height: calc(var(--icon) * 1.5); }
.foot__hrs { color: var(--ink-3-dark); font-family: var(--t-p3-family); font-size: var(--t-p3-size); line-height: 1.5; letter-spacing: var(--t-p3-track); }
.foot__form { display: grid; align-content: start; gap: var(--gap-40); }
.foot__form .radios legend { color: var(--ink-3-dark); }

/* ---- the menu: three link columns and the office block --------------------------------------------------------- */
.foot__grid { display: grid; grid-template-columns: 3fr 1.3fr; gap: var(--gap-40); padding: var(--gap-48) 0 var(--gap-64);
  border-top: 1px solid var(--hairline-dark); }
.foot__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-24); }
.foot__col ul { display: grid; gap: var(--gap-8); justify-items: start; }
.foot__col .flink { font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight);
  letter-spacing: var(--t-p1-track); }

.foot__office { display: grid; align-content: start; justify-items: start; gap: var(--gap-24); padding-left: var(--gap-32);
  border-left: 1px solid var(--hairline-dark); }
.foot__office .foot__lbl { margin: 0; }
.foot__adr { display: grid; justify-items: start; gap: var(--gap-16); font-style: normal; }
.foot__street { font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: 1.25; font-weight: var(--t-p1-weight);
  letter-spacing: var(--t-p1-track); color: var(--ink-invert); }
.foot__dl { display: grid; gap: 0; width: 100%; margin: 0; }
.foot__dl > div { display: grid; grid-template-columns: calc(var(--gap-48) + var(--gap-8)) 1fr; align-items: center; gap: var(--gap-12); }
.foot__dl dt { color: var(--ink-3-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight); }
.foot__dl dd { margin: 0; min-height: var(--gap-32); display: flex; align-items: center; font-family: var(--t-p2-family); font-size: var(--t-p2-size);
  font-weight: var(--t-p2-weight); line-height: var(--t-p2-lh); color: var(--ink-invert); }
.foot__hours { width: 100%; border-collapse: collapse; font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: 1.4; }
.foot__hours caption { caption-side: top; margin-bottom: var(--gap-8); }
.foot__hours th, .foot__hours td { padding: var(--gap-8) 0; border-top: 1px solid var(--hairline-dark); vertical-align: top; }
.foot__hours th { text-align: left; font-weight: var(--t-c2-weight); color: var(--ink-3-dark); padding-right: var(--gap-16); }
.foot__hours td { text-align: right; font-weight: var(--t-p2-weight); color: var(--ink-invert); white-space: nowrap; }

/* ---- base row: the trading line, Back to top, the credit ------------------------------------------------------- */
.foot__base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap-24); padding: var(--gap-24) 0;
  border-top: 1px solid var(--hairline-dark); font-family: var(--t-c2-family); font-size: var(--t-c2-size); font-weight: var(--t-c2-weight);
  letter-spacing: var(--t-c2-track); }
.foot__up { display: inline-flex; align-items: center; gap: var(--gap-12); min-height: 48px; color: var(--ink-invert); }
.foot__ring { display: grid; place-items: center; width: var(--circ); height: var(--circ); border: 1px solid var(--ink-3-dark);
  border-radius: var(--r-circle); transition: background-color var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io),
  color var(--dur-fast) var(--ease-io); }
.foot__arrows { display: grid; width: var(--icon); height: var(--icon); overflow: hidden; }
.foot__arrows svg { grid-area: 1 / 1; width: var(--icon); height: var(--icon); transition: transform var(--dur-link) var(--ease-out); }
.foot__arrows svg + svg { transform: translateY(100%); }
.foot__up:hover .foot__ring, .foot__up:focus-visible .foot__ring { background: var(--ground-light); border-color: var(--ground-light); color: var(--anchor); }
.foot__up:hover .foot__arrows svg, .foot__up:focus-visible .foot__arrows svg { transform: translateY(-100%); }
.foot__up:hover .foot__arrows svg + svg, .foot__up:focus-visible .foot__arrows svg + svg { transform: none; }
.foot__credit { justify-self: end; }
.foot__credit a { display: inline-flex; align-items: center; gap: var(--gap-8); min-height: 24px; color: var(--ink-invert);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat;
  transition: background-size var(--dur-link) var(--ease-out); }
.foot__credit .ico-corner { width: calc(var(--icon) * .75); height: calc(var(--icon) * .75); transition: transform var(--dur-link) var(--ease-out); }
.foot__credit a:hover, .foot__credit a:focus-visible { background-size: 100% 1px; }
.foot__credit a:hover .ico-corner, .foot__credit a:focus-visible .ico-corner { transform: translate(2px, -2px); }

/* ---- the signature ending: the practice name across the full width (S2 grammar: words to opposite edges) -------- */
.foot__mark { display: flex; justify-content: space-between; align-items: flex-end; margin: 0; padding: var(--gap-40) 0 .3em;
  font-family: var(--display); font-weight: 400; font-size: calc(100cqi / var(--foot-name-fit)); line-height: var(--t-display-xxl-lh);
  letter-spacing: var(--t-display-xxl-track); white-space: nowrap; color: var(--ink-invert); }
.foot__mark em { font-style: italic; }
.foot__mark .w { display: block; padding: 0 0 .3em; margin-bottom: -.3em; clip-path: inset(-.5em -.3em 0 -.3em); }
.foot__mark .w > * { display: block; transition: transform calc(var(--dur-link) * 1.5) var(--ease-out); }
.foot__mark .w + .w > * { transition-delay: calc(var(--dur-fast) * .4); }
html.js .foot__mark:not(.is-in) .w > * { transform: translateY(160%); }

@media (prefers-reduced-motion: reduce) {
  .flink .roll > span, .flink .ico-corner, .foot__arrows svg, .foot__credit .ico-corner, .foot__mark .w > * { transition: none; transform: none !important; }
  .flink .ico-corner { opacity: 0 !important; }
  .flink--u .ico-corner { opacity: 1 !important; }
  .foot__arrows svg + svg { display: none; }
  .foot__credit a { transition: none; }
  html.js .foot__mark:not(.is-in) .w > * { transform: none; }
}

@media (max-width: 1023px) {
  .foot { padding-top: calc(var(--foot-curve) + var(--gap-40)); }
  .foot__top { grid-template-columns: 1fr; gap: var(--gap-48); padding-bottom: var(--gap-64); }
  .foot__grid { grid-template-columns: 1fr; gap: 0; padding: 0 0 var(--gap-32); border-top: 0; }
  .foot__nav { grid-template-columns: 1fr; gap: 0; }
  .foot__col, .foot__office { padding: var(--gap-24) 0; border-top: 1px solid var(--hairline-dark); }
  .foot__office { border-left: 0; padding-left: 0; }
  .foot__col ul { gap: 0; }
  .flink, .flink--u, .foot__dl dd, .foot__credit a { min-height: 44px; }
  .flink--u { align-items: flex-end; padding-bottom: 4px; }
  .foot__base { grid-template-columns: 1fr; justify-items: start; gap: var(--gap-16); }
  .foot__credit { justify-self: start; }
  .foot__mark { padding-top: var(--gap-24); }
}

/* ---- Forward: the link columns. Procedures | Patients over Doctors | Our practice over Follow us (three columns, two stacks) ---- */
.foot__stack { display: grid; align-content: start; gap: var(--gap-32); min-width: 0; }
.foot__stack .foot__col { min-width: 0; }
@media (max-width: 1023px) { .foot__stack { display: contents; } }
/* 1024 to 1099 wide the three link columns are about 200px each and "Continuing Education" (with its arrow's room) would wrap, which
   the text roll clips: a little less gap and a little smaller type there, so every link is one whole line */
@media (min-width: 1024px) and (max-width: 1099px) {
  .foot__nav { gap: var(--gap-16); }
  .foot__col .flink { font-size: calc(var(--t-p1-size) * .9); gap: var(--gap-4, 4px); }
}

/* ---- Forward: the sample sentence in the small print, buttons that look like links, the longer wordmark ---- */
.foot__sample { margin: 0; max-width: 52ch; color: var(--ink-3-dark); font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: 1.4; }
.foot__base { grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); }
button.flink { padding: 0; border: 0; background: none; color: var(--ink-3-dark); font: inherit; cursor: pointer; text-align: left; }
@media (max-width: 1023px) { .foot__base { grid-template-columns: minmax(0, 1fr); } }

/* ---- Forward Oral Surgery: the days line under the phone, the fax row ---- */
.foot__hrs { margin: 0; max-width: 30ch; }
.foot__call { gap: var(--gap-12); }