/* Sparkitive pages.css: page-only rules for About (.p-about, .ab-*) and Home (.p-home, .hm-*).
   Loads after site.css. Nothing here changes a shared class; every selector starts with .p-about, .p-home, .ab- or .hm-. */

/* ===================== About ===================== */
.p-about .hero{--hero-foot:clamp(88px, 8vw, 128px)}
.p-about .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:clamp(32px, 4vw, 64px); align-items:center}   /* R13d */
.p-about .hero-copy h1{font-size:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height:1.06}
.p-about .hero-copy .lede{margin-bottom:0; font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); line-height:1.5; max-width:34ch}   /* R14a: lead size */
.ab-portrait{position:relative; z-index:4; margin:0; justify-self:end; width:100%; max-width:400px}
.ab-portrait::before{content:""; position:absolute; inset:-14% -18%; background:radial-gradient(closest-side, rgb(140 138 236 / .34), transparent 72%); pointer-events:none; z-index:0}
.ab-portrait img{position:relative; z-index:1; width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 30%; border-radius:28px;
  box-shadow:0 0 0 3px rgb(143 184 255 / .4), 0 24px 60px rgb(5 4 20 / .5)}
.ab-portrait .decor-spark{right:-30px; top:-30px; z-index:5}
.ab-portrait .decor-spark--b{right:auto; left:-34px; top:auto; bottom:12%}

.ab-story{padding-block:var(--pad)}
.ab-story .wrap > h2{max-width:none; margin-bottom:clamp(24px, 3vw, 40px)}
.ab-story-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.ab-essay{max-width:none}
.ab-bio-card{position:relative; align-self:center; background:var(--bg-card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-card); padding:clamp(28px, 3vw, 40px)}
.ab-bio-card p{font:400 1.125rem/1.65 var(--sans); color:var(--ink); margin:0; max-width:none}
.ab-bio-card .decor-spark{right:-20px; top:-30px; width:56px; height:56px}
@media (min-width:1100px){ .ab-story-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
@media (max-width:899px){ .ab-story-grid{grid-template-columns:1fr} }
/* R8 #28 (design-plan 16.16.6): Christina's framed photo (B, D-674) heads the story's side column, above the bio card. Shown whole: square file, its own white border kept, never cropped. */
.ab-story-side{display:grid; gap:clamp(20px, 2.4vw, 28px); align-content:start; min-width:0}
.ab-story-photo{margin:0; justify-self:start; width:min(360px, 100%); border-radius:16px; box-shadow:var(--shadow-card)}
.ab-story-photo img{display:block; width:100%; height:auto; aspect-ratio:1/1; max-width:none; object-fit:contain; border-radius:16px; outline:1px solid var(--line); outline-offset:-1px}
.ab-essay p{font:400 1.125rem/1.65 var(--sans); color:var(--ink); max-width:none}   /* R2/R5: Atkinson, never Fraunces, for a running paragraph */
.ab-essay p.ab-link{font:700 1.125rem/1.5 var(--sans); margin-top:1.6em; margin-bottom:0}
/* R9 D-693 (design-plan 16.18): her line is the hook. It heads the essay column beside her photo, one step above the section H2s and under the H1; the first line of the story is a lead */
.ab-essay > .ab-story-h{font-size:clamp(2rem, 1.45rem + 2.1vw, 3.125rem); line-height:1.08; letter-spacing:-.02em; max-width:none; margin:0 0 clamp(20px, 2.2vw, 32px)}
.ab-essay p.ab-lead{font:400 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.45 var(--sans); color:var(--ink); text-wrap:pretty}

.ab-ops{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 32px); margin:0; padding:0; list-style:none}
.ab-ops li{background:var(--bg-card); border:1px solid var(--line); border-top:4px solid var(--peri); border-radius:20px; box-shadow:var(--shadow-card); padding:clamp(24px, 2.6vw, 36px)}
.ab-ops h3{font:700 1.375rem/1.3 var(--sans); text-wrap:balance; margin:0 0 .6em}   /* v2 §3: H3 is Atkinson */
.ab-ops p{margin:0}
.ab-nb{white-space:nowrap}
.ab-sec-h{max-width:none; margin-bottom:clamp(28px, 3vw, 44px)}

