/* Book Appointment (/book-appointment/), the Contact page. Every rule is scoped to body.page-contact.
   Page hero, label, ledger, accordion, stick, figure and the office-hours script are shared (site.css / site.js).
   Office hours are drawn as a simple week chart with a live Pacific-time "now" line. The map sits under the contact
   details here, so the footer's own "Ready to Smile?" visit block (address, hours, map) is hidden on this page. */
.page-contact .visit { display: none; }

/* ---------- Hero: live open/closed status in the meta row ---------- */
.page-contact .ct-hero__today:has([data-hours-status][hidden]) { display: none; }
.page-contact .ct-status { margin: 0; padding: 0; gap: 9px; border: 0; border-radius: 0; font-size: .78rem; font-weight: 400; color: var(--muted); }
.page-contact .ct-status[hidden] { display: none; }
.page-contact .ct-status::before { width: 6px; height: 6px; }
.page-contact .ct-status.is-open { color: var(--ink); }
.page-contact .ct-status.is-open::before { background: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 22%, transparent); }

/* ---------- Contact info: a ledger set large in the display face ---------- */
.page-contact .ct-info__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.page-contact .ct-info__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-contact .ct-ledger { margin-top: 6px; border-color: var(--line-strong); }
.page-contact .ct-info__map { grid-column: 2; position: relative; height: clamp(320px, 32vw, 460px); overflow: hidden; background: var(--porcelain); }
.page-contact .ct-info__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.18) contrast(.92) brightness(1.02); transition: filter .8s var(--ease-out); }
.page-contact .ct-info__map:hover iframe { filter: none; }
.page-contact .ct-ledger__row { position: relative; grid-template-columns: minmax(96px, 1.25fr) minmax(0, 4fr); align-items: baseline; padding: clamp(20px, 2.4vw, 32px) 0; }
.page-contact .ct-ledger dt { padding-top: 0; }
.page-contact .ct-ledger dd { min-width: 0; }
.page-contact .ct-ledger .ct-ledger__link {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none;
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.45rem); font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
  transition: color .4s;
}
/* The whole row is the link's hit area. */
.page-contact .ct-ledger__link::after { content: ""; position: absolute; inset: 0; }
.page-contact .ct-ledger__value { min-width: 0; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .7s var(--ease-out); }
.page-contact .ct-ledger__link .icon { width: 22px; height: 22px; color: var(--sun-deep); transition: transform .6s var(--ease-out); }
.page-contact .ct-ledger__row:hover .ct-ledger__link { color: var(--ink-3); }
.page-contact .ct-ledger__row:hover .ct-ledger__value { background-size: 100% 1px; }
.page-contact .ct-ledger__row:hover .icon { transform: translateX(4px); }
.page-contact .ct-ledger__row:hover .icon:has(use[href="#i-arrow-ne"]) { transform: translate(3px, -3px); }

/* ---------- Office hours: one bar per open day across a 7 AM to 6 PM day ---------- */
.page-contact .ct-hours { margin-top: clamp(96px, 12vw, 184px); }
.page-contact .ct-hours__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: clamp(44px, 5.6vw, 84px); }

.page-contact .ct-week {
  --day-w: clamp(6.25rem, 14vw, 13rem);
  --time-w: clamp(5.4rem, 10vw, 9.5rem);
  --gap: clamp(12px, 2.4vw, 40px);
  --track: calc(100% - var(--day-w) - var(--time-w) - var(--gap));
  margin: 0;
}
.page-contact .ct-week__plot { position: relative; }

/* Header: the three times from the schedule, each set over the point where its bars begin or end. */
.page-contact .ct-week__axis {
  position: relative; height: 34px; margin: 0 calc(var(--time-w) + var(--gap)) 0 var(--day-w);
  border-bottom: 1px solid var(--line-strong);
}
.page-contact .ct-week__t {
  position: absolute; top: 0; left: calc((var(--h) - 7) / 11 * 100%); transform: translateX(-50%);
  font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .14em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Rows: the shared [data-hours] table, laid out as day | track | time. */
/* Auto layout: Chrome's fixed layout ignores cell widths when the caption is the visually-hidden (absolute) one. */
.page-contact .ct-week__table { width: 100%; max-width: none; table-layout: auto; border-collapse: collapse; font-size: 1rem; }
.page-contact .ct-week__table tr { border-bottom: 1px solid var(--line); transition: background-color .5s var(--ease-out); }
.page-contact .ct-week__table th {
  width: var(--day-w); padding: 0 16px 0 0; vertical-align: middle;
  font-family: var(--f-display); font-size: clamp(1.15rem, 1.9vw, 1.8rem); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; color: var(--ink);
  transition: color .4s;
}
.page-contact .ct-week__table td { padding: 0; text-align: left; color: inherit; }
.page-contact .ct-week__cell {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--time-w); column-gap: var(--gap); align-items: center;
  min-height: clamp(56px, 5.8vw, 84px);
}
.page-contact .ct-week__track { position: relative; align-self: stretch; }
.page-contact .ct-week__bar {
  position: absolute; top: var(--bar-y, 50%); left: calc((var(--a) - 7) / 11 * 100%); width: calc((var(--b) - var(--a)) / 11 * 100%);
  height: 10px; margin-top: -5px; background: var(--sea);
  transform-origin: left center;
}
/* A closed day keeps a quiet hairline where its bar would be. */
.page-contact .ct-week__table tr.is-closed .ct-week__track::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--bar-y, 50%); height: 1px; background: var(--line);
  transform-origin: left center;
}
.page-contact .ct-week__time { text-align: right; white-space: nowrap; font-size: clamp(.8rem, .95vw, .95rem); font-variant-numeric: tabular-nums; color: var(--muted); }
.page-contact .ct-week__table tr.is-closed .ct-week__time { color: var(--muted); opacity: .8; }

