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

/* ---- shared plate treatment ------------------------------------------- */
/*
 * Section 4's signature CSS is a clipped image stack: `overflow: clip` and the
 * 4px radius, never a border. A 1px border would add 2px to every plate's
 * painted box and break five `sizes` promises at once.
 */

.hero__frame, .gal__frame, .place__frame { overflow: clip; }

.hero__frame, .gal__frame, .place__frame,
.galp__fig img, .stf__fig img { border-radius: var(--radius); }

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

.stf__fig, .galp__fig, .place__fig, .gal__fig { margin: 0; }

/* A marker for the headings that are NOT the band's stage heading, so a
   nested h2 still reads as a section opening. The rule is the highlight,
   which clears the 3:1 non-text bar; the filled square belongs to the stage
   alone and is not repeated here. */
.appr__h::before, .alt__h::before, .cta__h::before,
.cd__h::before {
  content: "";
  display: block;
  width: var(--s8);
  height: var(--rule);
  background: var(--hi);
  margin-bottom: var(--s4);
}

/* MATERIAL DISTINCTNESS: persistent stage at left, narrative rail at right. */
@media (min-width: 1100px) {
  body.p-index main { display:grid; grid-template-columns:48% 52%; align-items:start; }
  body.p-index main > .hero { grid-column:1; grid-row:1 / span 9; position:sticky; top:0; min-height:100svh; height:100svh; overflow:hidden; border-right:1px solid var(--rule); }
  body.p-index .hero__wrap { min-height:100%; display:block; position:relative; padding:0; }
  body.p-index .hero__fig { position:absolute !important; inset:0; max-width:none; margin:0; padding:0 !important; }
  body.p-index .hero__frame, body.p-index .hero__frame img { width:100%; height:100%; object-fit:cover; }
  body.p-index .hero__cap { position:absolute; left:2.5rem; bottom:1.25rem; z-index:2; color:#fff; }
  body.p-index .hero__copy { position:absolute; inset:auto 0 0; z-index:3; padding:5rem 3rem 4rem; color:#fff; background:linear-gradient(transparent,rgba(15,20,22,.94)); }
  body.p-index .hero__eyebrow, body.p-index .hero__lede { color:#fff; }
  body.p-index .hero h1 { max-width:11ch; font-size:clamp(3rem,5vw,5.5rem); }
  body.p-index main > .sec:not(.hero), body.p-index main > .sub-band { grid-column:2; margin:0; min-width:0; border-bottom:1px solid var(--rule); }
  body.p-index main > .sec:not(.hero) > .wrap, body.p-index main > .sub-band > .wrap { width:auto; max-width:none; }
  body.p-index .svcp__list, body.p-index .galp__list, body.p-index .stfp__list, body.p-index .revp__list { grid-template-columns:1fr; }
  body.p-index .cta { min-height:55svh; display:grid; align-items:center; }
}

/* ---- the hero ---------------------------------------------------------- */
/*
 * Copy first in source order, photograph second, at every width. Section 6
 * wants the H1, the proposition and the Book action inside the first
 * viewport, and a 3:4 portrait placed above them fills a 320x568 screen on
 * its own. The swap at 1024 -- picture left, words right -- is done with
 * grid placement, never with `order`, so the reading order never moves.
 *
 * Below 1024 the figure is capped at 480px and centred. Uncapped, a 1023px
 * viewport would paint it 951px wide and 1268px tall. The cap starts winning
 * at 528px, which is exactly where SIZES switches to the flat 480px pin.
 */

.hero__copy > * + * { margin-top: var(--s5); }

.hero__eyebrow {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.hero__second { display: inline-block; }

.hero__fig { max-width: 480px; margin-inline: auto; }

.hero__cap {
  margin-top: var(--s3);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .sec > .hero__wrap > .hero__fig {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--s7);
    align-self: start;
    max-width: none;
    margin-top: 0;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .sec > .hero__wrap > .hero__copy { grid-row: 1; }
}

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

.phead__lede { font-size: 1.125rem; }

.pv__date { margin-top: var(--s4); }

/* ---- index: service preview -------------------------------------------- */
/*
 * One column with hairline separators, not a card grid. Three cards inside
 * the 52% column would be 183px wide each.
 */

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

.svcp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.svcp__item {
  padding-block: var(--s5);
  border-top: var(--hair) solid var(--hi);
}

.svcp__item:first-child { border-top: 0; padding-top: 0; }

.svcp__p { margin-top: var(--s3); }

.svcp__price {
  margin-top: var(--s3);
  font-family: var(--font-h);
  font-size: 1.25rem;
  color: var(--act-t);
}

.svcp__link { display: inline-block; margin-top: var(--s3); }

/* ---- index: approach --------------------------------------------------- */
/*
 * A one-child band, so design.css spans it across both columns and the split
 * is rebuilt inside `.appr__in` instead. There is no sticky here: the band is
 * a heading and one paragraph, and nothing scrolls past anything.
 */

.appr__p { margin-top: var(--s5); }

@media (min-width: 1024px) {
  .appr__in {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: start;
  }

  .appr__h { padding-right: var(--s5); }
  .appr__p { padding-left: var(--s7); margin-top: 0; }
}


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

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

.galp__list, .stfp__list, .stf__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
}

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

.galp__item, .stf__item { list-style: none; }

.galp__cap {
  margin-top: var(--s3);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The card is a flat plane on the field fill, with the plate running the full
   tile width so the painted box equals the tile and the promise is exact. */
.stf__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--field);
  border-radius: var(--radius);
  overflow: clip;
}

.stf__body { padding: var(--s5); }

.stf__role {
  margin-top: var(--s2);
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.stf__bio { margin-top: var(--s3); font-size: .9375rem; }

.galp__all, .stfp__all, .svcp__all, .revp__all, .faqp__all {
  font-family: var(--font-h);
  font-size: 1.125rem;
}

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

.revp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}

.revp__item { list-style: none; }

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

.revp__by { margin-top: var(--s3); }

.faqp__a { margin-top: var(--s3); }

/* ---- services: the list ------------------------------------------------ */
/*
 * One child, so the band spans both columns and every ROW carries the split
 * instead. That is the right reading of the fingerprint: the stage is a
 * position, and on a page that is nothing but a list the position belongs to
 * each service name rather than to a heading none of them share.
 *
 * scroll-margin-top exists because services.html is the target of nine
 * in-page links. Below 1024 the header is a sticky 56px top bar and an
 * unadjusted anchor lands underneath it; at 1024 the header is a side rail
 * and takes no vertical room at all.
 */

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

.svc__row {
  padding-block: var(--s7);
  border-top: var(--hair) solid var(--hi);
  scroll-margin-top: calc(var(--head-h) + var(--s5));
}

.svc__row:first-child { border-top: 0; padding-top: 0; }

.svc__row > * + * { margin-top: var(--s5); }

.svc__price {
  margin-top: var(--s3);
  font-family: var(--font-h);
  font-size: 1.5rem;
  color: var(--act-t);
}

.svc__fit { margin-top: var(--s5); }

.svc__fitlabel { display: block; margin-bottom: var(--s2); }

.svc__link { display: inline-block; margin-top: var(--s5); }

@media (min-width: 1024px) {
  .svc__row {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: start;
    scroll-margin-top: var(--s5);
  }

  .svc__row > * + * { margin-top: 0; }
  .svc__head { padding-right: var(--s5); }
  .svc__body { padding-left: var(--s7); }
}

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

.how__list, .prin__list, .proc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.how__step, .prin__item, .proc__step {
  padding-block: var(--s5);
  border-top: var(--hair) solid var(--hi);
}

.how__step:first-child, .prin__item:first-child,
.proc__step:first-child { border-top: 0; padding-top: 0; }

.how__h, .proc__h { margin-top: var(--s2); }

.how__p, .prin__p, .proc__p { margin-top: var(--s3); }

.note__p {
  border-left: var(--rule) solid var(--hi);
  padding-left: var(--s5);
}

/* ---- gallery ----------------------------------------------------------- */
/*
 * `.gal__list` carries no `.grid` class, so the display is set here. Two
 * columns from 560 and never more: the eight `gal__item--N` modifiers exist
 * in the markup but none of them is used to span a tile across both tracks,
 * because a spanned tile paints 597px against a 287px promise.
 */

.gal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

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

.gal__item { list-style: none; }

.gal__cap { margin-top: var(--s3); display: grid; gap: var(--s1); }

.gal__text { font-size: .9375rem; line-height: 1.5; color: var(--ink); }

/* The two one-child bands pulled back into the 52% column, with the stage
   they vacate drawn as two pseudo-elements on the wrap itself. */
@media (min-width: 1024px) {
  .sec > .gal__wrap > :only-child,
  .sec > .place__wrap > :only-child {
    grid-column: 2;
    padding-left: var(--s7);
  }

  .sec > .gal__wrap::before,
  .sec > .place__wrap::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    border-right: var(--hair) solid var(--hi);
  }

  .sec > .gal__wrap::after,
  .sec > .place__wrap::after {
    content: "";
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: var(--s3);
    height: var(--s3);
    margin-right: var(--s5);
    background: var(--act);
  }
}

/* ---- staff: service focus ---------------------------------------------- */

.focus__p { max-width: var(--measure); }

.focus__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s3);
}

