/* Contact on the booking page (book.html): the visit column beside the booking card, then the first-visit notes and the closing band.
   Section, band and eyebrow styles come from services.css, loaded before book.css. */

/* services.css lifts the content under the floating header; the booking card starts below it */
.page{padding-top:calc(var(--hh,92px) + 40px)}
@media (max-width:720px){.page{padding-top:calc(var(--hh,92px) + 20px)}}

/* visit column: address, hours and directions, then the map takes whatever height is left, so the whole column fits the first screen */
@media (min-width:860px){
  .layout{grid-template-columns:minmax(0,640px) minmax(320px,480px);gap:56px}
  .info{height:calc(100vh - var(--tb,0px) - var(--hh,92px) - 64px);height:calc(100svh - var(--tb,0px) - var(--hh,92px) - 64px);min-height:540px;max-height:860px}
}
.info{display:flex;flex-direction:column;gap:22px;padding:0}
.info .copy{display:flex;flex-direction:column}
.info .eyebrow{font-size:11px;letter-spacing:.24em}
.info h2{margin-top:10px;font-size:clamp(28px,2.4vw,36px);line-height:1.05;letter-spacing:-0.01em}
.info address{margin:14px 0 0;font-style:normal;font-size:15px;line-height:1.6;color:var(--muted)}
.info address b{display:block;font-weight:500;color:var(--ink)}
.ct-hours{margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.ct-hours div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.ct-hours dt{font-size:14.5px;color:var(--ink)}
.ct-hours dd{margin:0;text-align:right;font-family:'Newsreader',serif;font-size:17px;line-height:1.35;color:var(--green)}
.info .acts{display:flex;margin-top:18px}
.ct-map{flex:1;min-height:200px;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);border:1px solid var(--line);box-shadow:0 30px 50px -36px rgba(43,37,32,.45)}
.ct-map iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:859px){.ct-map{flex:none;height:320px}}

/* first visit: three short notes */
.ct-first{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px}
.ct-first li{padding-top:4px}
#first-visit .sec-head.rule::after{display:none}   /* no hairline under this head; the three notes stand on spacing alone */
.ct-first b{display:block;font-family:'Newsreader',serif;font-weight:400;font-size:22px;line-height:1.2;color:var(--ink)}
.ct-first span{display:block;margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.ct-first a{color:var(--green);text-decoration:underline;text-decoration-color:rgba(57,67,39,.35);text-underline-offset:3px}.ct-first a:hover{text-decoration-color:currentColor}

@media (max-width:900px){
  .ct-first{grid-template-columns:1fr;gap:0}
  .ct-first li{padding:18px 0}
}

/* phones, following the homepage: one centred axis, the map first, the actions full width */
@media (max-width:720px){
  .info{gap:24px;padding-top:12px}
  .ct-map{order:-1;height:clamp(240px,38svh,320px);border-radius:var(--r-md)}
  .info .copy{text-align:center}
  .info .eyebrow{justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.2em}
  .info .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
  .info h2{font-size:clamp(28px,8vw,36px);text-wrap:balance}
  .info address{font-size:15.5px}
  .info address{text-wrap:balance}
  /* hours on the centred axis too: the day as a small label, the times under it */
  .ct-hours div{flex-direction:column;align-items:center;gap:2px;padding:12px 0}
  .ct-hours dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .ct-hours dd{text-align:center;font-size:19px}
  .info .acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .info .acts .btn{width:100%;min-height:54px}
  .ct-first li{text-align:center}
  .ct-first span{text-align:center;text-wrap:pretty}   /* two short lines: justified, they open wide gaps; centred and pretty, no word is left alone */
}

/* the page already carries the map, so the footer drops its copy */
.ft-map{display:none}
@media (min-width:1101px){.ft-main{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr)}}