/* Site & Stack — subpages (services, about, contact, concept work, insights, legal, 404).
   Loads after site.css and only adds what the homepage system does not already provide (.ss-* classes are reused as-is). */

/* ---------- Page frame ---------- */
.pg .ss-section{padding:112px 0 0}
.pg{padding-bottom:112px} /* room before the footer's closing section, whose mascot sits near its top */
.pg .ss-head{margin-bottom:48px}
.pg .ss-head-left .ss-sub{max-width:28.5em}


/* ---------- Intro: big Urbanist H1 + lead ---------- */
.pg-hero{position:relative;padding:72px 0 64px}
.pg-h1{margin:0;max-width:900px;font:500 64px/1.12 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.pg-lead{margin:22px 0 0;max-width:640px;font:400 21px/1.45 var(--body);color:var(--muted);text-wrap:pretty}
.pg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:36px}
.pg-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font:500 16px/1.4 var(--body);color:var(--muted);text-decoration:none;transition:color .2s ease}
.pg-back .ss-icon{width:18px;height:18px;transition:transform .25s var(--ease)}
.pg-back:hover{color:var(--ink)}
.pg-back:hover .ss-icon{transform:translateX(-3px)}
.pg-byline{display:flex;flex-wrap:wrap;gap:4px 10px;margin:28px 0 0;font:400 15px/1.4 var(--body);color:var(--muted)}
.pg-byline span+span::before{content:"·";margin-right:10px;color:var(--faint)}

/* Characters around an intro (404): quiet, never over the text */
.pg-hero-decor{position:absolute;inset:0;pointer-events:none}
.pg-hero-decor img{position:absolute;height:auto;animation:ss-deco-in .7s var(--ease-out) both}
.pg-deco-disc{right:21%;bottom:2%;width:104px;animation-delay:.12s}
.pg-deco-dot{right:3%;bottom:18%;width:36px;animation-delay:.2s}
.pg-deco-mascot{left:12%;top:18%;width:96px}
.pg-hero-center{text-align:center}
.pg-hero-center .pg-h1,.pg-hero-center .pg-lead{margin-inline:auto}
.pg-hero-center .pg-actions{justify-content:center}
.pg-hero-center .pg-deco-disc{right:12%;bottom:6%}
.pg-hero-center .pg-deco-dot{right:auto;left:24%;bottom:14%}

/* Services hero (owner pick 2026-10-01, "Which one sounds like you?"): three speech bubbles in the service tints, each jumping to
   its card. The three characters float around the centered intro like the homepage hero; they leave on phones. */
.pg-svc-hero{padding:72px 0 88px}
.pg-svc-hero .ss-eyebrow{margin-bottom:18px}
.pg-hero-decor .pg-svc-m1,.pg-hero-decor .pg-svc-m2,.pg-hero-decor .pg-svc-m3{filter:drop-shadow(0 10px 14px rgb(28 26 23/.16))}
.pg-svc-m1{left:5%;top:40px;width:84px;rotate:-10deg}
.pg-svc-m2{left:9%;top:300px;width:70px;rotate:8deg;animation-delay:.12s}
.pg-svc-m3{right:6%;top:150px;width:92px;rotate:6deg;animation-delay:.2s}
.pg-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:1200px;margin:56px auto 0;padding:0;list-style:none;text-align:left}
.pg-pick a{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%;box-sizing:border-box;min-height:220px;padding:28px 24px 22px;border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--t) 35%,#fff),var(--t));color:var(--ink);text-decoration:none;rotate:var(--r);transition:rotate .25s var(--ease),translate .25s var(--ease)}
.pg-pick a::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-pick a::before{content:"";position:absolute;left:34px;bottom:-17px;width:30px;height:18px;background:var(--t);clip-path:polygon(0 0,100% 0,6% 100%)}
.pg-pick q{font:500 22px/1.3 var(--display);text-wrap:balance}
.pg-pick-note{margin:40px 0 0;font:400 16px/1.5 var(--body);color:var(--muted)}
.pg-pick-fix{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 14px;border-radius:999px;background:var(--white);font:500 15px/1 var(--body);box-shadow:0 1px 2px rgb(28 26 23/.08)}
.pg-pick-fix small{font:inherit;color:var(--muted)}
.pg-pick-fix .ss-icon{width:16px;height:16px}
.pg-cards > .ss-service{scroll-margin-top:110px}
/* /services cards: plain outcomes and a price line instead of the chips */
.pg-outcomes{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.pg-outcomes li{display:flex;align-items:flex-start;gap:10px;font:400 16px/1.45 var(--body);color:var(--ink-2)}
.pg-outcomes .ss-icon{flex:none;width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--white);color:var(--ink)}
.pg-card-price{margin:auto 0 0!important;padding-top:6px;font:500 17px/1.3 var(--display)!important;color:var(--ink)!important}
.pg-card-price + .ss-arrow-link{margin-top:6px}
@media (hover:hover){.pg-pick a:hover{rotate:0deg;translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.pg-pick a{transition:none}}
@media (max-width:1023.98px){.pg-svc-m2,.pg-svc-m3{display:none}.pg-svc-m1{left:auto;right:4%;top:24px;width:60px}}
@media (max-width:1199.98px){.pg-pick{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;gap:36px 28px}}
@media (max-width:639.98px){.pg-pick{grid-template-columns:1fr;max-width:520px;gap:30px}.pg-pick a{min-height:0}.pg-pick q{font-size:21px}}
@media (max-width:809.98px){.pg-svc-hero{padding:40px 0 56px}.pg-svc-hero .pg-hero-decor{display:none}}

/* ---------- Cards built on the homepage .ss-service pattern ---------- */
.pg .ss-service{position:relative;top:auto;animation:none;transform:none;scale:none}
.pg-cards{display:grid;gap:32px}
.pg-card-title{margin:0;font:500 42px/1.15 var(--display);letter-spacing:-.005em;text-wrap:balance}
.pg-card .ss-h2{font-size:42px}
.pg-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.pg .pg-card-actions .ss-arrow-link{margin-top:0}
.pg .pg-fit{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.pg-fit strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:500}

/* Grids of white cards (deliverables) */
.pg-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:0;padding:0;list-style:none}
.pg-deliverable{min-height:0}
/* Promises and deliverables: an editorial list on the page (hairline above each item), not a grid of cards.
   The icon sits inline with the title (homepage .ss-promise grammar). */
.pg-grid-2:has(.ss-promise){gap:0 48px}
.pg .ss-promise{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto 1fr auto;align-items:center;gap:8px 10px;padding:24px 0}
.ss-promise-icon{display:inline-grid;place-items:center;flex:none;color:var(--brand-deep)}
.ss-promise-icon .ss-icon{width:22px;height:22px}
.ss-promise h3{margin:0;font:500 21px/1.3 var(--display);text-wrap:balance}
.pg .ss-promise p{grid-column:1/-1;align-self:start;text-wrap:pretty}
/* About "Why we started": heading and text left, the before/after picture right (stacks on phones) */
.pg-promise-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;align-items:start}
.pg-promise-split .ss-head{margin:0}
@media (max-width:1199.98px){.pg-promise-split{grid-template-columns:minmax(0,4fr) minmax(0,6fr);column-gap:48px}}
@media (max-width:809.98px){.pg-promise-split{grid-template-columns:1fr;row-gap:24px}}
/* About "How we work with you": a sticker sheet (owner pick 2026-10-01). Round die-cut stickers in the site pastels with grain,
   a white border and a tilt; they straighten on hover. Three columns, two on tablets, sticker beside the text on phones. */
.pg-stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px;margin:0;padding:0;list-style:none}
.pg-stickers > li{display:grid;justify-items:start;align-content:start}
.pg-sticker{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;align-content:center;gap:8px;box-sizing:border-box;width:172px;height:172px;margin:0 0 26px;border:7px solid var(--white);border-radius:50%;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--t) 40%,#fff),var(--t) 70%);box-shadow:0 2px 3px rgb(28 26 23/.1),0 20px 32px -16px rgb(28 26 23/.4);rotate:var(--r);text-align:center}
.pg-sticker::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-sticker .ss-icon{width:30px;height:30px;stroke-width:2;color:var(--ink)}
.pg-sticker b{max-width:8ch;font:500 18px/1.1 var(--display);color:var(--ink)}
.pg-stickers h3{margin:0;font:500 21px/1.3 var(--display);color:var(--ink);text-wrap:balance}
.pg-stickers p{margin:6px 0 0;max-width:34em;font:400 16.5px/1.55 var(--body);color:#423E39;text-wrap:pretty}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pg-sticker{transition:rotate .35s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1)}
  .pg-stickers > li:hover .pg-sticker{rotate:0deg;scale:1.04}
}
@media (max-width:1023.98px){.pg-stickers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pg-stickers{grid-template-columns:1fr;gap:32px}.pg-stickers > li{grid-template-columns:112px 1fr;column-gap:20px;align-items:center}.pg-sticker{width:112px;height:112px;margin:0;border-width:5px;gap:4px}.pg-sticker .ss-icon{width:22px;height:22px}.pg-sticker b{font-size:13px}.pg-stickers h3{font-size:19px}}
@media (max-width:380px){.pg-stickers > li{grid-template-columns:92px 1fr;column-gap:16px}.pg-sticker{width:92px;height:92px;border-width:4px}.pg-sticker .ss-icon{width:20px;height:20px}.pg-sticker b{font-size:12px}}
/* About hero: text left, two studio facts right in a soft lilac panel (homepage note-card material), stacked on phones */
.pg-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.pg-about-hero .ss-eyebrow{margin-bottom:18px}
.pg-about-hero .pg-h1{font-size:60px}
.pg-glance{position:relative;isolation:isolate;padding:44px 40px;border-radius:var(--radius-card);background:linear-gradient(160deg,#F1ECFC,#DDD2F7)}
.pg-glance::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.45;mix-blend-mode:multiply;pointer-events:none}
.pg-glance ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.pg-glance-card{display:grid;gap:6px;justify-items:start;width:min(100%,330px);padding:20px 22px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.2)}
.pg-glance-card:nth-child(2){margin-left:44px}
.pg-glance-card strong{font:500 18px/1.25 var(--display);color:var(--ink)}
.pg-glance-card small{font:400 14.5px/1.4 var(--body);color:var(--muted)}
.pg-glance-deco{position:absolute;right:-26px;top:-46px;z-index:2;width:92px;rotate:8deg}.pg-glance-deco img{display:block;width:100%;height:auto}
@media (max-width:1279.98px){.pg-glance-deco{right:-4px}}
@media (max-width:1199.98px){.pg-about-grid{gap:48px}.pg-about-hero .pg-h1{font-size:52px}.pg-glance-card:nth-child(2){margin-left:24px}}
@media (max-width:1023.98px){.pg-about-grid{grid-template-columns:1fr}.pg-glance{max-width:560px}}
@media (max-width:809.98px){
  .pg-about-hero .pg-h1{font-size:40px}
  .pg-glance{padding:22px 20px}.pg-glance-card,.pg-glance-card:nth-child(2){width:100%;margin-left:0}
  .pg-glance-deco{width:64px;right:-6px;top:-34px}
}
/* Small phones: one type step down so the lead and the button stay on the first screen */
@media (max-width:359.98px){.pg-about-hero .pg-h1{font-size:36px}.pg-about-hero .pg-lead{font-size:17px}}

