/* DS-05 -- 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 most common way these builds fail the
 * responsive gate.
 *
 * Nothing here draws a card. A card is a raised rectangle with a shadow and
 * this design has neither; the equivalent unit is a region of the plane
 * separated from the next by a single metallic hairline.
 */

.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: one static low-key plate ----------------------------------- */
/*
 * Source order is text, then plate, at every width -- section 6 requires the
 * H1, the proposition, Book and the secondary link inside the first viewport,
 * and a photograph placed above them on a 320x568 screen pushes the actions
 * off it.
 *
 * At 1024 the two stack into ONE grid area and the copy sits in the bottom
 * left of the photograph, over a scrim. That is the only arrangement in which
 * the plate is both the first thing painted and the LCP element the
 * specification names. The scrim is opaque enough that the worst case -- a
 * blown-out white region of the photograph directly behind the lede -- still
 * measures over 5:1 for the muted text and over 13:1 for the ink.
 */

.hero { padding-block: var(--s7) var(--s8); }

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

.hero__eyebrow {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--s5);
}

/* MATERIAL DISTINCTNESS: sparse asymmetric planes, never a dark card stack. */
@media (min-width: 1100px) {
  body.p-index main { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; background:#0D1416; }
  body.p-index main > .sec { min-width:0; margin:0; border:0; }
  body.p-index main > .sec > .wrap { width:auto; max-width:none; }
  body.p-index .hero { grid-column:1/-1; min-height:100svh; }
  body.p-index .svcp { grid-column:2/8; padding-block:12rem; }
  body.p-index .appr { grid-column:8/12; margin-top:20rem; padding-block:7rem; border-top:1px solid var(--seam); }
  body.p-index .galp { grid-column:1/-1; padding-block:14rem; }
  body.p-index .galp__list { grid-template-columns:2fr 1fr; align-items:end; }
  body.p-index .galp__item:first-child { grid-row:span 2; }
  body.p-index .stfp { grid-column:3/11; padding-block:14rem; }
  body.p-index .revp { grid-column:1/7; padding-block:12rem; }
  body.p-index .faqp { grid-column:8/-1; margin-top:12rem; padding-block:10rem; }
  body.p-index .cta { grid-column:1/-1; min-height:70svh; display:grid; align-items:center; }
}

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

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

/* Two actions share a row only while each keeps 148px. Below that they stack
   on the flex gap, with no media query needed to say so. */
.hero__acts .btn { min-width: 148px; }

.hero__second {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
}

.hero__fig { position: relative; margin: 0; }

.hero__plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  /* The hairline frame is an inset shadow, so it takes no layout space and
     the `sizes` promise in the markup stays exactly true. */
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
  aspect-ratio: 4 / 3;
  background: var(--plane);
}

.hero__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- the soft spotlight ----------------------------------------------- */
/*
 * The signature effect, and the only animation in the build: one 600ms fade
 * of a radial gradient over the plate, played once on load. It moves nothing,
 * so it cannot shift layout, and section 4's animation-off state -- "spotlight
 * remains a static gradient" -- is reached by not playing it rather than by
 * removing it.
 */

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 58% at 26% 22%,
      rgba(242, 246, 247, .20) 0%,
      rgba(242, 246, 247, .07) 42%,
      rgba(5, 7, 10, 0) 72%),
    radial-gradient(90% 90% at 78% 96%,
      rgba(5, 7, 10, .55) 0%,
      rgba(5, 7, 10, 0) 68%);
  animation: ac-spot var(--t-long) ease-out both;
}

@keyframes ac-spot {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__cap {
  margin-top: var(--s4);
  font-size: .8125rem;
  color: var(--muted);
}

@media (min-width: 768px) { .hero__plate { aspect-ratio: 3 / 2; } }

@media (min-width: 1024px) {
  .hero__wrap { grid-template-areas: "plate"; }
  .hero__text, .hero__fig { grid-area: plate; }

  .hero__plate { aspect-ratio: 16 / 9; }

  /* the scrim, applied only where the copy actually sits on the plate */
  .hero__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--scrim);
  }

  .hero__text {
    position: relative;
    z-index: 2;
    align-self: end;
    max-width: 42rem;
    padding: var(--s8);
  }

  .hero__cap {
    position: absolute;
    z-index: 2;
    inset-block-end: var(--s6);
    inset-inline-end: var(--s7);
    margin: 0;
    max-width: 18rem;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; opacity: 1; }
}

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

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