.ab-who{display:block}   /* R14b: stacked; H2, lede, card */
.ab-who-intro{margin:0 0 clamp(24px, 3vw, 40px)}
.ab-who-intro p{font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); line-height:1.5; max-width:46ch; margin:0}
.ab-who-h{max-width:none; margin:0 0 clamp(24px, 3vw, 40px)}
.ab-who p:last-child{margin-bottom:0}
.ab-card{background:var(--bg-card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-card); padding:clamp(28px, 3.4vw, 48px)}
.ab-card h3{font:700 1.375rem/1.3 var(--sans); margin:0 0 .6em}   /* v2 §3: H3 is Atkinson */
.ab-card p:last-child{margin-bottom:0}
.ab-card p{max-width:46ch}   /* R17a: 1ch sets ~1.55 chars in Atkinson, so 46ch caps a line at about 71 */
@media (min-width:1100px){ .ab-card{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px, 4vw, 56px); align-items:start} .ab-card h3{grid-column:1 / -1} .ab-card p{margin:0} }   /* R16a */



.p-about .hw-close h2{max-width:26ch}

@media (max-width:1099px){
  .ab-ops{grid-template-columns:1fr}
}
@media (max-width:899px){
  .p-about .hero{--hero-foot:clamp(40px, 6vw, 56px)}
  .p-about .hero .wrap{grid-template-columns:1fr}
  .ab-portrait{justify-self:center; max-width:340px; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .ab-first{padding-top:calc(var(--cross) + clamp(48px, 6vw, 88px))}
  .ab-portrait .decor-spark{right:-8px; top:-10px; width:56px; height:56px}
  .ab-portrait .decor-spark--b{display:none}
}

/* ===================== Home ===================== */
.p-home .hero{--hero-foot:clamp(72px, 7vw, 104px)}
.p-home .hero .wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.p-home .hero-copy h1{max-width:14ch}
.p-home .scene{--pos:50% 40%; --fl:6%; --fr:6%; --ft:6%; --fb:14%; max-width:600px; justify-self:end; width:100%;
  margin-bottom:calc(-1 * var(--cross))}
.p-home .scene img{position:relative; z-index:1; aspect-ratio:4/3; max-height:none}
.p-home .scene::before{content:""; position:absolute; left:6%; right:6%; bottom:-4%; height:40%; background:radial-gradient(closest-side, rgb(18 17 48 / .45), rgb(18 17 48 / 0)); pointer-events:none; z-index:0}
.p-home .scene .decor-spark{right:-24px; top:-28px}
.hm-first{padding-block:var(--pad)}
.hm-h{max-width:none; margin-bottom:clamp(28px, 3vw, 44px)}
.hm-first .hm-h{max-width:20ch}

.hm-bubbles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 32px); margin:0; padding:0 0 14px; list-style:none}
.hm-bubble{position:relative; display:flex; flex-direction:column; background:var(--bg-card); border:1.5px solid var(--line); border-radius:28px; box-shadow:var(--shadow-card); padding:clamp(24px, 2.6vw, 36px)}
.hm-bubble::after{content:""; position:absolute; left:48px; bottom:-13px; width:24px; height:24px; background:var(--bg-card);
  border-right:1.5px solid var(--line); border-bottom:1.5px solid var(--line); transform:rotate(45deg); border-bottom-right-radius:4px}
.hm-say{font:italic 600 clamp(1.375rem, 1.1rem + .8vw, 1.625rem)/1.25 var(--serif); letter-spacing:-.01em; color:var(--ink); margin:0 0 .6em; text-wrap:balance}
.hm-bubble p{max-width:none}
.hm-bubble .hm-go{margin:auto 0 0; padding-top:.4em; font-weight:700}
.hm-bubble .hm-desc{margin-bottom:1em}

