/* ============================================================
   Clearmatter — Connect (the action page)
   Hero uses the shared subpage template (.subhero, subpage.css) with
   the Converge motif; below it, the fallback ramp: divider + a quiet
   outlined form. The call is the page; the form is the fallback.
   Existing tokens only. Exactly one filled forest button (Schedule a
   call); the form's Send is outlined.
   ============================================================ */

/* ---- Fallback ramp (below the hero) ---- */
.cn-ramp{background:var(--linen);padding-block:clamp(28px,5vw,56px) clamp(72px,11vw,128px);position:relative;}
.cn-ramp .wrap{position:relative;z-index:1;}

/* Divider: short rule, left-aligned to the content column (divides the two
   contact types without banding the page). */
.cn__hr{border:0;height:1px;background:rgba(188,186,180,.7);width:60px;margin:0 auto clamp(32px,4vw,44px);}

/* Fallback block: the ramp, visually quieter than the call. Centered as a block
   so the divider, lead-in, heading, form and note share one axis. */
.cn__fallback{max-width:760px;margin-inline:auto;text-align:center;}
.cn__leadin{margin:0;color:var(--iron);font-size:15px;font-weight:450;letter-spacing:.01em;}
.cn__formhead{font-family:var(--serif);font-weight:500;font-size:clamp(25px,3vw,34px);line-height:1.1;letter-spacing:-.008em;color:var(--slate);margin:clamp(8px,1vw,12px) 0 0;text-wrap:balance;}

/* Form is bare (no white card) so it stays subordinate to the primary call.
   White input wells keep the fields legible on the linen ground. */
.cn-form{width:100%;max-width:520px;margin:clamp(24px,3vw,32px) auto 0;text-align:center;}
.cn-form .field input,.cn-form .field textarea{background:var(--white);}
.cn-send{align-self:center;margin-top:6px;}
.cn-note{max-width:520px;margin:clamp(14px,1.8vw,18px) auto 0;text-align:center;color:var(--iron);font-size:14px;line-height:1.5;}
/* Visible email fallback (always shown) + honest error message. Links forest on
   the light ground; recolored fern on the dark photo band below. */
.cn-email{max-width:520px;margin:clamp(10px,1.4vw,14px) auto 0;text-align:center;color:var(--iron);font-size:14px;line-height:1.5;}
.cn-email a{color:var(--forest);border-bottom:1px solid rgba(45,106,79,.4);}
.cn-email a:hover{border-bottom-color:var(--forest);}
.cn-error{max-width:520px;margin:clamp(12px,1.6vw,16px) auto 0;text-align:center;color:var(--slate);font-size:14px;line-height:1.5;}
.cn-error a{color:var(--forest);border-bottom:1px solid rgba(45,106,79,.4);}
.cn-error a:hover{border-bottom-color:var(--forest);}
.cn-send:disabled{opacity:.6;cursor:default;}
.cn-send:disabled:hover{background:none;color:var(--forest);border-color:var(--forest);}
/* sent confirmation reuses the shared .form--done grammar (centered), bare on
   the dark photo band — the FormDone component from sections.jsx. */

/* Converge motif — Connect. Restore the original exploration card's treatment
   (Hero Motifs card): the field owns the right ~57% of the hero at full
   saturation, convergence point vertically centered on the right edge, each ray
   fading toward its left end via the SVG radial. Overrides the quieter shared
   .subhero__motif base (width 46% / opacity .72) that read too pale here. The
   left-edge mask matches the card (6%->34%); the bottom-edge dissolve lives in
   the SVG's vertical mask so nothing hard-clips at the section boundary. */