.focus__list li { list-style: none; }

.focus__list a {
  display: block;
  padding: var(--s4) var(--s5);
  min-height: 44px;
  background: var(--field);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}

.focus__list a:hover { background: var(--acc-f); color: var(--ink); }

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

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

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

/* ---- about: the place plate -------------------------------------------- */

.place__cap {
  margin-top: var(--s3);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- about: what the salon does not do --------------------------------- */

.limit__p {
  background: var(--plane);
  padding: var(--s6);
  border-radius: var(--radius);
}

/* ---- reviews ----------------------------------------------------------- */
/*
 * The one band on the site that legitimately runs three columns: it has a
 * single child, so it keeps the full 1240px and 1240 / 3 is 397px a card.
 */

.rev__list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
}

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

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

.rev__item { list-style: none; }

.rev__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--plane);
  padding: var(--s6);
  border-radius: var(--radius);
}

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

.rev__foot { margin-top: auto; padding-top: var(--s5); }

.rev__svc { display: inline-block; margin-top: var(--s2); }

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

.faqg__sub { max-width: var(--measure); color: var(--muted); }

.faq__item { border-top: var(--hair) solid var(--hi); }

.faq__q {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  justify-content: space-between;
  min-height: 44px;
  padding-block: var(--s5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-h);
  font-size: 1.25rem;
  line-height: 1.25;
}

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