/* ---- service preview and the six priced services ---------------------- */

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

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

/* A region of the plane, not a card: a hairline above it and nothing else. */
.svcp__item { padding-block: var(--s5); border-top: 1px solid var(--rule); }
.svcp__p { margin: var(--s3) 0; color: var(--muted); }
.svcp__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* A price here is often a sentence ("fee disclosed in consultation"), not a
   figure. At a flat 1.75rem that string is ~380px wide and pushed index.html
   7px past a 320px viewport, so the size is fluid and the string wraps. */
/* ---- services: the concierge folio ------------------------------------- */
/* A contents rail beside the mandates, not a list on its own. The rail is
   plain anchor navigation into six anchored records, so the page is complete
   with scripting disabled; the current record is marked through :target, so
   the marker needs no script either. */

.price__v { font-size: clamp(1.125rem, 4vw, 1.75rem); color: var(--act); }

.svc__folio { display: grid; gap: var(--s7); align-items: start; }

.svc__railin { border-top: 1px solid var(--act); padding-top: var(--s5); }

.svc__railh {
  margin: 0 0 var(--s4);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.svc__raillist { margin: 0; padding: 0; list-style: none; }
.svc__railitem { border-top: 1px solid var(--rule); }
.svc__railitem:first-child { border-top: 0; }

.svc__raillink {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s1) var(--s3);
  min-height: 44px;
  padding-block: var(--s3);
  text-decoration: none;
}

.svc__raillink:hover .svc__railname,
.svc__raillink:focus-visible .svc__railname { text-decoration: underline; }

.svc__railno {
  grid-row: 1 / 3;
  font-family: var(--font-h);
  font-size: 1rem;
  color: var(--act);
}

.svc__railname { color: var(--ink); }