.subhero__motif--converge{inset:0 -2% 0 auto;width:57%;opacity:1;
  -webkit-mask-image:linear-gradient(to right, transparent, transparent 6%, #000 34%);
          mask-image:linear-gradient(to right, transparent, transparent 6%, #000 34%);}
@media (max-width:980px){.subhero__motif--converge{width:60%;opacity:.82;}}
@media (max-width:640px){.subhero__motif--converge{width:74%;opacity:.6;}}

/* ---- Entrance for the ramp (gated on .js; visible without JS / reduced motion) ---- */
.js .cn__hr{opacity:0;transition:opacity 1s var(--ease);}
.js .cn__fallback{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .08s,transform 1s var(--ease) .08s;}
.cn-ramp.in .cn__hr{opacity:1;}
.cn-ramp.in .cn__fallback{opacity:1;transform:none;}

/* Hero title accent — same treatment as Home's hero: the closing word takes the
   accent colour at 600, upright (Cormorant's italic is not the intent here). */
/* "we begin." holds together as one unit at every width; the line breaks before
   it if it must. Fits inside the narrowest column at the smallest clamp step. */
.subhero__title .cn-begin{white-space:nowrap;}
/* The accent word on a dark ground takes the light step of the accent — base
   fuchsia measures only ~3.5:1 on the closing photo band. */
.subhero__title .acw{color:var(--acc-txt,var(--forest));font-style:normal;font-weight:600;}
.cn__formhead .acw{color:#E86A9B;font-style:normal;font-weight:600;}

/* ---- What changes — the outcomes as a from -> to ledger (white ground) ----
   Six rows, each side its own cell, hairline rules doing the grouping. The
   "from" side is quiet sans in iron; the "to" side is the resolved statement,
   serif in grove. One thin forest arrow between them, decorative only. */
/* Grounds belong to the slot, not the section (Aug 31 reorders): Approach now
   sits in The work's linen slot, The work takes the white one, and Changes keeps
   the tint. These outrank hue-skin's [data-room] rules. */
.cn-main .process--tint.cn-ap{background:var(--linen);}
.cn-main .cn-work{background:var(--white);}
.cn-main .cn-ch{background:var(--h-wash,var(--linen));padding-block:clamp(80px,12vw,136px);}

.cn-ch__head{max-width:none;margin-bottom:clamp(40px,5.4vw,64px);}
.cn-ch__eye{display:block;color:var(--h-det,var(--forest));}
.cn-ch__h{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.016em;color:var(--slate);margin:clamp(10px,1.4vw,16px) 0 0;}
/* --col (below) is the page's single-column measure: every one-column block on
   the page — ledes, the ledger, the clarifier, the intro-session rows — shares
   it, so their left and right edges line up all the way down. */
.cn-ch__lede{max-width:var(--col);margin:clamp(14px,1.8vw,22px) 0 0;color:var(--slate);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty;}
/* The ledger: six rows on the section's own ground, no containers. The two
   states both start on their own left edge, with the arrow in a fixed centre
   column, so the same movement accumulates six times down the page.
   No rules between rows; the rhythm alone separates them. Full content width. */
/* One column track for the whole ledger — the labels and every row hang off it
   through subgrid, so "Before coaching" sits over the from column and "After
   coaching" over the outcomes at any width. */

.cn-ch__ledger{display:grid;grid-template-columns:minmax(0,max-content) clamp(30px,3.2vw,52px) minmax(0,1fr);max-width:var(--col);}
.cn-ch__labels{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  margin-bottom:clamp(14px,1.8vw,22px);padding-bottom:clamp(10px,1.2vw,14px);border-bottom:1px solid var(--h-rule,rgba(45,106,79,.18));}
.cn-ch__label{display:block;color:var(--h-det,var(--forest));}
@media (max-width:720px){.cn-ch__labels{display:none;}.cn-ch__ledger{display:block;}.cn-ch__list{display:block;}}
/* Column widths live on the list, and the rows inherit them through subgrid, so
   the arrow and the outcomes sit on the same two axes in every row (per-row
   max-content would stagger them and kill the scan). */
.cn-ch__list{list-style:none;margin:0;padding:0;grid-column:1/-1;display:grid;grid-template-columns:subgrid;}
.cn-ch__row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;
  padding:clamp(14px,1.8vw,22px) 0;}
.cn-ch__from{font-family:var(--sans);font-size:clamp(14px,1.2vw,16px);line-height:1.45;letter-spacing:0;color:var(--iron);text-align:left;text-wrap:pretty;}
.cn-ch__arrow{align-self:center;justify-self:center;color:var(--forest);opacity:.7;font-size:clamp(15px,1.4vw,18px);line-height:1;}
.cn-ch__to{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.18;letter-spacing:-.011em;color:var(--grove);text-wrap:pretty;}
@media (max-width:720px){
  .cn-ch__row{grid-template-columns:1fr;gap:8px;}
  .cn-ch__arrow{justify-self:start;transform:rotate(90deg);}
}

/* ---- The conversations we have (after Reasons) ---------------------------
   Head left, the seven threads right: a hairline list, efficient rhythm, a
   short forest dash marking each line. No disclosure. */
.cn-talks{background:var(--linen);padding-block:clamp(60px,8vw,96px);}
.cn-talks__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(26px,5vw,80px);align-items:start;}
.cn-talks__eye{display:block;color:var(--h-det,var(--forest));}
.cn-talks__h{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.5vw,42px);line-height:1.06;letter-spacing:-.014em;color:var(--slate);margin:clamp(10px,1.2vw,14px) 0 0;text-wrap:balance;}
.cn-talks__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--h-rule,rgba(45,106,79,.22));}
.cn-talks__item{display:grid;grid-template-columns:16px minmax(0,1fr);gap:16px;border-bottom:1px solid var(--h-rule,rgba(45,106,79,.22));padding:clamp(13px,1.5vw,17px) 0;color:var(--slate);font-size:clamp(16px,1.4vw,18px);line-height:1.45;text-wrap:pretty;}
.cn-talks__item::before{content:"";height:1px;margin-top:.72em;background:var(--h-det,var(--forest));}
@media (max-width:820px){.cn-talks__grid{grid-template-columns:1fr;gap:clamp(22px,4vw,30px);}}

/* ---- What to expect in coaching (after the process band) -----------------
   Four cards on white, hairline tops, two up. */
.cn-appr{background:var(--white);padding-block:clamp(62px,8.5vw,104px);}
.cn-appr__head{max-width:720px;margin-bottom:clamp(28px,3.6vw,42px);}
.cn-appr__eye{display:block;color:var(--h-det,var(--forest));}
.cn-appr__h{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.5vw,42px);line-height:1.06;letter-spacing:-.014em;color:var(--slate);margin:clamp(10px,1.2vw,14px) 0 0;text-wrap:balance;}
.cn-appr__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.2vw,42px) clamp(32px,5vw,72px);}
.cn-appr__card{border-top:1px solid var(--h-rule,rgba(45,106,79,.22));padding-top:clamp(16px,1.8vw,22px);}
.cn-appr__t{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,25px);line-height:1.16;letter-spacing:-.01em;color:var(--grove);}
.cn-appr__b{margin:clamp(8px,1vw,12px) 0 0;color:var(--slate);font-size:clamp(15px,1.25vw,17px);line-height:1.6;text-wrap:pretty;}
@media (max-width:720px){.cn-appr__grid{grid-template-columns:1fr;}}

