/* Commonhouse page templates v2 (2026-10-05). Builds on site-base.css, the live workflow page's own
   styles. Only what the new templates add lives here: the new menu, the footer columns, and each
   template's own sections. Desktop at 1280px and up, phone below 900px. */

:root{--night:#221D18;--tint:#F6E6DA;--tinttext:#8A4E28;--line:rgba(44,38,32,.12);--line2:rgba(44,38,32,.1)}
body{overflow-x:hidden}
.page{background:var(--page)}
.page.creamtop{background:linear-gradient(180deg,var(--cream) 0,var(--page) 560px) no-repeat,var(--page)}
.lede{margin:0;max-width:52ch;font-size:18px;line-height:1.55;color:var(--soft)}
.sh{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sh.c{align-items:center;text-align:center}
.sh.c .lede{text-align:center}

/* ---------- the menu ---------- */
.masthead .bar{gap:20px}
.mnav{align-items:center}
.mnav>a,.mnav .navdrop-btn{white-space:nowrap}

/* ---------- footer ---------- */
footer{padding:64px 0 28px}
.fcols{gap:56px}
.fcols .fl.soon{color:var(--soft);font-weight:600}
.fcols .fl.soon em{font-style:normal;font-size:12px;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:999px;padding:1px 7px;margin-left:6px}
.fbook{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.fbook .cta{align-self:flex-start;min-height:46px;padding:0 20px;font-size:15px}

/* ---------- shared pieces ---------- */
.card{background:var(--mock);border:1px solid var(--line);border-radius:28px;box-shadow:0 28px 60px -26px rgba(44,38,32,.45);padding:18px 20px 16px}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:800;white-space:nowrap}
.chip.done{background:var(--pinebg);color:var(--pine)}
.chip.wait{background:var(--light);color:var(--ink)}
.chip.you{background:var(--tint);color:var(--tinttext)}
.chip.gray{background:rgba(44,38,32,.08);color:var(--soft)}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--clayd);color:#FFFDF7;font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .15s ease,background .2s ease}
.go:hover{transform:translateY(-1px)}
.go[aria-pressed="true"]{background:var(--pine);cursor:default;transform:none}
.ask{align-self:flex-start;max-width:36ch;margin:0 0 12px;padding:11px 14px;border-radius:16px 16px 16px 6px;background:var(--deep);font-size:15px;line-height:1.45;font-weight:650}
.msg{margin:0 0 16px;padding:14px 18px 16px;border-radius:18px 18px 6px 18px;background:var(--ink);color:var(--page);font-size:17px;line-height:1.5;font-weight:500}
.typing{display:flex;gap:6px;align-items:center;align-self:flex-start;height:44px;margin:12px 0 0;padding:0 16px;border-radius:16px 16px 16px 6px;background:var(--deep)}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--soft);animation:wfdot .9s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.confirm:empty{display:none}
.confirm{margin:12px 0 0;align-self:flex-start;max-width:40ch;padding:11px 14px;border-radius:16px 16px 16px 6px;background:var(--deep);font-size:15px;line-height:1.45;font-weight:650;animation:wfxIn .4s cubic-bezier(.2,.7,.2,1) both}
.acard{display:flex;flex-direction:column}
.golink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16.5px;text-decoration:none}
.golink i{font-style:normal;color:var(--clayd);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.golink:hover i{transform:translateX(4px)}

/* preview-only marks (not part of the design) */

/* ---------- the jobs list (Noah's pick B): links on the left, a live draft on the right ---------- */
.jobs{padding:72px 0}
.jl2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,4.4vw,72px);align-items:start;margin-top:40px}
.jlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 44px;gap:18px;align-items:center;padding:18px 10px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .25s ease}
.li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--clayd);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.li.on{background:rgba(243,236,223,.75)}
.li.on::before{transform:scaleY(1)}
.li .d{width:46px;height:46px;border-radius:14px;background:var(--deep);color:var(--ink);display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.li.on .d{background:var(--ink);color:var(--light)}
.li svg,.jp svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.li .d svg{width:20px;height:20px}
.li b{display:block;font-family:var(--serif);font-weight:650;font-size:23px;line-height:1.2}
.li .l{display:block;margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--soft)}
.li .arr{width:44px;height:44px;border-radius:50%;background:var(--deep);display:grid;place-items:center;font-weight:800;color:var(--clayd);transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.li:hover .arr,.li:focus-visible .arr{background:var(--ink);color:var(--light);transform:translateX(4px)}
.li:hover b{color:var(--clayd)}
.jprev{position:sticky;top:96px}
.jstack{display:grid}
.jp{grid-area:1/1;display:flex;flex-direction:column;gap:14px;padding:18px 20px 18px;border-radius:28px;background:var(--mock);border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(44,38,32,.55);visibility:hidden;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.jp.on{visibility:visible;opacity:1;transform:none;transition:opacity .35s ease .08s,transform .5s cubic-bezier(.2,.7,.2,1) .08s,visibility 0s}
.jp-h{display:flex;align-items:center;gap:10px}
.jp-h b{flex:1;font-weight:800;font-size:15px}
.jp-ic{width:34px;height:34px;border-radius:11px;background:var(--deep);display:grid;place-items:center}
.jp-ic svg{width:17px;height:17px}
.jp .acard{gap:0;padding:4px 0 0}
.bot{display:flex;align-items:flex-end;gap:10px;margin:0 0 12px}
.bot .door{flex:none;width:34px;height:34px;padding:7px 8px;border-radius:50%;background:var(--deep);box-sizing:border-box}
.bot .ask{margin:0}
.jp .msg{margin-left:44px;font-size:16px}
.act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-left:44px}
.golink.sm{font-size:15px}
.jp .typing,.jp .confirm{margin-left:44px}
.jctl{display:flex;align-items:center;gap:12px;margin-top:16px}
.jdots{display:none}
.jbar{flex:1;height:3px;border-radius:3px;background:var(--row);overflow:hidden}
.jbar i{display:block;height:100%;width:100%;background:var(--clayd);transform:scaleX(0);transform-origin:0 50%}
.jpause{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(44,38,32,.2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.jpause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jpause .p2,.jpause[aria-pressed="true"] .p1{display:none}
.jpause[aria-pressed="true"] .p2{display:block}
/* each job's own picture of what happened */
.jt{border-radius:18px;background:var(--deep);padding:12px 14px}
.jt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;font-weight:800;color:var(--soft)}
.jt-h b{color:var(--ink)}
.cl{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.cl svg{width:18px;height:18px;color:var(--soft)}
.cl b{display:block;font-weight:800;font-size:15px}
.cl span{display:block;font-size:13.5px;color:var(--soft);font-weight:600}
.cl time{font-size:13px;font-weight:800;color:var(--soft);font-variant-numeric:tabular-nums}
.cl:not(.miss){opacity:.85}
.cl.miss svg{color:var(--clayd)}
.cl.miss b{color:#93552E}
.qd,.rp,.iv,.dn,.rv{display:flex;align-items:center;gap:12px}
.qd>div,.rp>div,.iv>div,.dn>div,.rv>div{flex:1;min-width:0}
.qd svg{width:30px;height:30px;color:var(--ink)}
.qd b,.rp b,.iv b,.dn b,.rv b{display:block;font-weight:800;font-size:15.5px}
.qd span:not(.chip),.rp span:not(.chip),.iv span:not(.late),.dn span{display:block;font-size:13.5px;color:var(--soft);font-weight:600}
.qdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.qdays i{position:relative;height:30px;border-radius:8px;background:rgba(44,38,32,.07)}
.qdays i.sent{background:var(--pinebg)}
.qdays i.now{background:var(--light)}
.qdays em{position:absolute;left:0;right:0;bottom:-18px;font-style:normal;font-size:13px;font-weight:800;color:var(--soft);text-align:center}
.jt.quote{padding-bottom:28px}
.jt.notes{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:8px;align-items:center}
.nn{padding:10px 12px;border-radius:12px;background:#FFF6D9;box-shadow:0 8px 18px -14px rgba(44,38,32,.5);transform:rotate(-1.5deg)}
.nn b,.est b{display:block;font-weight:800;font-size:13.5px;margin-bottom:4px}
.nn ul{margin:0;padding:0 0 0 16px;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--soft2)}
.vn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;font-weight:800;color:var(--tinttext)}
.vn svg{width:13px;height:13px}
.arrow{font-weight:800;color:var(--clayd);text-align:center}
.est{padding:10px 12px;border-radius:12px;background:var(--mock);border:1px solid var(--line)}
.est p{display:flex;justify-content:space-between;gap:6px;margin:0;padding:5px 0;border-top:1px dashed var(--line);font-size:13px;font-weight:600}
.est em{font-style:normal;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:6px;padding:0 6px;white-space:nowrap}
.sched ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sched li{position:relative;display:flex;flex-direction:column;gap:1px;padding:8px 9px;border-radius:12px;background:var(--mock);border:1px solid var(--line)}
.sched time{font-size:12.5px;font-weight:800;color:var(--soft)}
.sched li b{font-size:14.5px;font-weight:800}
.sched li span{font-size:12px;font-weight:600;color:var(--soft);line-height:1.3}
.sched li i{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--pinebg);color:var(--pine);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .3s ease}
.sched li i svg{width:11px;height:11px;stroke-width:3}
.jp-sched.sent .sched li i{opacity:1;transform:none}
.late{flex:none;font-size:12.5px;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:999px;padding:4px 10px}
.tone{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tone li{padding:7px 9px;border-radius:10px;background:var(--mock);border:1px solid var(--line)}
.tone b{display:block;font-size:12.5px;font-weight:800;color:var(--soft)}
.tone span{display:block;font-size:13.5px;font-weight:800}
.tone li.done span{color:var(--pine)}
.tone li.now{background:var(--ink);border-color:var(--ink)}
.tone li.now b{color:#D8B88A}
.tone li.now span{color:var(--light)}
.av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--pine);color:var(--page);display:grid;place-items:center;font-weight:800}
.stars{display:flex;gap:2px;color:var(--clayd)}
.stars svg{width:14px;height:14px;fill:var(--light);stroke:var(--clayd);stroke-width:1.4}
.rv .g{font-size:12.5px;font-weight:800;color:var(--soft)}
.rq{margin:10px 0 0;font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.45}
.form dl{margin:0;display:grid;gap:6px}
.form dl div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding:7px 10px;border-radius:10px;background:var(--mock);border:1px solid var(--line)}
.form dt{font-size:12.5px;font-weight:800;color:var(--soft)}
.form dd{margin:0;font-size:14.5px;font-weight:700}
.yr{position:relative;display:flex;align-items:center;margin:14px 6px 22px}
.yr span{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--soft) 0 4px,transparent 4px 8px);opacity:.45}
.yr i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:var(--pinebg);border:2px solid var(--pine)}
.yr i.b{background:var(--light);border-color:var(--clayd)}
.yr em{position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:12px;font-weight:800;color:var(--soft)}
.yr i.b em{left:auto;right:-4px;transform:none}
.yr i.a em{left:-4px;transform:none}
.dn svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--pinebg);color:var(--pine);stroke-width:2.6;box-sizing:border-box}
.dn time{font-size:13px;font-weight:800;color:var(--soft)}
@media (max-width:899px){
  .jobs{padding:48px 0}
  .jl2{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:24px}
  .jprev{position:relative;top:auto;order:-1}
  .jp{padding:16px 16px 16px;border-radius:24px}
  .jp .msg,.act,.jp .typing,.jp .confirm{margin-left:0}
  .jp .msg{font-size:15.5px}
  .jdots{display:flex;gap:0}
  .jdot{width:28px;height:44px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
  .jdot i{width:8px;height:8px;border-radius:50%;background:rgba(44,38,32,.22);transition:width .3s ease,background .3s ease}
  .jdot.on i{width:22px;border-radius:5px;background:var(--clayd)}
  .li{grid-template-columns:40px minmax(0,1fr) 40px;gap:12px;padding:14px 4px}
  .li .d{width:40px;height:40px;border-radius:12px}
  .li b{font-size:19.5px}
  .li .l{font-size:14.5px}
  .li .arr{width:40px;height:40px}
  .sched ol{grid-template-columns:repeat(2,1fr)}
  .jt.notes{grid-template-columns:minmax(0,1fr)}
  .jt.notes .arrow{transform:rotate(90deg);line-height:1}
}
@media (prefers-reduced-motion: reduce){ .li,.li::before,.li .d,.li .arr,.jp,.sched li i,.jdot i{transition:none} }

@media (max-width:899px){
  .lede{font-size:16.5px}
  .mnav{top:56px;max-height:calc(100dvh - 72px);overflow:auto;padding:10px;border-radius:24px;align-items:stretch}
  .mnav>a{text-align:left}
  .mnav>a.navcta{text-align:center}
  .js .masthead.open .mnav>*{animation:mItem .42s cubic-bezier(.2,.7,.2,1) both}
  .js .masthead.open .mnav>*:nth-child(2){animation-delay:.04s}
  .js .masthead.open .mnav>*:nth-child(3){animation-delay:.08s}
  .js .masthead.open .mnav>*:nth-child(4){animation-delay:.12s}
  .js .masthead.open .mnav>*:nth-child(5){animation-delay:.16s}
  .js .masthead.open .mnav>*:nth-child(6){animation-delay:.2s}
  .js .masthead.open .mnav>*:nth-child(7){animation-delay:.24s}
  .fcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@keyframes mItem{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .js .masthead.open .mnav>*{animation:none}
  .golink i,.go{transition:none}
  .typing i{animation:none;opacity:.6}
}
.li.soon{grid-template-columns:46px minmax(0,1fr);opacity:.62}
.li.soon b em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--tinttext);background:var(--tint);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:4px}
.li.soon:hover b{color:var(--ink)}
@media (max-width:899px){ .li.soon{grid-template-columns:40px minmax(0,1fr)} }
/* painted skies sit behind the top of a page; everything after them paints above */
main>section,main>.bgrid{position:relative}