.hm-problem{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.hm-problem .hw-lead{margin:0}
.hm-problem .hm-body p:last-child{margin-bottom:0}

.hm-work{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.hm-work h2{margin:0 0 .6em}
.hm-work-main p:last-child{margin-bottom:0}
.hm-end{position:relative; background:var(--bg-deep); color:var(--on-dark); border-radius:28px; padding:clamp(28px, 3.6vw, 48px); overflow:hidden}
.hm-end::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 85% 20%, rgb(140 138 236 / .24), transparent 70%); pointer-events:none}
.hm-end > *{position:relative}
.hm-end p{color:var(--on-dark-2); margin:0 0 1.2em; max-width:none}
.hm-end a{color:#fff; font-weight:700}
.hm-end a:hover{color:var(--lav)}
.hm-end p:last-child{margin-bottom:0}

.hm-who{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:center; max-width:960px; margin-inline:auto}   /* R11: portrait and text only */
.hm-who-photo{margin:0}
.hm-who-photo .hm-crop{display:block; width:220px; height:220px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--hl)}
.hm-who-photo img{width:100%; height:100%; object-fit:cover; object-position:52% 30%; transform:scale(1.85); transform-origin:52% 24%}
.hm-who-text h2{margin:0 0 .5em}
.hm-who-text p{max-width:var(--m-body)}
.hm-who-text .hm-more{margin:0; font-weight:700}

