/* DS-09 -- section layouts. Loaded after design.css. */

/* ---- shared plate treatment -------------------------------------------- */
/*
 * A plate sits on the title-block plane with a hairline drawn INSIDE it by
 * an inset shadow, so the frame reads as a drawn box without a border
 * changing the painted width by two pixels.
 */

.hero__frame, .gal__frame, .place__frame, .sap__frame {
  position: relative;
  overflow: clip;
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -7px 0 0 var(--steel),
              0 18px 40px rgba(0, 0, 0, .35);
}

/* MATERIAL DISTINCTNESS: one routed drawing field with alternating callouts. */
@media (min-width: 1100px) {
  body.p-index main { position:relative; overflow:clip; padding-block-end:8rem; }
  body.p-index main::before { content:""; position:absolute; inset-block:95svh 8rem; left:50%; width:2px; background:repeating-linear-gradient(to bottom,var(--cyan) 0 18px,transparent 18px 34px); opacity:.55; }
  body.p-index main > .sec { position:relative; width:72%; margin:0; min-height:65svh; display:grid; align-items:center; }
  body.p-index main > .hero { width:100%; min-height:100svh; }
  body.p-index main > .sec:nth-of-type(even) { margin-left:auto; }
  body.p-index main > .sec:nth-of-type(odd):not(.hero) { margin-right:auto; }
  body.p-index main > .sec:not(.hero)::after { content:""; position:absolute; top:50%; width:18%; border-top:2px solid var(--cyan); opacity:.45; }
  body.p-index main > .sec:nth-of-type(odd)::after { right:-18%; }
  body.p-index main > .sec:nth-of-type(even)::after { left:-18%; }
  body.p-index .cta { width:100%; min-height:55svh; }
}

.hero__frame img, .gal__frame img, .place__frame img, .sap__frame img,
.galp__fig img, .stf__fig img { width: 100%; }

.galp__fig img, .stf__fig img {
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -7px 0 0 var(--steel),
              0 18px 40px rgba(0, 0, 0, .35);
}

.hero__cap, .gal__cap, .galp__cap, .place__cap, .sap__cap {
  display: block;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--line);
}

/* ---- the signature leader rule ----------------------------------------- */
/*
 * Section 3 row 6: line-drawing emphasis. One rule, written once, applied to
 * every keyed entry in the build. It is a pseudo-element with a width
 * transition, so with scripting off it is identical and under reduced motion
 * base.css collapses the duration to nothing -- which is exactly section 4's
 * animation-off state, "every annotation line and label is already drawn".
 */

.svcp__item, .svc__row, .hero__leg, .sa__item, .how__step, .proc__step {
  position: relative;
}

.svcp__item::after, .svc__row::after, .hero__leg::after, .sa__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: var(--hair);
  background: var(--acc);
  transition: right var(--t);
}

.svcp__item:hover::after, .svc__row:hover::after, .hero__leg:hover::after,
.sa__item:hover::after,
.svcp__item:focus-within::after, .svc__row:focus-within::after,
.sa__item:focus-within::after { right: 0; }

/* ---- index: the hero --------------------------------------------------- */

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

.hero__eyebrow { margin-bottom: var(--s4); }

.hero__lede { margin-top: var(--s5); color: var(--muted); }

.hero__copy .actions { margin-top: var(--s6); }

.hero__grid { display: grid; gap: var(--s6); }

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
    gap: var(--s7);
    align-items: start;
  }
}

.hero__media { min-width: 0; }

/* The annotation overlay. `height: 100%` is load-bearing: base.css sets
   svg { height: auto }, which collapses an absolutely positioned overlay to
   zero with no error anywhere. */
.hero__svg, .sa__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__halo { fill: none; stroke: var(--hi); stroke-width: 9;
              stroke-linecap: round; stroke-linejoin: round; }
.hero__line { fill: none; stroke: var(--acc); stroke-width: 3;
              stroke-linecap: round; stroke-linejoin: round; }
.hero__node { fill: none; stroke: var(--acc); stroke-width: 3; }
.hero__key  { fill: var(--acc); stroke: var(--hi); stroke-width: 6;
              paint-order: stroke; font-family: var(--font-h);
              font-size: 34px; font-weight: 700; letter-spacing: .08em; }

