/* DS-06 -- section layouts.
 *
 * THE UNIT OF COMPOSITION IS A STICKER: a flat plane, recommendation #4's
 * double 1px frame at a 22px radius, and a soft drop shadow. It is drawn by
 * one declaration repeated -- `box-shadow: var(--fr) var(--fill),
 * var(--shadow)` -- and never by a border, because a border adds its width to
 * the painted box and every `sizes` attribute in the markup is a promise
 * about that box. The three colourways carried in that last slot are the
 * primary action, the highlight and the secondary accent.
 *
 * WHAT MAY ROTATE, AND WHAT MAY NOT. The audit measures an image's promised
 * width against its getBoundingClientRect, and a rotation on any ancestor
 * inflates that rectangle. So: no element that contains a photograph is ever
 * rotated. Everything that wobbles here -- the number chips, the price plate,
 * the preview items, the focus pills, the escape line -- contains text and
 * nothing else. The picture frames get the outline and the offset shadow and
 * sit square.
 *
 * Grid tracks are minmax(0, 1fr) throughout. A bare 1fr resolves its
 * min-width to auto, so one long service name pushes its track past its share
 * and opens the document sideways at 320px.
 *
 * The column counts are not free. Every one of them was picked to match a
 * pin already written into SIZES: the gallery is three-up from 1024 and
 * two-up from 768, the staff list is two-up from 768 and never three, and the
 * hero photograph holds 7 of 12 columns from 1024. Changing a count here
 * without changing SIZES makes every `sizes` promise on that grid wrong.
 */

.grid { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }

.ratio { position: relative; }
.ratio img { display: block; width: 100%; height: auto; }

/* The sticker outline, in three colourways. Applied by hand rather than
   through a shared class, because a class nothing emits is a dead selector
   and the audit refuses it. */

/* ---- hero -------------------------------------------------------------- */
/*
 * Copy first in source order at every width. Section 6 wants the H1, the
 * proposition and the Book action inside the first viewport, and a 5:4
 * photograph placed above them eats a 320x568 screen on its own.
 *
 * The photograph takes 7 of 12 columns from 1024 up, which is where
 * SIZES["hero"] pins it. It is the largest thing on the page and this design
 * has no reason to make it the smaller half.
 */

.hero { padding-block: var(--s8) var(--s9); }

.hero__in { display: grid; gap: var(--s6); align-items: center; }

@media (min-width: 1024px) {
  .hero__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s6);
  }
}

/* MATERIAL DISTINCTNESS: a poster field of overlapping authored labels. */
@media (min-width: 1100px) {
  body.p-index main { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); align-items:start; overflow:clip; padding-bottom:5rem; }
  body.p-index main > .sec { min-width:0; margin:0; background:transparent; }
  body.p-index main > .sec > .wrap { width:auto; max-width:none; }
  body.p-index .hero { grid-column:1/-1; }
  body.p-index .svcp { grid-column:1/7; transform:rotate(-1deg); z-index:2; }
  body.p-index .appr { grid-column:6/-1; margin-top:-5rem; transform:rotate(1.4deg); z-index:3; }
  body.p-index .galp { grid-column:2/10; transform:rotate(.45deg); }
  body.p-index .stfp { grid-column:1/8; transform:rotate(-.55deg); }
  body.p-index .revp { grid-column:5/-1; margin-top:-4rem; transform:rotate(1deg); z-index:2; }
  body.p-index .faqp { grid-column:2/9; transform:rotate(-.35deg); }
  body.p-index .cta { grid-column:1/-1; transform:rotate(.25deg); }
}

.hero__copy { display: grid; gap: var(--s4); }

.hero__eyebrow {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__lede { margin: 0; max-width: var(--measure-s); font-size: 1.125rem; }

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s2);
}

.hero__second {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--act-t);
}

.hero__fig { margin: 0; display: grid; gap: var(--s3); }

/* The frame is square and stays square -- see the rotation note at the top of
   this file. The sticker character comes from the outline, the offset shadow
   and the two authored marks the band already carries. */
.hero__frame {
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.hero__cap {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--muted);
  max-width: var(--measure-s);
}

/* ---- page heads -------------------------------------------------------- */

.phead { padding-block: var(--s8) var(--s7); }

