/* Dalby Online: pages.css  (language: organic)
   /inside-a-lesson (les-), /safe-practice (sf-), /contact (ct-). Tokens come from site.css; nothing here redefines a shared class.

   Contrast, relative-luminance ratios (AA = 4.5 text, 3 large text and UI):
     ink on paper 12.79 | paper-2 11.50 | surface 13.93 | sage 9.26 | rose 8.28
     muted on paper 5.65 | paper-2 5.08 | surface 6.15   (never muted on sage or rose)
     clay-d on paper 6.82 | paper-2 6.13 | surface 7.43 | sage 4.94   (eyebrows, links)
     white on clay 6.06 | white on clay-d 7.93 | white on olive 6.8
     earth-ink on earth 10.03 | rose on earth 6.50 | sage on earth 7.26 | earth-soft on earth 7.06
     earth-ink on olive 6.25 (the lesson CTA band uses earth-ink only; rose is for the button face, ink on rose 8.28)
   Motion: transform and opacity only. Every p- keyframe is switched off in the reduced-motion block at the end. */

/* ---------- shared bits ---------- */
.p-ico{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@keyframes p-ring{0%{transform:scale(.92);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes p-fill{from{transform:scaleX(0)}to{transform:scaleX(.38)}}
@keyframes p-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes p-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes p-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* =====================================================================
   /inside-a-lesson  (les-)
   ===================================================================== */

/* -- hero: asymmetric, photo in a blob with a floating note -- */
.les-hero{padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,112px)}
.les-hero-grid{display:grid;gap:44px clamp(32px,5vw,72px);align-items:center}
.les-hero-grid > *{min-width:0}
.les-hero-copy .lead{margin-bottom:1.4em}
.les-facts{display:grid;gap:8px;margin:1.9em 0 0;padding:0;list-style:none;font-weight:500}
.les-facts li{position:relative;padding-left:1.75em}
.les-facts li::before{content:"";position:absolute;left:0;top:.48em;width:.8em;height:.8em;border-radius:var(--r-blob);background:var(--olive)}
.les-hero-photo{position:relative;width:100%;max-width:520px;margin-inline:auto}
.les-hero-photo .blob img{object-position:50% 30%}
.les-note{position:absolute;left:-4px;bottom:9%;z-index:2;max-width:15em;margin:0;padding:.85em 1.1em;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-size:15px;line-height:1.4;animation:p-bob 7s ease-in-out infinite}
@media (min-width:900px){
  .les-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .les-note{left:-11%}
}

/* -- the lesson frame (centrepiece): full-bleed paper-2 band -- */
.les-stage{padding:clamp(56px,8vw,112px) 0;background:var(--paper-2)}
.les-stage-head{display:grid;gap:28px clamp(28px,5vw,64px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.les-stage-head > *{min-width:0}
.les-behind{margin:0;width:100%}
@media (min-width:900px){.les-stage-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

.les-fig{margin:0}
.les-frame{position:relative;overflow:hidden;border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--surface);box-shadow:0 44px 70px -50px rgba(67,54,43,.6)}
.les-bar{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 16px;border-bottom:1.5px solid var(--line);font-size:14px;line-height:1.3}
.les-dots{display:flex;flex:none;gap:6px}
.les-dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--sage)}
.les-bar-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.les-bar-m{flex:none;color:var(--muted);white-space:nowrap}
.les-body{display:grid;grid-template-columns:minmax(0,1fr)}
.les-main{display:grid;gap:14px;align-content:start;min-width:0;padding:clamp(12px,2vw,20px)}

.les-pin{position:absolute;z-index:4;top:8px;left:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--clay-d);color:#fff;font:700 13px/1 var(--sans);box-shadow:0 0 0 3px var(--surface)}
.les-pin-out{top:-10px;left:-10px}
.les-pin-in{position:static;box-shadow:none}

.les-video{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-s);color:var(--earth-ink);background:linear-gradient(150deg,var(--earth) 18%,var(--olive) 170%)}
.les-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(67,54,43,.78),rgba(67,54,43,0) 46%)}
.les-poster{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.les-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.les-play i{position:relative;display:block;width:clamp(56px,9vw,76px);aspect-ratio:1;border-radius:50%;background:var(--surface)}
.les-play i::before{content:"";position:absolute;inset:0;margin:auto;width:34%;height:38%;background:var(--clay-d);clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(12%)}
.les-play i::after{content:"";position:absolute;inset:-2px;border:2px solid var(--rose);border-radius:50%;animation:p-ring 2.8s ease-out infinite}
.les-cap{position:absolute;left:14px;right:14px;bottom:26px;z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;font-size:clamp(12.5px,1.5vw,14.5px);line-height:1.3;color:var(--earth-ink)}
.les-cap b{min-width:0}
.les-cap .num{flex:none}
.les-prog{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;height:5px;border-radius:5px;background:rgba(244,237,227,.32)}
.les-prog i{position:absolute;inset:0;border-radius:inherit;background:var(--rose);transform-origin:left center;transform:scaleX(.38)}
html.js .les-prog i{transform:scaleX(0)}
html.js .les-fig.in .les-prog i{animation:p-fill 2.6s var(--ease) .4s both}

.les-under{display:grid;gap:18px 14px}
.les-under > *{min-width:0}
.les-pdf,.les-task{position:relative;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--paper)}
.les-pdf-h{display:flex;align-items:center;gap:8px;margin:0 0 .55em;font-size:15px;line-height:1.3}
.les-pdf-h .p-ico{width:22px;height:22px;color:var(--clay-d)}
.les-tag{margin-left:auto;padding:.1em .75em;border-radius:999px;background:var(--sage);font:700 12px/1.6 var(--sans);letter-spacing:.06em}
.les-kit{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.4}
.les-kit li{position:relative;padding-left:16px}
.les-kit li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--olive)}
.les-task{background:var(--sage);border-color:var(--sage)}
.les-task-k{margin:0 0 .3em;font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d)}
.les-task p:last-child{margin:0;font-size:15px;line-height:1.5}
@media (min-width:560px){.les-under{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}

.les-rail-wrap{min-width:0;border-top:1.5px solid var(--line)}
.les-rail-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:14px 18px 10px;font:700 12.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--clay-d)}
.les-rail-m{margin-left:auto;font-weight:500;font-size:13.5px;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.les-rail{display:grid;gap:2px;margin:0;padding:0 8px 12px;list-style:none}
.les-mod{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 10px;border-radius:var(--r-s);font-size:14.5px;line-height:1.35}
.les-mark{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--edge);border-radius:50%}
.les-mark svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.les-mm{white-space:nowrap;font-size:13.5px;color:var(--muted)}
.les-mod.is-done .les-mark{background:var(--olive);border-color:var(--olive)}
.les-mod.is-now{background:var(--sage);font-weight:700}
.les-mod.is-now .les-mark{border-color:var(--clay-d);background:var(--surface)}
.les-mod.is-now .les-mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay-d)}
.les-mod.is-now .les-mm{color:var(--ink)}