/* The legend. Four keyed rows, each one carrying the leader rule. */
.hero__legend {
  min-width: 0;
  padding: var(--s5);
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hero__legend-h {
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__leg-list { margin-top: var(--s5); display: grid; gap: var(--s4); }

.hero__leg {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding-bottom: var(--s4);
}

.hero__leg-no { color: var(--acc); }

.hero__legend-note {
  margin-top: var(--s5);
  color: var(--muted);
  font-size: .9375rem;
}

/* ---- index: the service legend ----------------------------------------- */
/*
 * Section 3 row 1 is "diagram field plus service legend", and section 15
 * warns against the same equal-width three-card pattern repeating down the
 * page. The service preview is therefore a LEGEND -- full-width numbered
 * rows, keyed the way the hero's callouts are keyed -- and not a card grid.
 * The counter comes from CSS, so the shared markup is untouched.
 */

.svcp__list {
  counter-reset: svcp;
  display: grid;
  gap: 0;
  margin-top: var(--s6);
  border-top: var(--hair) solid var(--line);
}

.svcp__item {
  counter-increment: svcp;
  display: grid;
  gap: var(--s2) var(--s5);
  padding-block: var(--s5);
  border-bottom: var(--hair) solid var(--line);
}

.svcp__item::before {
  content: counter(svcp, decimal-leading-zero);
  font-family: var(--font-h);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--acc);
}

@media (min-width: 768px) {
  .svcp__item {
    grid-template-columns: 3rem minmax(0, 44fr) minmax(0, 26fr) auto;
    align-items: baseline;
  }
  .svcp__item::before { grid-row: 1; }
}

.svcp__h { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.svcp__p { color: var(--muted); }
.svcp__price { font-family: var(--font-h); font-size: 1.25rem; }
.price__q { display: inline-block; margin-right: var(--s1); }
.svcp__link { text-decoration: none; }
.svcp__link:hover { color: var(--acc); }
.svcp__intro { color: var(--muted); }
.svcp__all a { font-family: var(--font-h); letter-spacing: .08em;
               text-transform: uppercase; }

/* ---- index: the approach plane ----------------------------------------- */

.appr { background: var(--hi); }
.appr__in { display: grid; gap: var(--s5); }

@media (min-width: 1024px) {
  .appr__in {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: var(--s7);
    align-items: start;
  }
}

.appr__p {
  padding-left: var(--s5);
  border-left: var(--rule) solid var(--acc);
}

/* ---- index: the previews ----------------------------------------------- */

.galp__list, .stfp__list, .revp__list { margin-top: var(--s6); }

.galp__intro, .stfp__intro { color: var(--muted); }

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

.revp__item {
  padding: var(--s5);
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}

.revp__q p { font-size: 1.0625rem; }
.revp__by { margin-top: var(--s4); }

.faqp__item {
  padding-block: var(--s5);
  border-bottom: var(--hair) solid var(--line);
}

@media (min-width: 1024px) {
  .faqp__item {
    display: grid;
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    gap: var(--s7);
    align-items: baseline;
  }
}

.faqp__a { color: var(--muted); }

.galp__all a, .stfp__all a, .revp__all a, .faqp__all a {
  font-family: var(--font-h);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- services.html ----------------------------------------------------- */

.svc__list {
  counter-reset: svc;
  border-top: var(--rule) solid var(--line);
}

.svc__row {
  counter-increment: svc;
  display: grid;
  gap: var(--s5);
  padding-block: var(--s7);
  border-bottom: var(--hair) solid var(--line);
}

@media (min-width: 1024px) {
  .svc__row {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: var(--s7);
  }
}

.svc__head { position: relative; padding-top: var(--s5); }

.svc__head::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-h);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--acc);
}

.svc__name { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.svc__price { margin-top: var(--s3); font-family: var(--font-h);
              font-size: 1.5rem; }
.svc__scope { color: var(--muted); }
.svc__fit { margin-top: var(--s4); }
.svc__fitlabel { display: block; margin-bottom: var(--s1); }
.svc__link { display: inline-flex; align-items: center; min-height: 44px;
             margin-top: var(--s4); text-decoration: none; }
.svc__link:hover { color: var(--acc); }

.how__list { margin-top: var(--s6); }

@media (min-width: 768px) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr));
               gap: var(--s6); }
}

.how__step {
  padding-top: var(--s5);
  border-top: var(--rule) solid var(--acc);
}

.how__h { margin-top: var(--s3); }
.how__p { margin-top: var(--s3); color: var(--muted); }

.note { background: var(--hi); }
.note__p { color: var(--muted); }

/* ---- gallery.html ------------------------------------------------------ */
/*
 * Section 7 asks for two columns at 768. From 1024 the plate and its label
 * split 64 / 36 on a 48px gap, which is the promise SIZES already carries,
 * and every even item swaps the sides so the wall does not read as a single
 * repeating column.
 */