.p-home .hw-close h2{max-width:24ch}
/* R12: the button is the one ask; both doors follow as one quiet line */
.hm-ask .hm-doors{margin:clamp(24px, 3vw, 36px) auto 0; padding:0; max-width:60ch; font-size:1rem; line-height:1.55; background:none; border-radius:0; color:var(--on-dark-2)}
.hm-ask .hm-doors a{text-decoration:underline; text-underline-offset:3px; padding-block:12px}
.hm-ask a{color:var(--lav)}
.hm-ask a:hover{color:#fff}

@media (min-width:1100px){ .hm-say{min-height:3.75em} }
@media (max-width:1099px){
  .hm-bubbles{grid-template-columns:1fr}
}
@media (max-width:899px){
  .p-home .hero{--hero-foot:clamp(40px, 6vw, 56px)}
  .p-home .hero .wrap{grid-template-columns:1fr}
  .p-home .hero-copy h1{max-width:none}   /* c108: stacked, the H1 takes the column the lede takes */
  .p-home .scene{max-width:none; justify-self:stretch; --fl:5%; --fr:5%; --fb:18%; margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .p-home .scene img{aspect-ratio:16/10; max-height:46vh; --pos:50% 35%}
  .hm-first{padding-top:calc(var(--cross) + clamp(40px, 6vw, 72px))}
  .hm-first .hm-h{max-width:none}
  .hm-problem,.hm-work{grid-template-columns:1fr}
}
@media (max-width:699px){   /* R16b: stack point 700 */
  .hm-who{grid-template-columns:1fr; justify-items:start}
  .hm-who-photo .hm-crop{width:160px; height:160px}
}
/* R10 (c107): 600 to 899px, the scene stays inside the night, 560px max and centred; it crosses the seam only below 600px */
@media (min-width:600px) and (max-width:899px){
  .p-home .scene{max-width:560px; justify-self:center; margin-bottom:0; --fb:14%}
  .p-home .scene img{aspect-ratio:4/3; max-height:none; --pos:50% 40%}
  .hm-first{padding-top:clamp(40px, 6vw, 72px)}
}

/* ---------- §14 #11 · About fit art (pages.css) ---------- */
.ab-who-top{display:block}
.ab-who-art{display:none; margin:0 0 clamp(24px, 3vw, 40px); border-radius:24px; overflow:hidden; background:var(--bg-night); box-shadow:var(--shadow-card)}
.ab-who-art img{display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; object-position:var(--pos, 50% 50%)}
@media (min-width:640px){ .ab-who-art{display:block; max-width:560px} }
@media (min-width:900px){
  .ab-who-top{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px, 4vw, 64px); align-items:center; margin:0 0 clamp(24px, 3vw, 40px)}
  .ab-who-top .ab-who-h{margin-bottom:.5em}
  .ab-who-top .ab-who-intro{margin:0}
  .ab-who-art{margin:0; max-width:none}
  .ab-who-art img{aspect-ratio:4/3}
}

/* ---------- D-670 #14 · About ecosystem constellation (design-plan 16.15 concept A; replaces the round 6 wheel) ---------- */
.eco-sec .wrap{display:block}
.eco-copy{max-width:var(--m-body)}
.eco-copy h2{font-size:var(--h2-section); max-width:none; margin-bottom:.5em}
.eco-copy p{font:400 clamp(1.125rem, 1rem + .4vw, 1.25rem)/1.6 var(--sans); color:var(--ink); margin:0}
.eco-map{--disc:64px; --gap:28px; position:relative; max-width:640px; margin:clamp(32px, 4vw, 56px) auto 0}
.eco-svg{display:none}
.eco-you{position:relative; display:inline-block; margin:0 0 var(--gap); padding:10px 22px; border-radius:999px; background:var(--bg-night); color:#fff; font:700 1rem/1.3 var(--sans); letter-spacing:.01em}
.eco-you::after{content:""; position:absolute; left:calc(var(--disc) / 2 - 22px - 1.5px); top:100%; height:var(--gap); border-left:3px dashed var(--peri)}
.eco-map ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--gap)}
.eco-node{--c:var(--indigo); position:relative; display:grid; grid-template-columns:var(--disc) minmax(0,1fr); column-gap:12px; align-items:start}
.eco-node::before{content:""; position:absolute; left:calc(var(--disc) / 2 - 1.5px); top:calc(var(--disc) / 2); bottom:calc(-1 * var(--gap)); border-left:3px dashed var(--peri)}
.eco-node:last-child::before{display:none}
.eco-node.bp{--c:var(--eco-bp)} .eco-node.ch{--c:var(--eco-ch)} .eco-node.sp{--c:var(--eco-sp)} .eco-node.ff{--c:var(--eco-ff)}
.eco-disc{position:relative; z-index:1; box-sizing:border-box; width:var(--disc); height:var(--disc); display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:4px solid var(--c)}
.eco-disc img{display:block; width:76%; height:auto; max-width:none}
.eco-disc picture{display:contents}
.eco-disc img.eco-mascot{width:calc(var(--disc) * .805); height:auto; object-fit:contain}
.eco-node .t{display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:calc(var(--disc) / 2 - 22px)}
.eco-node a{align-self:flex-start; display:inline-block; padding-block:11px; margin-block:-11px; font:700 1.125rem/1.3 var(--sans); color:var(--ink); text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:3px; text-underline-offset:4px}
.eco-node a:focus-visible{outline:3px solid var(--indigo); outline-offset:3px; border-radius:4px}
.eco-node .desc{font:400 1rem/1.45 var(--sans); color:var(--ink-soft)}
@media (min-width:360px){ .eco-map{--disc:80px; --gap:32px} .eco-node{column-gap:16px} }
@media (min-width:640px){ .eco-map{--disc:104px; --gap:36px} }
@media (min-width:960px){
  .eco-map{--disc:128px; --orb:clamp(360px, 34vw, 440px); --sx:calc(var(--orb) * .28); max-width:1040px}
  .eco-svg{display:block; position:absolute; top:0; left:50%; width:var(--orb); height:var(--orb); transform:translateX(-50%)}
  .eco-you{position:absolute; left:50%; top:calc(var(--orb) / 2); width:calc(var(--disc) * .9); height:calc(var(--disc) * .9); margin:0; padding:0 16px; box-sizing:border-box; transform:translate(-50%, -50%); display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.0625rem; line-height:1.2}
  .eco-you::after{display:none}
  .eco-map ul{position:static; grid-template-columns:minmax(0,1fr) var(--orb) minmax(0,1fr); grid-template-rows:repeat(2, minmax(calc(var(--orb) / 2), auto)); gap:0; min-height:var(--orb)}
  .eco-node{display:block; position:static}
  .eco-node::before{display:none}
  .eco-disc{position:absolute}
  .eco-node.bp{grid-column:1; grid-row:1} .eco-node.ch{grid-column:3; grid-row:1} .eco-node.sp{grid-column:1; grid-row:2} .eco-node.ff{grid-column:3; grid-row:2}
  .eco-node.bp .eco-disc,.eco-node.sp .eco-disc{left:calc(50% - var(--sx) - var(--disc) / 2)}
  .eco-node.ch .eco-disc,.eco-node.ff .eco-disc{left:calc(50% + var(--sx) - var(--disc) / 2)}
  .eco-node.bp .eco-disc,.eco-node.ch .eco-disc{top:calc(var(--orb) * .22 - var(--disc) / 2)}
  .eco-node.sp .eco-disc,.eco-node.ff .eco-disc{top:calc(var(--orb) * .78 - var(--disc) / 2)}
  .eco-node .t{padding-top:0; max-width:300px}
  .eco-node.bp .t,.eco-node.ch .t{padding-top:calc(var(--orb) * .22 - var(--disc) / 2)}
  .eco-node.sp .t,.eco-node.ff .t{padding-top:calc(var(--orb) * .28 - var(--disc) / 2)}
  .eco-node.bp .t,.eco-node.sp .t{margin-left:auto; padding-right:clamp(16px, 2vw, 28px); align-items:flex-end; text-align:right}
  .eco-node.bp a,.eco-node.sp a{align-self:flex-end}
  .eco-node.ch .t,.eco-node.ff .t{padding-left:clamp(16px, 2vw, 28px)}
}