/* ASCII, deliberately: a rotated pseudo-element is the usual way to draw
   this and there is no rotation anywhere on this site, for the reason set
   out over the module docstring. */
.faq__q::after {
  content: "+";
  font-family: var(--font-b);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--act-t);
}

.faq__item[open] .faq__q::after { content: "-"; }

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

.faq__escape { margin-top: var(--s5); }

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

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

.cd__addr { margin-top: var(--s4); line-height: 1.9; }

.cd__tel { margin-top: var(--s5); }

.cd__mail { margin-top: var(--s4); }

.cd__hh { margin-top: var(--s7); }

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

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

.cd__row:last-child { border-bottom: 0; }

.cd__row dt { font-weight: 700; }

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

.cd__note { margin-top: var(--s5); font-size: .9375rem; }

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

.cform .field { width: 100%; max-width: 560px; }

.cform__consent { font-size: .9375rem; }

@media (min-width: 1024px) {
  .con__grid {
    grid-template-columns: 48% 52%;
    gap: 0;
    align-items: start;
  }

  .cd {
    position: sticky;
    top: var(--s7);
    padding-right: var(--s5);
  }

  .cform { padding-left: var(--s7); }
}

/* ---- contact: rather talk than type ------------------------------------ */

.alt__in {
  background: var(--plane);
  padding: var(--s7);
  border-radius: var(--radius);
}

.alt__p { margin-top: var(--s4); max-width: var(--measure); }

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

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

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

.cta__p { margin-top: var(--s4); max-width: var(--measure); }

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