/* ---------- shared layout bits for the one-off pages ---------- */
.pairlink{font-weight:700;font-size:16.5px;text-decoration:none;color:var(--ink)}
.pairlink i{font-style:normal;color:var(--clayd);display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pairlink:hover i{transform:translateX(4px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,88px);align-items:center}
.split.flip>:first-child{order:2}
.st{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.st p{margin:0;max-width:42ch;font-size:18px;line-height:1.55;color:var(--soft)}
.sec-pad{padding:72px 0}
.svgs svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* a video spot: the painted poster, a play button, and the film's working name (preview only) */
.vid{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:var(--ink);box-shadow:0 40px 80px -40px rgba(44,38,32,.6)}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,20,0) 45%,rgba(28,24,20,.7) 100%)}
.vid .play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;background:var(--page);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.vid .play:hover{transform:scale(1.06)}
.vid .play svg{width:28px;height:28px;margin-left:4px;fill:var(--clayd);stroke:none}
.vid .cap{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;color:var(--page)}
.vid .cap b{font-family:var(--serif);font-weight:650;font-size:22px;line-height:1.2}
.vid .cap span{font-size:14px;font-weight:800;color:#D8B88A;white-space:nowrap}
/* people: photo slots for Noah and Brent */
.ppl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pp{display:flex;flex-direction:column;gap:12px}
.pp .ph{aspect-ratio:4/5;border-radius:24px;background:repeating-linear-gradient(135deg,#EDE6D8 0 14px,#E8E0CF 14px 28px);display:flex;align-items:flex-end;padding:14px}
.pp b{font-family:var(--serif);font-weight:650;font-size:26px}
.pp span{font-size:15.5px;color:var(--soft);font-weight:600}
/* a stops line: a few labelled stops joined by a line */
.stops{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;position:relative}
.stops::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:var(--row)}
.stops li{position:relative;display:flex;flex-direction:column;gap:6px}
.stops li i{width:44px;height:44px;border-radius:50%;background:var(--mock);border:2px solid var(--clayd);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--clayd);margin-bottom:8px}
.stops li:last-child i{background:var(--clayd);color:var(--page)}
.stops li b{font-family:var(--serif);font-weight:650;font-size:23px}
.stops li span{font-size:16px;line-height:1.5;color:var(--soft2)}
.fine{margin:28px 0 0;padding:18px 22px;border-radius:18px;background:var(--deep);font-size:15.5px;line-height:1.55;color:var(--soft2)}
.fine b{color:var(--ink)}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr);gap:24px}
  .split.flip>:first-child{order:0}
  .st p{font-size:16.5px}
  .sec-pad{padding:48px 0}
  .vid{border-radius:22px}
  .vid .play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .vid .cap b{font-size:17px}
  .stops{grid-auto-flow:row;gap:20px;padding-left:0}
  .stops::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .stops li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start}
  .stops li i{grid-row:span 2;margin:0}
  .stops li b{font-size:20px}
}
.split h2.sec,.mg h2.sec{font-size:clamp(34px,3.3vw,46px)}

