.cm-cred{background:var(--deep-2)}
/* The row is a direct child of the full-bleed band, not of a shell, so the
   gap-over-a-tint technique cannot expose a sliver at the outer edges the way
   it did when the same trick was tried on an inset row. */
.cm-cred__row{display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair-light);border-block:1px solid var(--hair-light)}
@media(min-width:760px){.cm-cred__row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.cm-cred__row{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cm-cred__item{background:var(--deep-2);padding:clamp(1.1rem,2.2vw,1.6rem) clamp(.9rem,2vw,1.5rem)}
.cm-cred__icon{display:block;width:1.2rem;height:1.2rem;margin:0 0 .8rem;color:var(--sage-soft)}
.cm-cred__icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cm-cred__item span.cm-cred__label{display:block;font:500 .625rem/1.3 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper)}
@media(max-width:759px){
  .cm-cred__icon{width:1.05rem;height:1.05rem;margin-bottom:.6rem}
}


/* ==========================================================================
   THE REGISTER
   A single line of portraits under the selection heading, the testimonials
   below them. It replaced the six-tile mosaic on both concepts: the mosaic
   ran three tiles deep and cost most of a phone screen, where this costs one
   band.

   The Nocturne carries it inside ".c4.mm-on-dark", which paints headings and
   copy in paper. This surface is paper itself, so each of those is restated
   at a weight that wins there and is harmless anywhere else.
   ========================================================================== */
.cm-reg{background:var(--paper);padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.cm-reg__head{display:grid;gap:1.15rem 3rem;align-items:end;margin:0 0 clamp(1.35rem,2.6vw,2rem)}
@media(min-width:900px){.cm-reg__head{grid-template-columns:minmax(0,1fr) auto}}
.cm-reg .mm-eyebrow{color:var(--sage-ink)}
/* two classes deep, so it beats both ".c4 :where(h2,h3)" and ".mm-on-dark h2" */
.cm-reg .cm-reg__head h2{color:var(--deep);margin:.85rem 0 0;max-width:26ch;
  font-size:clamp(1.5rem,1.25rem + 1.35vw,2.35rem);line-height:1.08;letter-spacing:-.028em}
.cm-reg__head h2 em{font-style:italic;color:var(--sage-ink)}
.cm-reg__cta{justify-self:start}
@media(min-width:900px){.cm-reg__cta{justify-self:end;margin-bottom:.4rem}}

/* One row at every width. The number of portraits on show always equals the
   number of columns, so the row is exactly full and can never wrap onto a
   second — three on a phone held upright, four from the width a phone in
   landscape reaches, six on a desktop. */
.cm-reg__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.cm-reg__row>*:nth-child(n+4){display:none}
@media(min-width:640px){
  .cm-reg__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
  .cm-reg__row>*:nth-child(4){display:block}
}
@media(min-width:1200px){
  .cm-reg__row{grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem}
  .cm-reg__row>*:nth-child(n+5){display:block}
}
/* The ratio belongs to the portrait, not the slot: a slot that is both
   height:100% and aspect-ratio takes its WIDTH from its height and bursts a
   narrow cell. In a frame this tall and narrow a centred crop takes the top
   of the head, so bias the subject up. */
.cm-reg .mm-portrait{aspect-ratio:4/5}
.cm-reg .mm-portrait .mm-slot{width:100%;height:100%;aspect-ratio:auto}
.cm-reg .mm-portrait img{object-position:50% 24%}
@media(max-width:639px){.cm-reg .mm-portrait__cue{padding:.6rem .3rem;font-size:.5rem;letter-spacing:.14em}}

/* ---------- testimonials, one at a time ----------
   A crossfade, not a carriage that slides: every quote occupies the same
   grid cell, so the tallest sets the height once and nothing on the page
   moves as it turns over. */
.cm-quotes{margin-top:clamp(2rem,4vw,3.25rem);background:var(--mint);border:1px solid var(--line);
  padding:clamp(1.75rem,4vw,3.25rem) clamp(1.25rem,3.5vw,3rem)}
.cm-quotes .mm-ornament{opacity:.5;margin-bottom:clamp(1.25rem,2.5vw,1.9rem)}
.cm-quotes__stage{display:grid}
/* The two states are timed apart on purpose. Run as one 0.75s crossfade both
   quotes sit at half opacity across the middle of it and the lines print over
   each other — legible enough on a photograph, unreadable on type. The
   outgoing quote clears first; the incoming one waits for it. */
.cm-quote{grid-area:1/1;margin:0;justify-self:center;max-width:46rem;text-align:center;
  opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .42s var(--ease),transform .42s var(--slow),visibility 0s linear .42s}
.cm-quote.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s var(--ease) .42s,transform .7s var(--slow) .42s,visibility 0s}
.cm-quotes blockquote{margin:0;font-family:var(--serif);font-style:italic;color:var(--deep);
  font-size:clamp(1.15rem,1rem + .95vw,1.9rem);line-height:1.42;letter-spacing:-.018em}
.cm-quotes figcaption{margin-top:1.2rem;font:500 .625rem/1.5 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}

.cm-quotes__nav{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2.5vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem)}
.cm-quotes__arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--sage-ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.cm-quotes__arrow:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.cm-quotes__arrow i{font-size:.8rem}
/* dashes rather than dots — the page is built from hairlines and these belong
   to the same alphabet. The button itself is a proper touch target; only its
   rule is one pixel tall. */