.les-check{display:flex;align-items:center;gap:14px;padding:14px clamp(12px,2vw,20px);border-top:1.5px solid var(--line);background:var(--paper)}
.les-check p{margin:0;font-size:15px;line-height:1.45}
.les-check-n{display:block;color:var(--muted)}
.les-tick{display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--olive)}
.les-tick svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.js .les-fig.in .les-tick svg{animation:p-pop .7s var(--ease) .9s both}
.les-figcap{margin:14px 4px 0;font-size:14.5px;line-height:1.5;color:var(--muted)}

@media (min-width:860px){
  .les-body{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
  .les-rail-wrap{border-top:0;border-left:1.5px solid var(--line)}
}

.les-legend{display:grid;gap:26px 32px;margin:clamp(32px,5vw,56px) 0 0;padding:0;list-style:none}
.les-legend > li{display:flex;align-items:flex-start;gap:14px;min-width:0}
.les-legend > li > div{min-width:0}
.les-legend .les-pin{position:static;flex:none;margin-top:.2em;box-shadow:none}
.les-legend h3{margin:0 0 .25em;font-size:1.35rem}
.les-legend p{margin:0;font-size:15.5px;line-height:1.55}
@media (min-width:620px){.les-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.les-legend{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* -- timeline strip: bleeds to the viewport edges, scrolls sideways on small screens -- */
.les-path{padding:clamp(56px,8vw,112px) 0 clamp(40px,6vw,80px)}
.les-path-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.les-strip{position:relative;margin-inline:calc(50% - 50vw);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--edge) transparent;-webkit-overflow-scrolling:touch}
.les-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);min-width:calc(var(--n,6) * 232px + 2 * var(--gutter));max-width:var(--wrap);margin:0 auto;padding:6px var(--gutter) 22px;list-style:none}
.les-step{position:relative;min-width:0;padding:0 18px 0 0;scroll-snap-align:start}
.les-node{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--clay);border-radius:50%;background:var(--clay);color:#fff;transition:background-color .4s,border-color .4s,color .4s}
.les-node .p-ico{width:24px;height:24px}
.les-step + .les-step::before,.les-step + .les-step::after{content:"";position:absolute;top:22px;left:calc(54px - 100%);width:calc(100% - 62px);height:2px;border-radius:2px}
.les-step + .les-step::before{background:rgba(31,42,34,.22)}
.les-step + .les-step::after{background:var(--clay);transform-origin:left center}
.les-n{display:block;margin:16px 0 4px;font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d)}
.les-step h3{margin:0 0 .35em;font-size:clamp(1.3rem,1.8vw,1.55rem)}
.les-step p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
html.js .les-step:not(.is-lit) .les-node{border-color:var(--edge);background:var(--surface);color:var(--muted)}
html.js .les-step + .les-step::after{transform:scaleX(0)}
html.js .les-step + .les-step.is-lit::after{animation:p-line .7s var(--ease) both}
@media (min-width:1180px){
  .les-steps{grid-auto-columns:minmax(0,1fr);min-width:0}
}