/* ---- For organizations (after the intro-session card) --------------------
   The consulting hand-off as an inset card — the page's card idiom — on the deep
   teal of the Consulting room (#0A3540), so it reads as the other practice
   rather than another coaching band. Copy reverses to linen; the Align motif
   Compact: this is a hand-off, not a section. */
.cn-orgs{background:var(--white);padding:0;}
/* Grove, not the ink teal — teal is coming off the site. */
.cn-orgs__card{position:relative;isolation:isolate;overflow:hidden;background:var(--grove);
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;
  padding-block:clamp(48px,6vw,74px);}
.cn-orgs__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,4vw,60px);align-items:start;}
.cn-orgs__eye{display:block;color:var(--fern);}
.cn-orgs__h{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.9vw,36px);line-height:1.1;letter-spacing:-.012em;color:var(--linen);margin:clamp(8px,1vw,12px) 0 0;text-wrap:balance;}
.cn-orgs__b{margin:0;color:rgba(242,242,240,.86);font-size:clamp(16px,1.35vw,17px);line-height:1.6;text-wrap:pretty;}
.cn-orgs__acts{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.2vw,28px);margin-top:clamp(18px,2.2vw,26px);}
.cn-orgs__acts .link{color:var(--fern);}
.cn-orgs__acts .link:hover{border-color:var(--fern);}
/* outranks the accent skin's ghost rule (color-variants-v2 loads after this file) */
.cn-main .cn-orgs__acts .btn--ghost:not(.ftr__cta){border-color:rgba(242,242,240,.55);color:var(--linen);}
.cn-main .cn-orgs__acts .btn--ghost:not(.ftr__cta):hover{background:var(--linen);border-color:var(--linen);color:var(--grove);}
.cn-orgs :focus-visible{outline-color:var(--linen);}
@media (max-width:820px){.cn-orgs__grid{grid-template-columns:1fr;align-items:start;}}
@media (max-width:640px){.cn-orgs__card{margin:clamp(14px,4vw,20px);}}

/* ---- When people book (between the hero and the expect band) -------------
   The swappable module: six lines in the visitor's own voice, set as quiet
   quotes — deliberately not accordions: nothing to open, you scan for the one
   that sounds like you. Treatment follows Home's beacon band: the café photo as
   an inset rounded card, warm-dark under a left/bottom scrim, copy in linen. */
.cn-when{background:var(--white);padding:0;}
.cn-when__card{position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;
  padding-block:clamp(80px,12vw,150px);}
.cn-when .wrap{position:relative;z-index:2;}
/* Dark ridged leaves beside a bright window (photo 44) — one subject, and the
   dark-to-light tension the section is about. Aug 29: shown in its own tones,
   mirrored so the plant falls under the copy column and the window light opens
   on the right; the crop keeps the leaf mass low-left. */
/* Mirrored (scaleX(-1), origin centred so the box still covers the card). The
   crop holds the photo's left third — rubber plant + seating group — which the
   mirror then places on the open right side; the window and the city block land
   under the heavy left scrim. */
.cn-when__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:8% 60%;
  transform:scaleX(-1);transform-origin:50% 50%;filter:saturate(.96) brightness(1.02) contrast(1.02);}
/* Even enough across the card for the two full-width quote columns, weighted
   left for the head and bottom for the closing line. */
.cn-when__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,16,12,.9) 0%,rgba(8,16,12,.84) 34%,rgba(8,16,12,.74) 58%,rgba(8,16,12,.6) 70%,rgba(8,16,12,.24) 86%,rgba(8,16,12,.1) 100%),
    linear-gradient(180deg,rgba(8,16,12,.24) 0%,rgba(8,16,12,.08) 36%,rgba(8,16,12,.3) 64%,rgba(8,16,12,.5) 86%,rgba(8,16,12,.58) 100%);}
.cn-when__head{max-width:860px;margin-bottom:clamp(46px,6.2vw,76px);}
.cn-when__eye{display:block;color:var(--h-sm,var(--fern));}
.cn-when__h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.014em;color:var(--linen);margin:clamp(10px,1.4vw,16px) 0 0;text-wrap:balance;}
/* both example columns stay inside the wash (left ~64% of the card), so the
   window band on the right can read as photograph without carrying type. */
/* Two topic groups side by side (executive | life), each a single column of
   three lines, together held inside the wash (left ~64% of the card). */
.cn-when__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,54px);max-width:74%;}
.cn-when__list{list-style:none;margin:0;padding:0;}
.cn-when__item{border-top:1px solid rgba(242,242,240,.2);padding:clamp(13px,1.5vw,17px) 0;}
.cn-when__q{margin:0;font-family:var(--sans);font-style:normal;font-weight:400;font-size:clamp(15px,1.3vw,17px);line-height:1.5;letter-spacing:.002em;color:rgba(242,242,240,.88);text-shadow:0 1px 16px rgba(8,16,12,.9),0 0 3px rgba(8,16,12,.6);text-wrap:pretty;}
.cn-when__h,.cn-when__intro{text-shadow:0 1px 20px rgba(8,16,12,.6);}
/* Intro paragraphs now sit under the headline (Aug 29); the examples follow,
   introduced by their own eyebrow. */