.cm-quotes__dots{display:flex;align-items:center;gap:.5rem}
.cm-quotes__dots button{position:relative;width:1.75rem;height:1.5rem;padding:0;border:0;
  background:transparent;cursor:pointer}
.cm-quotes__dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(56,77,52,.3);transition:background .35s var(--ease),height .35s var(--ease)}
.cm-quotes__dots button.is-on::before{background:var(--deep);height:2px}


/* ---------- the light field ----------
   The two overrides that used to paint headings and copy for a dark ground
   are gone: base.js already sets --deep for headings and --ink-2 for body,
   which is what a light page wants.

   Bands alternate down the page. The class is written by the renderer rather
   than derived with nth-child, because the run is interrupted — the register
   and the credential band sit inside it — and a positional selector would
   count them and put the sequence out of step. */
.c4{background:var(--veil)}
.c4-band--a{background:#E1F0DC}
.c4-band--b{background:#F3FFEF}

/* ---------- hero ---------- */
.c4-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  justify-content:center;text-align:center;min-height:clamp(600px,92vh,960px)}
.c4-hero__bg{position:absolute;inset:0;z-index:-2}
.c4-hero__bg .mm-slot img{object-position:50% 40%;filter:saturate(.6) contrast(1.03) brightness(.82)}
.c4-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 46%,rgba(22,32,20,.42) 0%,rgba(22,32,20,.86) 62%,rgba(22,32,20,.97) 100%)}
.c4-hero__inner{max-width:56rem;padding-block:clamp(3rem,7vw,5rem)}
.c4-hero h1{color:var(--paper);margin:1.5rem auto 0;max-width:16ch;
  font-size:clamp(2.35rem,1.2rem + 4vw,4.8rem);line-height:.97;letter-spacing:-.038em}
.c4-hero h1 em{font-style:italic;color:var(--sage-soft)}
.c4-hero__rule{width:1px;height:clamp(2.5rem,6vw,4.5rem);background:linear-gradient(var(--sage-soft),transparent);
  margin:2rem auto 0}
.c4-hero__notice{margin:1.6rem auto 0;max-width:58ch;font-size:.9375rem;line-height:1.8;
  color:rgba(243,255,239,.74)}
.c4-hero__notice a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(243,255,239,.4)}
.c4-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.25rem}

/* ---------- opening ----------
   One column, and it takes the whole shell. The aside used to hold the right
   third; the client asked for the copy to fill the space it left, and a
   measure cap here left the same gap the box had — the fix that was not
   asked for.

   Running copy across 1225px is a long line, so the leading opens to 1.95
   and the size comes up: the taller the line box, the further the eye can
   travel before it loses its place returning to the left margin. */
.c4-open{padding-block:clamp(3.5rem,7vw,6rem)}
.c4-open__lede{font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem);line-height:1.5;font-weight:300;
  color:var(--deep);letter-spacing:-.014em;margin:0 0 1.7rem}
.c4-open__body{font-size:1.0625rem;line-height:1.95}
/* ---------- the introduction ----------
   What the bordered aside used to hold, laid out as a band of its own: the
   heading, the five things the page promises, the live page's own six
   credentials as a footnote, and the way to a consultation. */
.c4-intro{padding-block:clamp(3rem,6vw,5rem)}
.c4-intro__head{max-width:34ch;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.c4-intro__head h2{font-size:clamp(1.65rem,1.35rem + 1.5vw,2.5rem);line-height:1.08;
  letter-spacing:-.028em;margin:.85rem 0 0}
/* five items, and five divides neither by two nor by four, so the count is
   fixed per breakpoint rather than left to auto-fit — which would strand one
   of them alone on a second row */
.c4-intro__points{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));border-top:1px solid var(--hair)}
@media(min-width:640px){.c4-intro__points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.c4-intro__points{grid-template-columns:repeat(5,minmax(0,1fr))}}
.c4-intro__points li{padding:1.1rem 1.25rem 1.1rem 0;border-bottom:1px solid var(--hair);
  font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
@media(min-width:1100px){
  .c4-intro__points li{border-bottom:0;padding:1.25rem clamp(.9rem,1.6vw,1.5rem) 1.25rem 0}
  .c4-intro__points{border-bottom:1px solid var(--hair)}
}
/* the live page's own six credentials, kept as a footnote rather than a
   second claim band — the client's own six already run under the register */
.c4-intro__claims{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;
  margin:1.6rem 0 0;padding:0}
.c4-intro__claims li{font:500 .5625rem/1.5 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage-ink)}
.c4-intro__cta{margin-top:clamp(2rem,4vw,2.75rem)}