/* -- yes / no: three columns, photo narrow, then the two lists -- */
.les-yn{padding:clamp(48px,7vw,104px) 0}
.les-yn-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.les-yn-grid{display:grid;gap:20px clamp(20px,3vw,36px);--ic-yes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7 5.3-5.5'/%3E%3C/svg%3E");--ic-no:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.les-yn-grid > *{min-width:0}
.les-yn-photo{align-self:start;width:100%;aspect-ratio:2/1}
.les-yes,.les-no{padding:clamp(22px,3vw,36px);border-radius:var(--r-m)}
.les-yes{border:1px solid var(--line);background:var(--surface)}
.les-no{background:rgba(226,185,163,.4)}
.les-yes h3,.les-no h3{display:flex;align-items:baseline;gap:.55em;margin:0;font-size:1.3rem;font-weight:700;font-family:var(--sans);letter-spacing:0}
.les-yn-word{font:italic 500 clamp(2.6rem,4.4vw,3.6rem)/1 var(--serif);letter-spacing:-.01em}
.les-yes .les-yn-word{color:var(--olive)}
.les-no .les-yn-word{color:var(--clay-d)}
.les-list{display:grid;gap:15px;margin:1.3em 0 0;padding:0;list-style:none}
.les-list li{position:relative;padding-left:34px;line-height:1.55}
.les-list li::before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;background:var(--olive);-webkit-mask:var(--ic-yes) center/contain no-repeat;mask:var(--ic-yes) center/contain no-repeat}
.les-no .les-list li::before{background:var(--clay-d);-webkit-mask-image:var(--ic-no);mask-image:var(--ic-no)}
@media (min-width:640px){
  .les-yn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .les-yn-photo{grid-column:1 / -1}
}
@media (min-width:1000px){
  .les-yn-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);align-items:start}
  .les-yn-photo{grid-column:auto;aspect-ratio:4/5}
}