.cn-when__intro{max-width:min(94ch,88%);margin:clamp(18px,2.4vw,30px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.75vw,23px);line-height:1.34;letter-spacing:-.008em;color:var(--linen);text-wrap:pretty;}
.cn-when__intro p{margin:0;}
.cn-when__intro p + p{margin-top:clamp(12px,1.4vw,20px);}
/* The two labels are long, so the eyebrow steps down fluidly and its tracking
   eases with it — each stays on one line without escaping its column. */
.cn-when__eye--list{display:block;margin-bottom:clamp(12px,1.5vw,18px);color:rgba(242,242,240,.55);
  font-size:clamp(9.5px,.83vw,12px);letter-spacing:clamp(.05em,.09vw,.12em);}
/* Quiet caveat under both topic columns (Aug 31): secondary to the quotes, so
   it sits smaller, dimmer and in the sans, spanning the wash. */
.cn-when__note{max-width:74%;margin:clamp(22px,2.6vw,34px) 0 0;font-family:var(--sans);font-size:clamp(13px,1.05vw,14.5px);line-height:1.55;color:rgba(242,242,240,.6);text-shadow:0 1px 16px rgba(8,16,12,.9);text-wrap:pretty;}
.cn-when__close{max-width:none;margin:clamp(34px,4.4vw,52px) 0 0;padding-top:clamp(30px,3.8vw,46px);border-top:1px solid rgba(242,242,240,.2);
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,32px);line-height:1.3;letter-spacing:-.01em;color:var(--linen);text-wrap:pretty;}
.cn-when__close p{margin:0;}
.cn-when__close p + p{margin-top:clamp(16px,1.8vw,26px);}
.cn-when :focus-visible{outline-color:var(--linen);}
@media (max-width:1024px){
  .cn-when__groups{max-width:88%;}
  .cn-when__note{max-width:88%;}
  .cn-when__intro{max-width:88%;}
}
@media (max-width:720px){
  .cn-when__groups{grid-template-columns:1fr;max-width:none;gap:clamp(30px,6vw,40px);}
  .cn-when__note{max-width:none;}
  .cn-when__intro{max-width:none;}
  .cn-when__card{margin:clamp(14px,4vw,20px);}
  /* narrow card: a flat wash instead of the left-to-right one */
  .cn-when__scrim{background:linear-gradient(180deg,rgba(8,16,12,.74),rgba(8,16,12,.84));}
}

/* ---- Framed photo cards (What to expect + close) ------------------------
   One treatment sitewide: a rounded inset card floating on the linen ground,
   mirroring the Coaching / Consulting focus cards. "What to expect" reuses the
   shared .focus--photo (text over photo); the close is an image-forward card.
   Margins match the subpage framed focus card so the card sizes read the same. */
.cn-main .focus--photo{
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px) clamp(28px,4.5vw,56px);
  border-radius:18px;
}
/* Warmer, lighter scrim than the Focus Areas bands: photo 57 is a warm, gentle
   image and should read inviting, not heavy. Warm espresso base at lower
   opacity than the subpage focus scrim, still holding AA at the lightest wood
   pixel behind every text run (fern eyebrow, linen column heads + body, linen
   closing). */
.cn-main .focus--photo .focus-band__img{
  filter:sepia(.16) saturate(1.08) brightness(.92) contrast(1.02);
}
.cn-main .focus--photo .focus-band__scrim{
  background:linear-gradient(180deg,
    rgba(24,16,9,.93) 0%, rgba(24,16,9,.92) 20%, rgba(24,16,9,.76) 30%,
    rgba(24,16,9,.6) 48%, rgba(24,16,9,.56) 76%, rgba(24,16,9,.58) 100%);
}
@media (max-width:640px){
  .cn-main .focus--photo{margin:clamp(14px,4vw,20px);}
}

/* ---- Combined card — What to expect + How we meet on the one photo card ---
   Both groups now live inside the framed photo card (photo 57), each a centered
   eyebrow over three columns, reusing the shared .focus--photo grammar (fern
   eyebrow + icons, linen serif heads/bodies). Two changes here: a stronger,
   more even scrim, since the card is taller with two groups; and the gap between
   the groups. "However's easiest for you." is retired. */
.cn-main .focus--photo.cn-expect .focus-band__scrim{
  background:linear-gradient(180deg,
    rgba(24,16,9,.92) 0%, rgba(24,16,9,.9) 14%, rgba(24,16,9,.8) 34%,
    rgba(24,16,9,.72) 54%, rgba(24,16,9,.74) 78%, rgba(24,16,9,.8) 100%);
}
.cn-group--meet{margin-top:clamp(40px,5vw,64px);padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(242,242,240,.2);}
/* two ways to meet (phone came off Aug 29) — same cell width as the 3-up above,
   centred beneath it: six tracks, each block spanning two. */
.cn-group--meet .focus__grid{grid-template-columns:repeat(6,1fr);}
.cn-group--meet .focus__block:nth-child(1){grid-column:2 / span 2;}
.cn-group--meet .focus__block:nth-child(2){grid-column:4 / span 2;}
@media (max-width:900px){.cn-group--meet .focus__grid{grid-template-columns:1fr;}
  .cn-group--meet .focus__block:nth-child(1),.cn-group--meet .focus__block:nth-child(2){grid-column:auto;}}