/* Process strip: soft tray, four steps in order (the list order carries the sequence) */
.pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:8px;list-style:none;background:var(--soft);border-radius:28px}
.pg-steps li{display:flex;flex-direction:column;gap:18px;min-height:190px;padding:24px;background:var(--bg);border-radius:20px}
.pg-steps p{margin:0;font:500 19px/1.4 var(--display);color:var(--ink)}
.pg-steps .ss-promise-icon{margin:0}

/* Link cards (related services, more concepts, 404) */
.pg-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.pg-link-card{display:flex;align-items:center;gap:16px;height:100%;padding:20px;background:var(--white);border-radius:20px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgb(28 26 23/.05),0 20px 40px -30px rgb(28 26 23/.25);transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
.pg-link-card .ss-promise-icon{flex:none;margin:0}
.pg-link-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pg-link-text strong{font:500 19px/1.3 var(--display)}
.pg-link-text span{font:400 15px/1.45 var(--body);color:var(--muted)}
.pg-link-card .ss-arrow-dot{flex:none}
@media (hover:hover){.pg-link-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgb(28 26 23/.35)}.pg-link-card:hover .ss-arrow-dot{background:var(--brand);color:var(--ink)}}

/* ---------- Contact ---------- */
.pg-contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"form talk";gap:56px;align-items:start}
.pg-note{display:flex;align-items:flex-start;gap:12px;margin:0;padding:16px 18px;background:var(--soft);border-radius:16px;font:400 16px/1.5 var(--body);color:var(--ink)}
.pg-note .ss-icon{margin-top:2px}

.pg-form{display:grid;gap:20px;padding:36px;background:var(--white);border-radius:var(--radius-card);box-shadow:0 1px 2px rgb(28 26 23/.05),0 30px 60px -36px rgb(28 26 23/.28)}
.pg-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pg-field{display:grid;gap:8px;min-width:0}
.pg-label{font:500 15px/1.35 var(--body);color:var(--ink)}
.pg-req{color:var(--brand-deep)}
.pg-optional{font-weight:400;color:var(--muted)}
.pg-form :is(input:not([type="checkbox"],[type="radio"]),select,textarea){width:100%;min-height:50px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  font:400 17px/1.4 var(--body);color:var(--ink);transition:border-color .2s ease,background-color .2s ease}
.pg-form textarea{min-height:170px;resize:vertical}
.pg-form ::placeholder{color:#8F897F;opacity:1}
.pg-form :is(input,select,textarea):hover{border-color:#D3CCC1}
.pg-form :is(input,select,textarea):focus{border-color:var(--ink);background:var(--white)}
.pg-form :is(input,select,textarea):user-invalid{border-color:#B42318;background:#FFF8F6}
.pg-select{position:relative;display:block}
.pg-select select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.pg-select .ss-icon{position:absolute;right:14px;top:50%;translate:0 -50%;width:18px;height:18px;pointer-events:none}
.pg-hint{margin:0;font:400 14px/1.45 var(--body);color:var(--muted)}
#message-help{margin-top:-12px}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pg-consent{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--body);color:var(--muted);cursor:pointer}
.pg-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.pg-consent a{color:var(--ink)}
.pg-submit{justify-self:start;margin-top:4px}
.pg-submit:disabled{opacity:.7;cursor:progress}
.pg-status{margin:0;padding:14px 16px;border-radius:12px;font:400 15px/1.5 var(--body);color:var(--ink);background:var(--soft)}
.pg-status:empty{display:none}
.pg-status[data-state="success"]{background:var(--mint)}
.pg-status[data-state="error"],.pg-status.error{background:#FBE3DC;color:#7A2E1F}

/* ---------- Concept work detail ---------- */
.pg-shot{margin:0}
.pg-shot figcaption{margin-top:14px;max-width:28.5em;text-wrap:pretty;font:400 15px/1.5 var(--body);color:var(--muted)}
.pg-shot figcaption strong{color:var(--ink);font-weight:500}
.pg-visual{position:relative;container-type:size;aspect-ratio:1240/680;border-radius:var(--radius-card);overflow:hidden;background:var(--tint);isolation:isolate}
.pg-visual::before,.pg-art::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 8% 4%,rgb(255 255 255/.34) 0 150px,transparent 151px),radial-gradient(circle at 92% 6%,rgb(255 255 255/.3) 0 170px,transparent 171px),radial-gradient(circle at 3% 98%,rgb(255 255 255/.22) 0 140px,transparent 141px)}
.pg-visual::after,.pg-art::after{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/textures/grain.png);opacity:.6;mix-blend-mode:multiply;pointer-events:none}
.pg-visual-screen{position:absolute;z-index:1;left:6%;right:6%;top:76px;border-radius:12px;overflow:hidden;background:#FBFAF8;box-shadow:0 1px 2px rgb(28 26 23/.06),0 18px 40px -8px rgb(28 26 23/.2)}
.pg-visual-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.pg-visual-sm{aspect-ratio:4/3}
.pg-visual-sm .pg-visual-screen{top:64px;left:7%;right:-20%}
.pg-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 0}
.pg-facts div{padding-top:16px;border-top:1px solid var(--line)}
.pg-facts dt{font:500 14px/1.4 var(--body);color:var(--muted)}
.pg-facts dd{margin:6px 0 0;font:400 17px/1.45 var(--body);color:var(--ink)}
.pg-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none}
.pg-checks li{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;background:var(--white);border-radius:16px;font:400 17px/1.5 var(--body);box-shadow:0 1px 2px rgb(28 26 23/.05)}
.pg-checks .ss-icon{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--mint);stroke-width:2.2}

/* Readable prose: 18px body, ~68ch measure */
.pg-prose{max-width:28.5em;font:400 18px/1.7 var(--body);color:var(--ink-2)}
.pg-prose p{margin:0 0 1.1em}
.pg-prose p:last-child{margin-bottom:0}
.pg-prose strong{font-weight:500;color:var(--ink)}
.pg-prose a:not(.ss-arrow-link){color:var(--ink);text-decoration-color:var(--brand)}