/* ---------- chapters ---------- */
.c4-sec{padding-block:clamp(2.75rem,6vw,4.75rem)}
.c4-sec__head h2{font-size:clamp(1.6rem,1.3rem + 1.7vw,2.7rem);line-height:1.06;letter-spacing:-.032em;
  margin:.8rem 0 1.25rem;max-width:26ch}
.c4-sec__body{font-size:1.0313rem;line-height:1.95}
/* The button that closes a chapter needs its own margin. The paragraph above
   it is the last child of the body, so ".mm-main p:last-child" has already
   zeroed that paragraph's bottom margin — with no rule here the two touch.
   Set clear of the 1.1em that separates paragraphs, so the button reads as a
   separate act rather than one more line of the copy. */
.c4-sec__cta{margin-top:clamp(2rem,4vw,2.75rem)}

/* photograph bleeding to one edge */
.c4-bleed{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media(min-width:1000px){
  .c4-bleed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .c4-bleed.is-flip .c4-bleed__media{order:2}
}
.c4-bleed__media{margin:0;position:relative;overflow:hidden}
.c4-bleed__media .mm-slot{aspect-ratio:5/4}
@media(min-width:1000px){.c4-bleed__media .mm-slot{aspect-ratio:4/5}}
/* no scrim: the photograph sits on a light band now and needs no darkening
   to hold type, because no type sits on it */
.c4-bleed__media{border:1px solid var(--hair)}

/* The one chapter that carried a panoramic plate. It used to be a full-bleed
   photograph with type laid over a dark scrim — the page's darkest moment.
   With no dark grounds left, the photograph becomes a wide figure above its
   own copy and the band alternates like every other. */
.c4-plate{padding-block:clamp(3rem,6.5vw,5rem)}
.c4-plate__media{margin:0 0 clamp(1.75rem,3.5vw,2.75rem);border:1px solid var(--hair);overflow:hidden}
.c4-plate__media .mm-slot{aspect-ratio:21/9}
@media(max-width:700px){.c4-plate__media .mm-slot{aspect-ratio:16/9}}
.c4-plate h2{font-size:clamp(1.75rem,1.35rem + 2vw,3rem);line-height:1.04;letter-spacing:-.034em;
  margin:.85rem 0 1.3rem;max-width:22ch}
.c4-plate .mm-body{line-height:1.95}

/* ---------- FAQ ---------- */
.c4-faq{padding-block:clamp(3.5rem,7vw,5.5rem)}
.c4-faq__head{max-width:36ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.c4-faq__head h2{font-size:clamp(1.65rem,1.35rem + 1.6vw,2.6rem);line-height:1.06;letter-spacing:-.03em;
  margin:.85rem 0 0}
.c4-faq__item{display:grid;gap:.7rem clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--hair)}
@media(min-width:960px){.c4-faq__item{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.c4-faq__q{margin:0;font-family:var(--serif);font-weight:400;color:var(--deep);
  font-size:clamp(1.05rem,.98rem + .45vw,1.35rem);line-height:1.32;letter-spacing:-.02em}
.c4-faq__q span{display:block;margin-bottom:.55rem;font-family:var(--sans);font-size:.625rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink)}
.c4-faq__a{font-size:.9688rem;line-height:1.85;color:var(--ink-2)}
.c4-faq__a p+p{margin-top:.9em}
/* --muted here measured 4.4:1 on the #E1F0DC band, just under AA. --ink-2 is
   7.6:1 on either band, so the footnote is safe wherever the alternation
   happens to place this section. */
.c4-faq__foot{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  font-size:.9375rem;line-height:1.75;color:var(--ink-2)}

/* ---------- the close ---------- */
.c4-outro{padding-block:clamp(3.5rem,8vw,6rem);text-align:center}
.c4-outro h2{font-size:clamp(1.85rem,1.4rem + 2.1vw,3.1rem);line-height:1.03;letter-spacing:-.032em;
  margin:1.3rem auto 1.2rem;max-width:19ch}
.c4-outro p{color:var(--ink-2);max-width:54ch;margin-inline:auto;line-height:1.8}
.c4-outro__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.25rem}
.c4-outro .mm-ornament{opacity:.55}