/* ---- Closer — resolving statement on slate (full-bleed) -----------------
   The serif line lifted out of the What-to-expect band, given its own moment
   after How we meet: a slate ground, linen Cormorant, centered. Slate (rather
   than the near-black window band below) keeps the two dark closes distinct.
   Linen (#F2F2F0) on slate (#333330) clears AA. */
/* ---- Closer — resolving statement on linen (full-bleed) -----------------
   The serif line lifted out of the What-to-expect band, given its own moment
   after How we meet: a linen ground with grove Cormorant, centered. Grove
   (#1A3D2E) on linen (#F2F2F0) clears AA — green-by-ground: forest/grove on
   light, never on a pale green. */
/* the closing quote band keeps the room's linen (Aug 29): it's a pause between
   the teal consulting card and the dark photo close, and the wave hairlines read
   as texture on linen rather than thin on white. */
.cn-closer{position:relative;isolation:isolate;overflow:hidden;background:var(--linen);
  display:flex;flex-direction:column;justify-content:center;min-height:clamp(300px,34vw,440px);padding-block:clamp(48px,7vw,88px);}
.cn-closer .wrap{position:relative;z-index:1;}
.cn-closer__line{
  max-width:900px;margin:0 auto;text-align:center;text-wrap:balance;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4.4vw,54px);line-height:1.16;letter-spacing:-.012em;
  color:var(--grove);
}
@media (max-width:640px){.cn-closer__line{font-size:clamp(25px,7vw,34px);line-height:1.2;}}
/* Subtle wave sitting just under the statement. The strip is a window onto a
   taller SVG (the generator squashes to its box, so a short box made hairline
   ripples): drawing it at ~2.5x the window height and clipping keeps the wave
   amplitude readable while the band and the type stay the size they were. */
.cn-closer__wave{position:relative;overflow:hidden;width:100%;height:clamp(100px,12vw,140px);margin-top:clamp(0px,.6vw,6px);margin-bottom:calc(-1 * clamp(6px,1vw,14px));opacity:.28;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
@media (prefers-reduced-motion:no-preference){.cn-closer__wave .drift{animation:drift2 62s var(--ease) infinite alternate;}}
/* The generator draws into a 1440x400 box, artwork occupying ~11%-57% of its
   height, so the svg is sized ~1.75x the window: all four lines land inside the
   clip while amplitude stays readable. */
.cn-closer__wave svg{position:absolute;left:0;top:0;width:100%;height:clamp(175px,21vw,245px);}

/* ---- Close CTA — fallback form over photo 58 (full-width, site rule) -----
   All bottom CTAs are full-bleed. The form sits over the sunset-window image
   with a dark scrim for legibility; content is recolored for the dark ground,
   and the white input wells stay so the fields read clearly. */
.cn-ramp--photo{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  padding-block:clamp(72px,11vw,132px);
}
.cn-ramp__bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 52%;
  filter:sepia(.14) saturate(1.08) brightness(.86) contrast(1.02);
}
.cn-ramp__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(12,12,9,.82) 0%, rgba(12,12,9,.74) 28%, rgba(12,12,9,.68) 56%, rgba(12,12,9,.74) 100%);
}
.cn-ramp--photo .wrap{position:relative;z-index:2;}
.cn-ramp--photo .cn__hr{background:rgba(242,242,240,.4);}
.cn-ramp--photo .cn__leadin{color:var(--greige);}
.cn-ramp--photo .cn__formhead{color:var(--linen);}
/* The close carries one filled CTA (the form came off Aug 28) */
.cn-close__sub{max-width:none;margin:clamp(12px,1.6vw,18px) auto 0;color:var(--linen);font-size:clamp(17px,1.5vw,19px);line-height:1.6;text-wrap:pretty;}
/* the break collapses under ~560px so the two clauses reflow rather than orphan;
   the space before it in the markup keeps the sentences apart when it does */
@media (max-width:560px){.cn-close__sub br{display:none;}}
.cn-close__cta{margin-top:clamp(24px,3vw,34px);}
.cn-ramp--photo .cn-note{color:var(--greige);}
.cn-ramp--photo .cn-email{color:var(--greige);}
.cn-ramp--photo .cn-email a{color:var(--fern);border-bottom-color:rgba(125,185,154,.5);}
.cn-ramp--photo .cn-email a:hover{border-bottom-color:var(--fern);}
.cn-ramp--photo .cn-error{color:var(--linen);}
.cn-ramp--photo .cn-error a{color:var(--fern);border-bottom-color:rgba(125,185,154,.5);}
.cn-ramp--photo .cn-error a:hover{border-bottom-color:var(--fern);}
.cn-ramp--photo .cn-send:disabled:hover{background:none;color:var(--linen);border-color:var(--linen);}
.cn-ramp--photo .field > span{color:var(--linen);}
.cn-ramp--photo .cn-send{color:var(--linen);}
.cn-ramp--photo .cn-send:hover{background:var(--linen);color:var(--grove);border-color:var(--linen);}
/* Shared FormDone confirmation, recolored for the dark photo band */
.cn-ramp--photo .form--done i{color:var(--fern);}
.cn-ramp--photo .form--done h3{color:var(--linen);}
.cn-ramp--photo .form--done p{color:var(--greige);}
.cn-ramp--photo .form--done .form-done__email{color:var(--fern);border-bottom-color:rgba(125,185,154,.5);}
.cn-ramp--photo .form--done .form-done__email:hover{border-bottom-color:var(--fern);}
.cn-ramp--photo :focus-visible{outline-color:var(--linen);}