/* ---------- §14 #15 · About testimonial as video (pages.css; reuses .fquote) ---------- */
.ab-vquote-h{max-width:880px; margin:0 auto clamp(24px, 3vw, 36px)}

/* round 6: About closing-band spark was over the longer H2 at 600-899 */
@media (min-width:600px) and (max-width:899px){ .p-about .hw-close-spark{width:44px; height:44px} }

/* ===================== Services (D-528, 2026-11-06; design-plan §15) =====================
   Reuses How it works' hero/hand-off/FAQ/close rules (site.css, .p-svc added to their lists), Home's .hm-bubble shell and Book a call's .callfit row.
   New here: the hero jump chips, the staggered situation bubbles, the S3 split and the two door lines in S4. */
.p-svc .scene{--pos:50% 40%}
@media (max-width:899px){ .p-svc .scene{--pos:50% 35%} }
/* D-528 gate D-2 (R8 F-1: now 900-1279): 900-1279, H1 + lede + three chips + button beside a 4:3 scene measured 2.04x-1.58x;
   stacked here as below 900. The scene is capped at 640px wide and centred so the 16:10 crop keeps
   the workshop, the half-built house, the mountain and both faces. */
@media (min-width:900px) and (max-width:1279px){
  .p-svc .hero{--hero-foot:clamp(40px, 6vw, 56px)}
  .p-svc .hero .wrap{grid-template-columns:minmax(0,1fr); gap:28px}
  .p-svc .scene{--pos:50% 35%; --fl:5%; --fr:5%; --fb:18%; max-width:640px; justify-self:center;
    margin-bottom:calc(-1 * var(--hero-foot) - var(--cross))}
  .p-svc .scene img{aspect-ratio:16/10; max-height:46vh}
  .p-svc .scene::before{content:""; position:absolute; left:6%; right:6%; bottom:-4%; height:40%;
    background:radial-gradient(closest-side, rgb(18 17 48 / .5), rgb(18 17 48 / 0)); pointer-events:none; z-index:0}
  .p-svc #projects{padding-top:calc(var(--cross) + clamp(48px, 6vw, 88px))}
}