/* ---------- critique round 1 (2026-10-05 22:40): fixes shared by every page ---------- */
/* footer columns fold up on phones */
.fcols details.fcol{display:flex;flex-direction:column;gap:10px}
.fcols details.fcol>summary{list-style:none;font-size:14.5px;font-weight:600;color:var(--soft);cursor:default}
.fcols details.fcol>summary::-webkit-details-marker{display:none}
.fcols details.fcol[open]{display:flex}
.fcols details.fcol>a,.fcols details.fcol>.fl{display:block;margin-top:10px}
@media (max-width:899px){
  .fcols{display:flex;flex-direction:column;gap:0;width:100%;align-self:stretch}
  .fcols details.fcol{display:block;align-self:stretch;width:100%;border-top:1px solid var(--line)}
  .fcols details.fcol:last-child{border-bottom:1px solid var(--line)}
  .fcols details.fcol>summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
  .fcols details.fcol>summary::after{content:"+";font-size:22px;font-weight:500;color:var(--clayd)}
  .fcols details.fcol[open]>summary::after{content:"−"}
  .fcols details.fcol>a,.fcols details.fcol>.fl{margin:0;padding:9px 0}
  .fcols details.fcol[open]{padding-bottom:12px}
}
/* headlines never leave one word alone */
main h1,main h2{text-wrap:balance}
/* steps are marks on a line, never numbers (BRAND-LOCK voice) */
.stops li i{font-size:0}
.stops li i::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--clayd)}
.stops li:last-child i::after{background:var(--page)}
/* "never" pills: plain words with a small no-mark, no strike-through */
html body .never s::after,html body .norule s::after,html body .leave s::after,html body .nopaste li s::after{display:none}
html body .never s,html body .norule s,html body .leave s{gap:8px;padding-left:8px}
html body .never s::before,html body .norule s::before,html body .leave s::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23A05E34' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/12px no-repeat}
/* people slots: a monogram until the real photo arrives, never an empty striped box */
.pp .ph{position:relative;overflow:hidden;background:linear-gradient(165deg,#F3D9C0 0%,#EFE7D6 70%)}
.pp .ph .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-weight:650;font-size:clamp(90px,10vw,150px);line-height:1;color:rgba(160,94,52,.28)}

/* painted sky behind a text hero (calculator, pricing, family) */
.psky{position:absolute;left:0;top:0;width:100%;height:600px;overflow:hidden;pointer-events:none}
.psky img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.85}
.psky i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,246,236,.15) 0%,rgba(251,246,236,.55) 55%,var(--page) 100%)}
.psky+section{position:relative}
@media (max-width:899px){.psky{height:440px}.psky img{content:url(/assets/workflows/clouds-phone-600.webp)}}

