/* Page kit (Sept 26, 2026): the pieces the pricing page introduced on Rivertree's layout, shared
   so the process page can use them too. Joseph, after the pricing rebuild: "I love the direction
   that we have on the fee page... the size, I think you expanded the size of each of the
   sections and then used the different colors. I want to mimic that on the process page."
   Body class `page-kit`, loaded after one-ground.css and site-polish.css:
     .pk-hero        split hero, copy on the left aligned to the header lockup, photo bleeding
                     to the right edge with glass pills (.pk-tags) over it
     .pk-band        a full-size section (112px top and bottom); .pk-sand paints it sand
     .pk-head        a centred section head: .pk-pill, an Editor's Note h2, an optional lede
     .pk-btn         the navy pill button
   These sand bands are an owner exception to one-ground's "no mid-page colour band" rule, for
   the pages that carry this body class only. Band content sits in the 1120px wrap (1072 of
   content), so it lines up with the header lockup and the hero copy.
   Sept 26, later: Joseph extended the kit to the overview pages (services, about, blog index,
   calculators, FAQ, insights, client login); their page-specific rules are at the end. */

.page-kit{--pk-navy:#0c1a2d;--pk-gold:#d7b486;--pk-gold-text:#7d5f33;--pk-ground:#fcfcf9;
  --pk-sand:#efe7d9;--pk-rule-2:#d8ceba;--pk-muted:#4a5568}

/* grounds: one-ground paints every main section cream with !important */
.one-ground.page-kit main>section.pk-hero,
.one-ground.page-kit main>section.pk-band{background:var(--pk-ground)!important}
.one-ground.page-kit main>section.pk-band.pk-sand{background:var(--pk-sand)!important}
/* body.page-kit.one-ground outranks one-ground's section hairline, which is
   .one-ground:not(.service-editorial):not(.about-refined) main>section>.wrap at (0,4,2) */
body.page-kit.one-ground main>section.pk-band>.wrap{width:auto;max-width:1120px;margin:0 auto;padding:0 24px;border:0}

/* ---------------------------------------------------------------- pill and section head */
.page-kit .pk-pill{display:inline-flex;align-items:center;margin:0 0 22px;padding:7px 15px;
  border:1px solid var(--pk-rule-2);border-radius:999px;background:#fffdf8;
  font:500 13px/1.2 "General Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pk-gold-text)}
.one-ground.page-kit main .pk-head p.pk-pill{margin:0 0 22px;font-size:13px;line-height:1.2;color:var(--pk-gold-text)}
.page-kit .pk-head{max-width:860px;margin:0 auto;text-align:center}
.one-ground.page-kit main .pk-head>h2{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(36px,3.6vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--pk-navy);
  margin:0 auto;max-width:20ch;padding:0;text-align:center;text-wrap:balance}
.one-ground.page-kit main .pk-head>p:not(.pk-pill){margin:22px auto 0;max-width:40em;font-size:17px;
  line-height:1.65;color:var(--pk-muted);text-align:center}

/* ---------------------------------------------------------------- hero
   Section selectors carry body.page-kit.one-ground (0,3,3) so they outrank the interior pages'
   `.one-ground.interior-framed.refined main>section{padding:0 0 64px}` (0,3,2). */
body.page-kit.one-ground main>section.pk-hero{display:grid;
  grid-template-columns:minmax(24px,1fr) minmax(0,536px) minmax(0,536px) minmax(24px,1fr);
  align-items:center;padding:148px 0 104px;margin:0}
.page-kit .pk-hero-copy{grid-column:2;padding-right:64px;min-width:0}
.one-ground.page-kit main .pk-hero h1{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(46px,4.9vw,72px);line-height:1.04;letter-spacing:-.025em;color:var(--pk-navy);
  margin:0 0 26px;max-width:11ch;text-wrap:balance}
.one-ground.page-kit main .pk-hero-copy p.pk-lede{font-size:19px;line-height:1.62;color:var(--pk-muted);
  max-width:30em;margin:0}
.page-kit .pk-hero-media{grid-column:3 / 5;position:relative;margin:0;border-radius:20px 0 0 20px;overflow:hidden;
  background:#e9e2d4;height:clamp(420px,40vw,600px)}
.page-kit .pk-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.page-kit .pk-tags{position:absolute;left:28px;bottom:28px;right:28px;display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0;list-style:none}
.page-kit .pk-tags li{margin:0;padding:10px 17px;border-radius:999px;background:rgba(12,26,45,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
  color:#fcfcf9;font:500 14px/1.2 "General Sans",system-ui,sans-serif;letter-spacing:.01em}
.page-kit .pk-tags li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--pk-gold);margin-right:9px;vertical-align:2px}

/* ---------------------------------------------------------------- bands and button */
body.page-kit.one-ground main>section.pk-band{padding:112px 0;margin:0}
.page-kit .pk-btn{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:15px 28px;
  border-radius:999px;background:var(--pk-navy);color:#fcfcf9;text-decoration:none;
  font:500 16px/1.2 "General Sans",system-ui,sans-serif;transition:background-color .2s ease}
.page-kit .pk-btn svg{transition:transform .2s ease}
.page-kit .pk-btn:hover{background:#08121f;color:#fff}
.page-kit .pk-btn:hover svg{transform:translateX(3px)}
.page-kit .pk-btn:focus-visible{outline:2px solid var(--pk-navy);outline-offset:3px}

/* ---------------------------------------------------------------- the overview pages */
/* two cream sections in a row (hero, then a cream band) need no second full gap between them */
body.page-kit.one-ground main>section.pk-hero+section.pk-band:not(.pk-sand){padding-top:8px}

/* services: the nine cards become light cards on the sand band */
.page-kit.services-refined .svc-band .grid3 .card{background:#fffdf8;border:1px solid #e4d9c6;border-radius:16px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.page-kit.services-refined .svc-band .grid3 .card .sc-body{padding:26px 26px 28px}
.page-kit.services-refined .svc-band .grid3 .card:hover{transform:translateY(-4px);border-color:#d8ceba;box-shadow:0 24px 50px -30px rgba(12,26,45,.35)}
/* FAQ boxes on a sand band are light cards, the way the homepage sets them on its gray */
.page-kit .pk-sand .qa-grid{--qa-quiet:#fffdf8;--qa-edge:#e4d9c6}

/* calculators: each calculator is its own band; the band carries the spacing, not the .calc */
body.page-kit.one-ground .calc-band .calc,body.page-kit.one-ground .calc-band .calc:last-child{padding:0;border:0;margin:0}
.page-kit .calc-band .calc-jumps{margin:0 0 56px}
.one-ground.page-kit main .calc-band p.calc-note{margin:56px 0 0;padding:0;max-width:none}

/* insights */
.one-ground.page-kit main .ins-band p.x-handle{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(26px,3vw,34px);line-height:1.2;color:var(--pk-gold-text);margin:30px 0 26px;text-align:center}
.page-kit .ins-band .pk-head{margin-bottom:44px}
.page-kit .ins-band.pk-sand .pk-head{margin-bottom:0}
/* the X band holds only a handle and a button, so it is a compact band rather than a full one
   (Astra 2, #29): less height, the handle and the button closer together */
body.page-kit.one-ground main>section.pk-band.ins-x{padding:80px 0}
.one-ground.page-kit main .ins-x p.x-handle{margin:22px 0 18px}
.page-kit .ins-x .sub-cta{margin-top:0}
@media(max-width:760px){body.page-kit.one-ground main>section.pk-band.ins-x{padding:60px 0}}

/* blog index: each part of the reading grid is its own band, so the grid's hairlines go */
.page-kit .pk-band .blog-section,.page-kit .pk-band .blog-library{border-top:0;padding-top:0;margin-top:0}
/* Post titles in lists are General Sans (Sept 26, Joseph: "we're overusing the font"). Editor's
   Note is kept for the one featured guide under "Start here", so it stands out, and for page and
   section headings. Covers the Latest list on the index and the Keep reading cards on posts. */
.one-ground.page-kit .blog-entry h3,
.one-ground.page-kit .related .pcard h3{font-family:"General Sans",system-ui,sans-serif;font-weight:500;
  font-size:clamp(19px,1.6vw,21px);line-height:1.35;letter-spacing:-.01em;max-width:34ch}
@media(max-width:760px){.one-ground.page-kit .blog-entry h3,.one-ground.page-kit .related .pcard h3{font-size:18.5px}}
/* "Start here" arrow (Sept 26, Joseph: first "a nice visual arrow... illuminating", then, the same
   night, "a little bit smaller... in line with the start here" and "just a normal arrow" that points
   at the guide on a phone too). A small plain arrow right after the words, the same drawn arrow as
   the buttons. It points right at the guide on desktop and down at it once the guide sits below
   the label (760px and under). The only motion is a short nudge on hover. */
.page-kit .blog-feature>.blog-label{width:auto;max-width:none}
.page-kit .blog-label .start-arrow{display:inline-block;width:.78em;height:.78em;margin-left:.3em;vertical-align:-.06em;
  fill:none;stroke:#7d5f33;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.page-kit .blog-feature:hover .start-arrow,.page-kit .blog-feature:focus-visible .start-arrow{transform:translateX(4px)}
@media(max-width:760px){
  .page-kit .blog-label .start-arrow{transform:rotate(90deg)}
  .page-kit .blog-feature:hover .start-arrow,.page-kit .blog-feature:focus-visible .start-arrow{transform:rotate(90deg) translateX(3px)}
}
@media(prefers-reduced-motion:reduce){.page-kit .blog-label .start-arrow{transition:none}}


/* client login: the two portals are light cards on sand, the contact block sits on cream */
/* returning clients get both sign-ins in the hero, before the photograph (Astra 2, #7); the cards
   below keep the fuller explanation */
.page-kit .pk-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.page-kit .pk-btn-row .pk-btn{margin-top:0}
.page-kit .login-shortcuts{display:inline-grid;grid-template-columns:minmax(0,max-content)}
.page-kit .login-shortcuts .pk-btn{justify-content:space-between;gap:18px}
.page-kit .login-shortcuts .pk-btn:hover svg{transform:translate(2px,-2px)}
.page-kit.client-login-refined .login-sec .portal{background:#fffdf8;border:1px solid #e4d9c6;border-radius:18px;padding:36px 34px 32px}
.one-ground.page-kit .login-help .portal-help{margin-top:0;padding-top:0;border-top:0}
.page-kit.client-login-refined .login-sec .portal-symbol{top:30px;right:30px;width:48px;height:48px}

/* about: the page's own rules are in about-profile.css (Sept 27, 2026). The earlier page-kit About
   rules (.about-lead, .al-*, .cred-cards, .path, .about-band) matched nothing and were removed. */

/* ---------------------------------------------------------------- the nine service pages
   (Sept 26, later still: Joseph approved the overview pages, "love it, yes please do").
   The hero pill is the old "Services" back link, so it is a link here. The band after the hero
   is the page's approach (or the explorer on investment, the Monarch demo on budgeting), then
   the questions, then related guides, alternating sand and cream. */
.page-kit a.pk-pill{text-decoration:none;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.page-kit a.pk-pill:hover{border-color:#bcae93;background:#fff;color:#5f4722}
.page-kit a.pk-pill:focus-visible{outline:2px solid var(--pk-navy);outline-offset:3px}
.one-ground.page-kit main .svc-hero h1{font-size:clamp(44px,4.5vw,64px);line-height:1.06;max-width:none}
.page-kit .svc-demo-band .svc-demo{max-width:960px;margin:0 auto}
/* section heads in the kit's Editor's Note, like "Common questions" (they were General Sans 500) */
body.page-kit.one-ground main .service-plan-copy>h2,
body.page-kit.one-ground main .service-explorer .pe-heading h2{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(34px,3.2vw,46px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body.page-kit.one-ground main .service-related .reading-links h2{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(28px,2.4vw,34px);line-height:1.15;letter-spacing:-.01em}
/* the approach band. Joseph found the RightCapital screenshots "really blurry": in the old
   two-column grid the sample ran about 500px wide, so on a standard monitor its interface text
   shrank to a few pixels. Now the head is centred, the sample runs up to 960px, and the three
   steps sit in a row beneath it. */
body.page-kit.one-ground main>section.service-actions-section>.wrap{display:block}
.page-kit .service-actions-section .service-plan-copy{max-width:960px;margin:0 auto}
body.page-kit.one-ground main .service-plan-copy>h2{max-width:22ch;margin:0 auto 48px;text-align:center}
.page-kit .service-actions-section .planning-visual>figcaption{max-width:74ch;margin:24px auto 0;text-align:center}
.page-kit .service-actions-section .planning-extra .planning-media>figcaption{margin-top:16px}
@media(max-width:760px){.page-kit .service-actions-section .planning-visual>figcaption{margin-top:18px}}
body.page-kit.one-ground main .service-plan-copy>.service-scope-note{max-width:74ch;margin:22px auto 0;text-align:center}
.page-kit .service-actions-section .planning-extra{max-width:720px;margin-left:auto;margin-right:auto}
.page-kit .service-actions-section .service-work{margin:80px 0 0}
.page-kit .service-actions-section .service-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.page-kit .service-actions-section .service-actions>li,
.page-kit .service-actions-section .service-actions>li:first-child{display:block;padding:28px 0 0;border-top:1px solid #d8ceba}
.page-kit .service-actions-section .service-step{display:block;line-height:1;margin:0 0 14px}
.one-ground.page-kit .service-actions-section .service-actions h3{font-size:21px}
.one-ground.page-kit .service-actions-section .service-actions p{font-size:16.5px;max-width:none}
.one-ground.page-kit .service-actions-section .service-connected{padding:44px 0 0;margin:0 auto;max-width:62ch;text-align:center}
/* Estate lists four actions: two by two on wide screens, one column below 900px (Sept 26, 2026). */
@media(min-width:901px){.page-kit .service-actions-section .service-actions.service-actions-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}}
/* One title track per row (Astra 2, #5): when one heading wraps to two lines and its neighbour does
   not, the paragraphs still start on the same line. Each step takes three rows of the list grid
   (number, heading, paragraph) through subgrid; without subgrid support it falls back to the
   natural heights it had before. Phones keep their natural single-column flow. */
@media(min-width:901px){
  .page-kit .service-actions-section .service-actions>li,
  .page-kit .service-actions-section .service-actions>li:first-child{display:grid;grid-template-columns:minmax(0,1fr);
    grid-row:span 3;grid-template-rows:subgrid;gap:0;align-content:start}
  .page-kit .service-actions-section .service-actions>li>div{display:contents}
}
@media(max-width:900px){
  .page-kit .service-actions-section .service-work{margin-top:56px}
  .page-kit .service-actions-section .service-actions{grid-template-columns:minmax(0,1fr)}
  .page-kit .service-actions-section .service-actions>li,
  .page-kit .service-actions-section .service-actions>li:first-child{padding:24px 0}
  .page-kit .service-actions-section .service-actions>li:last-child{padding-bottom:0}
  body.page-kit.one-ground main .service-plan-copy>h2{margin-bottom:32px}
}

/* budgeting: two real demonstrations with different jobs, named before the captions are read
   (Astra 2, #12): Monarch is today's spending, RightCapital is future cash flow */
.page-kit .svc-kicker{display:flex;width:max-content;max-width:100%;margin:0 auto 22px}
.one-ground.page-kit main .service-plan-copy>p.svc-kicker{margin:0 auto 20px}
/* business owner: the S corp model is the image on every screen (Joseph, Sept 27: "just the plain
   chart"), with a link under it to the article that carries the interactive version of the table */
body.page-kit main p.planning-more{max-width:74ch;margin:14px auto 0;text-align:center;font-size:15px;line-height:1.5;color:#0c1a2d}
.page-kit .planning-more a{display:inline-flex;align-items:center;gap:8px;color:#0c1a2d;font-weight:500;text-decoration:underline;
  text-decoration-color:#d7b486;text-decoration-thickness:1px;text-underline-offset:4px}
.page-kit .planning-more a:hover{text-decoration-color:#0c1a2d}
.page-kit .planning-more a svg{flex:none;transition:transform .2s ease}
.page-kit .planning-more a:hover svg{transform:translateX(3px)}
.page-kit .planning-more a:focus-visible{outline:2px solid #0c1a2d;outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.page-kit .planning-more a svg{transition:none}}
/* budgeting: the closing band only holds "Explore all services" */
body.page-kit.one-ground main>section.service-more.pk-band{padding:64px 0}

/* one-ground's `.one-ground.interior-framed.refined main>section:last-of-type{padding-bottom:88px}`
   is (0,4,2), so on the kit pages that still carry interior-framed (about, calculators, FAQ,
   the posts) it was trimming the last band to 88px. This puts the band's own padding back. */
body.page-kit.one-ground.interior-framed.refined main>section.pk-band:last-of-type{padding-bottom:112px}

/* ---------------------------------------------------------------- blog posts
   No photographs on the posts (Joseph, Sept 19, 2026), so the post hero is type only: the
   crumb as a pill, the title, the lede and the byline on a sand band, then the article on cream and "Keep
   reading" as a sand band of light cards. The post rules in one-ground.css section 13 are
   (0,4,2) on the wrap and draw a hairline with ::before; these (0,5,x) rules replace them for
   the kit's bands only. */
body.page-kit.blog-refined.interior-framed.one-ground main>section.pk-band>.wrap{padding:0 24px}
body.page-kit.blog-refined.interior-framed.one-ground main>section.pk-band>.wrap::before{content:none}
body.page-kit.blog-refined.interior-framed.one-ground main>section.post-top{padding:150px 0 88px}
body.page-kit.blog-refined.interior-framed.one-ground main>section.post-body{padding:84px 0 112px}
.page-kit .post-top .pk-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.page-kit .post-top .pk-crumb a:hover{border-bottom-color:currentColor}
.page-kit .post-top .pk-crumb .crumb-sep{margin:0 9px;color:#a8977a}
.one-ground.page-kit main .post-top h1{font-family:"Editor's Note",Georgia,serif;font-weight:300;
  font-size:clamp(40px,4.4vw,60px);line-height:1.08;letter-spacing:-.02em;color:var(--pk-navy);
  max-width:900px;margin:0 0 24px;text-wrap:balance}
.one-ground.page-kit main .post-top p.pk-lede{font-size:19px;line-height:1.62;color:var(--pk-muted);max-width:58ch;margin:0}
.one-ground.page-kit main .post-top p.post-meta{font:500 13px/1.9 "General Sans",system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pk-muted);margin:28px 0 0;max-width:none}
.one-ground.page-kit main .post-top p.post-meta span{color:var(--pk-navy)}
/* keep reading: light cards on sand, like the services cards */
.page-kit .related.pk-band .pk-head{margin-bottom:48px}
.one-ground.page-kit .related.pk-band .pcard{background:#fffdf8;border:1px solid #e4d9c6;border-radius:16px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.one-ground.page-kit .related.pk-band .pcard:hover{transform:translateY(-4px);border-color:#d8ceba;box-shadow:0 24px 50px -30px rgba(12,26,45,.35)}
.one-ground.page-kit .related.pk-band .pc-body{padding:26px 26px 28px}

/* Shared tracks so neighbours line up (Astra 2, #21). Keep reading cards: a two- or three-line title
   no longer pushes its description below the one beside it. Library rows: dates sit level under
   neighbouring titles. Subgrid; without it they fall back to their natural heights. Phones keep
   their single-column flow. */
@media(min-width:601px){
  .one-ground.page-kit .related.pk-band .pcard{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .one-ground.page-kit .related.pk-band .pcard .pc-body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
}
@media(min-width:761px){
  .page-kit .blog-topic li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .page-kit .blog-topic li a{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}

/* ---------------------------------------------------------------- narrower screens */
@media(max-width:1100px){
  body.page-kit.one-ground main>section.pk-hero{padding-top:132px}
  .page-kit .pk-hero-copy{padding-right:44px}
  .page-kit .pk-hero-media{height:clamp(380px,46vw,520px)}
}
@media(max-width:860px){
  body.page-kit.one-ground main>section.pk-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:118px 0 64px}
  .page-kit .pk-hero-copy{grid-column:1;padding:0 22px}
  .page-kit .pk-hero-media{grid-column:1;margin:0 22px;border-radius:18px;height:auto;aspect-ratio:4/3}
}
@media(max-width:760px){
  body.page-kit.one-ground main>section.pk-band>.wrap{padding:0 20px}
  body.page-kit.one-ground main>section.pk-band{padding:76px 0}
  .page-kit .pk-hero-copy{padding:0 22px}
  .one-ground.page-kit main .pk-hero h1{font-size:clamp(42px,11.5vw,52px);margin-bottom:20px}
  .one-ground.page-kit main .pk-hero-copy p.pk-lede{font-size:17.5px}
  .page-kit .pk-hero-media{margin:0 16px;aspect-ratio:1/1}
  .page-kit .pk-tags{left:14px;right:14px;bottom:14px;gap:6px}
  .page-kit .pk-tags li{padding:7px 11px;font-size:12.5px}
  .page-kit .pk-tags li::before{margin-right:7px}
  .one-ground.page-kit main .pk-head>p:not(.pk-pill){font-size:16.5px}
  body.page-kit.one-ground main>section.pk-hero+section.pk-band:not(.pk-sand){padding-top:0}
  .page-kit.client-login-refined .login-sec .portal{padding:28px 22px 26px}
  .page-kit.client-login-refined .login-sec .portal-symbol{top:24px;right:20px;width:40px;height:40px}
  .page-kit.services-refined .svc-band .grid3 .card .sc-body{padding:22px 20px 24px}
  body.page-kit.one-ground.interior-framed.refined main>section.pk-band:last-of-type{padding-bottom:76px}
  body.page-kit.blog-refined.interior-framed.one-ground main>section.pk-band>.wrap{padding:0 20px}
  body.page-kit.blog-refined.interior-framed.one-ground main>section.post-top{padding:112px 0 56px}
  body.page-kit.blog-refined.interior-framed.one-ground main>section.post-body{padding:52px 0 76px}
  .one-ground.page-kit main .post-top h1{font-size:clamp(32px,8.8vw,38px);line-height:1.14;margin-bottom:18px}
  .one-ground.page-kit main .post-top p.pk-lede{font-size:17.5px}
  .one-ground.page-kit main .post-top p.post-meta{margin-top:22px;font-size:12px}
  .page-kit .related.pk-band .pk-head{margin-bottom:34px}
  .one-ground.page-kit .related.pk-band .pc-body{padding:22px 20px 24px}
}
/* touch screens: no hover shadow left behind after a tap; a press darkens the edge (Astra 2, #16) */
@media (hover:none),(pointer:coarse){
  .page-kit.services-refined .svc-band .grid3 .card:hover,
  .one-ground.page-kit .related.pk-band .pcard:hover{transform:none;box-shadow:none;border-color:#e4d9c6}
  .page-kit.services-refined .svc-band .grid3 .card:active,
  .one-ground.page-kit .related.pk-band .pcard:active{border-color:#bcae93}
}
@media(prefers-reduced-motion:reduce){
  .page-kit .pk-btn,.page-kit .pk-btn svg{transition:none}
  .page-kit.services-refined .svc-band .grid3 .card{transition:none}
  .page-kit.services-refined .svc-band .grid3 .card:hover{transform:none}
  .one-ground.page-kit .related.pk-band .pcard{transition:none}
  .one-ground.page-kit .related.pk-band .pcard:hover{transform:none}
  .page-kit a.pk-pill,.page-kit .post-top .pk-crumb a{transition:none}
}

/* Process: the RightCapital "how planning works" video sits under the four meetings as the same
   quiet disclosure the service pages use (Sept 26, night). */
body.page-kit.process-refined .process-steps .planning-extra.process-video{max-width:720px;margin:64px auto 0;border-color:#d8ceba}
@media(max-width:760px){body.page-kit.process-refined .process-steps .planning-extra.process-video{margin-top:44px}}
/* RightCapital demo loops recorded from the Valerio Wealth client portal (Sept 26, night): tax,
   retirement and a portal tour on Process. Service pages get the shell styles from
   service-pages.css; Process does not load that sheet, so the shell is restated for it here. */
body.page-kit .planning-demo .service-demo-video{aspect-ratio:1250/858}
body.page-kit.process-refined .process-portal{max-width:960px;margin:64px auto 0}
body.page-kit.process-refined .process-portal .service-demo-shell{overflow:hidden;border-radius:12px;background:#fff;border:1px solid #e0d7c6;box-shadow:0 18px 50px -32px #263e4655}
body.page-kit.process-refined .process-portal .service-demo-video{display:block;width:100%;height:auto;background:#fff;object-fit:contain}
body.page-kit.process-refined .process-portal .service-media-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;min-height:58px}
body.page-kit.process-refined .process-portal .service-media-controls button{font-family:"General Sans",Arial,sans-serif;font-size:13px;font-weight:500;line-height:1.5;color:#0c1a2d;display:inline-flex;gap:10px;align-items:center;cursor:pointer;background:transparent;border:0;padding:8px 0}
body.page-kit.process-refined .process-portal .service-media-controls button::before{content:"";width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor;margin-right:5px}
body.page-kit.process-refined .process-portal[data-media-playing="false"] .service-media-controls button::before,body.page-kit.process-refined .process-portal [data-media-playing="false"] .service-media-controls button::before{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
body.page-kit.process-refined .process-portal figcaption{max-width:720px;margin:24px auto 0;text-align:center;font-size:14px;line-height:1.6;color:#4a5568}
body.page-kit.process-refined .process-steps .process-portal + .planning-extra.process-video{margin-top:40px}
@media(max-width:760px){
  body.page-kit.process-refined .process-portal{margin-top:44px}
  body.page-kit.process-refined .process-portal .service-media-controls{gap:12px;padding:6px 12px}
}