/* R8 gate F-1 (design-plan 16.17.1): from 1280 the H1 steps down to 2.75rem and the scene column widens to half,
   so the copy column (H1, lede, three chips, button) and the scene read as one weight: 1.47x, not 1.84x. */
@media (min-width:1280px){
  .p-svc .hero .hero-copy h1{font-size:2.75rem}
  .p-svc .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .p-svc .scene{max-width:600px}
  .p-svc .scene img{max-height:450px}
}

/* jump chips: §5's speech-bubble device, built as a link on dark */
.svc-chips{list-style:none; margin:0 0 1.4em; padding:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.svc-chips li{max-width:100%}
.hero .svc-chips a{position:relative; display:inline-flex; align-items:center; gap:10px; max-width:100%; min-height:44px; padding:10px 18px 11px; border-radius:22px;
  background:var(--lav); color:var(--bg-night); font:italic 400 1.125rem/1.3 var(--serif); text-decoration:none; transition:background .15s}
.hero .svc-chips a::after{content:""; position:absolute; left:22px; bottom:-5px; width:10px; height:10px; background:var(--lav); transform:rotate(45deg); border-bottom-right-radius:2px; transition:background .15s}
.hero .svc-chips a:hover{background:#fff; color:var(--bg-night)}
.hero .svc-chips a:hover::after{background:#fff}
.hero .svc-chips a:focus-visible{outline:3px solid var(--focus-dark); outline-offset:2px}
.svc-chips svg{flex:none; width:12px; height:12px}
@media (max-width:639px){ .hero .svc-chips a{font-size:1.0625rem} }

/* scroll targets clear the sticky header (84px / 68px) */
.p-svc #projects,.p-svc #handled,.p-svc #who-builds-it,.p-svc #mountain,.p-svc #how-we-work,.p-svc #elsewhere,.p-svc #questions{scroll-margin-top:88px}
@media (min-width:900px){ .p-svc #projects,.p-svc #handled,.p-svc #who-builds-it,.p-svc #mountain,.p-svc #how-we-work,.p-svc #elsewhere,.p-svc #questions{scroll-margin-top:104px} }

/* S2: the three situations as Home's bubble, one per row */
.svc-sits{display:flex; flex-direction:column; gap:clamp(32px, 3.6vw, 48px)}
.svc-sit{width:min(100%, 800px)}
/* R8 blueprint 89 (design-plan 16.16.7): keep the S2 H2 highlight on one line where the line can hold it */
@media (min-width:375px){ .p-svc #projects h2 mark.hl{white-space:nowrap} }
.svc-sit p{max-width:68ch; margin:0 0 1em}
.svc-sit p:last-child{margin-bottom:0}
.svc-sit p:first-of-type{text-wrap:pretty}
/* D-528 gate D-1: Home's equal-height heading rule (l.114) is for three cards side by side; here each bubble is its own row */
.p-svc .svc-sit .hm-say{min-height:0}
@media (max-width:639px){ .svc-sit{padding:24px} }
/* R8 #37 (design-plan 16.16.2): each situation bubble beside the client who says it; the tail points at the picture.
   Below 900 the picture sits above its bubble and the tail points up at it. */
.svc-row{display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; row-gap:24px}
.svc-pic{margin:0; width:min(72%, 280px)}
.svc-pic img{display:block; width:100%; height:auto; aspect-ratio:1/1; max-width:none; object-fit:contain; border-radius:24px; box-shadow:var(--shadow-card)}
.svc-row .svc-sit{width:100%; max-width:800px}
.p-svc .svc-row .svc-sit::after{left:50%; right:auto; top:-13px; bottom:auto; margin-left:-12px; transform:rotate(-135deg)}
@media (min-width:900px){
  .svc-row{grid-template-columns:minmax(0,8fr) minmax(0,4fr); grid-template-areas:"say pic"; column-gap:clamp(36px, 4vw, 64px); align-items:center}
  .svc-row--r{grid-template-columns:minmax(0,4fr) minmax(0,8fr); grid-template-areas:"pic say"}
  .svc-row .svc-sit{grid-area:say; max-width:none}
  .svc-pic{grid-area:pic; width:100%; max-width:360px}
  .p-svc .svc-row .svc-sit::after{left:auto; right:-13px; top:50%; margin:-12px 0 0; transform:rotate(-45deg)}
  .p-svc .svc-row--r .svc-sit::after{right:auto; left:-13px; transform:rotate(135deg)}
}
/* R8 gate follow-up (design-plan 16.17.7): at 900-1099 the 8/4 split left a 264px picture beside a 409-469px bubble (1.55-1.79x); the row splits 1:1 there */
@media (min-width:900px) and (max-width:1099px){
  .svc-row,.svc-row--r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .svc-pic{max-width:none}
}
/* R8 #42 (design-plan 16.16.3): S2b examples on mist: four one-sentence groups as four equal white cards, 2 x 2 from 900, stacked below */
.p-svc #examples{scroll-margin-top:88px}
@media (min-width:900px){ .p-svc #examples{scroll-margin-top:104px} }
.svc-ex-lead{max-width:68ch; margin:0 0 clamp(28px, 3vw, 44px)}
.svc-ex{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px, 2.4vw, 28px)}
.svc-ex-card{margin:0; background:var(--bg-card); border:1px solid var(--line); border-top:4px solid var(--peri); border-radius:20px; box-shadow:var(--shadow-card); padding:clamp(24px, 3vw, 36px)}
.svc-ex h3{font:600 clamp(1.375rem, 1.2rem + .6vw, 1.625rem)/1.25 var(--serif); letter-spacing:-.01em; color:var(--ink); margin:0 0 .5em; text-wrap:balance}
.svc-ex p{margin:0; max-width:none; text-wrap:pretty}
@media (min-width:900px){ .svc-ex{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* S3: heading beside the paragraph and the link, inside How it works' night band */
.hw-hand.svc-how .wrap{display:block}
.svc-how .hw-split{align-items:center}
.svc-how .hw-split > h2{margin:0; color:#fff}
.svc-how p{margin:0 0 1em; font-size:1.1875rem; color:var(--on-dark-2)}
.svc-how .svc-how-link{display:inline-block; padding-block:10px; font-weight:700; color:var(--peri); text-decoration:underline; text-underline-offset:3px}
.svc-how .svc-how-link:hover{color:#fff}
.p-svc .hw-hand .hw-seam-top path{fill:var(--bg-mist)}

/* S4: Book a call's .callfit row, with two door lines in one white card */
.p-svc #elsewhere{padding-top:var(--pad)}
.p-svc #elsewhere .hw-fit-card{background:var(--bg-card)}
.p-svc #elsewhere .ffcall:first-child{border-top:0; padding-top:0}
.p-svc #elsewhere .ffcall + .ffcall{margin-top:0; border-top:0; border-bottom:0; padding-bottom:0}
.ffcall--ch{--ff-icon:url("https://assets.cdn.filesafe.space/Hmk188x3x1aSwwAtBIZy/media/6dc1e3f7-6703-407e-98c9-4108adba0875.png")}
.p-svc #elsewhere .ffcall--ch::before{background:var(--ff-icon) center / cover no-repeat; border-radius:50%}
@media (min-width:900px) and (max-width:1099px){ .svc-how .hw-split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} }