.svc__railmeta {
  grid-column: 2;
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the current record, marked without script */
body:has(#service-1:target) .svc__raillink[href="#service-1"] .svc__railname,
body:has(#service-2:target) .svc__raillink[href="#service-2"] .svc__railname,
body:has(#service-3:target) .svc__raillink[href="#service-3"] .svc__railname,
body:has(#service-4:target) .svc__raillink[href="#service-4"] .svc__railname,
body:has(#service-5:target) .svc__raillink[href="#service-5"] .svc__railname,
body:has(#service-6:target) .svc__raillink[href="#service-6"] .svc__railname {
  color: var(--act-h);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.svc__railp {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .8125rem;
}

/* The radius and the clip belong to the plate, not to the figure: the
   figcaption is inside this figure, and an overflow:hidden with a 28px
   radius cut the first glyph of the caption out of the bottom-left arc. */
.svc__railfig { margin: var(--s6) 0 0; }
.svc__railfig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.svc__railcap {
  margin: var(--s3) 0 0;
  font-size: .8125rem;
  color: var(--muted);
}

/* the featured mandate */
.svc__feat {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: var(--s6);
}

.svc__featkick {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.svc__name--feat { font-size: clamp(1.75rem, 6vw, 2.75rem); margin: 0; }

.svc__featfig {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

.svc__featfig img { display: block; width: 100%; height: auto; }

.svc__listh {
  margin: var(--s8) 0 0;
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.svc__row {
  display: grid;
  gap: var(--s5);
  padding: var(--band-pad) var(--s5);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--s6);
}

.svc__row:nth-child(even) {
  background: var(--plane);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

.svc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); }

.svc__no {
  margin: 0;
  font-family: var(--font-h);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--act);
}

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

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

.svc__fitlabel {
  display: inline-block;
  margin-inline-end: var(--s2);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--act);
}

/* the three record fields: what is in, what is not, and how long */
.svc__terms {
  display: grid;
  gap: var(--s5);
  margin: var(--s5) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.svc__termh {
  margin: 0 0 var(--s2);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.svc__incl li {
  position: relative;
  padding-inline-start: var(--s5);
  margin-bottom: var(--s2);
  font-size: .9375rem;
}

.svc__incl li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .7em;
  width: 10px;
  height: 1px;
  background: var(--act);
}

.svc__bound, .svc__timing { margin: 0; font-size: .9375rem; color: var(--muted); }

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

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

.gal__group + .gal__group { margin-top: var(--s9); }

.gal__grouph {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin: 0 0 var(--s3);
  font-size: 1.5rem;
  line-height: 1.2;
}

.gal__groupno {
  font-family: var(--font-b);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--act);
  flex: none;
}

.gal__groupnote {
  max-width: var(--measure-s);
  margin: 0 0 var(--s5);
  font-size: .875rem;
  line-height: 1.7;
  color: var(--muted);
}

.galp__fig, .gal__fig { margin: 0; }

.gal__frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

/* The homepage plate captions are children of .galp__fig, so rounding and
   clipping the figure itself cropped the first glyph of every caption at
   every width. The frame belongs to the photograph, not to the figure. */
.galp__fig > picture {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

/* Section 9's media filter, applied to every photograph rather than only to
   the gallery: the sixteen images were taken by fourteen different people in
   fourteen rooms, and the only honest way to make them read as one set is to
   grade them together. Done here rather than baked into 48 exported files,
   so the shipped bytes still match what ASSET_SOURCES.md says was done to
   the originals, which is a crop and a re-encode. */
.hero__plate img,
.gal__frame img,
.galp__fig img,
.svc__featfig img,
.svc__railfig img,
.place__frame img,
.stf__fig img { filter: var(--media); }

.gal__cap, .galp__cap {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s4);
  line-height: 1.5;
  color: var(--muted);
}

.galp__cap { font-size: .875rem; }
/* section 17: 13px captions */
.gal__cap { font-size: .8125rem; max-width: var(--measure-s); }
.gal__item--wide .gal__cap { max-width: var(--measure); }

/* Section 9's highlight tone. Nothing in this layout is a chip, so the
   highlight is carried as ink on the folio numerals, where it separates the
   index from the one action colour instead of competing with it. */
.gal__no { font-size: .8125rem; color: var(--hi); flex: none; }
.galp__cap .gal__no { font-size: .875rem; }

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

.stf__notice {
  max-width: var(--measure);
  margin: 0 0 var(--s7);
  padding: var(--s5);
  border-inline-start: 1px solid var(--act);
  color: var(--muted);
  font-size: .9375rem;
}

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

.stf__card {
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
  background: var(--panel-stf);
}

/* section 17's black-and-bronze panel: a 4:5 crop out of the 3:4 source, a
   bronze hairline and a black foot so the panel meets the body instead of
   stopping at it. The intrinsic width/height stay on the img, so the crop
   costs no layout shift. */
.stf__fig {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #141F22;
}

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

.stf__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 0 var(--ruleg);
  background: linear-gradient(180deg, rgba(5,7,10,0) 52%, rgba(5,7,10,.86) 100%);
  pointer-events: none;
}

/* the authored house monogram, once, on the lead sheet */
.stf__mono {
  position: absolute;
  left: var(--s5);
  bottom: var(--s5);
  z-index: 1;
  display: block;
  width: 64px;
  height: 64px;
}

.stf__mono svg { display: block; width: 64px; height: 64px; max-width: none; }
.mo__c, .mo__a { fill: none; stroke: var(--act-h); stroke-width: 3; }
.mo__c { stroke-linecap: round; }

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

.stf__kicker {
  margin: 0 0 var(--s3);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.stf__name { font-size: 1.25rem; }
.stf__role { color: var(--act); font-weight: 600; margin: var(--s2) 0; }
.stf__scope { margin: 0 0 var(--s4); font-size: 1.0625rem; }
.stf__bio { margin: 0; color: var(--muted); }

.stf__cue {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
}

.stf__cuelabel {
  display: block;
  margin-bottom: var(--s1);
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--act);
}

.stf__svcs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.stf__svcs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s4);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .8125rem;
  text-decoration: none;
}

.stf__svcs a:hover, .stf__svcs a:focus-visible { border-color: var(--act); }

/* ---- the responsibility matrix ---------------------------------------- */
/* One definition list. Below 768 it is exactly what S5 asks for at mobile -
   a labelled definition list - and from 768 up the same markup lays out as a
   two-column matrix. There is no second copy of the content to drift. */

.mtx__dl { margin: var(--s6) 0 0; }

.mtx__row { padding-block: var(--s5); border-top: 1px solid var(--rule); }
.mtx__row:last-child { border-bottom: 1px solid var(--rule); }

.mtx__dt {
  font-size: .6875rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.mtx__dd { margin: var(--s2) 0 0; }
.mtx__role { display: block; color: var(--act); font-weight: 700; }
.mtx__what { display: block; margin-top: var(--s1); color: var(--muted); font-size: .9375rem; }

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

.abt__cols { display: grid; gap: var(--s6); }
.abt__p { margin: 0 0 var(--s5); }
.prin__list { grid-template-columns: minmax(0, 1fr); }
.prin__p { margin: var(--s3) 0 0; color: var(--muted); }

.place__fig { max-width: 1134px; margin-inline: auto; }

.place__frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

.place__cap { margin-top: var(--s4); font-size: .8125rem; color: var(--muted); }

/* ---- reviews: R5 private client letter folio -------------------------- */
/* A correspondence folio, not a card grid. One letter opens the page at full
   size beside a narrow rail that indexes the other five; each of those five
   is a real anchored letter printed in full further down, so the rail is
   ordinary anchor navigation and needs no script at all. */

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

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

.rev__card {
  padding: var(--s6);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
  background: var(--panel-rev);
  /* the rail links land here; the header is not sticky, but a letter that
     opens flush against the viewport edge reads as a clipped one */
  scroll-margin-top: var(--s6);
}

/* the lead letter is distinguished by scale, a gold frame and the seal -
   not by a second background colour, which would fight the section plane */
.rev__card--lead { box-shadow: inset 0 0 0 1px var(--act); }

.rev__no { font-size: 1rem; color: var(--hi); margin: 0 0 var(--s5); }

.rev__head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }

/* stable 72px box at every width: base.css resets every svg to max-width:100%,
   which collapses a fixed mark inside anything allowed to shrink, so the mark
   takes its size from the span and opts out of the reset. */
.rev__av { display: block; flex: none; width: 72px; height: 72px; }
.rev__av svg { display: block; width: 72px; height: 72px; max-width: none; }
.av__ln { fill: none; stroke: var(--ruleg); stroke-width: 1.4; }
.av__dot { fill: var(--act); }
.av__fill { fill: var(--ruleg); opacity: .18; }

.rev__id { min-width: 0; }
.rev__by, .revp__by { font-weight: 700; margin: 0; }
.rev__meta {
  margin: var(--s1) 0 0;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.rev__q, .revp__q { max-width: var(--measure-s); margin: 0; font-size: 1.0625rem; }
.rev__q p, .revp__q p { margin: 0; }
.rev__card--lead .rev__q { font-size: 1.1875rem; line-height: 1.75; }

.rev__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.rev__svc { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }

/* the one seal-like authored mark on the page - the house crown, the same
   motif the footer closes on, used here as the endpoint of the lead letter */
.rev__seal { display: block; flex: none; width: 44px; height: 44px; opacity: .85; }
.rev__seal svg { display: block; width: 44px; height: 44px; max-width: none; }

/* ---- the index rail --------------------------------------------------- */

.rev__railh {
  margin: 0;
  font-family: var(--font-b);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--act);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ruleg);
}

.rev__railp { margin: var(--s4) 0 0; font-size: .875rem; color: var(--muted); }

.rev__raillist { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.rev__railitem { border-bottom: 1px solid var(--rule); }

.rev__raillink {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--s3);
  padding-block: var(--s4);
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}

.rev__raillink:hover .rev__railname,
.rev__raillink:focus-visible .rev__railname {
  text-decoration: underline;
  text-underline-offset: .28em;
}

.rev__railno { font-family: var(--font-h); font-size: 1rem; color: var(--hi); }
.rev__railname { font-weight: 700; }
.rev__railmeta {
  grid-column: 2;
  margin-top: var(--s1);
  font-size: .75rem;
  color: var(--muted);
}

/* ---- the correspondence stack ----------------------------------------- */

.rev__stackh {
  margin: var(--s9) 0 var(--s6);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.rev__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.rev__stackitem { min-width: 0; }

.revp__item { padding-block: var(--s6); border-top: 1px solid var(--rule); }

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

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

.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-of-type { border-bottom: 1px solid var(--rule); }

/* section 17 asks for a solid open state, so that an open row reads as a
   panel rather than as a gap between two hairlines. */
.faq__item[open] { background: #1A2629; }

.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  min-height: 56px;            /* section 17: 56px rows */
  padding: var(--s4) var(--s7) var(--s4) var(--s4);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

.faq__q:focus-visible { outline: 2px solid var(--act); outline-offset: -2px; }

/* section 17: gold index numbers, the same treatment the gallery already
   uses for a numeral. */
.faq__no {
  font-family: var(--font-b);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--act);
  flex: none;
}

.faq__qt { min-width: 0; }

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

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

/* Answer text sits above the muted caption colour: --muted is a caption
   tone and this was carrying the only substantive copy on the page. The
   68ch cap comes from .measure. */
.faq__a { padding: 0 var(--s4) var(--s5); color: #DCE6E8; }
.faq__a p { margin: 0; }

.faq__escape {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

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

.con__grid { display: grid; gap: var(--s8); }
/* the identity column is the narrow one, so its heading is sized for the
   column and not for a full-width band */
.cd__h { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.cd__hh { font-size: 1.0625rem; margin: var(--s6) 0 0; }
.cd__addr { font-style: normal; margin: var(--s4) 0 0; }
.cd__mail { margin: var(--s2) 0 0; }
.cd__note { margin: var(--s5) 0 0; font-size: .9375rem; color: var(--muted); }
.cd__hours { margin: var(--s4) 0 0; }

/* label against value on one ruled row. A multi-column flow was tried first
   and split a dt from its own dd across the column break. */
.cd__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s3);
  border-top: 1px solid var(--rule);
}

.cd__hours dt {
  font-size: .75rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.cd__hours dd { margin: 0; }

/*
 * F5, the Concierge Conversation. Five visible steps in ONE semantic form -
 * a fieldset was tried first and a grid fieldset renders unreliably, so each
 * step is a role="group" labelled by its own heading. Nothing here depends on
 * JavaScript: with scripting off the five steps are five ruled blocks and the
 * form posts to /api/contact exactly as it does with scripting on.
 */
.cstep { padding-block: var(--s6); border-top: 1px solid var(--rule); }
.cstep:first-of-type { border-top: 0; padding-top: 0; }

.cstep__h {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin: 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* the same gold numeral the services folio and the FAQ accordion use. Gold
   stays on actions, numerals and rules and goes nowhere else. */
.cstep__no {
  font-family: var(--font-b);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--act);
  flex: none;
}

.cstep__why {
  margin: var(--s3) 0 var(--s5);
  max-width: var(--measure-s);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--muted);
}

/* section 17: 50px fields and 18px input text, which is a size a visitor
   reads back without leaning in. The 44px floor in design.css is the site
   minimum; this is the contact page spending more on the one form that
   carries the whole enquiry. */
.cform .field input, .cform .field select { min-height: 50px; }

.cform .field input, .cform .field select, .cform .field textarea {
  font-size: 1.125rem;
  padding: var(--s3) var(--s4);
}

/* 18px text in a 12px box measures 55px, so the single-line controls take
   the smaller vertical padding and land on section 17's 50px exactly. The
   textarea keeps the roomier box - it is holding a paragraph, not a line. */
.cform .field input, .cform .field select { padding-block: var(--s2); }

.field { margin-bottom: var(--s5); }
.field:last-child { margin-bottom: 0; }
.field__opt { font-size: .8125rem; color: var(--muted); font-weight: 400; }
.hint { margin: var(--s2) 0 0; font-size: .8125rem; color: var(--muted); }

/* the subdued privacy box sits between the last step and the one action, so
   the sentence about what not to send is the last thing read before send. */
.cform__privacy {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  border-radius: var(--radius);
  background: #162124;
  box-shadow: inset 0 0 0 1px var(--ruleg), var(--frame-shadow);
}

.cform__consent { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.cform__foot { margin: var(--s6) 0 0; }

/* section 17: a fixed 56px response region. It is reserved whether or not
   anything has been submitted, so a success or an error arrives without
   pushing the page under the reader's eye. */
.cform__status {
  margin: var(--s5) 0 0;
  min-height: 56px;
  font-size: .9375rem;
  line-height: 1.6;
}

/* base.css hides every idle status region that is still empty. Section 17
   asks this one page for the opposite - a response region held open at 56px
   so a success or an error does not move the button out from under the
   pointer that just pressed it. */
.cform__status[data-state="idle"]:empty { display: block; }

/* one gold action, at the height of the fields above it */
.cform .btn--primary { min-height: 50px; }

.cform__status[data-state="error"] { color: var(--err); }
.cform__status[data-state="ok"] { color: var(--act); }

.alt__in { display: grid; gap: var(--s4); justify-items: start; }

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

.pv__date { margin: var(--s5) 0 0; font-weight: 700; }
.pv__sec { padding-block: var(--s6); border-top: 1px solid var(--rule); }
.pv__sec:first-child { border-top: 0; }
.pv__h { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: var(--s4); }
.pv__sec p { color: var(--muted); }
.pv__sec p + p { margin-top: var(--s4); }

/* ---- cta and subscribe ------------------------------------------------ */

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


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

.nf { padding-block: var(--s9); }
.nf__code { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.nf__p { color: var(--muted); }
.nf__links { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px; }

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

/* Below 768 the head is a wrapping row, so a short service name sat beside
   its numeral while the longer five wrapped under theirs. The name takes a
   full line at every width, so the six records read the same way. */
@media (max-width: 767px) {
  .svc__head .svc__name { flex: 1 1 100%; }
}

/* 768px: the desktop identity begins. Two-column sections activate, the
   gallery goes to two, and the priced services split into a name column and
   a scope column. */
@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)); }
  .gal__item--wide { grid-column: 1 / -1; }
  .stf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stfp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the lead sheet runs the full width of the folio and turns on its side:
     panel beside body, not above it */
  .stf__item--lead { grid-column: 1 / -1; }
  .stf__card--lead { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .stf__card--lead .stf__fig { height: 100%; aspect-ratio: auto; }
  .stf__card--lead .stf__body { padding: var(--s7); align-self: center; }
  .mtx__row {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s5);
  }
  .mtx__dd { margin: 0; }
  .revp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .svc__feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
  .svc__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
  .svc__feat .svc__terms { grid-template-columns: minmax(0, 1fr); }
  /* alternating detail sheets: the plane flips, and so does the side the
     numeral and name sit on. The row does not SPLIT here - see 1280 */
  .svc__row { gap: var(--s7); }
  .svc__row:nth-child(even) .svc__head { flex-direction: column; align-items: flex-end; text-align: end; }
  .svc__row:nth-child(odd) .svc__head { flex-direction: column; align-items: flex-start; }
}

/* 1024px: the planes reach full depth, the gallery goes to three columns and
   the staff row shows all four plates. */
@media (min-width: 1024px) {
  /* the identity column is the NARROW one - 20rem against a 544px form here
     and an 800px form at 1280. It waits until 1024 because at 768 the same
     split left the form 248px, narrower than the column beside it. */
  .con__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .svcp__list, .prin__list, .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stf__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .revp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc__folio { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s8); }
  /* the rail is persistent from here up. Nothing in this design is sticky
     except this, and the header scrolls away, so there is nothing for it to
     collide with. */
  .svc__railin { position: sticky; top: var(--s6); }
  .svc__feat .svc__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the folio only splits when the lead letter can still hold a real
     measure beside the rail; at 768 a 360px "featured" letter is not one */
  .rev__folio { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s8); }
  /* The closing band turns two-column here and not at 768. The button track
     is an auto track, so at 776px it took both buttons side by side and left
     the heading a column narrow enough to ladder "Start with the introductory
     visit" over four lines. Same rule .con__grid and .rev__folio follow. */
  .cta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* 1280px: the detail sheets split. Same rule the reviews folio follows -
   the row only turns on its side once the body still has a real measure
   beside the head. The folio spends 17rem plus a --s8 gap on the rail, so
   at 1024 a 22rem head track leaves about 190px of body and the row runs
   three times its proper height; at 1280 it leaves 512px. */
@media (min-width: 1280px) {
  /* F5's left rail. Each step turns on its side and the reason the detail is
     asked for becomes a margin note beside the controls it explains. */
  .cstep { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s7); }
  .cstep__why { margin-bottom: 0; }
  .svc__row { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .svc__row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .svc__row:nth-child(even) .svc__head { grid-column: 2; grid-row: 1; }
  .svc__row:nth-child(even) .svc__body { grid-column: 1; grid-row: 1; }
  /* the head column is a stretched grid item, so its inner edge is a
     full-height rule for free. That is what holds the empty half of
     the spread together instead of leaving it as a blank plane. */
  .svc__row:nth-child(odd) .svc__head { border-inline-end: 1px solid var(--seam); padding-inline-end: var(--s7); }
  .svc__row:nth-child(even) .svc__head { border-inline-start: 1px solid var(--seam); padding-inline-start: var(--s7); }
}

/* 1600px: nothing changes. The content column is already centred at 1360px
   and every rendition is cut for that box; letting the gallery run to 1600
   gave it a 485px column against a 437px sizes promise, which is a soft
   photograph on the one screen wide enough to show it. */

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