/* -- devices -- */
.les-dev{padding:clamp(40px,6vw,88px) 0 clamp(64px,9vw,120px)}
.les-dev-grid{display:grid;gap:36px clamp(28px,5vw,72px);align-items:center}
.les-dev-grid > *{min-width:0}
.les-dev-photo{width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1.04}
.les-dev-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:26px clamp(20px,3vw,40px);margin:1.8em 0 1.4em}
.les-dev-list > div{min-width:0}
.les-dev-list dt{display:flex;align-items:center;gap:12px;margin:0 0 .55em;font:700 17px/1.3 var(--sans)}
.les-dev-list dd{margin:0;font-size:16px;line-height:1.55}
.les-dev-ico{display:grid;flex:none;place-items:center;width:46px;height:46px;border-radius:var(--r-blob);background:var(--sage);color:var(--ink)}
@media (min-width:900px){.les-dev-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* -- closing band on olive -- */
.les-cta{position:relative;overflow:hidden;background:var(--olive);color:var(--earth-ink)}
.les-cta-grid{display:grid;gap:36px clamp(28px,5vw,64px);align-items:center;padding-block:clamp(56px,8vw,104px)}
.les-cta-grid > *{min-width:0}
.les-cta .eyebrow{color:var(--earth-ink)}
.les-cta em.accent{color:var(--earth-ink)}
.les-cta .btn{border-color:var(--rose);background:var(--rose);color:var(--ink)}
.les-cta .btn:hover{border-color:var(--sage);background:var(--sage)}
.les-cta .link-arrow,.les-cta .link-arrow:hover{color:var(--earth-ink)}
.les-cta :focus-visible{outline-color:var(--rose)}
.les-cta-photo{width:100%;max-width:400px;margin-inline:auto;aspect-ratio:1/1}
@media (min-width:900px){.les-cta-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}

/* =====================================================================
   /safe-practice  (sf-)
   ===================================================================== */

/* -- hero -- */
.sf-hero{padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,104px)}
.sf-hero-grid{display:grid;gap:40px clamp(32px,5vw,72px);align-items:center}
.sf-hero-grid > *{min-width:0}
.sf-hero-copy .lead{margin-bottom:1.4em}
.sf-hero-art{position:relative;width:100%;max-width:540px;margin-inline:auto}
.sf-hero-art::before{content:"";position:absolute;inset:9% -6% -7% 12%;z-index:-1;border-radius:var(--r-blob);background:var(--sage);opacity:.65}
.sf-hero-art .photo img{object-position:50% 40%}
@media (min-width:900px){.sf-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* -- four principles on earth -- */
.sf-prin{padding:clamp(64px,9vw,128px) 0}
.sf-prin-head{max-width:46rem;margin-bottom:clamp(36px,5vw,64px)}
.sf-prin-grid{display:grid;gap:clamp(30px,4vw,44px) clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none}
.sf-panel{min-width:0;padding-top:20px;border-top:1.5px solid rgba(226,185,163,.55)}
.sf-no{display:block;margin-bottom:.15em;font:italic 500 clamp(3.4rem,6vw,5.2rem)/.9 var(--serif);color:var(--rose)}
.sf-when{margin:0 0 .6em;font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.sf-panel h3{margin:0 0 .45em;font-size:clamp(1.9rem,2.6vw,2.6rem);overflow-wrap:break-word}
.sf-panel > p:last-child{margin:0;font-size:16.5px;line-height:1.6}
@media (min-width:600px){.sf-prin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .sf-prin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sf-panel:nth-child(2){margin-top:44px}
  .sf-panel:nth-child(3){margin-top:14px}
  .sf-panel:nth-child(4){margin-top:64px}
}

/* -- discipline guide: sticky left column, ledger of six on the right -- */
.sf-guide{padding:clamp(64px,9vw,128px) 0}
.sf-guide-grid{display:grid;gap:36px clamp(28px,5vw,72px)}
.sf-guide-grid > *{min-width:0}
.sf-jump{margin:1.4em 0 1.6em}
.sf-list{display:grid;gap:clamp(18px,2.6vw,28px);margin:0;padding:0;list-style:none}
.sf-disc{padding:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.sf-disc-head{display:flex;align-items:center;gap:16px;margin-bottom:1.2em}
.sf-disc-head > div{min-width:0}
.sf-ico{display:grid;flex:none;place-items:center;width:58px;height:58px;border-radius:var(--r-blob);background:var(--sage);color:var(--ink)}
.sf-ico .p-ico{width:28px;height:28px}
.sf-disc h3{margin:0;font-size:clamp(1.7rem,2.6vw,2.2rem)}
.sf-disc-course{margin:.15em 0 0;font-size:15px;line-height:1.4}
.sf-cells{display:grid;gap:18px 30px;margin:0 0 1.3em}
.sf-cells > div{min-width:0}
.sf-cells dt{margin:0 0 .3em;font:700 12.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--clay-d)}
.sf-cells dd{margin:0;font-size:16px;line-height:1.55}
.sf-where{padding-top:1em;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.sf-where p{margin:0 0 .4em}
.sf-where ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.sf-where li{display:flex;justify-content:space-between;gap:14px}
.sf-where-t{min-width:0}
.sf-where-m{flex:none;color:var(--muted);white-space:nowrap}
@media (min-width:640px){.sf-cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
  .sf-guide-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .sf-guide-side{position:sticky;top:calc(var(--head-h) + 24px)}
}

/* -- in the room: three photos, staggered -- */
.sf-room{padding:clamp(56px,8vw,104px) 0;background:var(--paper-2)}
.sf-room-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.sf-room-grid{display:grid;gap:30px 24px;align-items:start}
.sf-room-grid > *{min-width:0}
.sf-shot{margin:0}
.sf-shot figcaption{max-width:32ch;margin-top:.9em;font-size:15.5px;line-height:1.5}
@media (min-width:760px){
  .sf-room-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,.85fr)}
  .sf-shot:nth-child(1){margin-top:52px}
  .sf-shot:nth-child(3){margin-top:96px}
}

/* -- what stays with you: 50/50 split, photo bleeds off the left edge -- */
.sf-own{display:grid;background:var(--surface)}
.sf-own > *{min-width:0}
.sf-own-photo{position:relative;overflow:hidden;width:100%;min-height:240px;aspect-ratio:16/10;margin:0;background:var(--paper-2)}
.sf-own-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-own-copy{padding:clamp(44px,7vw,96px) var(--gutter)}
.sf-own-list{display:grid;gap:14px;margin:1.6em 0 0;padding:0;list-style:none;counter-reset:own}
.sf-own-list li{position:relative;padding-left:2.5em;line-height:1.55;counter-increment:own}
.sf-own-list li::before{content:counter(own);position:absolute;left:0;top:-.08em;font:italic 600 1.9rem/1.1 var(--serif);color:var(--clay-d)}
@media (min-width:900px){
  .sf-own{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sf-own-photo{aspect-ratio:auto;min-height:380px}
  .sf-own-copy{padding-left:clamp(32px,5vw,80px);padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)))}
}