@media (min-width: 1024px) {
  .cta__in {
    grid-template-columns: 48% 52%;
    gap: 0;
    align-items: start;
  }

  .cta__text { padding-right: var(--s5); }
  .cta__actions { padding-left: var(--s7); }
}

/* ---- privacy ----------------------------------------------------------- */
/*
 * Nine sections, so the h2 here is stepped well down from the page-wide h2
 * scale -- clamp(2rem, 4vw, 4rem) nine times over is a table of contents
 * shouted at the reader.
 */

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

.pv__h { font-size: clamp(1.5rem, 2.5vw, 2rem); }

.pv__sec > p { margin-top: var(--s4); }

.pv__sec > p + p { margin-top: var(--s4); }

@media (min-width: 1024px) {
  .pv__sec {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: start;
  }

  .pv__h { grid-column: 1; padding-right: var(--s5); }
  .pv__sec > p { grid-column: 2; padding-left: var(--s7); margin-top: 0; }
  .pv__sec > p + p { margin-top: var(--s4); }
}

/* ---- 404 --------------------------------------------------------------- */
/*
 * `p.nf__code` is the first child and the h1 the second, so design.css's
 * `.nf__h1 + *` levelling rule lands on `.nf__p` and pulls it flush against
 * the code. Same specificity, later file, so this puts the margin back.
 */

.nf__code {
  font-family: var(--font-h);
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1;
  color: var(--muted);
}

.nf__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  justify-items: start;
}

.nf__links li { list-style: none; }

@media (min-width: 1024px) {
  .sec > .nf__wrap > .nf__p { margin-top: var(--s6); }
}

/* ---- the footer panel -------------------------------------------------- */
/*
 * `footer_mark()` emits this, so every class in it is invented and emitted by
 * the same hook. It sits on the ink ground above the shared footer body: the
 * wordmark on one side, the Book action on the other, which is the split
 * carried through to the last band on the page.
 */

.ft__mark {
  padding-bottom: var(--s7);
  border-bottom: var(--hair) solid var(--ink-m);
  margin-bottom: var(--s7);
}

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

.ft__mark-h {
  display: block;
  font-family: var(--font-h);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.05;
  color: var(--bg);
}

.ft__mark-sub {
  display: block;
  margin-top: var(--s2);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-m);
}

@media (min-width: 1024px) {
  .ft__mark-in {
    grid-template-columns: 48% 52%;
    gap: 0;
    align-items: center;
  }

  .ft__mark-act { padding-left: var(--s7); justify-self: start; }
}
 
/* Material anti-duplication correction: preserve the 48/52 stage logic on
   compact screens instead of collapsing into the shared single-column stack. */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-index .sec:not(.hero):not(.cta) > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: var(--s4);
    align-items: start;
  }

  .p-index .sec:not(.hero):not(.cta) > .wrap > :first-child {
    grid-column: 1;
    padding-inline-end: var(--s3);
    position: sticky;
    top: calc(var(--head-h) + var(--s3));
  }

  .p-index .sec:not(.hero):not(.cta) > .wrap > :not(:first-child) {
    grid-column: 2;
    min-width: 0;
    padding-inline-start: var(--s4);
    border-inline-start: var(--hair) solid var(--ink-m);
  }

  .p-index .sec:not(.hero):not(.cta) h2 {
    font-size: clamp(1.5rem, 7vw, 2.35rem);
  }

  .p-index .svcp__list,
  .p-index .galp__list,
  .p-index .stfp__list,
  .p-index .revp__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-index .galp__item,
  .p-index .stfp .stf__item {
    width: 100%;
    max-width: 336px;
  }
}

@media (min-width: 1400px) {
  .p-index .galp__item,
  .p-index .stfp .stf__item {
    width: 100%;
    max-width: 287px;
  }
}

.stf__stage {
  margin: 0;
  display: grid;
  gap: var(--s3);
  width: 100%;
  max-width: 627px;
}

.stf__stage img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stf__stage figcaption {
  max-width: 36ch;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .stf__wrap > .stf__stage {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: var(--s7);
    padding: 0 var(--s5) 0 0;
    margin: 0;
  }

  .stf__wrap > .stf__list {
    grid-column: 2;
    margin-top: 0;
  }
}

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