/* Counter — booking-first, utilitarian. Grotesque type, tabular prices, ruled lines, one accent. */
.tpl-counter {
  --ct-head: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --ct-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --ct-rule: color-mix(in srgb, var(--ink) 18%, transparent);
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--ct-body);
}
.tpl-counter a { color: inherit; }
.tpl-counter h1, .tpl-counter h2 { font-family: var(--ct-head); font-weight: 700; margin: 0; }
.tpl-counter h2 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }

.ct-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; padding: 1rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--ct-rule); }
.ct-name { margin: 0; font: 700 1.35rem/1 var(--ct-head); text-transform: uppercase; letter-spacing: .04em; }
.ct-where { margin: 0; font-size: .9rem; opacity: .75; }
.ct-jump { display: none; }
.ct-phone { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; border-bottom: 2px solid var(--accent); }

.ct-main { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 3rem; }
.ct-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: 2rem 0 2.5rem; align-items: start; }
.ct-intro h1 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.1; max-width: 24ch; }
.ct-lede { max-width: 56ch; margin: .75rem 0 1.25rem; }
.ct-facts { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-facts li { padding: .35rem .6rem; border: 1px solid var(--ct-rule); font-size: .88rem; background: color-mix(in srgb, var(--paper) 70%, #fff); }
.ct-facts span { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }

.ct-board ul { list-style: none; padding: 0; margin: 0; }
.ct-board li { padding: .7rem 0; border-bottom: 1px dashed var(--ct-rule); }
.ct-line { display: flex; align-items: baseline; gap: .5rem; }
.ct-line strong { font-size: 1.05rem; }
.ct-dots { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(-.25rem); }
.ct-line b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.ct-board li p { margin: .2rem 0 0; font-size: .9rem; opacity: .8; }
.ct-board time { font: 600 .78rem/1 ui-monospace, "SF Mono", Menlo, monospace; margin-right: .5rem; padding: .1rem .3rem; background: var(--ink); color: var(--paper); }
.ct-board-note, .ct-board-intro { font-size: .9rem; opacity: .8; }

.ct-book { position: sticky; top: 3.5rem; }
.ct-form { padding: 1.25rem; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--accent); display: grid; gap: .8rem; }
.ct-form .form-title { font: 700 1.3rem/1.1 var(--ct-head); text-transform: uppercase; letter-spacing: .03em; margin: 0; padding: 0; border: 0; }
.ct-form .form-intro { margin: 0; font-size: .9rem; }
.ct-form .field { display: grid; gap: .25rem; }
.ct-form label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ct-form .hint { margin: 0; font-size: .8rem; opacity: .7; }
.ct-form input, .ct-form select, .ct-form textarea { font: inherit; padding: .55rem .6rem; border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 0; background: var(--paper); color: var(--ink); min-height: 2.75rem; }
.ct-form button { font: 700 1rem/1 var(--ct-head); text-transform: uppercase; letter-spacing: .06em; padding: .9rem; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.ct-form button:disabled { opacity: .55; cursor: default; }
.ct-form :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.ct-hero { width: 100%; max-height: 28rem; margin: 0 0 3rem; }
.ct-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); margin-bottom: 3rem; }
.ct-people ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.ct-people strong { font: 700 1.2rem/1 var(--ct-head); text-transform: uppercase; }
.ct-people span { margin-left: .6rem; font-size: .85rem; opacity: .7; }
.ct-people p { margin: .25rem 0 0; }
.ct-notes dl { margin: 0; display: grid; gap: .9rem; }
.ct-notes dt { font-weight: 700; }
.ct-notes dd { margin: .15rem 0 0; }
.ct-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 3rem; }
.ct-steps ol { padding-left: 1.2rem; display: grid; gap: .5rem; max-width: 60ch; }
.ct-steps, .ct-area { margin-bottom: 3rem; }
.ct-area ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ct-area li { padding: .25rem .55rem; border: 1px solid var(--ink); font: 600 .85rem/1.2 ui-monospace, Menlo, monospace; }
.ct-hours { border-collapse: collapse; width: 100%; max-width: 26rem; font-variant-numeric: tabular-nums; }
.ct-hours caption { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; padding-bottom: .4rem; }
.ct-hours th, .ct-hours td { text-align: left; padding: .4rem 0; border-bottom: 1px solid var(--ct-rule); font-weight: 400; }
.ct-hours td { text-align: right; font-weight: 700; }
.ct-address { font-weight: 700; }
.ct-faq { max-width: 48rem; }
.ct-faq details { border-bottom: 1px solid var(--ct-rule); padding: .75rem 0; }
.ct-faq summary { cursor: pointer; font-weight: 700; }
.ct-faq p { margin: .5rem 0 0; }
.ct-foot { padding: 1.5rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--ct-rule); font-size: .85rem; opacity: .75; }

@media (max-width: 820px) {
  .ct-top { grid-template-columns: 1fr; }
  .ct-book { position: static; }
  .ct-phone { margin-left: 0; }
  .ct-jump { display: inline-block; padding: .35rem .7rem; background: var(--accent); color: var(--accent-ink) !important; font-weight: 700; text-decoration: none; }
  .ct-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}