/* -- when to stop and refer: sage band -- */
.sf-stop{padding:clamp(64px,9vw,128px) 0;background:var(--sage)}
.sf-stop-grid{display:grid;gap:36px clamp(28px,5vw,72px);align-items:start}
.sf-stop-grid > *{min-width:0}
.sf-stop-list{display:grid;margin:0;padding:0;list-style:none}
.sf-stop-list li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-items:baseline;gap:4px 18px;padding:18px 0;border-top:1.5px solid rgba(31,42,34,.28)}
.sf-stop-list li:last-child{border-bottom:1.5px solid rgba(31,42,34,.28)}
.sf-stop-n{font:italic 600 clamp(2.2rem,4vw,3.2rem)/1 var(--serif);color:var(--clay-d)}
.sf-stop-list p{margin:0;font-size:17px;line-height:1.55}
@media (min-width:960px){
  .sf-stop-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .sf-stop-side{position:sticky;top:calc(var(--head-h) + 24px)}
}

/* -- records: four sheets, fanned -- */
.sf-rec{padding:clamp(64px,9vw,128px) 0}
.sf-rec-grid{display:grid;gap:44px clamp(28px,5vw,72px);align-items:center}
.sf-rec-grid > *{min-width:0}
.sf-sheets{display:grid;gap:22px 20px;margin:0;padding:0;list-style:none}
.sf-sheets > li{min-width:0}
.sf-sheet{position:relative;height:100%;padding:18px 20px 22px;border:1px solid var(--line);border-radius:6px 6px var(--r-s) var(--r-s);background:var(--surface);transform:rotate(var(--rot,0deg));transition:transform .5s var(--ease)}
.sf-sheet::before{content:"";display:block;height:42px;margin-bottom:12px;background:repeating-linear-gradient(to bottom,transparent 0 13px,var(--line) 13px 14px)}
.sf-sheet::after{content:"";position:absolute;top:-1px;right:20px;width:36px;height:10px;border-radius:0 0 6px 6px;background:var(--rose)}
.sf-sheet:hover{transform:rotate(0deg)}
.sf-sheets > li:nth-child(1) .sf-sheet{--rot:-1.3deg}
.sf-sheets > li:nth-child(2) .sf-sheet{--rot:1.1deg}
.sf-sheets > li:nth-child(3) .sf-sheet{--rot:.8deg}
.sf-sheets > li:nth-child(4) .sf-sheet{--rot:-1deg}
.sf-sheet h3{margin:0 0 .35em;font-size:1.45rem}
.sf-sheet p{margin:0;font-size:15.5px;line-height:1.55}
@media (min-width:560px){
  .sf-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-sheets > li:nth-child(even){margin-top:30px}
}
@media (min-width:960px){.sf-rec-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* -- closing: photo + course card -- */
.sf-end{padding:clamp(48px,7vw,88px) 0 clamp(64px,9vw,120px);background:var(--paper-2)}
.sf-end-grid{display:grid;gap:36px clamp(28px,5vw,64px);align-items:center}
.sf-end-grid > *{min-width:0}
.sf-end-photo{width:100%;max-width:380px;margin-inline:auto;aspect-ratio:4/5}
.sf-course{margin:1.2em 0 1.4em;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.sf-course h3{margin:0 0 .4em;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.sf-course h3 a{text-decoration:none}
.sf-course h3 a:hover{color:var(--clay-d);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.sf-course p{margin:0 0 .8em}
.sf-course-meta{font-size:15.5px}
.sf-course .btn-row{margin:1.1em 0 0}
@media (min-width:900px){.sf-end-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* =====================================================================
   /contact  (ct-)
   ===================================================================== */

/* -- hero -- */
.ct-hero{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,96px)}
.ct-hero-grid{display:grid;gap:40px clamp(32px,5vw,72px);align-items:center}
.ct-hero-grid > *{min-width:0}
.ct-hero-copy .lead{margin-bottom:1.4em}
.ct-chips-h{margin:1.8em 0 .6em;font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d)}
.ct-hero-photo{position:relative;width:100%;max-width:440px;margin-inline:auto}
.ct-hero-photo .blob img{object-position:50% 30%}
.ct-note{position:absolute;left:-4px;top:12%;z-index:2;display:flex;align-items:center;gap:.6em;max-width:15em;margin:0;padding:.75em 1.05em;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-size:15px;line-height:1.35;animation:p-bob 7s ease-in-out infinite}
.ct-note .p-ico{width:26px;height:26px;color:var(--clay-d)}
@media (min-width:900px){
  .ct-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .ct-note{left:-14%}
}

/* -- write: form card + aside on paper-2 -- */
.ct-write{padding:clamp(48px,7vw,96px) 0;background:var(--paper-2)}
.ct-write-grid{display:grid;gap:32px clamp(24px,4vw,56px);align-items:start}
.ct-write-grid > *{min-width:0}
.ct-card{padding:clamp(22px,3.4vw,44px);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.ct-card h2{margin-bottom:.6em;font-size:clamp(1.9rem,3.2vw,2.5rem)}
.ct-form .btn-row{margin:.4em 0 0}
.ct-fine{margin:1em 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.ct-panel{margin:0 0 24px;padding:1.2em 1.4em;border-radius:var(--r-m);color:var(--ink)}
.ct-panel:focus{outline:3px solid var(--clay);outline-offset:4px}
.ct-panel h2,.ct-panel h3{margin:0 0 .35em;font-size:clamp(1.5rem,2.6vw,2rem)}
.ct-panel p{margin:0 0 .6em}
.ct-panel p:last-child{margin-bottom:0}
.ct-panel p a:not([class]){color:var(--ink);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.ct-panel--ok{background:var(--sage)}
.ct-panel--err{background:var(--rose)}
.ct-card > .ct-panel--ok{margin:0}
.ct-aside{display:grid;gap:30px}
.ct-aside-block{min-width:0}
.ct-h{margin:0 0 .35em;font-size:1.55rem}
.ct-aside p{margin:0 0 .8em}
.ct-mail{display:inline-flex;align-items:center;min-height:44px;font:700 1.15rem/1.3 var(--sans);color:var(--clay-d);overflow-wrap:anywhere}
.ct-flow{position:relative;display:grid;gap:14px;margin:1.1em 0 0;padding:0;list-style:none;counter-reset:flow}
.ct-flow::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line)}
.ct-flow li{position:relative;padding-left:44px;font-size:16px;line-height:1.5;counter-increment:flow}
.ct-flow li::before{content:counter(flow);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 13px/1 var(--sans)}
@media (min-width:960px){.ct-write-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}

/* -- before you write: sage band, three columns -- */
.ct-before{padding:clamp(56px,8vw,104px) 0;background:var(--sage)}
.ct-before-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.ct-before-grid{display:grid;gap:34px clamp(20px,3vw,40px);margin:0;padding:0;list-style:none}
.ct-bcard{min-width:0;padding-top:18px;border-top:1.5px solid rgba(31,42,34,.34)}
.ct-bn{display:block;margin-bottom:.1em;font:italic 600 3.4rem/1 var(--serif);color:var(--clay-d)}
.ct-bcard h3{margin:0 0 .5em;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.ct-bk{margin:0 0 .4em;font:700 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d)}
.ct-bcard ul{display:grid;gap:6px;margin:0 0 1em;padding:0;list-style:none}
.ct-bcard ul li{position:relative;padding-left:18px;line-height:1.5}
.ct-bcard ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.ct-blinks{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0}
.ct-blinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media (min-width:900px){.ct-before-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* -- while you wait: four tiles -- */
.ct-more{padding:clamp(48px,7vw,88px) 0 clamp(64px,9vw,112px)}
.ct-more h2{margin-bottom:1em}
.ct-more-grid{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ct-more-grid > li{min-width:0}
.ct-tile{display:flex;flex-direction:column;gap:6px;height:100%;min-height:44px;padding:20px 22px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);text-decoration:none;transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.ct-tile:hover{border-color:var(--sage);background:var(--sage);transform:translateY(-3px)}
.ct-tile-t{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 1.55rem/1.1 var(--serif)}
.ct-tile-t::after{content:"";flex:none;width:1.1rem;height:1rem;background:var(--clay-d);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .3s var(--ease)}
.ct-tile:hover .ct-tile-t::after{transform:translateX(5px)}
.ct-tile-d{font-size:15px;line-height:1.45;color:var(--muted)}
.ct-tile:hover .ct-tile-d{color:var(--ink)}
@media (min-width:560px){.ct-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.ct-more-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- reduced motion (site.css already stills .reveal and em.accent) ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .les-prog i{transform:scaleX(.38)}
  html.js .les-step + .les-step::after,
  html.js .les-step + .les-step.is-lit::after{transform:scaleX(1)}
  html.js .les-step:not(.is-lit) .les-node{border-color:var(--clay);background:var(--clay);color:#fff}
  .ct-tile:hover{transform:none}
}