/* 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),
              var(--shadow);
}

/* 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(--acc) 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(--acc); 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),
              var(--shadow);
}

.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) minmax(0, 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); }


/* ---- the treatment's frame and media handling -------------------------- */
/*
 * A 2px circuit frame at 4px radius with a 6px stepped corner marker, and a
 * photograph filtered so it sits inside the drawing instead of shouting over
 * it. The frame is the same drawn box the base ships; only its weight, its
 * radius and its corner tick come from the treatment.
 */

.hero__frame::after, .gal__frame::after,
.place__frame::after, .sap__frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 3;
  border-top: 6px solid var(--line);
  border-left: 6px solid var(--line);
}

.hero__frame img, .gal__frame img, .place__frame img, .sap__frame img,
.galp__fig img, .stf__fig img {
  filter: var(--media-filter);
}

/* The text-on-media overlay: the hero is the one plate that carries drawn
   keys over the photograph, so it is the one plate that needs the wash. */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--media-overlay);
}

.hero__svg { z-index: 2; }

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