/* ---------- Insights ---------- */
.pg-art{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--tint);isolation:isolate}
.pg-art img{position:absolute;z-index:1;height:auto}
.pg-art-main{left:50%;top:54%;width:36%;translate:-50% -50%}
.pg-art-accent{right:14%;top:16%;width:9%}
.pg-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.pg-posts-2{grid-template-columns:repeat(2,1fr)}
.pg-posts>li{display:flex}
.pg-post{position:relative;display:flex;flex-direction:column;width:100%;padding:8px 8px 24px;background:var(--white);border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgb(28 26 23/.05),0 20px 40px -28px rgb(28 26 23/.22);transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)}
.pg-post-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:20px 16px 0}
.pg-post-title{margin:0;font:500 24px/1.25 var(--display);text-wrap:balance}
.pg-post-title a{text-decoration:none;color:var(--ink)}
.pg-post-title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-card)}
.pg-post-title a:focus-visible{outline:none}
.pg-post:has(a:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.pg-post p{margin:0;font:400 16px/1.55 var(--body);color:var(--muted)}
.pg-post .pg-meta{margin-top:auto;padding-top:8px;font-size:14px}
@media (hover:hover){.pg-post:hover{transform:translateY(-3px);box-shadow:0 26px 44px -26px rgb(28 26 23/.35)}}

.pg-article-body{max-width:28.5em;font:400 18px/1.7 var(--body);color:var(--ink-2)}
.pg-article-section{scroll-margin-top:110px}
.pg-article-section+.pg-article-section{margin-top:56px}
.pg-article-section h2{margin:0 0 16px;font:500 30px/1.3 var(--display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.pg-article-section p{margin:0 0 1.15em}
.pg-article-section ul{margin:0 0 1.15em;padding-left:1.2em}
.pg-article-section .pg-refs{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--soft);border-radius:14px;font-size:15px;line-height:1.5;color:var(--muted)}
.pg-refs .ss-icon{width:18px;height:18px;margin-top:2px;color:var(--ink)}
.pg-refs a{color:var(--ink);text-decoration-color:var(--brand)}
.pg-article-body>.pg-back{margin:48px 0 0}

/* ---------- Legal ---------- */
.pg-legal h2{margin:44px 0 12px;font:500 26px/1.3 var(--display);color:var(--ink)}

/* ---------- Private inbox (server-rendered, no site chrome) ---------- */
.pg-inbox{padding-block:40px 80px}
.pg-inbox .pg-lead{margin-bottom:36px}
.pg-inbox-item{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin-bottom:16px;padding:28px;background:var(--white);border-radius:20px;box-shadow:0 1px 2px rgb(28 26 23/.05)}
.pg-inbox-item h2{margin:0 0 6px;font:500 22px/1.3 var(--display)}
.pg-inbox-item p{margin:0 0 12px;color:var(--muted)}
.pg-inbox-item .pg-inbox-message{white-space:pre-wrap;color:var(--ink)}
.pg-inbox .pg-note{margin-top:24px}

/* ---------- Responsive ---------- */
@media (max-width:1199.98px){
  .pg-h1{font-size:55px}
  .pg-hero-decor{display:none}
  .pg-steps{grid-template-columns:repeat(2,1fr)}
  .pg-links{grid-template-columns:1fr}
  .pg-posts{grid-template-columns:repeat(2,1fr)}
  .pg-contact{grid-template-columns:minmax(0,1fr);grid-template-areas:"talk" "form";gap:32px}
}
@media (max-width:809.98px){
  .pg .ss-section{padding-top:80px}
  .pg .ss-head{margin-bottom:32px}
  .pg-hero{padding:40px 0 44px}
  .pg-h1{font-size:40px;line-height:1.15}
  .pg-lead{margin-top:16px;font-size:19px}
  .pg-actions{margin-top:28px}
  .pg-back{margin-bottom:20px}
  .pg-card-title,.pg-card .ss-h2{font-size:32px}
  .pg-grid-2,.pg-steps,.pg-posts,.pg-posts-2,.pg-facts,.pg-checks,.pg-row,.pg-inbox-item{grid-template-columns:1fr}
  .pg-steps li{min-height:0}
  .pg-form{padding:24px 20px}
  .pg-visual{aspect-ratio:4/3}
  .pg-visual-screen{top:56px;left:5%;right:-30%}
  .pg-article-section h2{font-size:26px}
  .pg-prose,.pg-article-body{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .pg-hero-decor img{animation:none}
  .pg-back .ss-icon,.pg-link-card,.pg-post,.pg-form :is(input,select,textarea){transition:none}
}

/* Illustrative collage (Management & support): three notes read as a sequence, top-left to bottom-right */
.ss-collage{position:absolute;inset:0;z-index:1}
.ss-collage .ss-note{width:min(56%,250px)}
.ss-note-1{left:6%;top:17%;rotate:-2deg}
.ss-note-2{left:27%;top:42%;rotate:1.5deg}
.ss-note-3{left:48%;top:67%;rotate:-1deg}
@media (max-width:809.98px){
  .ss-service-panel:has(.ss-collage){min-height:400px}
  .ss-collage .ss-note{width:min(76%,220px)}
  .ss-note-1{left:5%;top:56px}
  .ss-note-2{left:50%;top:176px;translate:-50% 0}
  .ss-note-3{left:auto;right:5%;top:278px}
}
/* Below 360px the notes wrap to more lines, so they spread further apart to keep each one readable */
@media (max-width:359.98px){.ss-service-panel:has(.ss-collage){min-height:448px}.ss-note-2{top:180px}.ss-note-3{top:304px}}

/* Measure: running text stays at or under ~72 characters (Jost ≈ 0.42em per character) */
.pg-post p,.pg-note,.pg-link-text span,.pg-article-section .pg-refs,.pg-form .pg-hint{max-width:28.5em}
.pg-status{max-width:calc(28.5em + 32px)}
.pg-prose p,.pg-article-body p,.pg-post p,.pg-note,.pg-link-text span,.pg-checks li,.pg-facts dd{text-wrap:pretty}

/* Collage panels position their notes in px, so they keep a floor under the aspect-ratio panels */
/* aspect-ratio would turn a min-height into a min-width (overflow at 810-856px), so collage panels size by height alone */
@media (max-width:1199.98px){.ss-service-panel:has(.ss-collage){aspect-ratio:auto}}
@media (min-width:810px) and (max-width:1199.98px){.ss-service-panel:has(.ss-collage){min-height:340px}
  /* The panel is full width here, so the notes spread across it instead of bunching in the left two-thirds */
  .ss-note-2{left:50%;translate:-50% 0}.ss-note-3{left:auto;right:6%}}
/* Balanced lines inside the notes, so no word sits alone on a phone */
.ss-collage .ss-note :is(strong,small){text-wrap:balance}

/* Case-study screens are shown whole: the frame is sized from the panel's height so the entire screen fits, never cut */
.pg-visual-screen{left:50%;right:auto;translate:-50% 0;aspect-ratio:1.5;width:min(88%, calc((100cqh - 100px) * 1.5))}
.pg-visual-sm .pg-visual-screen{left:50%;right:auto;top:64px;width:min(90%, calc((100cqh - 88px) * 1.5))}
@media (max-width:809.98px){.pg-visual-screen,.pg-visual-sm .pg-visual-screen{left:50%;right:auto;top:56px;width:min(90%, calc((100cqh - 76px) * 1.5))}}

/* Contact form feedback (transitions.dev #12, #4) */
.pg-form .is-shaking{animation:ss-shake 280ms linear}
@keyframes ss-shake{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}28.57%{transform:translateX(6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  57.14%{transform:translateX(-6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}78.57%{transform:translateX(4px);animation-timing-function:cubic-bezier(.22,1,.36,1)}100%{transform:translateX(0)}}
.pg-status.is-swapped{animation:ss-swap-in .15s ease-in-out}
@keyframes ss-swap-in{from{opacity:0;transform:translateY(4px);filter:blur(2px)}}
@media (prefers-reduced-motion:reduce){.pg-form .is-shaking,.pg-status.is-swapped{animation:none}}

/* Desktop cards whose row is only as tall as the panel's min-height: with size containment the window's cqh resolved
   to 0, so the panel fills a definite grid row instead */
@media (min-width:1200px){.pg-card{grid-auto-rows:minmax(376px,auto)}.pg-card .ss-service-panel:not(:has(.ss-collage)){min-height:0;height:100%}}

/* About "Why we started": same columns as "How we work" further down */
/* Why we started: heading and paragraph left, a before/after picture right (same card language as the hero's glance box). */
.pg-why{align-items:center}
.pg-why > div > p{margin:24px 0 0;font:400 19px/1.55 var(--body);color:var(--ink-2);text-wrap:pretty}
.pg-why-art{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:64px 32px 36px;border-radius:var(--radius-card);background:linear-gradient(160deg,#FBF1DD,#F2DDB0)}
.pg-why-art::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.45;mix-blend-mode:multiply;pointer-events:none}
.pg-why-since{position:absolute;left:20px;top:20px;background:#fff}
.pg-why-card{display:grid;gap:14px;align-content:start;justify-items:start;height:100%;box-sizing:border-box;padding:20px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.2)}
.pg-why-card ul{display:grid;gap:10px;width:100%;margin:0;padding:0;list-style:none}
.pg-why-card li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line);font:400 15px/1.3 var(--body);color:var(--ink)}
.pg-why-card li strong{font-weight:500}
.pg-why-card li small{font-size:15px;color:#423E39;white-space:nowrap}
.pg-why-card > p{margin:0;font:400 15px/1.45 var(--body);color:#423E39}
.pg-why-title{font:500 18px/1.25 var(--display);color:var(--ink)}
.pg-why-after li{justify-content:flex-start;align-items:center;border-bottom-style:solid}
.pg-why-after .ss-icon{width:18px;height:18px;flex:none;color:#2F8F5B}
.pg-why-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff}
.pg-why-arrow .ss-icon{width:18px;height:18px}
@media (max-width:1199.98px){.pg-why{grid-template-columns:1fr;row-gap:36px}.pg-why > div{max-width:680px}.pg-why-art{max-width:680px}}
@media (max-width:809.98px){.pg-why > div > p{margin-top:16px;font-size:17px}.pg-why-art{padding:56px 20px 24px}}
@media (max-width:639.98px){.pg-why-art{grid-template-columns:1fr;justify-items:center;padding:56px 16px 20px}.pg-why-card{width:100%;max-width:340px}.pg-why-arrow{rotate:90deg}}

/* About "Are we a good fit?": white yes-card, beige no-card with a muted outline X and a foot line pinned to its bottom */
.pg-fitcheck{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pg-fitcheck-card{display:flex;flex-direction:column;padding:32px;border-radius:var(--radius-card)}
.pg-fitcheck-yes{background:var(--white);border:1px solid rgb(28 26 23/.14)}
.pg-fitcheck-no{background:var(--soft)}
.pg-fitcheck h3{margin:0 0 16px;font:500 15px/1.3 var(--body);color:var(--ink)}
.pg-fitcheck ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.pg-fitcheck li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font:400 18px/1.45 var(--body);color:var(--ink);text-wrap:pretty}
.pg-fitcheck li .ss-icon{box-sizing:border-box;width:28px;height:28px;padding:6px;border-radius:50%;stroke-width:2.5}
.pg-fitcheck-yes li .ss-icon{background:#D6F0E2;color:#1F6B45}
.pg-fitcheck-no li .ss-icon{width:24px;height:24px;margin:2px;padding:5px;border:1.5px solid #7A5C4B;background:transparent;color:#7A5C4B;stroke-width:2}
.pg-fitcheck-foot{margin:20px 0 0;font:400 16px/1.5 var(--body);color:var(--ink)}
.pg-fitcheck-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:809.98px){.pg-fitcheck{grid-template-columns:1fr;gap:16px}.pg-fitcheck-card{padding:24px}.pg-fitcheck li{font-size:17px}}
@media (max-width:380px){.pg-fitcheck-card{padding:20px}.pg-fitcheck li{grid-template-columns:24px 1fr;gap:12px}.pg-fitcheck-yes li .ss-icon{width:24px;height:24px;padding:5px}.pg-fitcheck-no li .ss-icon{width:22px;height:22px;margin:1px}}

/* About "The rules we work by": three notes taped to the beige band (owner pick 2026-10-01, "Pinned notes"). Same language as
   the rest of the site: white note with the glance-card shadow, eyebrow label, pastel tape with the grain texture, and a gentle
   tilt like the ownership notes. Staggered on wide screens, a straight stack on phones. */
.pg .pg-rules-band{margin-top:112px;padding:96px 0 112px;background:#EDE8E0}
.pg-rules-band .ss-h2{text-wrap:balance}
.pg-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:40px;margin:64px 0 0;padding:0 8px;list-style:none}
.pg-rules > li{position:relative;padding:40px 30px 32px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.2);rotate:-.8deg}
.pg-rules > li:nth-child(2){margin-top:36px;rotate:.6deg}
.pg-rules > li:nth-child(3){margin-top:12px;rotate:-.4deg}
.pg-rules > li::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:-3deg;background:url(/assets/textures/grain.png),var(--tape);background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-rules > li:nth-child(2)::before{rotate:2deg}
.pg-rule-num{margin:0 0 14px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-rules h3{margin:0 0 10px;font:500 24px/1.25 var(--display);color:var(--ink);text-wrap:balance}
.pg-rules p:last-child{margin:0;font:400 17px/1.6 var(--body);color:var(--ink-2);text-wrap:pretty}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pg-rules > li{transition:rotate .35s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1)}
  .pg-rules > li:hover{rotate:0deg;translate:0 -4px}
}
@media (min-width:900px){.pg-rules > li{min-height:240px;box-sizing:border-box}}
@media (max-width:1199.98px){.pg-rules{gap:28px}.pg-rules > li{padding:36px 24px 28px}.pg-rules h3{font-size:22px}}
@media (max-width:899.98px){
  .pg .pg-rules-band{margin-top:80px;padding:72px 0 80px}
  .pg-rules{grid-template-columns:1fr;gap:40px;max-width:36rem;margin-top:44px;padding:0 4px}
  .pg-rules > li,.pg-rules > li:nth-child(2),.pg-rules > li:nth-child(3){margin-top:0}
  .pg-rules > li{rotate:-.5deg}.pg-rules > li:nth-child(2){rotate:.4deg}.pg-rules > li:nth-child(3){rotate:-.3deg}
  .pg-rules h3{font-size:clamp(1.25rem,1rem + 1.2vw,1.5rem);margin-bottom:8px}
}

/* About "Questions about working with us": two open answers, one row from 1024px, one column below */
.pg .pg-afaq-head{margin-bottom:40px}
/* About "Questions about working with us": pastel file folders (owner pick 2026-10-01, "Folders"). A "Question N" tab in the
   folder's own tint, the question on the folder, the answer on a white sheet tucked inside with a slight tilt. One column below 900px. */
.pg-folders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 28px;margin:0;padding:30px 0 0;list-style:none}
.pg-folders > li{position:relative;isolation:isolate;padding:28px 24px 24px;border-radius:0 22px 22px 22px;background:linear-gradient(160deg,color-mix(in srgb,var(--t) 40%,#fff),var(--t))}
.pg-folders > li::after,.pg-folder-tab::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-folder-tab{position:absolute;left:0;top:-30px;isolation:isolate;display:flex;align-items:center;height:31px;padding:0 22px;border-radius:14px 14px 0 0;background:color-mix(in srgb,var(--t) 40%,#fff);font:500 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pg-folder summary{display:block;list-style:none;cursor:pointer}
.pg-folder summary::-webkit-details-marker{display:none}
.pg-folder summary .ss-icon{display:none}
.pg-folder summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}
@media (min-width:900px){.pg-folder summary{pointer-events:none;cursor:default}}
.pg-folders h3{margin:0 0 18px;font:500 22px/1.25 var(--display);color:var(--ink);text-wrap:balance}
.pg-folder-sheet{padding:20px 22px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 12px 24px -14px rgb(28 26 23/.25);rotate:var(--r)}
.pg-folder-sheet p{margin:0;font:400 17px/1.6 var(--body);color:var(--ink-2);text-wrap:pretty}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pg-folder-sheet{transition:rotate .35s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1)}
  .pg-folders > li:hover .pg-folder-sheet{rotate:0deg;translate:0 -3px}
}
@media (max-width:899.98px){
  .pg-folders{grid-template-columns:1fr;gap:52px}
  .pg-folder summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pg-folder summary .ss-icon{display:block;flex:none;box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:50%;background:rgb(255 255 255/.75);color:var(--ink);transition:rotate .2s}
  .pg-folder[open] summary .ss-icon{rotate:180deg}
  .pg-folder:not([open]) h3{margin-bottom:0}
}
@media (max-width:809.98px){.pg .pg-afaq-head{margin-bottom:36px}.pg-folders h3{font-size:20px}}

main:has(.pg-about-hero) .ss-sub{color:#4A4641}
/* About only: the closing section's decorative orange lines read as a glitch next to the heading on phones (7/7 in the second
   owner check), so they're hidden here. */
body:has(.pg-about-hero) .ss-meteors{display:none}

/* ---------- /services extra sections (owner picks 2026-10-01, docs/research/services-page-2026-10-01.md) ---------- */
.pg-sec-foot{margin:40px 0 0;font:400 16px/1.5 var(--body);color:var(--muted)}
/* What it costs: hanging price tags on a string, then how you pay */
.pg-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:48px 0 0;padding:0;list-style:none}
.pg-tags > li{position:relative;padding-top:40px;filter:drop-shadow(0 16px 18px rgb(28 26 23/.16))}
.pg-tags > li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:58px;background:#A89E92;rotate:var(--r);transform-origin:50% 0}
.pg-tags > li::after{content:"";position:absolute;left:calc(50% - 5px);top:-5px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.pg-tag{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;height:100%;min-height:250px;box-sizing:border-box;padding:52px 24px 26px;background:linear-gradient(160deg,color-mix(in srgb,var(--t) 35%,#fff),var(--t));clip-path:polygon(50% 0,100% 30px,100% 100%,0 100%,0 30px);rotate:var(--r);transform-origin:50% 0}
.pg-tag::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-tag::before{content:"";position:absolute;top:22px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 2px 3px rgb(28 26 23/.25)}
.pg-tag h3{margin:0;font:500 19px/1.25 var(--display);color:var(--ink)}
.pg-tag p{margin:0;font:400 15px/1.5 var(--body);color:#423E39;text-wrap:pretty}
.pg-tag .pg-tag-price{order:-1;font:500 27px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pg-pay{margin-top:48px}
.pg-pay-label{margin:0 0 14px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-pay ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pg-pay li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--white);border-radius:14px;font:400 15.5px/1.4 var(--body);color:var(--ink-2);box-shadow:0 1px 2px rgb(28 26 23/.05)}
.pg-pay b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);font:500 14px/1 var(--body);color:#fff}
/* Keep your tools: the system in the middle, the tools plugged in around it, and the same list in words beside it */
.pg-plug{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:40px}
.pg-plug-map{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto}
.pg-plug-map svg{position:absolute;inset:0;width:100%;height:100%}
.pg-plug-map line{stroke:#B9AFA3;stroke-width:.5;stroke-dasharray:1.6 1.4}
.pg-plug-core{position:absolute;left:50%;top:50%;translate:-50% -50%;isolation:isolate;display:grid;place-items:center;align-content:center;gap:6px;width:34%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,color-mix(in srgb,var(--lilac) 35%,#fff),var(--lilac));text-align:center;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22)}
.pg-plug-core::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
/* The homepage mascot (Lottie, poster first; site.js plays it on idle and pauses it offscreen) */
.pg-plug-core .ss-mascot{width:42%;height:auto;aspect-ratio:1}
.pg-plug-core b{font:500 17px/1.15 var(--display);color:var(--ink)}
.pg-plug-pin{position:absolute;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--white);font:500 15px/1 var(--body);color:var(--ink);white-space:nowrap;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22)}
.pg-plug-pin i{width:12px;height:12px;border-radius:50%;background:var(--t)}
.pg-plug-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.pg-plug-list li{display:grid;grid-template-columns:40px 1fr;gap:2px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pg-plug-list span{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--t)}
.pg-plug-list .ss-icon{width:19px;height:19px}
.pg-plug-list h3{margin:0;font:500 18px/1.25 var(--display);color:var(--ink)}
.pg-plug-list p{margin:0;font:400 15px/1.45 var(--body);color:var(--muted)}
/* Who we build for: little shopfronts, a striped awning over each */
.pg-shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin:52px 0 0;padding:0;list-style:none}
.pg-shops > li{position:relative;background:var(--white);border-radius:0 0 18px 18px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22)}
.pg-shop-awn{position:relative;height:46px;border-radius:12px 12px 0 0;background:repeating-linear-gradient(90deg,var(--t) 0 32px,#fff 32px 64px);box-shadow:inset 0 -2px 0 rgb(28 26 23/.06)}
.pg-shop-awn::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:radial-gradient(circle at 16px 0,var(--t) 15px,transparent 16px) 0 0/64px 14px repeat-x,radial-gradient(circle at 48px 0,#fff 15px,transparent 16px) 0 0/64px 14px repeat-x;filter:drop-shadow(0 2px 1px rgb(28 26 23/.08))}
.pg-shop-body{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:30px 22px 24px}
.pg-shop-body span{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--soft)}
.pg-shop-body .ss-icon{width:21px;height:21px}
.pg-shop-body h3{margin:0;font:500 19px/1.25 var(--display);color:var(--ink)}
.pg-shop-body p{margin:0;font:400 15px/1.5 var(--body);color:#423E39;text-wrap:pretty}
/* Custom or an app: a signpost with two boards, the reasons under each */
.pg-sign{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1080px;margin:56px auto 0;padding-top:140px}
.pg-sign-post{position:absolute;left:50%;top:0;bottom:0;width:18px;translate:-50% 0;border-radius:9px 9px 0 0;background:linear-gradient(90deg,#CDBFAE,#E2D6C7 45%,#C2B3A1);box-shadow:inset 0 0 0 1px rgb(28 26 23/.08)}
.pg-sign-board{position:absolute;isolation:isolate;display:flex;align-items:center;gap:10px;height:62px;padding:0 34px;font:500 21px/1 var(--display);color:var(--ink);filter:drop-shadow(0 10px 12px rgb(28 26 23/.18))}
.pg-sign-board::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-sign-board .ss-icon{width:22px;height:22px}
.pg-sign-left{top:14px;right:calc(50% - 22px);padding-left:46px;background:linear-gradient(160deg,color-mix(in srgb,var(--sky) 35%,#fff),var(--sky));clip-path:polygon(30px 0,100% 0,100% 100%,30px 100%,0 50%);rotate:-3deg}
.pg-sign-right{top:66px;left:calc(50% - 22px);padding-right:46px;background:linear-gradient(160deg,color-mix(in srgb,var(--lilac) 35%,#fff),var(--lilac));clip-path:polygon(0 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,0 100%);rotate:2.5deg}
.pg-sign-col{position:relative;z-index:1;padding:28px 28px 26px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22)}
.pg-sign-col h3{margin:0 0 16px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-sign-col ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pg-sign-col li{display:flex;gap:12px;font:400 16.5px/1.5 var(--body);color:var(--ink-2)}
.pg-sign-col li .ss-icon{flex:none;width:24px;height:24px;padding:5px;box-sizing:border-box;border-radius:50%;background:var(--t)}
@media (max-width:1023.98px){
  .pg-tags{grid-template-columns:1fr 1fr;gap:20px 28px}
  .pg-plug{grid-template-columns:1fr;gap:32px}
  .pg-shops{grid-template-columns:1fr 1fr}
}
@media (max-width:899.98px){.pg-pay ol{grid-template-columns:1fr 1fr}}
@media (max-width:809.98px){
  .pg-sign{grid-template-columns:1fr;gap:28px;padding-top:0}
  .pg-sign-post{display:none}
  .pg-sign-board{position:relative;top:auto;left:auto;right:auto;justify-self:start;rotate:0deg;margin-bottom:-6px}
  .pg-sign-left{order:1}.pg-sign-col:nth-of-type(1){order:2}.pg-sign-right{order:3;margin-top:12px}.pg-sign-col:nth-of-type(2){order:4}
}
@media (max-width:639.98px){.pg-shops{grid-template-columns:1fr;gap:28px}}
@media (max-width:539.98px){
  .pg-tags,.pg-pay ol{grid-template-columns:1fr}
  .pg-tag{min-height:0}
  .pg-plug-map{width:88%}
  .pg-plug-pin{padding:7px 10px;font-size:12.5px}
  .pg-plug-core b{font-size:13px}
}

/* ---------- Service detail pages (rebuilt 2026-10-02, docs/research/service-detail-pages-2026-10-02.md) ---------- */
/* Hero: words, price and weeks on the left; the service's screen on the right (replaces the second service card) */
.pg-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.pg-detail-hero .pg-h1{font-size:54px;text-wrap:balance}
.pg-detail-hero .ss-service-panel{height:420px;min-height:0;width:100%;aspect-ratio:auto} /* size containment needs a definite height, or the screen window collapses */
.pg-hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0}
.pg-hero-facts div{padding:12px 16px;border-radius:14px;background:var(--white);box-shadow:0 1px 2px rgb(28 26 23/.06)}
.pg-hero-facts dt{font:500 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.pg-hero-facts dd{margin:4px 0 0;font:500 17px/1.25 var(--display);color:var(--ink)}
.pg-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0;padding:0;list-style:none}
.pg-step-when{font:500 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.pg-steps li:has(.pg-step-when){gap:12px}
@media (max-width:1199.98px){.pg-detail-hero .pg-h1{font-size:46px}.pg-detail-grid{gap:40px}}
@media (max-width:1023.98px){.pg-detail-grid{grid-template-columns:minmax(0,1fr)}.pg-detail-hero .ss-service-panel{height:360px}.pg-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:809.98px){.pg-detail-hero .pg-h1{font-size:38px}.pg-detail-hero .ss-service-panel{height:260px}}
@media (max-width:639.98px){.pg-grid-3{grid-template-columns:1fr}}
/* What it costs on a detail page (owner pick "Side-by-side columns", 2026-10-02) */
.pg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:48px 0 0;padding:0;list-style:none}
.pg-cols > li{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;padding:30px 28px;border-radius:var(--radius-card);background:linear-gradient(160deg,color-mix(in srgb,var(--t) 35%,#fff),var(--t))}
.pg-cols > li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/textures/grain.png);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pg-cols h3{margin:0;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pg-cols p{margin:0;font:400 16px/1.55 var(--body);color:#3E3A36}
.pg-cols .pg-cols-price{font:500 34px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pg-cols .pg-cols-weeks{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--white);font:500 14.5px/1 var(--body);color:var(--ink)}
.pg-cols-weeks .ss-icon{width:16px;height:16px}
.pg-cols .pg-cols-weeks + p{padding-top:14px;border-top:1px solid rgb(28 26 23/.12)}
/* How it connects (owner pick "Pinned notes in a row", 2026-10-02): taped notes, staggered, an arrow between each */
.pg-notes-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:start;gap:22px;margin:60px 0 0;padding:0 6px;list-style:none}
.pg-notes-row > li{position:relative;padding:34px 20px 22px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22);rotate:var(--r)}
.pg-notes-row > li:nth-child(even){margin-top:30px}
.pg-notes-row > li::before{content:"";position:absolute;top:-11px;left:50%;width:72px;height:22px;translate:-50% 0;rotate:-3deg;background:url(/assets/textures/grain.png),var(--tape);background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-notes-row > li:not(:last-child)::after{content:"";position:absolute;z-index:2;top:50%;right:-20px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4501A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-notes-step{margin:0;font:500 12.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-notes-row h3{margin:10px 0 6px;font:500 19px/1.25 var(--display);color:var(--ink)}
.pg-notes-row p:last-child{margin:0;font:400 15px/1.5 var(--body);color:#423E39;text-wrap:pretty}
@media (max-width:1023.98px){.pg-notes-row{grid-template-columns:1fr 1fr;gap:36px 24px}.pg-notes-row > li:nth-child(even){margin-top:0}.pg-notes-row > li::after{display:none}}
@media (max-width:539.98px){.pg-notes-row{grid-template-columns:1fr}}
/* What you get at the end (owner pick "Sealed envelope beside the list", 2026-10-02): the list on the left, icon beside a text
   block so short and long items line up; a sealed envelope on the right, with flap fold lines, a logo seal and a mascot stamp. */
.pg-env{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:44px}
.pg-env-label{margin:0 0 22px;padding-bottom:16px;border-bottom:1px dashed var(--line);font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-env-list ul{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;margin:0;padding:0;list-style:none}
.pg-env-list li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.pg-env-list li > span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--t)}
.pg-env-list li .ss-icon{width:17px;height:17px}
.pg-env-list h3{margin:6px 0 4px;font:500 18px/1.25 var(--display);color:var(--ink)}
.pg-env-list p{margin:0;font:400 15px/1.5 var(--body);color:#423E39;text-wrap:pretty}
.pg-env-art{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1.45;border-radius:16px;background:#F4C6A8;rotate:-4deg;isolation:isolate;box-shadow:0 1px 2px rgb(28 26 23/.08),0 24px 44px -20px rgb(28 26 23/.4)}
.pg-env-art::before{content:"";position:absolute;left:0;right:0;top:0;height:56%;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#F1C2A2,#ECB894);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px rgb(28 26 23/.15))}
.pg-env-art::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(to top right,transparent 49.7%,rgb(28 26 23/.06) 50%,transparent 50.3%),linear-gradient(to top left,transparent 49.7%,rgb(28 26 23/.06) 50%,transparent 50.3%),url(/assets/textures/grain.png);mix-blend-mode:multiply;opacity:.9}
.pg-env-seal{position:absolute;z-index:2;left:50%;top:56%;translate:-50% -50%;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F39A5E,#E8671A 60%,#B4501A);box-shadow:0 4px 10px -3px rgb(28 26 23/.45)}
.pg-env-seal img{width:42px;height:auto}
.pg-env-stamp{position:absolute;z-index:2;right:16px;top:14px;display:grid;place-items:center;width:52px;height:60px;box-sizing:border-box;background:var(--butter);outline:2px dashed rgb(255 255 255/.95);outline-offset:-5px;rotate:6deg;box-shadow:0 2px 6px -2px rgb(28 26 23/.3)}
.pg-env-stamp img{width:34px;height:auto}
.pg-env-to{position:absolute;z-index:2;left:22px;bottom:18px;margin:0;font:500 15px/1.35 var(--display);color:var(--ink)}
.pg-env-to small{display:block;font:500 11.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#7A5A45}
.pg-env-deco{position:absolute;z-index:3;right:-14px;bottom:-26px;width:84px;height:auto;rotate:14deg;filter:drop-shadow(0 10px 14px rgb(28 26 23/.2))}
@media (max-width:1279.98px){.pg-env-deco{right:8px}}
@media (max-width:899.98px){.pg-env{grid-template-columns:1fr;gap:40px}.pg-env-art{order:-1;width:min(100% - 40px,320px)}.pg-env-deco{right:-14px;bottom:-18px;width:60px}}
@media (max-width:767.98px){.pg-env-list ul{grid-template-columns:1fr}}

/* ---------- Work (rebuilt 2026-10-02, docs/research/work-page-2026-10-02.md) ----------
   Each sample leads with the owner's problem on a taped note over its screen, then price and weeks (the detail-hero fact
   boxes) and the tools it connects to. Hero, one job and before/after: see the 2026-10-03 block below. Project pages: a radio-driven screen tour
   (no script; every screen shows, stacked, where :has() isn't supported) and the pinned-notes row for the build plan. */
.pg-sample-note::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:-3deg;background:url(/assets/textures/grain.png),var(--tape,var(--butter));background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-sample-note small,.pg-sample-trade,.pg-sample-tools p{display:block;margin:0 0 12px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}

.pg-samples{display:grid;gap:120px}
.pg-sample{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:72px;align-items:center;scroll-margin-top:110px}
.pg-sample:nth-child(even) .pg-sample-art{order:2}
.pg-sample-art{position:relative}
.pg-sample-art .pg-visual{aspect-ratio:16/11}
.pg-sample-note{position:absolute;z-index:2;left:-12px;bottom:-40px;max-width:290px;margin:0;padding:30px 22px 20px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.24);rotate:var(--r);font:500 20px/1.3 var(--display);color:var(--ink);text-wrap:balance}
.pg-sample:nth-child(even) .pg-sample-note{left:auto;right:-12px}
.pg-sample-note small{margin-bottom:8px;font-size:12px}
.pg-sample-trade{color:var(--muted)}
.pg-sample .pg-sample-sum{margin:16px 0 0;max-width:30em;font:400 18px/1.55 var(--body);color:var(--ink-2);text-wrap:pretty}
.pg-sample .pg-hero-facts{margin-top:26px}
.pg-sample-tools{margin-top:22px}
.pg-sample-tools p{margin-bottom:10px;font-size:12px;color:var(--muted)}
.pg-sample-tools ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pg-sample-tools li{padding:8px 13px;border-radius:999px;background:var(--white);font:500 14px/1.2 var(--body);color:var(--ink);box-shadow:0 1px 2px rgb(28 26 23/.08)}
.pg-sample .pg-card-actions{margin-top:30px}


.pg-sample-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;font:400 15px/1.4 var(--body);color:var(--muted)}
.pg-sample-label span{padding:7px 12px;border-radius:999px;background:var(--butter);font:500 13px/1 var(--body);color:var(--ink)}
.pg-problem{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.pg-problem .pg-sample-note{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin-top:12px}
.pg-sample-note-lg{padding:40px 30px 30px;font-size:28px}

.pg-tour{position:relative}
.pg-tour-input{position:absolute;opacity:0;pointer-events:none}
.pg-tour-tabs{display:none;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.pg-tour-tabs label{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--white);font:500 15px/1 var(--body);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgb(28 26 23/.08);transition:background .2s ease,color .2s ease}
.pg-tour-tabs b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);font:500 13px/1 var(--display);color:var(--ink)}
.pg-tour-panels{display:grid;gap:56px}
@supports selector(:has(a)){
  .pg-tour-tabs{display:flex}
  .pg-tour-panels{gap:0}
  .pg-tour-panel{display:none}
  .pg-tour:has(.pg-tour-input:nth-of-type(1):checked) .pg-tour-panel:nth-child(1),.pg-tour:has(.pg-tour-input:nth-of-type(2):checked) .pg-tour-panel:nth-child(2),.pg-tour:has(.pg-tour-input:nth-of-type(3):checked) .pg-tour-panel:nth-child(3),.pg-tour:has(.pg-tour-input:nth-of-type(4):checked) .pg-tour-panel:nth-child(4),.pg-tour:has(.pg-tour-input:nth-of-type(5):checked) .pg-tour-panel:nth-child(5),.pg-tour:has(.pg-tour-input:nth-of-type(6):checked) .pg-tour-panel:nth-child(6){display:block}
  .pg-tour:has(.pg-tour-input:nth-of-type(1):checked) .pg-tour-tabs label:nth-child(1),.pg-tour:has(.pg-tour-input:nth-of-type(2):checked) .pg-tour-tabs label:nth-child(2),.pg-tour:has(.pg-tour-input:nth-of-type(3):checked) .pg-tour-tabs label:nth-child(3),.pg-tour:has(.pg-tour-input:nth-of-type(4):checked) .pg-tour-tabs label:nth-child(4),.pg-tour:has(.pg-tour-input:nth-of-type(5):checked) .pg-tour-tabs label:nth-child(5),.pg-tour:has(.pg-tour-input:nth-of-type(6):checked) .pg-tour-tabs label:nth-child(6){background:var(--ink);color:var(--white)}
  .pg-tour:has(.pg-tour-input:nth-of-type(1):focus-visible) .pg-tour-tabs label:nth-child(1),.pg-tour:has(.pg-tour-input:nth-of-type(2):focus-visible) .pg-tour-tabs label:nth-child(2),.pg-tour:has(.pg-tour-input:nth-of-type(3):focus-visible) .pg-tour-tabs label:nth-child(3),.pg-tour:has(.pg-tour-input:nth-of-type(4):focus-visible) .pg-tour-tabs label:nth-child(4),.pg-tour:has(.pg-tour-input:nth-of-type(5):focus-visible) .pg-tour-tabs label:nth-child(5),.pg-tour:has(.pg-tour-input:nth-of-type(6):focus-visible) .pg-tour-tabs label:nth-child(6){outline:2px solid var(--brand);outline-offset:3px}
}
@media (hover:hover){.pg-tour-tabs label:hover{background:var(--soft)}}

@media (max-width:1199.98px){
  .pg-sample{gap:56px}
}
@media (max-width:1023.98px){
  .pg-sample{grid-template-columns:1fr;gap:64px}
  .pg-sample:nth-child(even) .pg-sample-art{order:0}
  .pg-sample-note,.pg-sample:nth-child(even) .pg-sample-note{left:16px;right:auto;bottom:-44px}
  .pg-problem{grid-template-columns:1fr;gap:36px}
  .pg-problem .pg-sample-note{max-width:440px}
}
@media (max-width:809.98px){
  .pg-samples{gap:88px}
  .pg-sample-art .pg-visual{aspect-ratio:4/3}
  .pg-sample-note,.pg-sample:nth-child(even) .pg-sample-note{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin:-36px 16px 0;font-size:19px}
  .pg-sample{gap:32px}
  .pg-sample-note-lg{font-size:23px;padding:34px 24px 24px}
  .pg-tour-tabs label{font-size:14px;padding:6px 12px 6px 6px}
  .pg-tour-tabs b{width:24px;height:24px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.pg-tour-tabs label{transition:none}}

/* ---------- Contact (rebuilt 2026-10-02, docs/research/contact-blog-2026-10-02.md) ----------
   Phone, email, call hours and reply time in a taped note beside the form (7 of 7 owners wanted to call first); numbered next
   steps with times; service and budget as radio pills. The native radio stays visible inside each pill, so the choice reads even
   where :has() isn't supported. */
.pg-talk{grid-area:talk;position:relative;margin:8px 0 0;padding:36px 28px 26px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.2);rotate:-.8deg}
.pg-talk::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:2deg;background:url(/assets/textures/grain.png),var(--mint);background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-talk .pg-talk-label{margin:0 0 14px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-talk a{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.pg-talk a .ss-icon{flex:none;color:var(--brand)}
.pg-talk-phone{font:500 30px/1.15 var(--display);letter-spacing:-.01em}
.pg-talk-phone .ss-icon{width:24px;height:24px}
.pg-talk-mail{margin-top:10px;font:500 18px/1.3 var(--body)}
.pg-talk-mail .ss-icon{width:20px;height:20px}
.pg-talk a:hover{text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:.2em}
.pg-talk p{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font:400 15px/1.5 var(--body);color:var(--muted)}
.pg-talk p + p{margin-top:8px}
.pg-talk p .ss-icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ink)}
.pg-choice{margin:0;padding:0;border:0;min-width:0}
.pg-choice legend{padding:0;margin-bottom:10px}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-chips label{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;background:var(--bg);font:500 15px/1.2 var(--body);color:var(--ink);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.pg-chips input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.pg-chips label:hover{border-color:#D3CCC1}
.pg-chips label:has(input:checked){border-color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
.pg-chips label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:1023.98px){.pg-talk{max-width:520px}}
@media (max-width:809.98px){.pg-talk{padding:32px 22px 22px;rotate:-.5deg}.pg-talk-phone{font-size:26px}.pg-talk-mail{font-size:16px}.pg-chips label{font-size:14px;padding:0 14px 0 10px}}
@media (prefers-reduced-motion:reduce){.pg-chips label{transition:none}}

.pg-contact > .pg-form{grid-area:form}

/* ---------- Blog (2026-10-02, docs/research/contact-blog-2026-10-02.md) ----------
   "Read this if" on each card so owners see who a guide is for; the short answer up top as a taped note (summary first). */
.pg-post-for{margin:0 0 10px!important;font:400 14px/1.45 var(--body)!important;color:var(--ink-2)!important}
.pg-post-for b{display:block;margin-bottom:4px;font:500 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-answer{position:relative;max-width:46rem;margin:-56px auto 0;padding:38px 34px 30px;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22);rotate:-.5deg;z-index:2}
.pg-answer::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:-2deg;background:url(/assets/textures/grain.png),var(--sky);background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-answer .pg-answer-label{margin:0 0 10px;font:500 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-answer p:last-child{margin:0;font:400 19px/1.6 var(--body);color:var(--ink);text-wrap:pretty}
@media (max-width:809.98px){.pg-answer{margin:-32px 12px 0;padding:34px 22px 24px;rotate:-.3deg}.pg-answer p:last-child{font-size:17px}}

/* ---------- Visual QA fixes (2026-10-02, 5 reviewers × 18 pages × 390/768/1440) ---------- */
.ss-h2-2{display:inline-block}
p,li,figcaption,dd{text-wrap:pretty}
/* Tablet: a lone last note or price column sits centred instead of leaving an empty slot. */
@media (min-width:540px) and (max-width:1023.98px){.pg-notes-row > li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}}
@media (min-width:540px) and (max-width:799.98px){.pg-cols > li:last-child:nth-child(3){grid-column:1/-1}}
/* Support hero: the three report-to-fix notes need their own height, not the fixed hero panel height. */
@media (max-width:1023.98px){.pg-detail-hero .ss-service-panel:has(.ss-collage){height:auto;min-height:360px}}
@media (max-width:809.98px){.pg-detail-hero .ss-service-panel:has(.ss-collage){min-height:400px}}
@media (max-width:359.98px){.pg-detail-hero .ss-service-panel:has(.ss-collage){min-height:448px}}
/* Contact: pills in two even columns on phones; a bigger consent box; darker placeholders. */
@media (max-width:639.98px){.pg-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pg-chips label{padding:8px 10px;line-height:1.25}}
.pg-consent input{width:24px;height:24px;margin-top:0}
.pg-form ::placeholder{color:#767067}
/* Work: crop the payment screen to its content; one frame colour for every step. */
.pg-hero-facts dd{text-wrap:balance}
.pg-shot-open{white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:.2em}
/* Blog: cards line up; two cards a row on tablets; byline dots never start a line. */
@media (min-width:1024px){.pg-post-for{min-height:calc(1.45em * 2 + 16px)}}
@media (min-width:600px) and (max-width:809.98px){.pg-posts,.pg-posts-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-byline span+span::before{content:none}
.pg-byline span:not(:last-child)::after{content:"·";margin-left:10px;color:var(--faint)}
/* Legal: a wider reading column and balanced headings. */
.pg-legal{max-width:40rem}
.pg-legal h2{text-wrap:balance}

/* ---------- Work hero, one job, before/after (owner picks 2026-10-03: Hero A "Fanned screens" with the transitions.dev
   avatar-group hover and no "Sample builds" tag; One job C "Scroll story"; Before/after A "Messy pile vs one note") ---------- */

/* transitions-dev: Avatar group hover (11-avatar-group-hover.md). :root values copied once; the snippet is verbatim. */
:root {
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
}
/* Hover-spring transition only — bring your own avatar/chip
   styling (size, shape, border, stacking, background). */
.t-avatar {
  transform-origin: center;
  /* translateY before scale so scale doesn't amplify the lift offset. */
  transform:
    translateY(var(--shift, 0px))
    scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* Hero: three sample screens fanned like cards. The fan's own tuning (bigger cards need a bigger lift and a softer scale);
   the cards open apart on hover with the site's soft ease, while the lift/return uses the transitions.dev springs (site.js). */
.pg-work-hero{position:relative;padding:64px 0 96px;overflow:clip}
.pg-work-hero .ss-eyebrow{margin-bottom:18px}
.pg-fan-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.pg-fan-why{margin:22px 0 0;max-width:34em;font:400 16px/1.5 var(--body);color:var(--muted);text-wrap:pretty}
.pg-fan{--avatar-lift:-14px;--avatar-scale:1.03;--avatar-falloff:.4;--avatar-dur:420ms;position:relative;height:440px}
.pg-fan-card{position:absolute;left:50%;top:50%;display:block;width:min(70%,420px);padding:10px 10px 46px;box-sizing:border-box;background:var(--white);border-radius:16px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 26px 48px -20px rgb(28 26 23/.38);color:var(--ink);text-decoration:none;transition:transform var(--avatar-dur) var(--avatar-ease-in),translate .55s var(--ease-soft),rotate .55s var(--ease-soft)}
.pg-fan-card picture{display:block}
.pg-fan-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top left;border-radius:10px;background:var(--t)}
.pg-fan-card b{position:absolute;left:16px;bottom:13px;display:flex;align-items:center;gap:8px;font:500 15px/1.2 var(--display)}
.pg-fan-card b i{width:10px;height:10px;border-radius:50%;background:var(--t)}
.pg-fan-1{z-index:1;rotate:-9deg;translate:-70% -58%}
.pg-fan-2{z-index:2;rotate:7deg;translate:-26% -64%}
.pg-fan-3{z-index:3;rotate:-1.5deg;translate:-50% -34%}
@media (hover:hover){
  .pg-fan:hover .pg-fan-1{translate:-80% -62%}
  .pg-fan:hover .pg-fan-2{translate:-14% -70%}
  .pg-fan-card:hover{z-index:5;rotate:0deg}
}
.pg-fan:focus-within .pg-fan-1{translate:-80% -62%}
.pg-fan:focus-within .pg-fan-2{translate:-14% -70%}
.pg-fan-card:focus-visible{z-index:5;rotate:0deg;outline:2px solid var(--brand);outline-offset:4px}
.pg-fan-m{position:absolute;z-index:6;right:0;bottom:6px;width:84px;height:84px;filter:drop-shadow(0 10px 14px rgb(28 26 23/.18))}
@media (prefers-reduced-motion:reduce){.pg-fan-card{transition:none}}

/* One job: a scroll story. The step in the middle of the screen picks the screen in the sticky frame (site.js adds .is-live);
   without script every step stays readable. Phones and tablets show each screen under its step instead. */
.pg-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:56px;align-items:start;margin-top:8px}
.pg-story-steps{margin:0;padding:0;list-style:none}
.pg-story-steps li{display:flex;flex-direction:column;justify-content:center;min-height:min(52vh,460px);padding:8px 0;transition:opacity .35s ease}
.pg-story.is-live .pg-story-steps li:not(.is-on){opacity:.35}
.pg-story-num{display:flex;align-items:center;gap:14px;margin:0 0 12px;font:500 30px/1.15 var(--display);color:var(--ink)}
.pg-story-num b{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--t);font:500 19px/1 var(--display)}
.pg-story-text{margin:0;max-width:24em;font:400 19px/1.55 var(--body);color:var(--ink-2);text-wrap:pretty}
.pg-story-inline{display:none}
.pg-story-stage{position:sticky;top:110px}
.pg-story-stage .pg-visual{aspect-ratio:1240/800}
.pg-story-shot{opacity:0;transition:opacity .45s ease}.pg-story-shot.is-on{opacity:1}
.pg-story-cap{margin:14px 0 0;font:500 15px/1.4 var(--body);color:var(--muted)}
@media (max-width:899.98px){
  .pg-story{grid-template-columns:1fr}
  .pg-story-stage{display:none}
  .pg-story-steps li,.pg-story.is-live .pg-story-steps li:not(.is-on){min-height:0;opacity:1;padding:0 0 40px}
  .pg-story-num{font-size:24px}.pg-story-num b{width:42px;height:42px;font-size:17px}
  .pg-story-text{font-size:17px}
  .pg-story-inline{display:block;margin:16px 0 0}
  .pg-story-inline img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top left;border-radius:12px;box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -14px rgb(28 26 23/.3)}
}
@media (prefers-reduced-motion:reduce){.pg-story-steps li,.pg-story-shot{transition:none}}

/* Before / with one system: five "typed again" sticky notes in a pile vs one taped note. */
.pg-ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.pg-ba > div{position:relative;border-radius:24px;padding:28px 28px 30px;overflow:hidden}
.pg-ba-before{background:var(--soft)}.pg-ba-after{background:color-mix(in srgb,var(--mint) 70%,#fff)}
.pg-ba .pg-ba-label{margin:0 0 4px;font:500 12.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep)}
.pg-ba-before .pg-ba-label{color:var(--muted)}
.pg-ba-after .pg-ba-label{color:#AE4C18} /* 4.6:1 on the mint note (brand-deep is 4.3) */
.pg-ba .pg-ba-cap{margin:0;font:500 20px/1.3 var(--display);color:var(--ink)}
.pg-ba-pile{position:relative;height:230px;margin-top:18px}
.pg-ba-sticky{position:absolute;left:var(--x);top:var(--y);width:150px;padding:16px 14px 18px;box-sizing:border-box;background:var(--t);rotate:var(--r);box-shadow:0 1px 2px rgb(28 26 23/.08),0 10px 18px -10px rgb(28 26 23/.35);font:500 15px/1.25 var(--display);color:var(--ink)}
.pg-ba-sticky small{display:block;margin-top:8px;font:italic 400 13px/1.2 var(--body);color:#7A2E1F}
.pg-ba-one{position:relative;width:min(100%,300px);margin:46px auto 0;padding:34px 24px 24px;box-sizing:border-box;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22);rotate:-1.5deg;text-align:center}
.pg-ba-one::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;translate:-50% 0;rotate:-3deg;background:url(/assets/textures/grain.png),var(--sky);background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-ba-one b{display:block;font:500 30px/1.1 var(--display);color:var(--ink)}
.pg-ba-one span{display:block;margin-top:10px;font:400 15px/1.5 var(--body);color:var(--ink-2)}
.pg-ba-m{position:absolute;right:20px;bottom:18px;width:64px;height:64px}

@media (max-width:1023.98px){
  .pg-fan-grid{grid-template-columns:1fr}
  .pg-fan{height:380px;max-width:620px;width:100%;justify-self:center}
}
@media (max-width:809.98px){
  .pg-ba{grid-template-columns:1fr}
  .pg-ba-pile{height:250px}
  .pg-ba-sticky{width:132px;font-size:14px}
  .pg-ba-m{width:52px;height:52px}
}
@media (max-width:599.98px){
  .pg-work-hero{padding:40px 0 64px}
  .pg-fan{height:270px}
  .pg-fan-card{width:72%;padding:7px 7px 34px;border-radius:12px}
  .pg-fan-card b{left:11px;bottom:9px;font-size:13px}
  .pg-fan-1,.pg-fan:focus-within .pg-fan-1{translate:-64% -60%}.pg-fan-2,.pg-fan:focus-within .pg-fan-2{translate:-36% -66%}
  .pg-fan-m{width:58px;height:58px;right:-4px}
  .pg-ba > div{padding:24px 20px 26px}
  .pg-ba-pile{display:flex;flex-wrap:wrap;gap:10px 8px;height:auto;padding:4px 2px 8px}
  .pg-ba-sticky{position:relative;left:auto;top:auto;width:calc(50% - 4px)}
}

/* ---------- Contact form: three short steps (owner pick 2026-10-03, B) ----------
   Progress bar, icon tiles for the service, then message + budget, then details. script.js adds .is-live and shows one step
   at a time; without it every step shows with one send button. */
.pg-wizard{gap:0}
.pg-wiz-progress{display:flex;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.pg-wiz-progress li{flex:1;padding-top:10px;border-top:4px solid var(--soft-2);font:500 13px/1.3 var(--body);color:var(--muted);transition:border-color .3s ease,color .3s ease}
.pg-wiz-progress li.is-on,.pg-wiz-progress li.is-done{border-top-color:var(--brand);color:var(--ink)}
.pg-wizard:not(.is-live) .pg-wiz-progress{display:none}
.pg-wiz-step{display:grid;gap:18px;margin:0 0 28px;padding:0;border:0;min-width:0}
.pg-wizard.is-live .pg-wiz-step:not(.is-on){display:none}
.pg-wizard.is-live .pg-wiz-step{margin-bottom:0;animation:pg-wiz-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes pg-wiz-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.pg-wiz-q{margin:0 0 4px;padding:0;font:500 26px/1.2 var(--display);color:var(--ink)}
.pg-wiz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
.pg-wiz-nav .ss-ghost{border:0;cursor:pointer;font:inherit}
.pg-wizard:not(.is-live) [data-go]{display:none}
.pg-free{margin:0;font:500 15px/1.4 var(--body);color:var(--ink)}
.pg-free::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--brand);vertical-align:1px}
.pg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-tile{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 44px 16px 16px;border:1.5px solid var(--line);border-radius:18px;background:var(--bg);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.pg-tile input{position:absolute;right:14px;top:16px;width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.pg-tile-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--t)}
.pg-tile-ico .ss-icon{width:20px;height:20px}
.pg-tile b{display:block;font:500 17px/1.25 var(--display);color:var(--ink)}
.pg-tile small{display:block;margin-top:3px;font:400 14px/1.4 var(--body);color:var(--muted)}
.pg-tile:hover{border-color:#D3CCC1}
.pg-tile:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--t) 45%,#fff)}
.pg-tile:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
/* One border on focus: the field's own border turns ink, no second outline ring around it (owner, 2026-10-03). */
.pg-form :is(input:not([type="checkbox"],[type="radio"]),select,textarea):focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
@media (prefers-reduced-motion:reduce){.pg-wizard.is-live .pg-wiz-step{animation:none}.pg-tile,.pg-wiz-progress li{transition:none}}
@media (max-width:599.98px){.pg-tiles{grid-template-columns:1fr}.pg-wiz-q{font-size:22px}.pg-wiz-progress li{font-size:12px}}

/* transitions-dev: Success check (10-success-check.md). :root values copied once; snippet verbatim, with stroke-dasharray set
   to this check path's length (29.75 → 31, rounded up as the skill says). */
:root {
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 31;
  stroke-dashoffset: 31;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Sent state: the steps leave, the check appears in a mint circle, then the thank-you and the reference. */
.pg-wizard.is-sent > :not(.pg-sent):not(.pg-status){display:none}
.pg-wizard.is-sent .pg-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.pg-sent{display:grid;justify-items:center;gap:10px;padding:28px 8px 20px;text-align:center}
.pg-sent[hidden]{display:none}
.pg-sent .t-success-check{display:grid;place-items:center;width:84px;height:84px;margin-bottom:8px;border-radius:50%;background:var(--mint);color:#1F6B47}
.pg-sent .t-success-check svg{width:46px;height:46px}
.pg-sent-title{margin:0;font:500 30px/1.2 var(--display);color:var(--ink);outline:none}
.pg-sent-text{margin:0;max-width:30em;font:400 17px/1.55 var(--body);color:var(--ink-2)}
.pg-sent-text a{color:var(--ink)}
.pg-sent-ref{font-weight:500;color:var(--ink);white-space:nowrap}

/* Contact layout (owner 2026-10-03): form left, call note right (sticky beside the form on wide screens); "What happens next"
   full width below as pinned notes in a row (owner pick A), then a short trust row. */
.pg-next-notes{margin-top:16px}
.pg-contact{align-items:start}
@media (min-width:1200px){.pg-contact > .pg-talk{position:sticky;top:110px;margin-top:24px}}
.pg-budget-hint{margin-top:10px}
.pg-budget-hint a{color:var(--ink)}
.pg-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--line);list-style:none}
.pg-trust li{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.5 var(--body);color:var(--muted)}
.pg-trust .ss-icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ink)}
.pg-trust a{color:var(--ink)}
@media (max-width:899.98px){.pg-trust{grid-template-columns:1fr}.pg-trust{margin-top:40px}}
@media (max-width:599.98px){.pg-talk{padding:30px 20px 20px}.pg-talk-phone{font-size:24px}.pg-talk p{margin-top:10px;font-size:14px}}

/* ---------- Blog (owner picks 2026-10-03) ----------
   Index hero A "Taped question notes"; article page = D's colour band + B's sticky rail with reading progress; listen and
   share live in the band. */
.pg-blog-hero{padding:64px 0 88px}.pg-blog-hero .ss-eyebrow{margin-bottom:18px}
.pg-blog-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.pg-blog-hero-grid > div:first-child{padding-top:56px}
.pg-qnotes{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px;margin:0;padding:14px 6px 30px;list-style:none}
.pg-qnotes li:nth-child(even):not(.pg-qnotes-m){translate:0 30px}
.pg-qnotes a{position:relative;display:block;padding:30px 20px 18px;text-wrap:balance;background:var(--white);border-radius:var(--radius-ui);box-shadow:0 1px 2px rgb(28 26 23/.06),0 14px 30px -12px rgb(28 26 23/.22);rotate:var(--r);color:var(--ink);text-decoration:none;font:500 19px/1.3 var(--display);transition:rotate .3s var(--ease-soft),translate .3s var(--ease-soft)}
.pg-qnotes a::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;translate:-50% 0;rotate:-3deg;background:url(/assets/textures/grain.png),var(--tape,var(--butter));background-blend-mode:multiply;opacity:.92;box-shadow:0 1px 2px rgb(28 26 23/.1)}
.pg-qnotes small{display:flex;align-items:center;gap:6px;margin-top:12px;font:500 13px/1 var(--body);color:var(--brand-deep)}
.pg-qnotes .ss-icon{width:15px;height:15px}
.pg-qnotes .pg-qnote-ask{background:color-mix(in srgb,var(--peach) 30%,#fff)}
@media (hover:hover){.pg-qnotes a:hover{rotate:0deg;translate:0 -3px}}
.pg-qnotes-m{position:absolute;right:-6px;bottom:-4px;width:70px;height:70px}
@media (max-width:1023.98px){.pg-blog-hero-grid{grid-template-columns:minmax(0,1fr)}.pg-blog-hero-grid > div:first-child{padding-top:0}}
@media (max-width:599.98px){.pg-blog-hero{padding:40px 0 64px}.pg-qnotes{gap:28px 14px}.pg-qnotes a{font-size:16px;padding:26px 14px 14px;overflow-wrap:anywhere}.pg-qnotes-m{display:none}}
@media (prefers-reduced-motion:reduce){.pg-qnotes a{transition:none}}

.pg-read-bar{position:fixed;left:0;top:0;z-index:60;width:100%;height:4px;background:var(--brand);transform-origin:0 50%;scale:var(--p,0) 1;pointer-events:none}
.pg-band-hero{padding-bottom:0}
.pg-band{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.pg-band-inner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center;padding:52px 52px 96px;border-radius:var(--radius-card);background:var(--tint);overflow:hidden}
.pg-band-inner::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/textures/grain.png);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.pg-band-inner .pg-back,.pg-band-inner .pg-byline,.pg-band-inner .pg-lead{color:#33302C}
.pg-band-art{position:relative;height:240px}
.pg-band-main{position:absolute;left:50%;top:50%;width:min(62%,220px);height:auto;translate:-50% -50%}
.pg-band-accent{position:absolute;right:12%;top:8%;width:36px;height:auto}
.pg-read .pg-answer{position:relative;z-index:2;margin:-66px auto 0}
.pg-listen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;max-width:560px;margin-top:26px;padding:8px 8px 8px 8px;border-radius:999px;background:rgb(255 255 255/.72);box-shadow:0 1px 2px rgb(28 26 23/.08)}
.pg-listen-btn{display:inline-flex;align-items:center;gap:12px;padding:0 14px 0 0;border:0;background:none;font:500 15px/1 var(--body);color:var(--ink);cursor:pointer}
.pg-listen-btn[hidden]{display:none}
.pg-listen-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white)}
.pg-listen-ico .ss-icon{width:17px;height:17px;fill:currentColor}
.pg-listen-time{padding-left:12px;border-left:1px solid rgb(28 26 23/.15);color:var(--muted)}
/* Share (owner 2026-10-03): React Bits "FolderFloat" (MIT) pills without the folder, ported to CSS + site.js in our colours.
   Click Share and the pills rise on a spring and drift: the component's physics={false} mode, matter-js left out. The cloud
   floats UP inside the colour band, so the band's overflow:hidden never clips it. Timings are the component's defaults
   (bounce .3 gives the 1.57 spring). site.js sets --x/--y/--r per pill. */
.pg-share{--ff-open:520ms;--ff-close:312ms;--ff-stagger:45ms;--ff-n:5;--ff-spring:cubic-bezier(.34,1.57,.64,1);--ff-out:cubic-bezier(.23,1,.32,1);position:relative;margin-left:auto}
.pg-share-btn{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:var(--white);font:500 15px/1 var(--body);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgb(28 26 23/.08);transition:scale 160ms var(--ff-out)}
.pg-share-btn:active{scale:.97}
.pg-share-btn .ss-icon{width:17px;height:17px}
.pg-share-menu{position:absolute;bottom:100%;left:50%;z-index:1;width:0;height:0;margin:0;padding:0;list-style:none}
.pg-share-menu li{position:absolute;top:0;left:0}
.pg-share-menu :is(a,button){position:absolute;top:0;left:0;display:flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 15px 0 5px;border:0;border-radius:999px;background:var(--white);font:500 14.5px/1 var(--body);color:var(--ink);white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgb(28 26 23/.1),0 10px 20px -10px rgb(28 26 23/.45);opacity:0;transform:translate(-50%,0) scale(.6);pointer-events:none;
  transition:transform var(--ff-close) var(--ff-out) calc((var(--ff-n) - 1 - var(--i)) * var(--ff-stagger) * .5),opacity 160ms ease calc((var(--ff-n) - 1 - var(--i)) * var(--ff-stagger) * .5 + var(--ff-close) * .45),scale 160ms var(--ff-out)}
.pg-share[data-open] .pg-share-menu :is(a,button){opacity:1;transform:translate(calc(-50% + var(--x,0px)),var(--y,0px)) rotate(var(--r,0deg)) scale(1);pointer-events:auto;
  transition:transform var(--ff-open) var(--ff-spring) calc(var(--i) * var(--ff-stagger)),opacity 160ms ease calc(var(--i) * var(--ff-stagger)),scale 160ms var(--ff-out)}
.pg-share[data-open] .pg-share-menu li{animation:pg-ff-drift 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@media (hover:hover) and (pointer:fine){.pg-share[data-open] .pg-share-menu :is(a,button):hover{scale:1.05}}
.pg-share[data-open] .pg-share-menu :is(a,button):active{scale:.97}
.pg-share-menu :is(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pg-share-menu [data-pop]{animation:pg-ff-pop 320ms var(--ff-out)}
.pg-share-menu i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);font:600 12.5px/1 var(--body);font-style:normal;color:var(--ink)}
.pg-share-menu i .ss-icon{width:14px;height:14px}
@keyframes pg-ff-drift{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes pg-ff-pop{30%{scale:1.1}100%{scale:1}}
@media (prefers-reduced-motion:reduce){
  .pg-share .pg-share-menu :is(a,button){transition:opacity 200ms ease}
  .pg-share[data-open] .pg-share-menu :is(a,button){transition:opacity 200ms ease calc(var(--i) * var(--ff-stagger))}
  .pg-share[data-open] .pg-share-menu li{animation:none}
}
.pg-read-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:64px;margin-top:56px}
.pg-rail{position:sticky;top:110px;align-self:start}
.pg-rail .pg-rail-title{margin:0 0 12px;font:500 12.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pg-rail ol{display:grid;gap:6px;margin:0 0 24px;padding:0;list-style:none}
.pg-rail ol a{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:12px;color:var(--ink-2);text-decoration:none;font:400 15px/1.35 var(--body);text-wrap:pretty;transition:background .25s ease,box-shadow .25s ease,color .25s ease}
.pg-rail b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);font:500 12px/1 var(--display);color:var(--ink);transition:background .25s ease}
.pg-rail ol a:hover{color:var(--ink)}
.pg-rail ol a.is-on{background:var(--white);box-shadow:0 1px 2px rgb(28 26 23/.08);color:var(--ink)}
.pg-rail ol a.is-on b{background:var(--mint)}
.pg-read .pg-article-body{max-width:40rem}
@media (max-width:1023.98px){
  .pg-band-inner{grid-template-columns:1fr;padding:40px 28px 84px}.pg-band-art{display:none}
  .pg-read-grid{grid-template-columns:1fr;gap:32px}
  .pg-rail{position:static;padding:20px;border-radius:20px;background:var(--soft)}
}
@media (max-width:599.98px){.pg-band{padding:0 12px}.pg-band-inner{padding:32px 18px 76px}.pg-read .pg-answer{margin:-56px 4px 0}.pg-listen{border-radius:20px}.pg-listen-time{display:none}.pg-share{margin-left:0}}
@media (prefers-reduced-motion:reduce){.pg-rail ol a,.pg-rail b{transition:none}.pg-read-bar{display:none}}

/* transitions-dev: Text states swap (04), Icon swap (09). :root values copied once; snippets verbatim. */
:root {
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}