/* DS-10 -- section layouts.
 *
 * Grid tracks are minmax(0, 1fr) everywhere. A bare 1fr has min-width: auto,
 * so one long service name pushes its track past its share and overflows the
 * document at 320px, which is the single most common way these builds fail
 * the responsive gate.
 */

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

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

/* ---- hero: the three-slide organic-mask slideshow --------------------- */

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

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

/* MATERIAL DISTINCTNESS: overlapping organic fields form one continuous flow. */
@media (min-width: 1100px) {
  body.p-index main { overflow:clip; padding-block-end:6rem; }
  body.p-index main > .sec { position:relative; width:84%; min-height:68svh; display:grid; align-items:center; border-radius:clamp(5rem,12vw,14rem); margin-top:-5rem; }
  body.p-index main > .hero { width:100%; min-height:100svh; margin-top:0; border-radius:0 0 18vw 0; }
  body.p-index main > .sec:nth-of-type(even) { margin-left:auto; border-radius:14rem 0 0 14rem; }
  body.p-index main > .sec:nth-of-type(odd):not(.hero) { margin-right:auto; border-radius:0 14rem 14rem 0; }
  body.p-index .svcp__list, body.p-index .galp__list, body.p-index .revp__list { align-items:center; }
  body.p-index .cta { width:92%; margin-inline:auto; min-height:55svh; border-radius:50%; }
}

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

.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* 375px: two actions may share a row only while each stays at least 148px
   wide. Below that they stack with a 12px gap, which is what flex-wrap plus
   this min-width does without a media query. */
.hero__acts .btn { min-width: 148px; }

.hero__second {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* The show is a grid so that the three radios, the stage and the caption can
   be placed independently while staying SIBLINGS in the DOM -- which is what
   lets `:checked ~ .hero__stage` reach the slides at all. */
.hero__show {
  display: grid;
  grid-template-columns: repeat(3, 44px) minmax(0, 1fr);
  grid-template-areas:
    "stage stage stage stage"
    "d1    d2    d3    cap";
  align-items: center;
  row-gap: var(--s4);
  margin: 0;
}

/* the organic mask */
.hero__stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--field);
  border-radius: 46% 54% 42% 58% / 54% 46% 58% 42%;
}

@media (min-width: 390px) { .hero__stage { aspect-ratio: 3 / 4; } }
@media (min-width: 768px) { .hero__stage { aspect-ratio: 4 / 3; } }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-long);
}

.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* The dots ARE the radios. `appearance: none` leaves a real radio -- one
   tab stop for the group, arrow keys between the three, a native focus ring
   and an accessible name from the label the `for` attribute points at -- and
   the mark is drawn with a radial gradient so the 44x44 target is the whole
   control rather than a small circle inside a large one. */
.hero__radio {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 50%,
                    var(--edge) 0 6px, transparent 6px);
  cursor: pointer;
  transition: background-image var(--t);
}

.hero__radio:checked {
  background-image: radial-gradient(circle at 50% 50%,
                    var(--act) 0 9px, transparent 9px);
}

.hero__radio--1 { grid-area: d1; }
.hero__radio--2 { grid-area: d2; }
.hero__radio--3 { grid-area: d3; }

.hero__radio--1:checked ~ .hero__stage .hero__slide--1,
.hero__radio--2:checked ~ .hero__stage .hero__slide--2,
.hero__radio--3:checked ~ .hero__stage .hero__slide--3 { opacity: 1; z-index: 1; }

.hero__cap {
  grid-area: cap;
  margin: 0;
  padding-inline-start: var(--s3);
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .hero__in {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: var(--s7);
    align-items: center;
  }
}

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

.phead { padding-block: var(--s8) var(--s7); }
.phead__lede { font-size: 1.125rem; margin: var(--s5) 0 0; max-width: var(--measure); }

/* ---- service preview and the services list ---------------------------- */

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

.svcp__list { grid-template-columns: minmax(0, 1fr); }