/* ---- One section-title scale (Aug 29) -----------------------------------
   Every section head on this page, including the shared process band and the
   closing CTA, sits on one type step so nothing reads as a different level.
   This block is the single source for their size; the rules above set colour. */
/* the page's single-column measure — see the note above .cn-ch__lede */
.cn-main{--col:840px;}
.cn-main .cn-when__h,.cn-main .cn-talks__h,.cn-main .cn-ch__h,
.cn-main .cn-appr__h,.cn-main .cn-work__h,.cn-main .cn-faq__h,.cn-main .cn-orgs__h,.cn-main .process__h,
.cn-main .cn__formhead{font-family:var(--serif);font-weight:400;font-size:clamp(31px,4.3vw,52px);line-height:1.05;letter-spacing:-.015em;}

/* ---- Responsive ---- */
@media (max-width:560px){
  .cn-form .form__row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .cn__hr,.cn__fallback{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* Hero (Aug 29): two paragraphs, no pull line — the consulting hand-off sits
   beside the CTA in the same flex row. */
.cn-hero__alt{font-size:15px}

/* ---- The work (directly under the Why-coaching card) ----------------------
   Same card grammar as the approach band, three up: the six lines are short so
   they hold a narrower column. Linen ground — it took over the retired Talks
   band's slot, so it keeps that alternation against the white band below. */
.cn-work{background:var(--linen);padding-block:clamp(62px,8.5vw,104px);}
.cn-work__head{max-width:var(--col);margin-bottom:clamp(30px,4vw,48px);}
.cn-work__eye{display:block;color:var(--h-det,var(--forest));}
.cn-work__h{font-family:var(--serif);font-weight:400;color:var(--slate);margin:clamp(10px,1.2vw,14px) 0 0;text-wrap:balance;}
.cn-work__intro{max-width:var(--col);margin:clamp(16px,2vw,24px) 0 0;color:var(--slate);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty;}
.cn-work__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,42px) clamp(28px,3.6vw,52px);}
.cn-work__card{border-top:1px solid var(--h-rule,rgba(45,106,79,.22));padding-top:clamp(16px,1.8vw,22px);}
.cn-work__t{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.8vw,23px);line-height:1.16;letter-spacing:-.01em;color:var(--grove);}
.cn-work__b{margin:clamp(8px,1vw,12px) 0 0;color:var(--slate);font-size:clamp(15px,1.25vw,17px);line-height:1.6;text-wrap:pretty;}
@media (max-width:1024px){.cn-work__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:720px){.cn-work__grid{grid-template-columns:1fr;}}

/* ---- Permission beat (between the outcomes and the process) ---------------
   White, centred, hairline top to mark the turn out of the from/to pairs. */
/* Linen ground against the white section above, so the change of ground is what
   marks the pause; padding deliberately deeper than any other band here. */
.cn-beat{background:var(--linen);padding-block:clamp(104px,16vw,200px);}
.cn-beat__line{max-width:none;margin:0 auto;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.4vw,56px);line-height:1.12;letter-spacing:-.014em;color:var(--grove);text-wrap:balance;}
@media (max-width:720px){.cn-beat__line{font-size:clamp(26px,7vw,34px);}}

/* ---- The approach (merged process + approach, on the page tint) ------------
   Open section, no boxes. The lede sits in the head's measure between the title
   and step 01; the clarifier sits under step 03, set apart by space — a note,
   not a feature. */
/* The four steps as a 2x2 arc, not four full-width rows — the section is half the
   height for the same copy, and the pairing reads as two halves of the work. Each
   cell stacks: numeral, name, italic summary, prose. Hairline over each cell, no
   boxes. Four columns would put the prose at ~30 characters a line, so two. */
.cn-ap__steps{margin-top:clamp(32px,4.2vw,52px);}

.cn-ap__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;column-gap:clamp(36px,4.6vw,80px);row-gap:clamp(30px,3.6vw,46px);}
/* cells stretch to their row, so a shorter phase leaves space rather than a
   ragged hairline */
.cn-ap__step{display:flex;flex-direction:column;padding-top:clamp(16px,1.9vw,22px);border-top:1px solid rgba(188,186,180,.7);}
.cn-ap__marker{margin-bottom:clamp(13px,1.6vw,18px);}
.cn-ap__no{display:block;font-family:var(--mono);font-size:clamp(13px,1.1vw,14px);letter-spacing:.08em;color:var(--forest);}
.cn-ap__st{margin:clamp(5px,.7vw,8px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.1vw,26px);line-height:1.1;letter-spacing:-.012em;color:var(--grove);}
/* the step's summary, italic under the name in the rail */
.cn-ap__slead{margin:clamp(7px,.9vw,10px) 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(15px,1.3vw,17px);line-height:1.34;letter-spacing:-.004em;color:var(--iron);text-wrap:pretty;}
.cn-ap__copy{max-width:none;}
.cn-ap__sb{margin:0;color:var(--slate);font-size:clamp(15px,1.25vw,16.5px);line-height:1.6;text-wrap:pretty;}
.cn-ap__sb + .cn-ap__sb{margin-top:clamp(10px,1.2vw,13px);}
@media (max-width:860px){
  .cn-ap__steps{grid-template-columns:1fr;grid-auto-rows:auto;}
}
/* The head is subpage.css's .process__head (capped at 760px), so the shared
   measure has to be set on the parent — the lede can't exceed it otherwise. */