.page-contact .ct-week__table tr:hover th { color: var(--ink-3); }
.page-contact .ct-week__table tr:hover .ct-week__bar { background: var(--tide); }

/* Today (site.js marks the row): a solid bar and a small caption under the day. */
.page-contact .ct-week__table tr.is-today { background: color-mix(in srgb, var(--enamel) 70%, transparent); }
.page-contact .ct-week__table tr.is-today th { font-weight: 400; color: var(--ink); }
.page-contact .ct-week__table tr.is-today th::after {
  content: "Today"; display: block; margin-top: 8px;
  font-family: var(--f-sans); font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-deep);
}
.page-contact .ct-week__table tr.is-today td { font-weight: 400; }
.page-contact .ct-week__table tr.is-today .ct-week__time { color: var(--ink); font-weight: 600; opacity: 1; }
.page-contact .ct-week__table tr.is-today .ct-week__bar { background: var(--ink); }

/* Now: one sunset hairline at the current Pacific time, set by the page script. */
.page-contact .ct-week__now {
  position: absolute; z-index: 2; top: 30px; bottom: 0; width: 1px; display: none; pointer-events: none;
  left: calc(var(--day-w) + var(--track) * var(--now, 0)); background: var(--sun); transform-origin: top;
}
.page-contact .ct-week.has-now .ct-week__now { display: block; }
.page-contact .ct-week__now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.page-contact .ct-week__now-t {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .14em; color: var(--sun-deep); font-variant-numeric: tabular-nums;
}
.page-contact .ct-week__cap { display: flex; justify-content: flex-end; margin-top: 60px; }
.page-contact .ct-week__key { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.page-contact .ct-week__cap .ct-week__k {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: 500; font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.page-contact .ct-week__k::before { content: ""; flex: none; width: 22px; height: 9px; }
.page-contact .ct-week__k--open::before { height: 8px; background: var(--sea); }
.page-contact .ct-week__k--closed::before { height: 1px; background: var(--line-strong); }
.page-contact .ct-week__k--now::before { width: 1px; height: 14px; background: var(--sun); }
.page-contact .ct-week:not(.has-now) .ct-week__k--now { display: none; }

/* Draw-on: the axis wipes in, bars measure out row by row, the now line drops. */
.js .page-contact .ct-week__axis { transition: clip-path 1.4s var(--ease-in-out) .1s; }
.js .page-contact .ct-week:not(.is-visible) .ct-week__axis { clip-path: inset(0 100% 0 0); }
.js .page-contact .ct-week__bar,
.js .page-contact .ct-week__table tr.is-closed .ct-week__track::after { transition: transform 1.3s var(--ease-out), background-color .4s; transition-delay: calc(var(--r, 0) * 90ms + .45s), 0s; }
.js .page-contact .ct-week:not(.is-visible) .ct-week__bar,
.js .page-contact .ct-week:not(.is-visible) .ct-week__table tr.is-closed .ct-week__track::after { transform: scaleX(0); }
.js .page-contact .ct-week__now { transition: transform 1.2s var(--ease-in-out) 1.3s; }
.js .page-contact .ct-week:not(.is-visible) .ct-week__now { transform: scaleY(0); }
.js:not(.ready) .page-contact .ct-week__axis,
.js:not(.ready) .page-contact .ct-week__bar,
.js:not(.ready) .page-contact .ct-week__now,
.js:not(.ready) .page-contact .ct-week__table tr.is-closed .ct-week__track::after { animation: failsafe 0s 2.5s forwards; }

/* ---------- Emergency: the number, set large on its own line ---------- */
.page-contact .ct-sos { overflow: hidden; }
.page-contact .ct-sos__glow {
  position: absolute; left: -18%; bottom: -60%; width: min(84vw, 1200px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 138, 94, .16), rgba(224, 138, 94, .04) 55%, transparent);
}
.page-contact .ct-sos__inner { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 120px); align-items: end; }
.page-contact .ct-sos__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.page-contact .ct-sos__title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 300; line-height: 1.02; letter-spacing: -.035em; }
.page-contact .ct-sos__title em { color: var(--sun); font-weight: 300; }
.page-contact .ct-sos__link { color: var(--on-ink); }
.page-contact .ct-sos__text { max-width: 42ch; margin: 0; padding-bottom: .5em; color: var(--on-ink-muted); }