.svcp__item {
  padding: var(--s6);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.svcp__p { margin: var(--s3) 0 var(--s5); }
.svcp__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Every one of the six DS-10 services carries an exact price, so
   pages.price_label never emits its "from" qualifier and a `.price__q` rule
   here would be a dead selector -- which the validator fails on, correctly:
   a rule for markup that does not exist is a rule nobody can see is wrong. */
.price { display: block; }
.price__v { font-size: 1.5rem; }
.price__d { display: block; margin-top: 2px; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

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

/* Each priced service is its own soft field, curved and overlapping the one
   before it by a smaller amount than the page bands -- the same treatment at
   a smaller scale, which is what section 6 asks for on this page. */
.svc__row {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.svc__row:nth-child(even) { background: var(--cream); }

.svc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.svc__scope { margin: 0; }
.svc__fit { margin: var(--s3) 0 0; color: var(--muted); }
.svc__fitlabel { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--act); font-weight: 700; }
.svc__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.how__list, .proc__list { grid-template-columns: minmax(0, 1fr); }
.how__step, .proc__step { padding: var(--s5); background: var(--surface); border-radius: var(--radius-lg); }
.proc__step { background: var(--bg); }
.how__no, .proc__no { font-size: 1.125rem; font-weight: 700; color: var(--act); margin: 0 0 var(--s2); }
.how__p, .proc__p { margin: var(--s2) 0 0; }

.note__p, .limit__p, .appr__p { margin: var(--s5) 0 0; max-width: var(--measure); font-size: 1.0625rem; }

/* ---- gallery ----------------------------------------------------------- */

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

.galp__fig, .gal__fig { margin: 0; }

.gal__frame, .galp__fig img {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.gal__frame { border-radius: var(--radius-lg); }

.gal__cap, .galp__cap { display: flex; gap: var(--s3); margin-top: var(--s4); font-size: .875rem; line-height: 1.4; color: var(--muted); }
.gal__no { color: var(--act); font-weight: 700; flex: none; }

.galp__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s6); font-weight: 700; }

/* ---- staff -------------------------------------------------------------- */

.stf__list, .stfp__list { grid-template-columns: minmax(0, 1fr); }

.stf__card {
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.stf__fig { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; }
.stf__fig img { width: 100%; height: 100%; object-fit: cover; }
.stf__body { padding: var(--s5); }
.stf__role { color: var(--act); font-weight: 700; margin: var(--s2) 0; }
.stf__bio { margin: 0; color: var(--muted); }
.stf__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; }
.stf__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 700; }

.stfp__all, .svcp__all, .revp__all, .faqp__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s6);
  font-weight: 700;
}

.focus__list { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.focus__list a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s5); background: var(--bg); border-radius: 999px; text-decoration: none; }
.focus__list a:hover { background: var(--act); color: var(--on-act); }
.focus__p { max-width: var(--measure); margin: var(--s5) 0 0; }

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

.abt__cols { display: grid; gap: var(--s6); }
.abt__p { margin: 0; }
.prin__list { grid-template-columns: minmax(0, 1fr); }
.prin__item { padding: var(--s5); background: var(--bg); border-radius: var(--radius-lg); }
.prin__p { margin: var(--s3) 0 0; }
.place__fig { margin: 0; }
.place__frame { overflow: hidden; border-radius: var(--radius-lg); }
.place__cap { margin-top: var(--s4); font-size: .8125rem; color: var(--muted); }

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

.revp__list, .rev__list { grid-template-columns: minmax(0, 1fr); }

.rev__card, .revp__item {
  height: 100%;
  padding: var(--s6);
  background: var(--bg);
  border-radius: var(--radius-lg);
}

.revp__item { background: var(--surface); }
.rev__no { font-family: var(--font-h); font-size: .875rem; color: var(--act); margin: 0 0 var(--s3); }
.rev__q, .revp__q { margin: 0; font-family: var(--font-h); font-size: 1.125rem; line-height: 1.45; }
.rev__q p, .revp__q p { margin: 0; }
.rev__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); }
.rev__by, .revp__by { font-weight: 700; margin: var(--s4) 0 0; }
.rev__by { margin: 0; }
.rev__svc { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 700; }
.rev__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); color: var(--muted); font-size: .8125rem; }
.rev__avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--s4); border-radius: 52% 48% 60% 40% / 46% 58% 42% 54%; background: var(--field); color: var(--act); font-family: var(--font-h); font-weight: 700; }

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

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

