/* ============================================================ Clearmatter v2 — motion layer Loaded by the seven shipped v2 production pages. Everything is scoped to html.v2 (motion) and [data-cta] (CTA colour) so nothing here can reach the v1 pages. styles.css, home.css, connect.css, subpage.css, sections.jsx and the *-app.jsx content files are untouched — the v2 pages load the same content files, so copy edits flow through automatically. Sections 00 raspberry CTA (independent of the motion toggle) 01 motifs bound to scroll, not to a timer 02 serif headings wipe; body copy fades 03 blocks arrive in sequence 04 hairlines draw 05 scroll-linked scrim depth + photo settle (the "descent") 06 step / ledger entrance detail 07 accordions that open properly 08 spy-bar progress thread 09 review chip ============================================================ */ @property --wipe{syntax:'';inherits:false;initial-value:0%} html.v2{--v2-ease:cubic-bezier(.22,.61,.36,1)} /* ---- 00 · raspberry as the ACCENT, not a colour beside it --------------- Work with me already runs an accent scale — color-variants-v2.css, slot 2 = fuchsia #C0326F, selected by dd-chrome.js (?v=122 selects the existing quiet raspberry #9B3B54). It is live: `.ac .btn--solid` already fills with var(--acc), and em.acw in the hero is the same token. So raspberry must REPLACE those tokens rather than sit next to them — otherwise the hero word and the button are two different magentas one screen apart. #C42F52 is the loud raspberry: red-led rather than magenta-led, matched to fuchsia's lightness (5.4:1 for white text vs fuchsia's 5.35:1), so it swaps in at the same volume instead of quietening the page the way slot 3's #9B3B54 does. Hover deepens to #A61F3E (7.3:1), mirroring fuchsia's #A6115A. Home v2 loads none of this machinery, so the button rules are written directly as well. The footer CTA is deliberately left fern — the accent system's own rule, decided Aug 27: it sits on grove, and pink cannot letter there. */ html[data-cta=raspberry]{--acc:#C42F52;--acc-hov:#A61F3E;--acc-deep:#A61F3E;--acc-txt:#C42F52;--acc-light:#F3A2B0;--acc-on:#F2F2F0;--acc-tint:#F1E0E3} [data-cta=raspberry] .btn--solid{background:var(--acc);border-color:var(--acc);color:var(--acc-on)} [data-cta=raspberry] .btn--solid:hover{background:var(--acc-hov);border-color:var(--acc-hov);color:var(--acc-on)} [data-cta=raspberry] .btn--solid:focus-visible{outline-color:var(--acc-deep)} [data-cta=raspberry] .sheet__cta{background:var(--acc);border-color:var(--acc);color:var(--acc-on)} /* ---- 01 · motifs bound to scroll -------------------------------------- The v1 drift/breathe/ringdrift loops run on 46-80s timers regardless of the reader. JS sets --sp (0-1 progress through the motif's own section) and the motif moves only while the page moves. Loops stay as the no-JS fallback. */ .v2.js .hero__motif .drift,.v2.js .through__motif .drift,.v2.js .hero__rings .rings,.v2.js .hero__motif{animation:none!important} .v2 .motif{--sp:0;--px:0;--py:0} .v2 .hero__rings .rings{transform:translate(calc(var(--px)*-8px + var(--sp)*-30px),calc(var(--py)*-5px)) scale(calc(1 + var(--sp)*.055));transition:transform .9s var(--v2-ease)} .v2 .hero__motif{opacity:calc(.34 + var(--sp)*.16);transform:translateX(calc(var(--sp)*-26px));transition:opacity .9s var(--v2-ease),transform .9s var(--v2-ease)} .v2 .through__motif{transform:translateX(calc(var(--sp)*34px - 12px));opacity:calc(.42 + var(--sp)*.3);transition:transform 1s var(--v2-ease),opacity 1s var(--v2-ease)} .v2 .svc__drift{transform:translateX(calc(var(--sp)*-22px)) scaleY(calc(1 + var(--sp)*.04));transition:transform 1s var(--v2-ease)} .v2 .svc__align{transform:translateX(calc(var(--sp)*40px - 16px));transition:transform 1.1s var(--v2-ease)} .v2 .subhero__motif{transform:translate(calc(var(--px)*-9px + var(--sp)*-22px),calc(var(--py)*-6px)) scale(calc(1 + var(--sp)*.04));transition:transform .9s var(--v2-ease)} /* Welcome's waves: the band is only ~170px tall, masked and bottom-anchored, so vertical travel has nowhere to go — the readable motion is a horizontal pan, which slides the sine crests across the band. Widened past the section edges so the pan never exposes the end of the artwork. Translate only: scaleY re-rasterized the hairline strokes every frame (flicker), and the 1s transition kept re-easing toward a value that had already moved. */ .v2 .welcome__waves{left:-18%;right:-18%;transform:translate3d(calc(var(--sp)*-220px + 90px),0,0);transition:none;will-change:transform;backface-visibility:hidden} .v2 .cn-orgs__card .motif{transform:translateX(calc(var(--sp)*28px - 12px));transition:transform 1.1s var(--v2-ease)} /* ---- 02 · serif headings wipe ---------------------------------------- A left-to-right clip instead of the shared 22px fade-up: no DOM surgery, and it works at any line count. clip-path rather than a mask gradient — negative insets let the clip region sit outside the border box, so descenders and italic overhangs are never cut. (A mask clips to the border box, which tight Cormorant line-heights overflow.) The clip lives on .v2-wipe-armed, which JS adds only after the reveal sweep and the scroll listener are live. .v2-wipe alone leaves the heading visible, so a heading can never end up permanently clipped by JS stopping short. */ .v2 .v2-wipe{--wipe:0%;transition:--wipe 1.05s var(--v2-ease) .04s} .v2 .v2-wipe-armed{clip-path:inset(-.42em calc(100% - var(--wipe)) -.42em -.42em)} .v2 .v2-wipe.reveal{opacity:1!important;transform:none!important} .v2 .v2-wipe.in,.v2 .reveal.in .v2-wipe,.v2 .cn-ramp.in .v2-wipe,.v2 .v2-lit .v2-wipe{--wipe:102%} .v2 .v2-wipe.v2-lit{--wipe:102%} /* One axis per block. Where a heading wipes sideways, everything around it fades in place instead of also lifting — two directions at once reads as two unrelated things moving. */ .v2 .v2-hasw.reveal,.v2 .v2-hasw .reveal,.v2 .v2-hasw > .v2-i{transform:none!important} /* The closing head's accent word is hard-coded fuchsia in connect.css (a light step, for legibility on the dark photo band). Full raspberry measures 3.46:1 there — clears AA large text, but that is the number base fuchsia was rejected at, and the word sits beside linen at ~7:1, so it recedes instead of accenting. #D9536E is the middle: 4.85:1, and closer to the true accent. */ [data-cta=raspberry] .cn__formhead .acw{color:#D9536E} /* ---- 03 · blocks arrive in sequence ---------------------------------- v1 fades a whole head block as one object. JS tags the children in reading order and each takes its own beat: eyebrow, heading, copy, action. */ .v2 .v2-seq{opacity:1!important;transform:none!important} .v2 .v2-seq > .v2-i{opacity:0;transform:translateY(15px);transition:opacity .82s var(--v2-ease),transform .82s var(--v2-ease)} .v2 .v2-seq.in > .v2-i{opacity:1;transform:none} .v2 .v2-seq.in > .v2-i0{transition-delay:0s} .v2 .v2-seq.in > .v2-i1{transition-delay:.11s} .v2 .v2-seq.in > .v2-i2{transition-delay:.24s} .v2 .v2-seq.in > .v2-i3{transition-delay:.34s} .v2 .v2-seq.in > .v2-i4{transition-delay:.42s} .v2 .v2-seq.in > .v2-i5{transition-delay:.5s} /* where v1 already reveals each child individually, only the beat is added */ .v2 .reveal.v2-d1{transition-delay:.11s} .v2 .reveal.v2-d2{transition-delay:.22s} .v2 .reveal.v2-d3{transition-delay:.32s} .v2 .reveal.v2-d4{transition-delay:.4s} .v2 .reveal.v2-d5{transition-delay:.47s} /* a heading inside a sequenced block wipes on its own beat, not the block's */ .v2 .v2-seq > .v2-i.v2-wipe{opacity:1;transform:none;transition:--wipe 1.05s var(--v2-ease)} .v2 .v2-seq.in > .v2-i1.v2-wipe{transition-delay:.11s} .v2 .v2-seq.in > .v2-i2.v2-wipe{transition-delay:.24s} /* ---- 04 · hairlines draw --------------------------------------------- Same line, same position, same colour — it arrives left to right instead of switching on. The original border goes transparent and a pseudo draws it. */ .v2 .v2-rule{position:relative;border-top-color:transparent!important} .v2 .v2-rule::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--v2-rule-c,rgba(188,186,180,.7));transform:scaleX(0);transform-origin:left;transition:transform .95s var(--v2-ease)} .v2 .v2-rule.v2-drawn::before{transform:scaleX(1)} .v2 .cn-work__card{--v2-rule-c:var(--h-rule,rgba(45,106,79,.22))} .v2 .cn-expect__row{--v2-rule-c:rgba(242,242,240,.2)} .v2 .cn-expect__row:last-child{border-bottom-color:transparent!important} .v2 .cn-expect__row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(242,242,240,.2);transform:scaleX(0);transform-origin:left;transition:transform .95s var(--v2-ease) .1s} .v2 .cn-expect__row.v2-drawn::after{transform:scaleX(1)} .v2.js .cn__hr{transform:scaleX(0);transform-origin:center;transition:transform 1s var(--v2-ease),opacity 1s var(--v2-ease)} .v2 .cn-ramp.in .cn__hr{transform:scaleX(1)} /* ---- 05 · scrim depth + photo settle --------------------------------- The dark bands stop being a hard edge: JS sets --sc (0-1 approach) and the band's own scrim deepens while its photograph settles from 1.035 to 1. No new furniture — this is the existing scrim and the existing image. */ .v2 .cn-when__card,.v2 .cn-expect__card,.v2 .cn-ramp--photo,.v2 .beacon--full,.v2 .cta--photo{--sc:1} .v2 .cn-when__scrim,.v2 .cn-expect__scrim,.v2 .cn-ramp__scrim,.v2 .beacon__scrim,.v2 .cta__scrim{opacity:calc(.74 + var(--sc)*.26);transition:opacity 1.1s var(--v2-ease)} .v2 .cn-when__bg,.v2 .cn-expect__bg,.v2 .cn-ramp__bg,.v2 .beacon__img,.v2 .cta__bg{transform:var(--flip,) scale(calc(1.035 - var(--sc)*.035));transition:transform 1.6s var(--v2-ease)} /* The Why-coaching photograph is mirrored in connect.css (scaleX(-1)) so the seating lands on the open right side. Composed here rather than replaced — a bare scale() in the settle wiped the flip. At rest the crop is identical to v1. */ .v2 .cn-when__bg{--flip:scaleX(-1)} /* ---- 06 · ledger entrance ------------------------------------------- Nothing dims: the Why-coaching quotes and the ledger are scan lists, and dimming a scan list defeats it. The arrow just arrives with its row. (Removed: a dune tick under the step numerals that tracked the step at eye level — it appeared and disappeared as you scrolled without telling you anything.) */ .v2.js .cn-ch__arrow{opacity:0;transform:translateX(-7px);transition:opacity .7s var(--v2-ease) .12s,transform .7s var(--v2-ease) .12s} .v2 .cn-ch__row.in .cn-ch__arrow{opacity:1;transform:none} @media (max-width:720px){.v2 .cn-ch__row.in .cn-ch__arrow{transform:rotate(90deg)}.v2.js .cn-ch__arrow{transform:translateY(-7px) rotate(90deg)}} .v2 .commit__no{position:relative} .v2.js .commit__no::after{content:"";position:absolute;left:0;bottom:-6px;width:18px;height:1px;background:var(--dune);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--v2-ease) .3s} .v2 .commit__item.in .commit__no::after,.v2 .reveal.in .commit__item .commit__no::after{transform:scaleX(1)} /* ---- 07 · accordions that open properly ------------------------------ v1 Home animates a hard-coded max-height:360px (snaps whenever the copy is not 360px) and v1 FAQ toggles the `hidden` attribute with no animation at all. JS measures and animates the real height; these rules hand it control. */ .v2 .chal__panel{max-height:none!important;transition:none!important;visibility:visible!important;opacity:1!important;height:0;overflow:hidden;padding-bottom:0} .v2 .chal__item.open .chal__panel{padding-bottom:26px} .v2 .chal__panel > *{opacity:0;transform:translateY(9px);transition:opacity .5s var(--v2-ease),transform .5s var(--v2-ease)} .v2 .chal__item.open .chal__panel > *{opacity:1;transform:none;transition-delay:.17s} .v2 .cn-faq__a[hidden]{display:block!important} /* A specified height never compresses padding, so the closed panel would floor at its own padding-bottom (~22px x 5 items). Same pattern as .chal__panel. */ .v2 .cn-faq__item:not(.open) .cn-faq__a{padding-bottom:0} .v2 .cn-faq__a{overflow:hidden} .v2 .cn-faq__a > p{opacity:0;transform:translateY(9px);transition:opacity .5s var(--v2-ease),transform .5s var(--v2-ease)} .v2 .cn-faq__item.open .cn-faq__a > p{opacity:1;transform:none;transition-delay:.16s} /* dune thread down the open item, marking position in the list */ .v2 .chal__item,.v2 .cn-faq__item{position:relative} .v2 .chal__item::before,.v2 .cn-faq__item::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:1px;background:var(--dune-deep,#C49D6E);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--v2-ease)} .v2 .chal__item.open::before,.v2 .cn-faq__item.open::before{transform:scaleY(1)} @media (max-width:900px){.v2 .chal__item::before,.v2 .cn-faq__item::before{display:none}} /* ---- 08 · (removed) the spy bar carried a dune progress hairline; with the motif, the wipes and the drawing rules already in play it was one signal too many. The bar reads position on its own. */ /* ---- 12 · grounds and the floor --------------------------------------- Not scoped to .v2 — these are colour decisions, so the Motion toggle must not change them. The footer moves grove → midnight. Grove and slate-deep sit at luminance .038 and .019; on a scrolling page a slate footer would read as the grove band returning rather than as the page bottoming out. Midnight is .003 — a floor, not another band. Footer text gains contrast either way (greige ~11:1, fern ~9.7:1 on midnight), so the fern ghost CTA is unaffected. Both .ftr (styles.css) and .dd .ftr (deep-descent.css) paint a 0 100vh 0 100vh shadow that absorbs the area below the fold — it has to move with the background or it leaves a grove halo under the footer. The .dd selector is why Work with me kept grove while Home took midnight. Executive Coaching takes white so the three service rooms alternate light-dark-light between Home's two dark photo bands. */ .ftr,.dd .ftr{background:var(--midnight);box-shadow:0 100vh 0 100vh var(--midnight)} /* ---- 13 · the recognition CTA ----------------------------------------- Closes the ~4,800px CTA-free run after Why coaching. A solid raspberry button, same as every other primary action; the note above it ("Nowhere near all of them") already does the recognition work, so no new copy is needed. */ .cn-when__cta{margin-top:clamp(22px,2.6vw,32px)} /* ---- 14 · consulting hand-off, vertically centred --------------------- connect.css sets align-items:start, so the two columns hang from the top and the short left column reads as unmoored against the taller right one. Centred above the 820px breakpoint; below it the grid is a single column and start is correct. */ .cn-orgs__grid{align-items:center} @media (max-width:820px){.cn-orgs__grid{align-items:start}} /* ---- 11 · the two practice labels ------------------------------------ "Executive coaching" / "Personal coaching" are the only eyebrows on the site set in muted linen — connect.css overrides them to rgba(242,242,240,.55), which reads gray beside the fern "Why coaching" eyebrow directly above them. They divide the band into the two practices, so they are structural, not decoration. Returned to the eyebrow rule the rest of the site follows: fern on dark (9.2:1 on this card, against 5.3:1 for the muted linen). Size and tracking untouched. */ .v2 .cn-when__eye--list{color:var(--h-sm,var(--fern))} /* The intro-session row labels share that muted-linen weakness (.55 on the dusk photo) but not the job: these are
keys whose
answers are the content, and this card already carries fern on the bullet ticks. Four fern keys stacked would double the accent and pull the eye off the answers. So the fix is weight, not hue — .72 still sits clearly under the .9 answers, but reads as light type rather than gray. */ .v2 .cn-expect__label{color:rgba(242,242,240,.72)} /* ---- 10 · the niche line --------------------------------------------- "Coaching for leaders who are done editing themselves to fit the room." is the positioning line, and in v1 it takes the same lede treatment as the paragraph under it. It stays body copy — same family, size and leading — and carries the accent instead. #C42F52 on the subhero's white ground is 5.4:1, AA for normal text. */ SCOPED TO WORK WITH ME. .cn-main is that page's main only. Unscoped, this rule also hit Executive Coaching, Personal Coaching and Consulting, whose first hero paragraph is ordinary lede copy, not a positioning line — giving those pages a raspberry paragraph directly under the raspberry accent word, which is two jobs for one colour. */ .v2 .cn-main .subhero__body > p:first-child{color:var(--acc,var(--forest))} @media (prefers-reduced-motion:reduce){ .v2 .v2-wipe{--wipe:102%!important} .v2 .v2-wipe-armed{clip-path:none} .v2 .v2-seq > .v2-i,.v2 .cn-ch__arrow{opacity:1!important;transform:none!important} .v2 .v2-rule::before,.v2 .commit__no::after{transform:scaleX(1)!important} .v2.js .cn__hr{transform:none!important} .v2 .chal__panel{height:auto!important} .v2 .cn-faq__a[hidden]{display:none!important} .v2 [style*="--sc"]{--sc:1!important} } /* ---- 15 · Home, Sept 1 copy round ------------------------------------- Six rooms: Hero, Who I am, Why this work, Three doors, What changes, Close. Grounds alternate light-dark-light-light-dark, with Why this work as Home's one darker passage (the brief keeps it) on the photo band the retired "approach" room used. */ /* Home does not load dd-chrome or color-variants-v2.css, so .ac never applies and both of that file's hero rules have to be mirrored here. Without the second one, styles.css's green .b emphasis survives and the H1 renders in three colours: midnight, forest, raspberry. The brief allows one accent word per page, so .b holds the first line's colour and weight and only .acw carries the accent. (Precedent: color-variants-v2.css lines 67-68.) */ .hero__title .b{color:var(--midnight);font-weight:400} /* Subpages that do not load connect.css need the accent word coloured too — Executive and Personal Coaching carry .acw in the subhero H1. */ .subhero__title .acw{font-style:normal;font-weight:600;color:var(--acc,var(--forest))} /* About's accent word is .abt-hero__name, not .acw. Without this it stayed forest while the accent word on all five other pages is raspberry, which breaks the brief's site-wide "one accent word per page". */ .abt-hero__name{color:var(--acc,var(--forest))} .hero__title .acw{font-style:normal;font-weight:600;color:var(--acc,#C42F52)} /* The story's turn, inline in the prose: body font and weight, with only the three words "The human experience" in the accent. Home + About. */ .hline{color:var(--acc,#C42F52)} /* Why this work */ .why__h{max-width:18ch} .why__body{margin-top:clamp(20px,2.6vw,30px);max-width:60ch;display:grid;gap:clamp(12px,1.5vw,18px)} .why__body p{margin:0;color:var(--greige);font-size:clamp(16px,1.35vw,18px);line-height:1.62;text-wrap:pretty} /* Where to start — one recognition beat and one link each, no accordions */ .doors{background:var(--white);padding-block:clamp(72px,11vw,132px)} .doors__eye{display:block;color:var(--forest)} /* subgrid so label, title, body and link share rows across all three doors — "Business . Product . Experience" wraps to two lines and would otherwise push only that column's title down 20px. */ /* column-gap only: the shorthand would put a row-gap between every subgrid row, stacking on top of the authored margins and tripling the vertical rhythm inside each door. The margins own the vertical spacing. */ .doors__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:clamp(28px,3.6vw,56px);row-gap:0} .doors__item{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:start;align-content:start;border-top:1px solid rgba(45,106,79,.22);padding-top:clamp(16px,1.8vw,22px)} @supports not (grid-template-rows:subgrid){ .doors__grid{grid-template-rows:none} .doors__item{display:flex;flex-direction:column;align-items:flex-start} .doors__label{min-height:2.9em} } .doors__label{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--iron)} .doors__t{margin:clamp(8px,1vw,12px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.012em;color:var(--grove)} .doors__b{margin:clamp(12px,1.4vw,18px) 0 0;color:var(--slate);font-size:clamp(15px,1.25vw,17px);line-height:1.62;text-wrap:pretty} .doors__link{align-self:start;padding-top:clamp(18px,2.2vw,26px)} /* single column: subgrid row-sharing has nothing to align, and the items need a real gap between them again */ @media (max-width:900px){ .doors__grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(26px,4vw,38px)} .doors__item{display:flex;flex-direction:column} .doors__label{min-height:0} } /* What changes — prose, deliberately not a before/after ledger */ .changes{background:var(--linen);padding-block:clamp(72px,11vw,132px)} .changes__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start} .changes__eye{display:block;color:var(--forest)} .changes__h{margin:clamp(10px,1.2vw,14px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.06;letter-spacing:-.015em;color:var(--midnight);text-wrap:balance} /* Two sentences, two lines, at every width — each one is short enough to hold its own line down to the smallest viewport. */ .changes__h span{display:block} .changes__body{display:grid;gap:clamp(14px,1.6vw,20px);max-width:62ch} .changes__body p{margin:0;color:var(--slate);font-size:clamp(16px,1.35vw,18px);line-height:1.65;text-wrap:pretty} @media (max-width:900px){.changes__grid{grid-template-columns:1fr}} /* Executive Coaching runs What changes on white: the credibility band above it is the linen beat, and two linen bands in a row erase the seam. */ .changes--white{background:var(--white)} /* The focus head was only ever used on the dark photo band, so subpage.css sets it linen. Executive Coaching runs the section on the light ground now (the photo is an inset container), so the heading takes midnight, matching .changes__h and .sub-orgs--full .sub-orgs__h on the bands around it. */ .focus:not(.focus--photo) .focus__head-h{color:var(--h,var(--midnight))} /* Executive Coaching's second band: the focus photo as an INSET ROUNDED CARD on the white ground, the treatment Work with me runs on its own second band (.cn-when) — same 18px radius, same inset margins, same generous card padding. The even scrim from subpage.css stays: the three focus columns run the full card width, so a left-weighted wash would leave the third column on bare photograph. */ /* Personal Coaching's second band takes the same treatment (Sept 2). */ [data-room="leadership"] main,[data-room="life"] main,[data-room="consulting"] main{background:var(--white)} [data-room="leadership"] .focus--photo,[data-room="life"] .focus--photo,[data-room="consulting"] .focus--photo{margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;padding-block:clamp(80px,12vw,150px)} @media (max-width:720px){[data-room="leadership"] .focus--photo,[data-room="life"] .focus--photo,[data-room="consulting"] .focus--photo{margin:clamp(14px,4vw,20px);padding-block:clamp(56px,12vw,88px)}} /* The Sept 2 lede is four sentences, and the shared 33ch coaching measure stacked it five lines deep. Wider measure, same italic serif treatment. Personal Coaching's lede takes the same span. */ @media (min-width:901px){[data-room="leadership"] .focus--coaching .focus__head-sub,[data-room="life"] .focus--coaching .focus__head-sub{max-width:54ch}} /* ---- 16 · For organizations (Executive Coaching) ---------------------- New band. Light ground: the daylight rule allows one dark band per page and the challenges flood already is it. Two columns on the page measure, calm and plain rather than warm. */ .sub-orgs{background:var(--linen);padding-block:clamp(56px,8vw,96px)} .sub-orgs__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,4vw,60px);align-items:center} .sub-orgs__eye{display:block;color:var(--h-det,var(--forest))} .sub-orgs__h{margin:clamp(8px,1vw,12px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.9vw,36px);line-height:1.1;letter-spacing:-.012em;color:var(--h,var(--grove));text-wrap:balance} .sub-orgs__b{margin:0;color:var(--slate);font-size:clamp(16px,1.35vw,17px);line-height:1.6;text-wrap:pretty} .sub-orgs__b + .sub-orgs__b{margin-top:clamp(12px,1.4vw,18px)} /* --full: the Executive Coaching brief asks for the same visual weight as the other sections ("this is not a footnote"), so it takes the standard section rhythm and top-aligns its two columns, which a three-paragraph body needs. */ .sub-orgs--full{padding-block:clamp(72px,11vw,132px)} .sub-orgs--full .sub-orgs__grid{align-items:start;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px)} .sub-orgs--full .sub-orgs__h{font-size:clamp(28px,3.6vw,46px);line-height:1.06;letter-spacing:-.015em;color:var(--midnight)} .sub-orgs--full .sub-orgs__b{font-size:clamp(16px,1.35vw,18px);line-height:1.65;max-width:62ch} .sub-orgs__link{margin-top:clamp(16px,2vw,22px);color:var(--h-det,var(--forest))} .sub-orgs__link:hover{border-color:var(--h-det,var(--forest))} @media (max-width:820px){.sub-orgs__grid{grid-template-columns:1fr;align-items:start}} /* ---- 17 · Field Notes band (Personal Coaching) ------------------------ Head, one line, one link, no cards. Sept 2: the photograph is the BACKGROUND of the band, full-bleed, not a figure beneath it. Same left-weighted scrim grammar as the closing CTA on photo, so linen + greige clear AA over it. */ .fn-teaser--v2 .fn-teaser__head{margin-bottom:clamp(22px,3vw,32px)} .fn-teaser--v2 .fn-teaser__foot{margin-top:0} .fn-teaser--photo{position:relative;isolation:isolate;background:var(--midnight);border-block:0;overflow:hidden;display:flex;align-items:center;min-height:clamp(480px,58vh,660px);padding-block:clamp(88px,13vw,152px)} .fn-teaser__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:center 42%;filter:sepia(.18) saturate(1.12) brightness(.96) contrast(1.02)} .fn-teaser__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,9,.95) 0%,rgba(8,12,9,.9) 42%,rgba(8,12,9,.62) 68%,rgba(8,12,9,.3) 100%),linear-gradient(0deg,rgba(8,12,9,.62) 0%,rgba(8,12,9,.22) 40%,rgba(8,12,9,.05) 72%)} .fn-teaser--photo .wrap{position:relative;z-index:2;width:100%} .fn-teaser--photo .fn-teaser__head{max-width:640px;text-shadow:0 1px 10px rgba(8,12,9,.42)} .fn-teaser--photo .wa__eye{color:var(--h-sm,var(--fern))} .fn-teaser--photo .fn-teaser__h{color:var(--linen)} .fn-teaser--photo .fn-teaser__sub{color:var(--greige);max-width:52ch} .fn-teaser--photo .fn-teaser__foot .link{color:var(--linen);border-bottom-color:rgba(242,242,240,.42)} .fn-teaser--photo .fn-teaser__foot .link:hover{color:#fff;border-bottom-color:#fff} @media (max-width:720px){.fn-teaser--photo{min-height:clamp(420px,64vh,560px);padding-block:clamp(64px,14vw,96px)}} /* Personal Coaching's hero break: "You haven't / been the focus." Her call, and mobile pass 2 keeps it at every width — the balanced two-line break the phone step produced ("You haven't been / the focus.") stranded the noun. */ .subhero__br{display:inline} /* Personal Coaching's close: the heading is authored as three lines, and the shared 600px photo-band measure re-wrapped them into five. Wider measure and a slightly smaller display step for this page only, so the three lines hold from desktop down to the phone step, where the breaks come out and the sentence flows. */ [data-room="life"] .close-cta--photo .close-cta__inner{max-width:min(880px,100%)} [data-room="life"] .close-cta__h{font-size:clamp(34px,5.4vw,68px);line-height:1.02} @media (max-width:720px){[data-room="life"] .close-cta__h br{display:none}} /* ---- 17b · Permission band (Personal Coaching) ------------------------ One line, alone, at display scale. Linen against the photographic band above and the dark close below, so the change of ground is what marks the pause; the deepest padding on the page. No button, no eyebrow, no attribution: the only other thing in the band is the scroll-bound contour field, low and masked upward so it sits under the line rather than through it. */ .sub-beat{position:relative;isolation:isolate;overflow:hidden;background:var(--linen);padding-block:clamp(116px,17vw,224px)} .sub-beat__field{position:absolute;inset:auto 0 -6% 0;height:44%;z-index:0;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .sub-beat__field svg{display:block;width:100%;height:100%} .sub-beat .wrap{position:relative;z-index:1} /* Authored breaks, so the sentence lands as three lines of near-equal length at any width above the phone step; balance handles it below that. The line sits 30px above its centred position — air between it and the contour field, with the band's height unchanged (a relative offset, so nothing reflows). */ .sub-beat__line{position:relative;top:-83px;margin:0 auto;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.6vw,86px);line-height:1.0;letter-spacing:-.022em;color:var(--h,var(--grove));text-wrap:balance} .sub-beat__line em{font-style:italic;font-weight:400} @media (max-width:720px){ .sub-beat{padding-block:clamp(88px,17vw,132px)} .sub-beat__line{font-size:clamp(30px,8.4vw,44px);letter-spacing:-.018em;top:-42px} .sub-beat__line br{display:none} .sub-beat__field{height:36%} } /* ---- 18 · sub-eyebrow + the quiet aside -------------------------------- */ .subhero__subeye{display:inline;margin-left:.5em;font-size:11.5px;font-weight:400;letter-spacing:.18em;color:var(--iron)} .subhero__subeye::before{content:"·";margin-right:.5em} .sub-aside{background:var(--white);padding-block:0 clamp(40px,6vw,72px)} .sub-aside__p{margin:0;max-width:var(--col,58ch);font-family:var(--sans);font-size:clamp(14.5px,1.15vw,16px);line-height:1.65;color:var(--iron);text-wrap:pretty;padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--h-rule,rgba(45,106,79,.22))} /* Signals line: "intro session" links to the Proton booking page, in fern on the grove flood — the one booking link the coaching pages keep in the body. (A nowrap on the link was tried and rolled back: it read worse.) */ .chalsec__cta .chalsec__link{color:var(--h-sm,var(--fern));border-bottom:1px solid rgba(125,185,154,.45);transition:border-color .3s var(--ease),color .3s var(--ease)} .chalsec__cta .chalsec__link:hover{color:var(--h-sm,var(--fern));border-bottom-color:var(--h-sm,var(--fern))} /* ---- 18b · hero secondary link + the credibility band ------------------ The hand-off link that sits beside the hero's filled CTA (Work with me already runs this pair; Executive Coaching now does too), and the one-line aside between the Signals accordion and What changes. */ .subhero__alt{font-size:15px} .sub-cred{display:block;background:var(--linen);padding-block:clamp(64px,9vw,112px)} /* Integrated aside, not a strip: pull-quote serif (between body and H2) running the FULL width of the band in one column, with the portrait in the attribution row beneath. No hairline — the generous space above and below is the separation. */ .sub-cred__inner{max-width:none} /* The green-ground portrait, in colour: the fern backdrop is on-palette, so the disc reads against linen without a ring and without the b&w treatment. */ .sub-cred__portrait{width:clamp(56px,4.4vw,68px);height:clamp(56px,4.4vw,68px);border-radius:50%;object-fit:cover;object-position:center 22%;flex:none} .sub-cred__p{margin:0;max-width:none;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,46px);line-height:1.24;letter-spacing:-.015em;color:var(--h,var(--grove));text-wrap:pretty} .sub-cred__by{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px);margin:clamp(24px,3vw,40px) 0 0} .sub-cred__byline{margin:0;font-family:var(--sans);font-size:13px;line-height:1.55;letter-spacing:.01em} .sub-cred__name{display:block;font-weight:500;color:var(--slate)} .sub-cred__role{display:block;color:var(--iron)} .sub-cred__role + .sub-cred__role{color:var(--iron)} @media (max-width:640px){.sub-cred__p{font-size:clamp(24px,7vw,30px)}} /* ---- 19 · plum and ink teal off the v2 pages --------------------------- hue-skin.css gives Personal Coaching a plum room and Consulting an ink-teal one. The brief retires both as primary colours, so on v2 every room runs the green (pine) set and the two pages keep their difference through ground, motif and photography rather than hue. Only the tokens are overridden, so every rule that consumes them follows without being touched. */ [data-room="life"],[data-room="consulting"]{ --h:#133024;--h-det:#2D6A4F;--h-sm:#93C7AB;--h-body:#C2D2C8; --h-line:#7DB99A;--h-wash:#EEF3F0;--h-rule:rgba(45,106,79,.22); --h-flood-rule:rgba(147,199,171,.28); } /* ---- 20 · Home closing block ------------------------------------------ The button sat flush against the end of the paragraph (0px). */ .cta--photo .cta__block .btn{margin-top:clamp(26px,3.4vw,40px)} /* The mark is forest already: cm-mark-full.svg carries fill="#2D6A4F" on its root, which is --forest. The subpage close marks were never tinted, so they needed nothing. Only Home whitens it for the photo band (home.css line 124), so removing that filter is the whole change. Same precedent as deep-descent.css line 215, which does exactly this for .dd pages. */ .cta--photo .cta__mark{filter:none;opacity:1} /* ---- 21-22 · About v2 -------------------------------------------------- Moved to about-v2.css, which owns About's whole block system (scoped to .abt-main). The rules that lived here targeted an earlier markup — several of their selectors no longer existed on the page, and the ones that did fought about.css for the same properties. */ /* ---- 23 · Seed (Personal Coaching) ------------------------------------ Keeps the shared right-anchored motif box — no positional override. The archetype's origin belongs off the right trim; visibility is handled in the geometry (taller viewBox, longer reach) rather than by moving it inward. */ .subhero__motif--seed{opacity:.8} .motif-svg{display:contents} /* the dune arm must outrank hue-skin's blanket stroke on .subhero__motif svg line */ [data-room] .subhero__motif--seed svg line.seed-accent{stroke:var(--dune-deep,#C49D6E)} @media (max-width:820px){.subhero__motif--seed{opacity:.5}} /* ---- 24 · About v2, section heads and the divider --------------------- Also moved to about-v2.css. The .abt-div divider it defined was never rendered by the page. */ /* ---- 25 · Home, Sept 2 copy round ------------------------------------- Same six rooms; the copy changed and the hero's actions changed with it. Book an Intro Session now appears once on Home, in the close, so the hero carries two routing links instead: filled to Work with me, text to Consulting. Where to start gains a serif heading so every Home band opens the way Work with me's do (eyebrow, heading, copy), and closes on the centred note under the cards. */ .hero__eye{display:block;margin-bottom:clamp(14px,1.9vw,22px)} .hero__sub{display:grid;gap:clamp(11px,1.3vw,16px);max-width:52ch} .hero__sub p{margin:0} .hero__alt{align-self:center} .doors__head{max-width:760px;margin-bottom:clamp(28px,3.6vw,48px)} .doors__h{margin:clamp(10px,1.2vw,14px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.06;letter-spacing:-.015em;color:var(--midnight);text-wrap:balance} .doors__note{margin:clamp(34px,4.4vw,58px) auto 0;max-width:54ch;text-align:center;font-size:clamp(14.5px,1.15vw,16px);line-height:1.65;color:var(--iron);text-wrap:pretty} .doors__note a{color:var(--acc,#C42F52);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(196,47,82,.35);transition:border-color .3s var(--ease)} .doors__note a:hover{border-bottom-color:var(--acc,#C42F52)} .cta--photo .cta__block .cta__lede--last{margin-top:clamp(12px,1.4vw,18px)} /* Why this work, read as beats: one sentence per line, grouped. Wrapped beats stay flush left; the extra space between beats is what separates them, so a wrap reads as part of the sentence above it rather than a new beat. */ .why__body--beats{max-width:min(100%,94ch);gap:clamp(20px,2.4vw,30px)} .why__beats{display:grid;gap:clamp(6px,.7vw,9px)} .why__beats span{display:block;text-wrap:pretty} /* ---- 20 · Mobile: heading/body bands stack below 768 ------------------- Every "heading left, body right" band (What changes, For organizations on Executive Coaching and Work with me, Talks) collapses to one column under 768px: eyebrow, heading, then body at full width. Heading sizes are untouched; desktop is untouched. Declared here, last in the file, so it also wins over the variant selectors that re-state their columns after the earlier per-section breakpoints (.sub-orgs--full did exactly that, which is why For organizations stayed two-up on a phone). */ @media (max-width:767px){ .changes__grid, .sub-orgs__grid, .sub-orgs--full .sub-orgs__grid, .cn-talks__grid, .cn-orgs__grid{grid-template-columns:1fr;align-items:start} .sub-orgs__grid,.sub-orgs--full .sub-orgs__grid{gap:clamp(18px,4vw,26px)} .changes__grid,.cn-talks__grid,.cn-orgs__grid{gap:clamp(20px,4.5vw,30px)} .sub-orgs__b,.changes__body,.changes__body p,.sub-orgs__h,.changes__h{max-width:none} } /* ---- 26 · Section nav: one sliding underline (desktop too) -------------- Each item used to pop its own 2px border on becoming current. The bar now carries a single ink that animates position and width between items, and v2-motion.js scrolls the strip so the current item stays in view on phones. */ .spy-bar__list{position:relative} .spy-bar--ink .spy-bar__list a[aria-current]{border-bottom-color:transparent} .spy-bar__ink{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--forest);opacity:0;pointer-events:none;transform:translateX(0);transition:transform .25s ease-out,width .25s ease-out,opacity .2s ease-out} @media (prefers-reduced-motion:reduce){.spy-bar__ink{transition:none}} /* ============================================================ 27 · MOBILE PASS (below 768px) One block, last in the file, so it wins over the per-section breakpoints scattered through styles.css / subpage.css / connect.css. Desktop is not touched. Nothing here changes copy — only size, measure and stacking. ============================================================ */ @media (max-width:767px){ /* -- a · type. Display sizes hold on phones: the H1 floor is 44px and the H2/display floor is 38px, so the pop between heading and body matches desktop instead of collapsing toward it. */ .hero__title,.subhero__title,.abt-hero__title,.abt-main .abt-hero__lead .abt-hero__title{font-size:clamp(44px,11.5vw,60px);line-height:1.05;letter-spacing:-.02em} #main h2.serif,.changes__h,.sub-orgs__h,.close-cta__h,[data-room="life"] .close-cta__h,.abt-main .abt-head__h,.cta__title,.cn__formhead,.through__quote,.cn-closer__line,.cn-beat__line,.doors__h{font-size:clamp(38px,9.6vw,52px);line-height:1.1} .sub-beat__line{font-size:clamp(38px,10.5vw,48px);line-height:1.04} .legal__title{font-size:clamp(44px,11.5vw,60px);line-height:1.04} /* Focus blocks are card-level heads inside a band, not section heads: they keep their own step down from the H2 floor above. */ #main h2.focus__h.serif{font-size:clamp(30px,7.6vw,36px);line-height:1.06} /* -- a/b · body and lead paragraphs: 17px, and the full container width. The desktop measures (ch caps and column widths) are dropped so text runs to the same gutters as the buttons. */ .hero__sub p,.subhero__body p,.abt-hero__lede,.abt-main .abt-lede,.abt-main .abt-bio,.abt-main .abt-bio p, .changes__body p,.sub-orgs__b,.focus__head-sub,.focus__b,.chal__panel p,.process__b, .svc__body p,.welcome__body p,.cta__body,.cta__lede,.sub-aside__p,.doors__note, .cn-when__intro p,.cn-work__intro,.cn-ap__lede,.cn-ap__sb,.cn-ch__lede,.cn-expect__lede, .cn-faq__lede,.cn-faq__a p,.cn-talks__item,.cn-appr__b,.wa__list li,.legal__body p,.through__quote-2{font-size:17px;line-height:1.6} .through__quote-2{line-height:1.3} .hero__inner,.hero__sub,.subhero__inner,.subhero__body,.focus__head-sub,.changes__body,.sub-orgs__b, .abt-main .abt-head,.abt-main .abt-lede,.abt-main .abt-bio,.abt-main .abt-creds__grid, .process__list,.doors__head,.doors__note,.through__quote,.through__quote > span:first-child,.through__quote-2, .cn-ch__lede,.cn-ch__ledger,.cn-when__intro,.cn-when__note,.cn-when__groups,.cn-work__intro, .cn-ap__lede,.cn-appr__head,.cn-expect__lede,.cn-faq,.cn-faq__a,.cn-faq__lede,.cn__fallback, .sub-cred__inner,.sub-aside__p,.cta__block,.welcome__body,.svc__body{max-width:none} /* -- c · hero padding. Pass 1 halved it to 88px and overcorrected (H1 against the header); 140px fixed the top but left the hero tight top and bottom. 176px above and ~104px below gives the opening its air back: the H1 lands about a third of the way down the first screen, and the hero breathes before the next band instead of butting into it. */ .hero{padding-block:176px clamp(88px,15vw,116px)} .subhero{padding-block:176px clamp(80px,14vw,108px)} .abt-hero{padding-block:176px clamp(80px,14vw,108px)} .legal__sec{padding-block:176px clamp(88px,15vw,116px)} .subhero__motif--currents{top:184px;bottom:clamp(80px,14vw,108px)} /* -- e · the first band runs to the top of the page, under the header. */ #main{padding-top:0} #main > *:first-child{margin-top:0} /* -- f · no viewport-height band sizing on phones: iOS re-lays the page out every time the address bar collapses. Fixed pixel floors instead; the photographs are already positioned children, not backgrounds. */ .fn-teaser--photo{min-height:440px} .close-cta--photo{min-height:480px} .beacon__band{min-height:420px} .cta--photo{min-height:520px} .photostrip img{height:230px} .hero,.subhero,.abt-hero{min-height:0} /* -- 4a · attribution: four lines, no middot. */ .sub-cred__seg{display:block} .sub-cred__sep{display:none} /* -- 4b · Consulting's sub-eyebrow drops to its own line, no dot. */ .subhero__subeye{display:block;margin-left:0;margin-top:.55em} .subhero__subeye::before{content:none} /* -- 4d · Personal Coaching's permission band: the line centres in the band and the band loses about a third of its height. On desktop the line rides 83px above centre to clear the contour field; on a phone that offset plus the deep padding left a screen of empty linen under it. */ .sub-beat{padding-block:clamp(40px,11vw,56px)} .sub-beat__line{top:0} .sub-beat__field{height:30%} /* -- 4e · Work with me, The shift: one white card per pair. The arrow goes (its rotation was the only cue that the row was a pair); a hairline inside the card carries the before/after turn instead. */ .cn-ch__list{display:flex;flex-direction:column;gap:12px} .cn-ch__row{display:block;background:var(--white);border-radius:6px;padding:clamp(16px,4.4vw,20px)} .cn-ch__arrow{display:none} .cn-ch__from{display:block;font-size:14px;line-height:1.45;color:var(--iron)} .cn-ch__to{display:block;margin-top:clamp(10px,2.6vw,13px);padding-top:clamp(10px,2.6vw,13px);border-top:1px solid var(--h-rule,rgba(45,106,79,.22));font-size:21px;line-height:1.2} } /* ============================================================ 28 · MOBILE PASS 2 (Sept 3) Ten follow-ups from the second phone walk. Desktop is only touched where a line asked for it (item 3's header ground, item 10's focus rings). ============================================================ */ /* ---- 3 · the strip above the header ---------------------------------- No computed colours. The header OWNS the safe-area sliver (padding-top) and, while the page is at scroll 0, paints the hero's visible top colour, so the band between the browser chrome and the bar cannot disagree with the hero. --top-bg is also what the html/body overscroll gutter reads, and every page declares a matching . */ html{--top-bg:var(--linen)} html[data-room]{--top-bg:var(--white)} .hdr{padding-top:calc(var(--hdr-pad,20px) + env(safe-area-inset-top,0px))} /* The bar itself stays TRANSPARENT at scroll 0. Painting it --top-bg was tried and rolled back: an opaque plate can only ever disagree with the hero it sits on (it read as a white band above the hero on Work with me, with the motif crossing the seam). The sliver above the bar is handled by the safe-area padding, the html/body ground and the page's theme-color instead. */ /* ---- 10c · visible focus on the dark bands --------------------------- styles.css lights the ring linen on the v1 dark sections; v2 added more (the Signals flood, the Why-coaching card, the photo closes). Forest-on-grove was invisible. */ .chalsec--flood :focus-visible,.cn-when__card :focus-visible,.cn-expect__card :focus-visible, .cta--photo :focus-visible,.beacon--full :focus-visible,.fn-teaser--photo :focus-visible, .close-cta--photo :focus-visible,.focus--photo :focus-visible{outline-color:var(--linen)} /* ---- 2 · two-beat headings ------------------------------------------- v2-motion.js wraps each sentence of a two-sentence heading in a .tb span on phones (copy untouched, no
authored). Blocks only at the phone step, so a resize back up restores the flowed sentence. */ .v2-twobeat .tb{display:inline} @media (max-width:767px){ /* -- 2 · line balance: no last-line orphans on display type. */ .hero__title,.subhero__title,.abt-hero__title,.abt-main .abt-hero__lead .abt-hero__title, #main h2,#main h2.serif,.changes__h,.sub-orgs__h,.close-cta__h,.abt-main .abt-head__h, .cta__title,.cn__formhead,.cn-closer__line,.cn-beat__line,.doors__h,.cn-when__h, .process__h,.approach__h,.cn-faq__h,.focus__head-h,.legal__title{text-wrap:balance} .v2-twobeat .tb{display:block;text-wrap:balance} /* two-beat heads carry slightly tighter tracking so a long sentence holds one line a step or two higher than it otherwise would */ .v2-twobeat{letter-spacing:-.018em} /* -- 2b · the Signals kicker ("Perhaps you're feeling something like this", "Perhaps you're here because") is an eyebrow, so the heading balance rule above does not reach it. It needs the FULL width — letter-spaced uppercase at ~11px runs ~378px, so it wraps to exactly two lines at every phone width — and balance then evens them, breaking after "feeling". (A ch-based measure was tried and cut it to four lines: ch is the digit advance, which badly under-reads tracked-out caps.) */ .chalsec__head .eyebrow{display:block;max-width:none;text-wrap:balance} /* -- 2e · hero copy wash + motif weight on phones — Home's construction, applied to every motif page. Home works because two things happen at once (styles.css 761-772): the wash box extends past the copy on all four sides (-18% -4% -20% -42%), so its own edges sit outside the hero's clip and no straight edge is ever visible, holding solid to 64% and then fading out to the right; and the rings step down to 54% width at .4 opacity so what crosses the copy is faint. subpage.css has the same wash but authored in LINEN for v1's linen hero, and its motifs stay at full weight. Same geometry here, in the room's white, with the motif brought to Home's weight. */ .subhero__inner::before,[data-room] .subhero__inner::before{ content:"";position:absolute;z-index:-1;pointer-events:none; inset:-18% -4% -20% -42%;width:auto; -webkit-mask-image:none;mask-image:none; background:linear-gradient(90deg,#FFF 0%,#FFF 64%,rgba(255,255,255,.85) 80%,rgba(255,255,255,0) 100%)} .subhero__motif,.subhero__motif--converge,.subhero__motif--currents,.subhero__motif--seed{width:54%;opacity:.4} /* Work with me only: the Converge apex sits inset from the element's own right edge (the viewBox carries padding), so -2% still rendered it on screen. Just the tip goes past the trim — the rays still reach the edge and fan back in. */ .cn-main .subhero__motif--converge{right:-6%} /* Consulting only: the Align motif's upper arms crossed the two-line eyebrow, so it starts below it. */ .subhero__motif--align{top:200px} /* -- 6 · Work with me, the Why-coaching card photo. The card runs ~1750px tall on a phone, so object-fit:cover was showing a 14%-wide vertical slice of a 6016px source — the plant cropped to a sliver. The photograph becomes a top band tall enough to hold the whole plant (cover scale ~0.12, never past 1:1), anchored to it, fading into the card's own dark ground for the rest of the height. */ .cn-when__bg{top:0;bottom:auto;height:clamp(420px,92vw,520px);object-position:0% 50%; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)} }