.gal__list { display: grid; gap: var(--s8); }

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

@media (min-width: 1024px) {
  .gal__item {
    display: grid;
    grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
    gap: var(--s7);
    align-items: center;
  }

  .gal__item--2 .gal__frame,
  .gal__item--4 .gal__frame,
  .gal__item--6 .gal__frame,
  .gal__item--8 .gal__frame { grid-column: 2; grid-row: 1; }

  .gal__item--2 .gal__cap,
  .gal__item--4 .gal__cap,
  .gal__item--6 .gal__cap,
  .gal__item--8 .gal__cap { grid-column: 1; grid-row: 1; }

  .gal__fig { display: contents; }
  .gal__cap { margin-top: 0; align-self: center; }
}

.gal__no { display: block; margin-bottom: var(--s2); color: var(--acc); }
.gal__text { display: block; font-family: var(--font-h);
             font-size: 1.25rem; text-transform: uppercase;
             letter-spacing: .04em; color: var(--ink); }

/* ---- staff.html -------------------------------------------------------- */

.stf__list { margin-top: 0; }

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

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

.stf__body { margin-top: var(--s4); }
.stf__name { font-size: 1.25rem; }
.stf__role { margin-top: var(--s1); color: var(--acc);
             font-family: var(--font-h); letter-spacing: .08em;
             text-transform: uppercase; font-size: .875rem; }
.stf__bio { margin-top: var(--s3); color: var(--muted); }

.focus__p { color: var(--muted); }
.focus__list { margin-top: var(--s6); }

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

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

.focus__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-h);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.focus__list a:hover { box-shadow: inset 0 0 0 1px var(--acc); }

/* ---- about.html -------------------------------------------------------- */

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

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

.prin__list, .proc__list { margin-top: var(--s6); }

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

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

.prin__item, .proc__step {
  padding-top: var(--s5);
  border-top: var(--rule) solid var(--line);
}

.prin__p, .proc__p { margin-top: var(--s3); color: var(--muted); }
.prin__h, .proc__h { margin-top: var(--s3); }
.proc__no { color: var(--acc); }

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

@media (min-width: 1024px) {
  .place__fig {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: var(--s7);
    align-items: end;
  }
  .place__cap { margin-top: 0; }
}

.limit { background: var(--hi); }
.limit__p { color: var(--muted); }

/* ---- reviews.html ------------------------------------------------------ */

.rev__list { display: grid; gap: 0; border-top: var(--rule) solid var(--line); }

.rev__item { border-bottom: var(--hair) solid var(--line); }

.rev__card {
  display: grid;
  gap: var(--s4);
  padding-block: var(--s6);
}

@media (min-width: 768px) {
  .rev__card {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }
  .rev__foot { grid-column: 2; }
}

.rev__no { color: var(--acc); }
.rev__q p { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; }
.rev__foot { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
             align-items: baseline; }
.rev__svc { text-decoration: none; }
.rev__svc:hover { color: var(--acc); }
.rev__time { flex-basis: 100%; color: var(--muted); font-size: .8125rem; }

/* ---- faq.html ---------------------------------------------------------- */

.faqg__h { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.faqg__sub { margin-top: var(--s3); color: var(--muted); }

.faq__item {
  border-bottom: var(--hair) solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 44px;
  padding-block: var(--s4);
  font-family: var(--font-h);
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.faq__q::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: var(--rule);
  background: var(--acc);
}

.faq__item[open] .faq__q { color: var(--acc); }

.faq__a { padding: 0 0 var(--s5) calc(14px + var(--s4)); }
.faq__a p { color: var(--muted); }

.faq__escape { padding-block: var(--s5); }

/* ---- contact.html ------------------------------------------------------ */

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

@media (min-width: 1024px) {
  .con__grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--s8);
    align-items: start;
  }
}

.cd {
  padding: var(--s5);
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cd__h { font-size: clamp(1.5rem, 3vw, 2rem); }
.cd__addr, .cd__tel, .cd__mail { margin-top: var(--s4); }
.cd__hh { margin-top: var(--s6); font-family: var(--font-h);
          font-size: .875rem; letter-spacing: .16em;
          text-transform: uppercase; color: var(--muted); }
.cd__hours { margin-top: var(--s3); }

.cd__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s2);
  border-bottom: var(--hair) solid var(--line);
}