.faq__item {
  margin-bottom: var(--s3);
  padding-inline: var(--s5);
  background: var(--bg);
  border-radius: var(--radius-lg);
}

.faq__q {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

.faq__q::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--act);
}

.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding-bottom: var(--s5); }
.faq__a p { margin: 0; }

.faq__escape { margin: var(--s5) 0 0; padding: var(--s5); background: var(--field); border-radius: var(--radius-lg); }

.faqp__item { margin-bottom: var(--s3); padding-inline: var(--s5); background: var(--bg); border-radius: var(--radius-lg); }
.faqp__q { display: flex; align-items: center; min-height: 44px; padding: var(--s4) 0; font-family: var(--font-h); font-weight: 700; cursor: pointer; list-style: none; }
.faqp__q::-webkit-details-marker { display: none; }
.faqp__a { padding-bottom: var(--s5); }
.faqp__a p { margin: 0; }

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

.con__grid { display: grid; gap: var(--s7); }
.cd__h { margin-bottom: var(--s5); }
.cd__addr, .cd__row, .cd__note { margin: 0; }
.cd__tel, .cd__mail { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.cd__hh { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: var(--s5); }
.cd__hours { margin: var(--s4) 0 0; }
.cd__hours dt { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: var(--s4); }
.cd__hours dd { margin: var(--s2) 0 0; }
.cd__note { margin-top: var(--s5); color: var(--muted); }
.field { margin-bottom: var(--s5); }
.field__opt { font-size: .8125rem; color: var(--muted); margin: var(--s2) 0 0; }
.hint { font-size: .8125rem; color: var(--muted); }
.cform__consent { margin: var(--s5) 0; font-size: .9375rem; }
.cform__status { margin: var(--s5) 0 0; min-height: 44px; }
.alt__in { display: grid; gap: var(--s4); justify-items: start; }
.alt__p { max-width: var(--measure); margin: 0; }

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

.pv__date { margin: var(--s5) 0 0; font-weight: 700; }
.pv__sec { padding-block: var(--s6); }
.pv__h { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: var(--s4); }
.pv__body p { margin: 0; max-width: var(--measure); }
.pv__body p + p { margin-top: var(--s4); }

/* ---- cta ---------------------------------------------------------------- */

.cta__in { display: grid; gap: var(--s6); }
.cta__text { display: grid; gap: var(--s4); }
.cta__p { max-width: var(--measure); margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta__actions .btn { min-width: 148px; }

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

.nf { padding-block: var(--s9); }
.nf__code { font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s4); }
.nf__p { max-width: var(--measure); margin: var(--s5) 0 0; }
.nf__links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.nf__book { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- breakpoints -------------------------------------------------------- */

/* 768px: the desktop identity begins. Two-column sections activate and the
   gallery goes to two columns. */
@media (min-width: 768px) {
  .svcp__list, .prin__list, .how__list, .proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galp__list, .gal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stf__list, .stfp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revp__list, .rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
  .svc__row { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s7); padding: var(--s7); }
  .svc__head { flex-direction: column; align-items: flex-start; }
  .con__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .cta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* 1024px: the flowing overlap reaches its full 48px, the gallery goes to
   three columns because these plates are landscape, and the staff row shows
   all four. */
@media (min-width: 1024px) {
  .svcp__list, .prin__list, .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galp__list, .gal__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stf__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rev__list, .revp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1600px: the content is already centred at 1360px by --max. The gallery is
   the one band allowed to run wider, to 1600px, because a full row of
   material photographs is compositional rather than accidental. */
@media (min-width: 1600px) {
  .gal__wrap { max-width: 1600px; }
}
 
/* Material anti-duplication correction: inner pages keep the flowing organic
   system instead of inheriting the workbench site's rectangular page skeleton. */
.p-services .svc__row {
  border-radius: 88px 28px 88px 28px;
  border: 0;
}
.p-services .svc__row:nth-child(even) {
  border-radius: 28px 88px 28px 88px;
  background: var(--surface);
}
.p-gallery .gal__item:nth-child(3n + 1) .ratio { border-radius: 48% 52% 34% 66% / 58% 35% 65% 42%; }
.p-gallery .gal__item:nth-child(3n + 2) .ratio { border-radius: 62% 38% 55% 45% / 38% 61% 39% 62%; }
.p-gallery .gal__item:nth-child(3n) .ratio { border-radius: 36% 64% 44% 56% / 54% 42% 58% 46%; }
.p-staff .stf__item:nth-child(even) { transform: translateY(var(--s6)); }
.p-staff .stf__fig { border-radius: 50% 50% 28px 28px; overflow: hidden; }
.p-about .prin__item:nth-child(2),
.p-about .proc__step:nth-child(even) { transform: translateY(var(--s5)); }
.p-about .place__fig { border-radius: 48% 52% 22% 78% / 28% 30% 70% 72%; overflow: hidden; }
.p-reviews .rev__list { align-items: start; }
.p-reviews .rev__item { border-radius: 72px 24px 72px 24px; }
.p-reviews .rev__item:nth-child(even) {
  transform: translateY(var(--s7));
  border-radius: 24px 72px 24px 72px;
}
.p-faq .faqg > .wrap {
  width: auto;
  margin-inline: var(--gutter);
  border-radius: 72px 24px;
  padding: var(--s6);
  background: var(--panel);
}
.p-faq .faqg { padding-block: clamp(var(--s7), 7vw, var(--s9)); }
.p-faq .faqg:nth-of-type(even) > .wrap {
  border-radius: 24px 72px;
  background: var(--field);
}
.p-contact .con__grid > * {
  border-radius: 88px 28px;
  padding: clamp(var(--s5), 4vw, var(--s8));
}
.p-contact .con__grid > :last-child {
  border-radius: 28px 88px;
  background: var(--surface);
}
.p-privacy .pv__body { max-width: 980px; margin-inline: auto; }
.p-privacy .pv__sec {
  border: 0;
  border-radius: 64px 24px;
  padding: var(--s6);
  background: var(--surface);
}
.p-privacy .pv__sec:nth-child(even) {
  border-radius: 24px 64px;
  background: var(--field);
}

@media (min-width: 768px) {
  .p-services .svc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6);
    align-items: start;
  }
  .p-services .svc__row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 330px;
  }
  .p-services .svc__row:nth-child(even) { margin-top: var(--s8); }
  .p-gallery .gal__list { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .p-gallery .gal__item:nth-child(6n + 1) { grid-column: 1 / 8; }
  .p-gallery .gal__item:nth-child(6n + 2) { grid-column: 8 / 13; margin-top: var(--s7); }
  .p-gallery .gal__item:nth-child(6n + 3) { grid-column: 1 / 5; }
  .p-gallery .gal__item:nth-child(6n + 4) { grid-column: 5 / 13; margin-top: var(--s6); }
  .p-gallery .gal__item:nth-child(6n + 5) { grid-column: 1 / 7; }
  .p-gallery .gal__item:nth-child(6n) { grid-column: 7 / 13; margin-top: var(--s8); }
  .p-staff .stf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .p-reviews .rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
  .p-faq .faqg:nth-of-type(odd) > .wrap { max-width: 980px; margin-inline-start: 6vw; }
  .p-faq .faqg:nth-of-type(even) > .wrap { max-width: 860px; margin-inline-end: 7vw; }
  .p-privacy .pv__sec:nth-child(odd) { margin-inline-end: var(--s8); }
  .p-privacy .pv__sec:nth-child(even) { margin-inline-start: var(--s8); }
}

/* Preview headings with no intro paragraph beneath them. */
.revp__h, .faqp__h, .prin__head, .proc__head, .how__head { margin-bottom: var(--s6); }

/* Contact: the details column needs room for its heading and call button. */
.p-contact .cd__h { font-size: clamp(2rem, 3vw, 2.75rem); }
.p-contact .con__grid > :first-child { padding-inline: clamp(var(--s5), 3vw, var(--s6)); }
.p-contact .cd__tel .btn { white-space: nowrap; }
@media (min-width: 768px) {
  .con__grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s6); }
}
@media (min-width: 1100px) {
  .con__grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--s7); }
}

/* Page heads: the next band overlaps by --overlap, so keep the lede clear of it. */
.phead { padding-bottom: calc(var(--s7) + var(--overlap)); }

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