.cn-ap .process__head{max-width:var(--col);}
.cn-ap__eye{display:block;margin-bottom:clamp(10px,1.2vw,14px);color:var(--h-det,var(--forest));}
.cn-ap__lede{max-width:var(--col);margin:clamp(14px,1.7vw,20px) 0 0;color:var(--slate);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty;}
/* No rule of its own — the step list already closes with one, so the clarifier is
   set apart by space alone. It reads as an answer, not a footnote: the heading is
   a normal small serif line in slate (same family as the step titles, a size
   down), and the body is slate-deep — lighter than section body copy but well
   clear of AA on the tint. */
.cn-ap__note{max-width:var(--col);margin:clamp(52px,6.6vw,84px) 0 0;}
.cn-ap__noteh{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.6vw,22px);line-height:1.22;letter-spacing:-.009em;color:var(--slate);}
.cn-ap__noteb{margin:clamp(9px,1.1vw,13px) 0 0;color:var(--slate-deep,#262624);opacity:.86;font-size:clamp(15px,1.25vw,16.5px);line-height:1.62;text-wrap:pretty;}

/* ---- The intro session (rebuilt Aug 31) -----------------------------------
   Same shell as the Why-coaching card: inset rounded dark panel on the white
   ground, left-set copy in one measure. Flat ground until the new photo lands;
   when it does, it goes behind .cn-expect__scrim with its quiet zone on the left
   (see the note in work-with-me-app.jsx). */
.cn-expect{background:var(--white);padding:0;}
.cn-expect__card{position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;padding-block:clamp(66px,9.5vw,116px);}
/* Dusk photograph: the dark, defocused leaf mass fills the lower left where the
   copy sits; the sun stays up and right. Scrim is heavier at the bottom-left for
   the rows and the button, lighter top-right so the light survives. */
/* Crop pulled up (30% vertical) so the near-black leaf mass — not the horizon —
   sits behind the head block; the sun stays in the top right corner. The
   horizontal scrim holds dark well past the copy measure and only opens in the
   last fifth, and the vertical one keeps the top band down where the eyebrow,
   headline and lede sit. */
.cn-expect__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;}
.cn-expect__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(8,12,10,.9) 0%,rgba(8,12,10,.88) 56%,rgba(8,12,10,.84) 76%,rgba(8,12,10,.5) 86%,rgba(8,12,10,.16) 96%,rgba(8,12,10,.08) 100%),
  linear-gradient(180deg,rgba(8,12,10,.3) 0%,rgba(8,12,10,.16) 34%,rgba(8,12,10,.24) 64%,rgba(8,12,10,.44) 100%);}
.cn-expect__card > .wrap{position:relative;z-index:2;}
/* Two columns inside the card: the copy holds the left ~66% (the dark side), the
   beat sits in the open right, bottom-aligned over the dark leaf mass. Below
   1024px the beat drops under the copy. */
/* The card sits inside its own margin AND the wrap gutter, so the default inner
   measure can't hold --col. Pull the card's gutter back to the page gutter so the
   copy starts on the page's left axis and the column can actually reach 840px
   beside the photo. */
.cn-expect__card > .wrap{padding-inline:var(--gutter);max-width:var(--maxw);}
.cn-expect__grid{display:grid;grid-template-columns:minmax(0,var(--col)) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end;}
.cn-expect__head{max-width:none;}
.cn-expect__beat{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,28px);line-height:1.22;
  letter-spacing:-.01em;color:var(--linen);text-wrap:pretty;text-shadow:0 1px 20px rgba(8,12,10,.85),0 0 4px rgba(8,12,10,.7);}
.cn-expect__eye{display:block;color:var(--h-sm,var(--fern));}
.cn-expect__h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.014em;color:var(--linen);margin:clamp(10px,1.4vw,16px) 0 0;text-wrap:balance;}
.cn-expect__lede{margin:clamp(16px,2vw,24px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.75vw,23px);line-height:1.34;letter-spacing:-.008em;color:var(--linen);text-wrap:pretty;}
/* The answers: label in a fixed left column, answer beside it, hairline between.
   Same measure as the lede so the whole block reads as one column of copy. */
.cn-expect__rows{margin:clamp(38px,5vw,60px) 0 0;}
.cn-expect__row{display:grid;grid-template-columns:clamp(140px,15vw,196px) minmax(0,1fr);gap:clamp(16px,2vw,28px);
  padding:clamp(15px,1.8vw,20px) 0;border-top:1px solid rgba(242,242,240,.2);}
.cn-expect__row:last-child{border-bottom:1px solid rgba(242,242,240,.2);}
.cn-expect__label{margin:0;padding-top:.28em;color:rgba(242,242,240,.55);}
.cn-expect__answer{margin:0;font-family:var(--sans);font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:rgba(242,242,240,.9);text-wrap:pretty;}
.cn-expect__bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,.8vw,9px);}
.cn-expect__bullets li{padding-left:16px;position:relative;}
.cn-expect__bullets li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--fern);}
.cn-expect__cta{margin-top:clamp(32px,4.2vw,48px);}
/* One breakpoint for both: the moment the copy goes full-width the ground has to
   be a flat wash, not a directional one. */