.cd__row:last-child { border-bottom: 0; }
.cd__note { margin-top: var(--s5); color: var(--muted); }

.cform { display: grid; gap: var(--s5); }
.cform__consent { color: var(--muted); font-size: .9375rem; }

.alt { background: var(--hi); }
.alt__in { display: grid; gap: var(--s5); }

@media (min-width: 768px) {
  .alt__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s7);
    align-items: center;
  }

  .alt__in .btn { grid-column: 1; }
}

@media (min-width: 1024px) {
  .alt__in {
    grid-template-columns: minmax(min-content, .8fr) minmax(0, 2fr) auto;
  }

  .alt__in .btn { grid-column: auto; }
}

.alt__p { color: var(--muted); }

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

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

@media (min-width: 768px) {
  .cta__in {
    grid-template-columns: minmax(min-content, 1fr) auto;
    gap: var(--s7);
    align-items: center;
  }
}

.cta__p { margin-top: var(--s3); color: var(--muted); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ---- privacy.html and 404.html ----------------------------------------- */

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

.pv__sec {
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--line);
}

.pv__h { font-size: clamp(1.375rem, 2.5vw, 2rem); }
.pv__sec p { margin-top: var(--s3); color: var(--muted); }

.nf__code { font-family: var(--font-h); font-size: clamp(4rem, 16vw, 9rem);
            line-height: 1; color: var(--acc); }
.nf__p { margin-top: var(--s5); color: var(--muted); }
.nf__links { margin-top: var(--s6); display: flex; flex-wrap: wrap;
             gap: var(--s5); }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px;
               font-family: var(--font-h); letter-spacing: .08em;
               text-transform: uppercase; }
.nf__book { margin-top: var(--s6); }

/* ---- service-area.html ------------------------------------------------- */
/*
 * The eleventh page, required by section 6 for this trade adaptation. The
 * drawing is authored here from the district list; it is NOT a map, it reads
 * nothing about the visitor, and no arrival window or response time appears
 * anywhere on the page. The <ol> beside it carries the whole content, which
 * is why the drawing is aria-hidden.
 */

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

@media (min-width: 1024px) {
  .sa__grid {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: var(--s7);
    align-items: start;
  }
}

.sa__plan { min-width: 0; }

.sa__plan-box {
  position: relative;
  padding-top: 70%;
  background: var(--hi);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}

.sa__plan-cap { display: block; margin-top: var(--s3); }

.sa__frame { fill: none; stroke: var(--line); stroke-width: 2; }
.sa__cell { fill: none; stroke: var(--acc); stroke-width: 2; }
.sa__grid-line { fill: none; stroke: var(--line); stroke-width: 1; }
.sa__key { fill: var(--acc); font-family: var(--font-h); font-size: 30px;
           font-weight: 700; letter-spacing: .08em; }
.sa__title { fill: var(--muted); font-family: var(--font-h);
             font-size: 20px; font-weight: 700; letter-spacing: .18em; }

.sa__list {
  counter-reset: sa;
  border-top: var(--hair) solid var(--line);
}

.sa__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  padding-block: var(--s4);
  border-bottom: var(--hair) solid var(--line);
}

.sa__no { color: var(--acc); grid-row: 1; }
.sa__name { font-family: var(--font-h); font-size: 1.25rem;
            text-transform: uppercase; letter-spacing: .04em; }
.sa__note { grid-column: 2; color: var(--muted); font-size: .9375rem; }

.sap__fig { display: grid; gap: var(--s4); }
.sap__p { margin-top: var(--s5); color: var(--muted); }

/* ---------------------------------------------------------------------------
   Treatment #4 media handling: the filter on every photograph, and the plate
   overlay on the four framed plates. The annotation layer is lifted above the
   overlay so the leader lines and the key markers stay readable.
   --------------------------------------------------------------------------- */
.hero__frame img, .gal__frame img, .place__frame img, .sap__frame img,
.galp__fig img, .stf__fig img { filter: var(--media-filter); }

.hero__frame::after, .gal__frame::after, .place__frame::after, .sap__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius);
  background: var(--plate-overlay);
}

.hero__svg, .sa__svg { z-index: 2; }

/* Image credits on the privacy page: the CC BY obligation, set as a readable list. */
.pv__credits { display: grid; gap: var(--s4); margin-top: var(--s4); }
.pv__credit {
  max-width: var(--measure);
  padding-inline-start: var(--s4);
  border-inline-start: var(--hair) solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.pv__credit cite { font-style: normal; color: var(--ink); }

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