/* single-service.html centerpiece styles (skeleton: hero / inside-the-service
(stat band + chapter player, one slot across two bands) / whats-included /
occasions-it-fits / reviews / service-faq / form). Shared framework lives
in css/patterns.css (arp-). The hero + stat band share one ink field; the
player is an arch stage with a vertical chapter rail. */
/* --- hero: ink split, copy left, the orbit (circle photo + rotating ring) --- */
.ssv-hero{background:var(--ink);padding:150px 0 90px;overflow:hidden;}
.ssv-hero-grid{display:grid;grid-template-columns:1fr 470px;gap:90px;align-items:center;}
.ssv-hero .arp-kicker{color:rgba(249,248,246,.72);}
.ssv-hero .arp-h1{color:var(--white);text-transform:uppercase;letter-spacing:.05em;font-size:68px;line-height:1.1;}
.sec .ssv-lede{max-width:560px;margin:26px 0 0;font-size:16px;line-height:1.8;letter-spacing:.04em;color:rgba(249,248,246,.85);}
.ssv-hero .arp-actions{margin-top:36px;}
.ssv-hero .arp-ghost{color:var(--cream);border-color:rgba(249,248,246,.4);}
.ssv-hero .arp-ghost:hover{border-color:var(--cream);}
.sec .ssv-chip{margin:42px 0 0;max-width:520px;font-size:13px;line-height:1.7;letter-spacing:.04em;color:rgba(249,248,246,.7);}
.ssv-chip a{color:var(--cream);}
.ssv-orbit{position:relative;width:470px;height:470px;justify-self:end;}
.ssv-orbit::before{content:"";position:absolute;inset:-70px;border-radius:50%;background:radial-gradient(circle, rgba(249,248,246,.08), transparent 65%);}
.ssv-orbit > img,
.ssv-orbit > video {position:absolute;inset:52px;width:366px;height:366px;border-radius:50%;object-fit:cover;}
.ssv-orbit-ring{position:absolute;inset:0;animation:ssv-orbit 48s linear infinite;}
.ssv-orbit-ring svg{width:100%;height:100%;display:block;overflow:visible;}
.ssv-orbit-ring text{font-family:var(--f-label);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;fill:rgba(249,248,246,.55);}
@keyframes ssv-orbit{to{transform:rotate(360deg);}}
/* staggered load rise (hero only) */
.ssv-rise{opacity:0;transform:translateY(24px);animation:ssv-up .9s ease forwards;}
.ssv-hero-copy > .ssv-rise:nth-child(1){animation-delay:.05s;}
.ssv-hero-copy > .ssv-rise:nth-child(2){animation-delay:.15s;}
.ssv-hero-copy > .ssv-rise:nth-child(3){animation-delay:.25s;}
.ssv-hero-copy > .ssv-rise:nth-child(4){animation-delay:.35s;}
.ssv-hero-copy > .ssv-rise:nth-child(5){animation-delay:.45s;}
.ssv-orbit.ssv-rise{animation-delay:.3s;}
@keyframes ssv-up{to{opacity:1;transform:none;}}
/* --- stat band: same ink field as the hero, so the two read as one unit ----- */
/* flow-root: the band's 34px margin stays INSIDE the section. A client can delete
the kicker in the editor, and without a formatting root that margin collapsed
through the section, the band's top rule sat on the seam with the hero and only
the bottom rule showed (Charisma, 2026-09-22). Padding-top stays 0 on purpose:
the hero's own bottom padding is the gap, kicker or not (the owner found 56px
of extra padding here "too much blank space"). */
.ssv-numbers{background:var(--ink);padding:0 0 88px;display:flow-root;}
.ssv-numbers .arp-kicker{color:rgba(249,248,246,.62);}
.ssv-numbers .arp-stats{border-top-color:rgba(249,248,246,.22);border-bottom-color:rgba(249,248,246,.22);}
.ssv-numbers .arp-stat + .arp-stat::before{background:rgba(249,248,246,.22);}
.ssv-numbers .arp-stat b{color:var(--cream);}
.ssv-numbers .arp-stat-lab{color:rgba(249,248,246,.55);}
/* --- chapter player: arch stage + vertical chapter rail ---------------------- */
.ssv-stage{display:grid;grid-template-columns:480px 1fr;gap:80px;align-items:center;margin-top:64px;}
.ssv-media{position:relative;height:640px;border-radius:400px 400px 0 0;overflow:hidden;background:var(--taupe);}
.ssv-media img,
.ssv-media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.ssv-media img.on,
.ssv-media video.on {opacity:1;}
.ssv-chaps{display:flex;flex-direction:column;}
.ssv-chap{position:relative;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;padding:22px 6px 22px 36px;font-family:var(--f-body);}
.ssv-chap:last-child{border-bottom:1px solid var(--line);}
.ssv-track{position:absolute;left:0;top:16px;bottom:16px;width:2px;background:var(--line);overflow:hidden;}
.ssv-fill{display:block;width:100%;height:0;background:var(--ink);}
.ssv-fill.run{animation:ssv-fill 5s linear forwards;}
@keyframes ssv-fill{to{height:100%;}}
.ssv-chap-num{display:block;font-family:var(--f-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(30,29,26,.45);}
.ssv-chap-name{display:block;margin-top:8px;font-family:var(--f-title);font-size:26px;line-height:1.2;color:rgba(30,29,26,.5);transition:color .4s;}
.ssv-chap-sub{display:block;margin-top:5px;font-size:12px;letter-spacing:.03em;color:rgba(30,29,26,.5);}
.ssv-chap.on .ssv-chap-name{color:var(--ink);}
.ssv-cap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s ease;}
.ssv-cap > span{display:block;min-height:0;overflow:hidden;font-size:14.5px;line-height:1.75;letter-spacing:.03em;color:rgba(30,29,26,.78);}
.ssv-cap.on{grid-template-rows:1fr;}
.ssv-cap.on > span{padding-top:12px;}
/* The Memoir Booth: twenty flower walls ride the chapter rail (see _build.py). */
.ssv-chaps{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;}
.ssv-chap:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
.ssv-stage{align-items:start;}
.ssv-media{position:sticky;top:84px;z-index:2;}
/* --- whats-included (full-bleed photo left, the price list itself right) ------
The package exactly as written in client_packages, as a ruled column, with
the price and the CTA sitting on the closing rule. Full bleed, so the
section overrides .arp-sec's padding rather than sitting in .arp-wrap. */
.ssv-inc{padding:0;}
/* One window tall, so the whole package is readable without scrolling. Ten
ruled rows will not fit a short laptop window at fixed sizes, so the panel's
internals scale on vh (clamped both ends) rather than being pinned to px. */
.ssv-inc-grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:stretch;min-height:100vh;}
.ssv-inc-media{margin:0;position:relative;min-height:0;background:var(--taupe);}
.ssv-inc-media img,
.ssv-inc-media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Near-black field, white type. White on the --blue field (#1e1d1a) is
16.9:1, so the body copy clears WCAG AA and AAA at full opacity; the rules
and the bullet are the only things dimmed, and they carry no information.
(Read "cocoa #7c665b, 5.4:1" until 2026-09-07: the kit had been carrying the
donor client's palette from the 2026-08-16 re-cut. See templates/README.md.) */
.ssv-inc-copy{
background:var(--blue);
padding:clamp(36px,5.4vh,72px) clamp(28px,5vw,86px) clamp(34px,5vh,64px) clamp(28px,4.4vw,72px);
display:flex;flex-direction:column;justify-content:center;min-height:0;
}
.ssv-inc-copy .arp-kicker{color:var(--white);}
.ssv-inc-copy .arp-h2{font-size:clamp(30px,4.4vh,46px);color:var(--white);}
.sec .ssv-inc-lede{margin-top:clamp(14px,2.2vh,26px);max-width:56ch;font-size:clamp(13.5px,1.75vh,16px);line-height:1.72;letter-spacing:.04em;color:var(--white);}
.ssv-inc-lede a{color:var(--white);}
.ssv-inc-list{list-style:none;margin:clamp(16px,2.8vh,38px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.3);}
.ssv-inc-list li{
display:flex;align-items:baseline;gap:18px;
border-bottom:1px solid rgba(255,255,255,.3);padding:clamp(7px,1.18vh,15px) 4px;
font-family:var(--f-title);font-weight:400;font-size:clamp(15px,2vh,19px);line-height:1.35;color:var(--white);
}
.ssv-inc-list li::before{content:"\2022";flex:none;font-size:11px;line-height:1;color:rgba(255,255,255,.65);}
.ssv-inc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:clamp(16px,3vh,36px);}
.ssv-inc-price{margin:0;display:flex;align-items:baseline;gap:12px;}
.ssv-inc-price span{font-family:var(--f-label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--white);}
.ssv-inc-price b{font-family:var(--f-title);font-weight:400;font-size:clamp(28px,4.2vh,38px);line-height:1;color:var(--white);}
.ssv-inc-cta{
font-family:var(--f-label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
color:var(--white);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:6px;transition:border-color .4s;
}
.ssv-inc-cta:hover{border-bottom-color:var(--white);}
/* --- occasion panels -------------------------------------------------------------- */
.ssv-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;}
.ssv-panel{position:relative;height:460px;overflow:hidden;cursor:pointer;background:var(--taupe);}
.ssv-panel > img,
.ssv-panel > video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease;}
.ssv-panel:hover > img,
.ssv-panel:hover > video {transform:scale(1.04);}
/* The kit's veil (.8 at the foot, .1 from 58% up) only ever had to carry a
one-line title sitting on the bottom edge. An OPEN panel stacks title +
paragraph + button + link about 240px up, and on mobile every panel is open
(.ssv-more max-height:none below 900px), so that copy landed on the bare
photo: this client's backdrop is a bright grey studio wall and the cream
type measured 1.3-1.9:1. Carrying the veil higher fixes both states. */
.ssv-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,29,26,.88),rgba(30,29,26,.66) 65%,rgba(30,29,26,.35));}
.ssv-panel-body{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 30px;color:var(--cream);}
.ssv-panel h3{font-family:var(--f-title);font-weight:400;font-size:27px;color:var(--white);}
.ssv-more{max-height:0;overflow:hidden;transition:max-height .6s ease;}
.ssv-panel.open .ssv-more{max-height:280px;}
.ssv-more p{margin:12px 0 18px;font-size:13.5px;line-height:1.7;letter-spacing:.03em;color:rgba(249,248,246,.85);}
.ssv-panel-link{display:table;margin-top:14px;font-family:var(--f-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;padding-bottom:5px;border-bottom:1px solid rgba(249,248,246,.4);}
.ssv-panel-link:hover{border-color:var(--cream);}
@media (max-width:900px){
/* Phones: the numbers band sits close under the orbit ring (owner, 2026-09-22:
"move the numbers up"). The ring's box already reaches 24px into the hero's
bottom padding, so 40px here plus a 16px inset (overriding the grid's inline
34px) leaves about 32px from ring to rule. */
.ssv-hero{padding:120px 0 40px;}
.ssv-numbers .arp-stats{margin-top:16px!important;}
.ssv-hero-grid{grid-template-columns:1fr;gap:56px;text-align:center;}
.ssv-hero .arp-h1{font-size:clamp(34px,10vw,46px);}
.ssv-hero .arp-actions{justify-content:center;}
.sec .ssv-lede{margin:26px auto 0;}
.sec .ssv-chip{margin:42px auto 0;}
.ssv-orbit{width:300px;height:300px;justify-self:center;}
.ssv-orbit > img,
.ssv-orbit > video {inset:34px;width:232px;height:232px;}
.ssv-numbers{padding:0 0 56px;}
.ssv-stage{grid-template-columns:1fr;gap:44px;margin-top:40px;}
.ssv-media{height:440px;width:100%;max-width:340px;margin:0 auto;}
.ssv-chap-name{font-size:22px;}
/* The Memoir Booth: the arch stays in view while the twenty walls scroll, on a
cream mask that sticks with it (see _build.py). The bottom margin on the
arch (73 pinned top + its height + 20 of mask) and the matching one on the
mask make them release that much before the rail ends, and the rail's
negative top margin takes the same space back, so the start is unchanged
and the last rows end up BELOW the arch instead of behind it. --fwh is
the arch's height: 440px, or less on a short window, so the band under
the pinned arch (the only place the rail can be read while it is pinned)
is never under 190px (layout audit 2026-10-06: at an iPhone 13's real
664px svh that band was 131px, one 130px row; on an SE, 20px). svh, not
vh: iOS vh is the tall viewport even with Safari's bars showing, and the
@supports keeps the plain 440 on engines without svh. */
.ssv-stage{--fwh:440px;}
@supports (height:1svh){.ssv-stage{--fwh:min(440px, calc(100svh - 283px));}}
.ssv-chaps{column-gap:20px;grid-row:2;margin-top:calc(-1 * (var(--fwh) + 93px));}
.ssv-media{grid-area:1/1;top:73px;height:var(--fwh);margin-bottom:calc(var(--fwh) + 93px);}
.ssv-stage::before{content:"";grid-area:1/1;position:sticky;top:61px;z-index:1;height:calc(var(--fwh) + 32px);margin-bottom:calc(var(--fwh) + 61px);background:rgba(249,248,246,1);}
/* stacked: ten rows under a photo cannot fit one phone window, so the
one-window rule is desktop only and height goes back to natural */
.ssv-inc-grid{grid-template-columns:1fr;height:auto;min-height:0;}
.ssv-inc-media{min-height:0;height:78vw;max-height:460px;}
.ssv-inc-copy{padding:52px 20px 56px;}
.ssv-inc-copy .arp-h2{font-size:clamp(27px,7.6vw,34px);}
.sec .ssv-inc-lede{margin-top:20px;font-size:15px;}
.ssv-inc-list{margin-top:34px;}
.ssv-inc-list li{font-size:17px;gap:14px;padding:15px 2px;}
.ssv-inc-foot{margin-top:30px;}
.ssv-inc-price b{font-size:32px;}
.ssv-panels{grid-template-columns:1fr;margin-top:40px;}
.ssv-panel{height:400px;}
.ssv-panel .ssv-more{max-height:none;}
}
@media (prefers-reduced-motion: reduce){
.ssv-rise{animation:none;opacity:1;transform:none;}
.ssv-orbit-ring{animation:none;}
.ssv-fill.run{animation:none;height:100%;}
.ssv-media img,
.ssv-cap,
.ssv-chap-name,
.ssv-panel > img,
.ssv-more,
.ssv-media video,
.ssv-panel > video {transition:none;}
}