/* the close: each part of the site ends on its own painting */
.close.c-sky .cbg{object-position:center 60%}
.close.c-house .cbg{object-position:62% 62%}
.close.c-night .cbg{object-position:center 70%}
.close.c-night .top{background:linear-gradient(180deg,var(--page) 0%,rgba(251,246,236,0) 100%)}
.close.c-night::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,40,0) 20%,rgba(20,24,40,.35) 100%);pointer-events:none}
.close.c-night .c{z-index:2}
.close.c-night h2{color:#FBF6EC;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.close.c-night .predawn{background:linear-gradient(180deg,rgba(251,246,236,.85) 0%,rgba(251,246,236,.2) 70%)}
.cdoor{position:relative;display:grid;place-items:center;width:84px;height:94px;margin-bottom:-8px;animation:cdoor 6s ease-in-out infinite}
.cdoor svg{position:relative;width:56px;height:62px}
.cdoor i{position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(250,184,85,.55) 0%,rgba(250,184,85,0) 65%)}
@keyframes cdoor{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.cdoor{animation:none}}

/* FAQ option B: questions right, a held "still deciding" card left */
.faq.fb .fbg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq.fb .fside{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.faq.fb .fside h2{margin:0;text-align:left}
.faq.fb .fask{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px;border-radius:24px;background:var(--deep)}
.faq.fb .fask .fd{width:30px;height:34px}
.faq.fb .fask p{margin:0;font-size:16px;line-height:1.5;color:var(--soft2);font-weight:600}
.faq.fb .flist{margin-top:0}
@media (max-width:899px){
  .faq.fb .fbg{grid-template-columns:minmax(0,1fr);gap:20px}
  .faq.fb .fside{position:static}
  .faq.fb .fask{display:none}
  .faq.fb .flist+.wfmore,.faq.fb .flist{margin-top:0}
}
@media (max-width:899px){.faq.fb .fbg>div:last-child::after{content:"";display:block}}

/* mid-page fit-call line (option A) */
.nudge{padding:8px 0 40px}
.nudge .nl{display:flex;align-items:center;gap:16px;max-width:880px;margin:0 auto;padding:14px 14px 14px 22px;border-radius:999px;background:var(--mock);border:1px solid var(--line);box-shadow:0 20px 40px -32px rgba(44,38,32,.5)}
.nudge .nd{width:24px;height:27px;flex:none}
.nudge p{flex:1;margin:0;font-family:var(--serif);font-weight:650;font-size:20px;line-height:1.3}
.nudge .pill{flex:none;min-height:48px}
@media (max-width:899px){
  .nudge .nl{flex-wrap:wrap;border-radius:24px;padding:16px 16px 16px 18px;gap:12px}
  .nudge p{flex:1 1 200px;font-size:18px}
  .nudge .pill{width:100%;justify-content:center}
}

/* ---------- critique round 3 (2026-10-06): phone tap sizes, small labels, caption wrap ---------- */
.vid .cap .slot{white-space:normal}
@media (max-width:899px){
  .fcols details.fcol>a,.fcols details.fcol>.fl{display:flex;align-items:center;min-height:44px;padding:0}
  .fbrand .ftel a{display:inline-flex;align-items:center;min-height:44px}
  .pairlink{display:inline-flex;align-items:center;min-height:44px}
  .jdot{width:44px;flex:0 1 44px;min-width:30px}
  .jdots{flex:1 1 auto;min-width:0}
  .tocm2 ol{list-style:none;padding-left:18px}
  .tocm2 a{display:flex;align-items:center;min-height:44px;padding:0}
  .fcols .fl.soon em{font-size:13px}
}

/* keep going: one quiet row of up-and-across text links before the questions (plain links, so it never reads like a second pill row) */
.across{padding:8px 0 0}
.across .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.across span{font-weight:800;font-size:15px;color:var(--soft)}
.across a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:16px;text-decoration:none;color:var(--ink)}
.across a i{font-style:normal;color:var(--clayd);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.across a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.across a:hover i{transform:translateX(3px)}
@media (max-width:899px){.across .wrap{flex-direction:column;align-items:flex-start}.across span{padding-bottom:2px}}

/* Accessibility round (2026-10-05): every tap target on a phone is at least 44px tall, without moving the layout */
@media (max-width:899px){
  .golink{position:relative}
  .golink::before{content:"";position:absolute;inset:-12px -4px}
  .ftrail a{display:inline-block;padding-block:14px;margin-block:-14px}
  .tocm ol a{display:flex;align-items:center;min-height:44px}
}
@media (max-width:899px){a.logo{padding-block:10px;margin-block:-10px}}
/* the closing button says what it is, right where people decide (homepage wording) */
.close .closenote{margin:-12px 0 0;max-width:30ch;font-weight:600;font-size:15.5px;line-height:1.45;color:var(--ink);text-wrap:balance}
.c-night .closenote{color:#FBF6EC;text-shadow:0 1px 14px rgba(0,0,0,.55)}
summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--clayd);outline-offset:3px}