/* DS-06 -- section layouts.
 *
 * THE UNIT OF COMPOSITION IS A STICKER: a flat plane, a 3px ink outline and a
 * hard offset shadow in one of the three section-4 fills. It is drawn by one
 * declaration repeated -- `box-shadow: 0 0 0 3px ink, 6px 6px 0 3px fill` --
 * and never by a border, because a 3px border adds 6px to the painted box and
 * every `sizes` attribute in the markup is a promise about that box.
 *
 * 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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
  transition: transform var(--t), box-shadow var(--t);
}

.svcp__item:nth-child(2) {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--hi);
}

.svcp__item:nth-child(3) {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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 2px var(--ink);
  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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--ink);
}

@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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--hi);
}

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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(--ink);
}

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

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

.svc__row:nth-child(even) {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

@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 2px var(--ink);
  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 var(--line) var(--ink);
  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); }

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

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

.gal__item:nth-child(3n) .gal__frame {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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;
  background: var(--panel-stf);
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.stf__item:nth-child(even) .stf__card {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

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

.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 2px var(--ink);
  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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--hi);
  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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

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

.rev__item:nth-child(3n) .rev__card {
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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 2px var(--ink);
  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);
  background: var(--act);
  color: var(--on-act);
  box-shadow: 0 0 0 var(--line) var(--ink);
  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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--hi);
}

.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(--act-t); }

.err:empty { display: none; }

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

.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: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--ink);
}

@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); color: var(--ink); }

/* ---- 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);
  background: var(--act);
  color: var(--on-act);
  box-shadow: 0 0 0 var(--line) var(--ink),
              var(--drop) var(--drop) 0 var(--line) var(--ink);
  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-fg); }

.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(--ink);
}

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

/* 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; }
}