@media (max-width:1024px){.cn-expect__grid{grid-template-columns:1fr;gap:clamp(30px,4vw,44px);}
  .cn-expect__beat{max-width:34ch;}
  .cn-expect__scrim{background:linear-gradient(180deg,rgba(8,12,10,.8),rgba(8,12,10,.88));}}
@media (max-width:720px){
  .cn-expect__card{margin:clamp(14px,4vw,20px);}
  .cn-expect__lede,.cn-expect__rows{max-width:none;}
  .cn-work__head,.cn-work__intro,.cn-ch__lede,.cn-ap .process__head,.cn-ap__lede,.cn-ap__note{max-width:none;}
  .cn-expect__row{grid-template-columns:1fr;gap:7px;}
  .cn-expect__label{padding-top:0;}
}

/* ---- FAQ (end of THE APPROACH) --------------------------------------------
   The quietest element in the section: no card, no container, no ground change.
   Question a step under the step titles, hairline between items, plus/minus at
   the right of the row. Answers are display:none when closed (the [hidden] attr)
   so they stay findable and untabbable. */
/* Own band now: white ground between the dark intro card and the teal orgs card,
   so both of those read against light. */
.cn-faq-band{background:var(--white);padding-block:clamp(62px,8.5vw,104px);}
.cn-faq{max-width:var(--col);margin:0;}
.cn-faq__eye{display:block;margin-bottom:clamp(10px,1.2vw,14px);color:var(--h-det,var(--forest));}
.cn-faq__head{margin-bottom:clamp(30px,4vw,48px);}
/* size comes from the shared section-head rule below, with the other sections */
.cn-faq__h{margin:clamp(10px,1.2vw,14px) 0 0;font-family:var(--serif);font-weight:400;color:var(--slate);text-wrap:balance;}
/* same measure, size and leading as the other section ledes on the page */
.cn-faq__lede{margin:clamp(16px,2vw,24px) 0 0;max-width:var(--col);color:var(--slate);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty;}
.cn-faq__lede a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(45,106,79,.4);}
.cn-faq__lede a:hover{text-decoration-color:var(--forest);}
/* the head is also a div, so target the first item by adjacency, not :first-of-type */
.cn-faq__head + .cn-faq__item{border-top:1px solid rgba(188,186,180,.7);}
.cn-faq__item{border-bottom:1px solid rgba(188,186,180,.7);}
.cn-faq__qwrap{margin:0;font-weight:400;}
.cn-faq__q{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(18px,2.4vw,34px);
  width:100%;background:none;border:0;padding:clamp(16px,1.9vw,22px) 0;text-align:left;cursor:pointer;color:inherit;}
.cn-faq__qt{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.6vw,21px);line-height:1.22;letter-spacing:-.008em;color:var(--grove);text-wrap:pretty;}
.cn-faq__q:hover .cn-faq__qt{color:var(--forest);}
/* plus/minus drawn from two rules, so no icon font is involved */
.cn-faq__sign{position:relative;flex:0 0 auto;width:13px;height:13px;margin-top:.34em;}
.cn-faq__sign::before,.cn-faq__sign::after{content:"";position:absolute;background:var(--forest);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.cn-faq__sign::before{left:0;top:6px;width:13px;height:1px;}
.cn-faq__sign::after{left:6px;top:0;width:1px;height:13px;}
.cn-faq__item.open .cn-faq__sign::after{opacity:0;transform:scaleY(.2);}
.cn-faq__a{padding:0 0 clamp(20px,2.4vw,28px);max-width:74ch;}
.cn-faq__a p{margin:0;color:var(--slate);font-size:clamp(15px,1.25vw,16.5px);line-height:1.62;text-wrap:pretty;}
.cn-faq__a p + p{margin-top:clamp(11px,1.3vw,15px);}
.cn-faq__a a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(45,106,79,.4);}
.cn-faq__a a:hover{text-decoration-color:var(--forest);}
@media (max-width:720px){.cn-faq{max-width:none;}.cn-faq__a,.cn-faq__lede{max-width:none;}}

/* Hero motif pushed 10px further past the right edge (this page only). */
.cn-main .subhero__motif{inset:0 calc(-3% - 10px) 0 auto;}

/* ---- One body size for every section lede ----------------------------------
   The page had three: 22px sans in the hero, ~21px Cormorant in the two card
   ledes (optically smaller again — Cormorant's x-height runs short), and ~16px
   sans everywhere else. All section ledes now sit at one size in one face; the
   hero keeps its step above them. Overrides the per-section rules above. */
.cn-main .cn-when__intro p,.cn-main .cn-work__intro,.cn-main .cn-ap__lede,
.cn-main .cn-ch__lede,.cn-main .cn-expect__lede,.cn-main .cn-faq__lede{
  font-family:var(--sans);font-style:normal;font-weight:400;font-size:18px;line-height:1.6;letter-spacing:0;}
@media (max-width:720px){
  .cn-main .cn-when__intro p,.cn-main .cn-work__intro,.cn-main .cn-ap__lede,
  .cn-main .cn-ch__lede,.cn-main .cn-expect__lede,.cn-main .cn-faq__lede{font-size:17px;}
}