.page-contact .ct-sos__phone {
  position: relative; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--line-ink);
  color: var(--on-ink); text-decoration: none;
}
.page-contact .ct-sos__phone:focus-visible { outline-offset: 10px; }
.page-contact .ct-sos__num {
  display: block; font-family: var(--f-display); font-size: clamp(2.6rem, 7.6vw, 7.5rem); font-weight: 300; line-height: 1;
  letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; margin-left: -.04em;
}
.page-contact .ct-sos__grp { display: inline-block; }
/* Each glyph rises once on reveal; on hover a sunset wave runs left to right through the digits. */
.page-contact .ct-sos__c { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
.page-contact .ct-sos__c > span { display: block; transition: transform 1.2s var(--ease-out), color .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + .1s), calc(var(--i, 0) * 35ms); }
.page-contact .ct-sos__phone:hover .ct-sos__c > span, .page-contact .ct-sos__phone:focus-visible .ct-sos__c > span { color: var(--sun); }
.js .page-contact .ct-sos__phone:not(.is-visible) .ct-sos__c > span { transform: translateY(115%); }
.js:not(.ready) .page-contact .ct-sos__c > span { animation: failsafe 0s 2.5s forwards; }
.page-contact .ct-sos__go {
  display: grid; place-items: center; flex: none; width: clamp(56px, 5.4vw, 84px); aspect-ratio: 1;
  border: 1px solid var(--line-ink-strong); border-radius: 50%;
  transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out), transform .8s var(--ease-out);
}
.page-contact .ct-sos__go .icon { width: 34%; height: 34%; }
.page-contact .ct-sos__phone:hover .ct-sos__go, .page-contact .ct-sos__phone:focus-visible .ct-sos__go { background: var(--sun); border-color: var(--sun); color: var(--ink); transform: rotate(-12deg); }

/* ---------- FAQ: sticky title beside the questions ---------- */
.page-contact .ct-faq__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-contact .ct-faq__title { max-width: 9ch; }
.page-contact .ct-faq__title em { color: var(--ink-3); }
.page-contact .ct-faq__list { border-color: var(--line-strong); }
.page-contact .ct-faq .accordion__button { padding-block: clamp(22px, 2.2vw, 30px); }
.page-contact .ct-faq .accordion__button > span { flex: 1; min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .page-contact .ct-info__grid { grid-template-columns: minmax(0, 1fr); }
  .page-contact .ct-info__map { grid-column: 1; }
  .page-contact .ct-sos__inner { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
}
@media (max-width: 640px) {

  .page-contact .ct-ledger__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-contact .ct-ledger .ct-ledger__link { font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
  .page-contact .ct-ledger__link .icon { width: 20px; height: 20px; }

  /* Phone: the time is annotated under its bar, so the track can take the full width. */
  .page-contact .ct-week { --day-w: 6.4rem; --time-w: 0px; --gap: 0px; --bar-y: 19px; }
  .page-contact .ct-week__table th { vertical-align: top; padding: 9px 8px 0 0; font-size: 1.15rem; }
  .page-contact .ct-week__table tr.is-today th::after { margin-top: 6px; letter-spacing: .12em; }
  .page-contact .ct-week__cell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px auto; min-height: 0; align-items: start; }
  .page-contact .ct-week__track { grid-row: 1 / -1; grid-column: 1; }
  /* The time sits under the start of its bar. It is lifted above the now line on a ground-coloured
     chip, so the line breaks around the text instead of striking through it. */
  .page-contact .ct-week__time {
    position: relative; z-index: 3; grid-row: 2; grid-column: 1; justify-self: start;
    margin: 0 0 14px calc((var(--a, 7) - 7) / 11 * 100%); padding: 2px 5px 2px 0;
    text-align: left; font-size: .78rem; background: var(--porcelain-2);
  }
  .page-contact .ct-week__table tr.is-today .ct-week__time { background: color-mix(in srgb, var(--enamel) 70%, var(--porcelain-2)); }
  .page-contact .ct-week__table tr.is-closed .ct-week__time { opacity: 1; }
  .page-contact .ct-week__t { letter-spacing: .1em; }
  .page-contact .ct-week__bar { height: 8px; margin-top: -4px; }

  .page-contact .ct-sos__num { font-size: clamp(2rem, 9vw, 2.6rem); }
  .page-contact .ct-sos__go { width: 48px; }

}