.phead__h1 { margin: 0 0 var(--s4); }

.phead__lede { margin: 0; font-size: 1.125rem; }

/* ---- index: service preview -------------------------------------------- */

.svcp__head { margin: 0 0 var(--s3); }

.svcp__intro { margin: 0 0 var(--s6); max-width: var(--measure); }

@media (min-width: 700px) {
  .svcp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .svcp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A preview item holds text only, so it is allowed to wobble. */
.svcp__item {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--plane);
  box-shadow: var(--fr) var(--act), var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
}

.svcp__item:nth-child(2) {
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.svcp__item:nth-child(3) {
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.svcp__item:hover { transform: rotate(-1.2deg); }

.svcp__h { margin: 0; }

.svcp__p { margin: 0; }

.svcp__price { margin: 0; }

.svcp__link { font-weight: 700; }

.svcp__all { margin: var(--s6) 0 0; font-weight: 700; }

/* The price is a plate, not a run of text. It is one of the few things a
   visitor scans for, and this design has no quiet way to emphasise. */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--hi);
  box-shadow: 0 0 0 1px var(--frame);
  transition: transform var(--t);
}

.price:hover { transform: rotate(-2deg); }

.price__q {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Never `white-space: nowrap` here. A price field in this set is allowed to
   hold a sentence, and a sentence told it is one line becomes the grid
   track's min-content and opens the document at 320px. */
.price__v { font-size: clamp(1.0625rem, 3.2vw, 1.375rem); line-height: 1.15; }

/* ---- index: approach --------------------------------------------------- */

.appr__in {
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  background: var(--acc-f);
  box-shadow: var(--fr) var(--frame), var(--shadow);
}

@media (min-width: 900px) {
  .appr__in { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.appr__h { margin: 0; }

/* The long word in a shop name ran past this narrow column onto the paragraph
   beside it at the wide breakpoint. */
@media (min-width: 900px) {
  .appr__h { font-size: clamp(2rem, 3.1vw, 3.1rem); }
}

.appr__p { margin: 0; }

/* ---- index: gallery and staff previews --------------------------------- */

.galp__h, .stfp__h, .revp__h, .faqp__h { margin: 0 0 var(--s3); }

.galp__intro, .stfp__intro { margin: 0 0 var(--s6); max-width: var(--measure); }

@media (min-width: 768px) {
  .galp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stfp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .galp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.galp__fig {
  margin: 0;
  display: grid;
  gap: var(--s3);
}

.galp__fig img {
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.galp__cap { font-size: .8125rem; line-height: 1.35; color: var(--muted); }

.galp__all, .stfp__all, .revp__all, .faqp__all {
  margin: var(--s6) 0 0;
  font-weight: 700;
}

/* ---- index: review excerpts and faq preview ---------------------------- */

@media (min-width: 768px) {
  .revp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .revp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.revp__item {
  display: grid;
  align-content: start;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--panel-rev);
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.revp__q { margin: 0; font-family: var(--font-h); font-size: 1.125rem;
           line-height: 1.35; }

.revp__q p { margin: 0; }

.revp__by { margin: 0; font-size: .8125rem; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase;
            color: var(--muted); }

.faqp__item {
  padding-block: var(--s5);
  box-shadow: inset 0 calc(var(--line) * -1) 0 var(--frame);
}

.faqp__item:first-of-type { box-shadow: inset 0 var(--line) 0 var(--frame),
                                        inset 0 calc(var(--line) * -1) 0 var(--frame); }

.faqp__q { margin: 0 0 var(--s2); }

.faqp__a { margin: 0; }

/* ---- services: the list ------------------------------------------------ */

.svc__list { display: grid; gap: var(--s6); margin: 0; padding: 0;
             list-style: none; }

.svc__row {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--plane);
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.svc__row:nth-child(even) {
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

@media (min-width: 900px) {
  .svc__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.svc__head { display: grid; gap: var(--s3); align-content: start;
             justify-items: start; }

.svc__name { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem);
             line-height: 1.05; }

.svc__price { margin: 0; }

.svc__body { display: grid; gap: var(--s3); align-content: start;
             justify-items: start; }

.svc__scope { margin: 0; }

.svc__fit { margin: 0; font-size: .9375rem; }

.svc__fitlabel {
  display: inline-block;
  margin-inline-end: var(--s2);
  padding: 2px var(--s2);
  background: var(--hi);
  box-shadow: 0 0 0 1px var(--frame);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.svc__link { font-weight: 700; }

/* ---- services: how it works, and the fit note -------------------------- */

.how__head, .prin__head, .proc__head { margin: 0 0 var(--s6); }

@media (min-width: 700px) {
  .how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .how__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.how__step, .proc__step { display: grid; align-content: start; gap: var(--s3); }

/* A number chip. Text only, so it is free to sit at an angle and to move. */
.how__no, .proc__no, .gal__no, .rev__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding-inline: var(--s3);
  border-radius: var(--pill);
  background: var(--act);
  color: var(--on-act);
  font-size: 1rem;
  box-shadow: 0 0 0 1px var(--frame);
  transform: rotate(-4deg);
  transition: transform var(--t);
}

.how__step:hover .how__no,
.proc__step:hover .proc__no,
.gal__item:hover .gal__no,
.rev__card:hover .rev__no { transform: rotate(5deg); }

/* Three of the four chips take a light fill, so they take ink back. */
.proc__no { background: var(--acc-f); color: var(--ink); font-size: .875rem;
            letter-spacing: .06em; text-transform: uppercase; }

.gal__no { background: var(--hi); color: var(--ink); }

.how__h, .proc__h { margin: 0; }

.how__p, .proc__p { margin: 0; }

.note__h, .limit__h, .focus__h, .alt__h, .cta__h { margin: 0 0 var(--s4); }

.note__p, .limit__p, .focus__p { margin: 0; }

/* ---- gallery ----------------------------------------------------------- */
/*
 * Three-up from 1024 and two-up from 768, which is exactly what
 * SIZES["gallery"] promises. The tiles are all 3:2, so the rows stay level;
 * a mixed set of ratios would ragged the grid, and the rigid grid under the
 * sticker field is the whole of the contrast this design is built on.
 */

.gal__list { display: grid; gap: var(--s5); margin: 0; padding: 0;
             list-style: none; }

@media (min-width: 768px) {
  .gal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gal__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gal__fig { margin: 0; display: grid; gap: var(--s3); }

.gal__frame {
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.gal__item:nth-child(3n+2) .gal__frame {
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.gal__item:nth-child(3n) .gal__frame {
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.gal__cap { display: flex; align-items: flex-start; gap: var(--s3); }

.gal__text { font-size: .9375rem; line-height: 1.4; padding-top: var(--s2); }

/* The eight item modifiers exist in the markup whether a design uses them or
   not. They are listed once, with the one rule that is true of all of them,
   so the stylesheet does not pretend the classes are not there. */
.gal__item--1, .gal__item--2, .gal__item--3, .gal__item--4,
.gal__item--5, .gal__item--6, .gal__item--7, .gal__item--8 { min-width: 0; }

/* ---- staff ------------------------------------------------------------- */
/*
 * Two-up from 768 and never three: SIZES["staff"] pins (100vw - 96px) / 2 at
 * 768 and (1180 - 24) / 2 at the top, and a third column would make every one
 * of those promises wrong.
 */

@media (min-width: 768px) {
  .stf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stf__card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel-stf);
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.stf__item:nth-child(even) .stf__card {
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.stf__fig { margin: 0; box-shadow: inset 0 calc(var(--line) * -1) 0 var(--frame); }

.stf__body { display: grid; gap: var(--s2); padding: var(--s5); }

.stf__name { margin: 0; }

.stf__role {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stf__bio { margin: var(--s2) 0 0; }

/* ---- staff: what each person is asked for ------------------------------ */

.focus__list { gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), auto)); }

.focus__p { margin: 0 0 var(--s5); }

.focus__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s4);
  border-radius: var(--pill);
  background: var(--plane);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--frame);
  transition: transform var(--t), background var(--t);
}

.focus__list a:hover { background: var(--hi); transform: rotate(-2deg); }

/* ---- about ------------------------------------------------------------- */

.abt__cols { display: grid; gap: var(--s5); }

@media (min-width: 900px) {
  .abt__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.abt__p { margin: 0; font-size: 1.0625rem; }

@media (min-width: 700px) {
  .prin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .prin__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prin__item {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--plane);
  box-shadow: var(--fr) var(--hi), var(--shadow);
  transition: transform var(--t);
}

.prin__item:hover { transform: rotate(1.2deg); }

.prin__h { margin: 0; }

.prin__p { margin: 0; }

/* ---- about: the room --------------------------------------------------- */

.place__fig { margin: 0; display: grid; gap: var(--s3); }

.place__frame {
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.place__cap {
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--muted);
  max-width: var(--measure-s);
}

/* ---- reviews ----------------------------------------------------------- */

@media (min-width: 768px) {
  .rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .rev__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rev__card {
  display: grid;
  align-content: start;
  gap: var(--s4);
  height: 100%;
  padding: var(--s5);
  background: var(--panel-rev);
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.rev__item:nth-child(3n+2) .rev__card {
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.rev__item:nth-child(3n) .rev__card {
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.rev__no { background: var(--bg); color: var(--ink); justify-self: start; }

.rev__q { margin: 0; font-family: var(--font-h); font-size: 1.1875rem;
          line-height: 1.35; }

.rev__q p { margin: 0; }

.rev__foot { display: grid; gap: var(--s2); }

.rev__by { margin: 0; font-size: .8125rem; font-weight: 700;
           letter-spacing: .08em; text-transform: uppercase;
           color: var(--muted); }

.rev__svc { font-size: .9375rem; font-weight: 700; }

/* ---- faq --------------------------------------------------------------- */

.faqg { padding-block: var(--s8); }

.faqg__h { margin: 0 0 var(--s2); }

.faqg__sub { margin: 0 0 var(--s6); color: var(--muted); }

.faq__item {
  margin-bottom: var(--s3);
  background: var(--plane);
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.faq__q {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
}

.faq__q::-webkit-details-marker { display: none; }

/* The open/closed indicator is a filled square that turns, drawn as a
   pseudo-element on the summary. It carries no photograph, so it may. */
.faq__q::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-inline-end: var(--s3);
  background: var(--act);
  box-shadow: 0 0 0 1px var(--frame);
  transition: transform var(--t);
}

.faq__item[open] .faq__q::before { transform: rotate(45deg); }

.faq__item[open] .faq__q { background: var(--hi); }

.faq__a { padding: 0 var(--s5) var(--s5); }

.faq__a p { margin: 0; }

.faq__escape {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  background: var(--act);
  color: var(--on-act);
  box-shadow: var(--fr) var(--frame), var(--shadow);
  font-weight: 700;
  transition: transform var(--t);
}

.faq__escape:hover { transform: rotate(-1.5deg); }

.faq__escape a { color: var(--on-act); }

/* ---- contact ----------------------------------------------------------- */

.con__grid { display: grid; gap: var(--s7); align-items: start; }

@media (min-width: 900px) {
  .con__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.cd {
  display: grid;
  align-content: start;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--plane);
  box-shadow: var(--fr) var(--hi), var(--shadow);
}

.cd__h { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }

.cd__addr { margin: 0; font-style: normal; line-height: 1.6; }

.cd__tel, .cd__mail { margin: 0; }

.cd__hh { margin: var(--s3) 0 0; font-size: 1.0625rem; letter-spacing: .06em;
          text-transform: uppercase; }

.cd__hours { margin: 0; display: grid; gap: var(--s2); }

.cd__row { display: flex; flex-wrap: wrap; gap: var(--s2);
           justify-content: space-between; }

.cd__row dt { font-weight: 700; }

.cd__row dd { margin: 0; color: var(--muted); }

.cd__note { margin: 0; font-size: .875rem; color: var(--muted); }

.cform { display: grid; gap: var(--s5); }

.cform__consent { margin: 0; font-size: .875rem; }

.cform__status { margin: 0; font-size: .9375rem; font-weight: 700; }

.field { display: grid; gap: 0; }

.field__opt { font-weight: 400; color: var(--muted); }

.hint { margin: var(--s2) 0 0; font-size: .8125rem; color: var(--muted); }

.err { margin: var(--s2) 0 0; font-size: .875rem; font-weight: 700;
       color: var(--acc-t); }

.err:empty { display: none; }

.alt__in {
  display: grid;
  justify-items: start;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--acc-f);
  box-shadow: var(--fr) var(--frame), var(--shadow);
}

.alt__p { margin: 0; max-width: var(--measure-s); }

/* ---- the closing call to action ---------------------------------------- */

.cta__in {
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding: var(--s6);
  background: var(--act);
  color: var(--on-act);
  box-shadow: var(--fr) var(--frame), var(--shadow);
}

@media (min-width: 900px) {
  .cta__in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.cta__text { display: grid; gap: var(--s3); }

.cta__p { margin: 0; max-width: var(--measure-s); }

.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* The Book action sits on the action fill here, so it takes the page ground
   instead: two saturated planes touching would leave the button with no edge
   but its outline. */
.cta__actions .btn--primary { background: var(--bg); color: var(--ink); }

.cta__actions .btn--primary:hover,
.cta__actions .btn--primary:focus-visible { background: var(--plane); }

/* ---- privacy ----------------------------------------------------------- */

.pv__date { margin: var(--s4) 0 0; font-size: .875rem; font-weight: 700;
            color: var(--muted); }

.pv__body { display: grid; gap: var(--s7); }

.pv__sec { padding-block: 0; }

.pv__h { margin: 0 0 var(--s3); font-size: clamp(1.375rem, 2.5vw, 1.875rem); }

.pv__sec p { margin: 0 0 var(--s3); }

.pv__sec p:last-child { margin-bottom: 0; }

/* ---- 404 --------------------------------------------------------------- */

.nf { padding-block: var(--s9); }

.nf__code {
  margin: 0 0 var(--s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 56px;
  padding-inline: var(--s4);
  border-radius: var(--radius);
  background: var(--act);
  color: var(--on-act);
  box-shadow: var(--fr) var(--frame), var(--shadow);
  font-family: var(--font-h);
  font-size: 1.75rem;
  font-weight: 700;
  transform: rotate(-3deg);
}

.nf__h1 { margin: 0 0 var(--s4); }

.nf__p { margin: 0 0 var(--s6); }

.nf__links { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0 0 var(--s6);
             padding: 0; list-style: none; }

.nf__links a { font-weight: 700; }

.nf__book { margin: 0; }

/* ---- footer blocks ----------------------------------------------------- */

.ft__in { display: grid; gap: var(--s7); padding-block: var(--s8); }

@media (min-width: 768px) {
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ft__in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.ft__block { display: grid; align-content: start; gap: var(--s3); }

.ft__block--find { max-width: var(--measure-s); }

.ft__block--hours dt { font-weight: 700; }

.ft__block--nav .ft__list { columns: 2; }

.ft__h {
  margin: 0;
  font-family: var(--font-h);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ft__addr { margin: 0; font-style: normal; line-height: 1.7; }

.ft__hours { margin: 0; display: grid; gap: var(--s2); }

.ft__row { display: flex; flex-wrap: wrap; gap: var(--s2);
           justify-content: space-between; }

.ft__row dd { margin: 0; color: var(--ft-muted); }

.ft__list { margin: 0; padding: 0; list-style: none; }

.ft__list li { margin-bottom: var(--s2); }

.ft__foot {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s5);
  box-shadow: inset 0 var(--line) 0 var(--ft-rule);
}

.ft__legal { margin: 0; font-size: .8125rem; color: var(--ft-muted); }

/* ---- recommendation #4: the 22px radius on the framed surfaces --------- */
/*
 * Listed in one place rather than repeated into twenty rules, because the
 * radius is a property of the frame treatment and not of any one section.
 * `overflow: hidden` appears only where a photograph has to be clipped to the
 * corner; an outer box-shadow is not clipped by overflow, so the frame and
 * the drop shadow come through it whole.
 */
.svcp__item, .appr__in, .revp__item, .svc__row, .prin__item, .rev__card,
.faq__item, .cd, .alt__in, .cta__in {
  border-radius: var(--radius);
}

.hero__frame, .gal__frame, .place__frame {
  border-radius: var(--radius);
  overflow: hidden;
}

.galp__fig img { border-radius: var(--radius); }

.faq__item { overflow: hidden; }

/* aajwebz-mailto-nowrap — an address is one token, never split across lines */
a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 380px) {
  a[href^="mailto:"] { font-size: 0.88em; }
}