/* September 14: open service pages. Intentionally scoped away from the homepage and overview. */
.service-editorial{background:#fcfcf9;color:#0c1a2d}
.service-editorial main{background:#fcfcf9;--ink-soft:#4c585b;--gold-text:#7d5f33}
.service-editorial main>section{background:transparent;color:#0c1a2d;padding:88px 0}
.service-editorial main>section>.wrap{width:calc(100% - 96px);max-width:1220px;padding:0;margin:0 auto;border:0;box-shadow:none;background:transparent;border-radius:0}
.service-editorial main h1,.service-editorial main h2{font-family:"Editor's Note",Georgia,serif;font-weight:300;color:#0c1a2d;letter-spacing:-.025em;text-wrap:balance}
.service-editorial main h2{font-size:clamp(34px,3.2vw,44px);line-height:1.14;margin:0 0 40px}
.service-editorial main p{color:#4c585b}
.service-editorial main>.service-lead{padding:160px 0 86px}
.service-lead-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:72px;align-items:center}
.service-lead-copy{min-width:0;padding:12px 0}
.service-back{display:inline-block;font-size:13px;line-height:1.5;letter-spacing:.04em;color:#7d5f33;border-bottom:1px solid #b7a484;padding:5px 0;margin-bottom:26px}
.service-editorial .service-lead h1{font-size:clamp(44px,4.3vw,64px);line-height:1.06;max-width:600px;margin:0 0 26px}
.service-editorial .service-lead-copy>p{font-size:18px;line-height:1.75;max-width:42ch;margin:0 0 30px}
.service-text-link{display:inline-flex;align-items:center;gap:18px;font-size:15px;font-weight:500;color:#0c1a2d;min-height:44px;border-bottom:1px solid #a7b2ad}
.service-text-link svg{flex:none;transition:transform .2s}
.service-text-link:hover svg{transform:translateX(4px)}
.service-lead-media{margin:0;min-width:0}
.service-lead-photo img{display:block;width:100%;height:auto;aspect-ratio:1.52;object-fit:cover;border-radius:12px}
.service-lead-media figcaption{margin:13px 0 0;font-size:12px;line-height:1.6;color:#5a6564;max-width:70ch}
.service-demo-shell{overflow:hidden;border-radius:12px;background:#edf2ee;border:1px solid #d9dfd9}
.service-demo-video{display:block;width:100%;height:auto;aspect-ratio:44/27;background:#edf2ee;object-fit:contain}
.service-media-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;min-height:58px}
.service-media-controls button,.service-media-controls a{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;min-height:42px}
.service-media-controls button{cursor:pointer;background:transparent;border:0;padding:8px 0}
.service-media-controls button::before{content:"";width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor;margin-right:5px}
[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}
.service-media-controls a{border-bottom:1px solid transparent}
.service-media-controls a:hover{border-bottom-color:#a7b2ad}
/* Narration switch beside a narrated walkthrough (Sept 26 2026): the video loops muted, and
   "Turn on narration" plays it once with sound. */
/* Captions have their own switch, off by default (Joseph, Sept 26 2026). Both switches sit together
   on the right; below 560px they show one word each, with the full label as the accessible name. */
.service-media-controls button:is([data-media-sound],[data-media-captions])::before{display:none}
.service-media-controls button:is([data-media-sound],[data-media-captions]){gap:8px}
.service-media-controls button[data-media-captions]{margin-left:auto}
.service-media-controls button:is([data-media-sound],[data-media-captions])>svg{flex:none}
/* Music switch beside a quick demo loop (Sept 28 2026): the loop stays silent, "Turn on music"
   plays a music bed under it. It sits on the right like the old narration switch. */
.service-media-controls button[data-media-music]{margin-left:auto;gap:8px}
.service-media-controls button[data-media-music]::before{display:none}
.service-media-controls button[data-media-music]>svg{flex:none}
[data-media-music-state="on"] .media-music-off,.service-demo-shell:not([data-media-music-state="on"]) .media-music-on{display:none}
/* "Watch with narration" beside a silent loop (Oct 12 2026): it sits on the right before the music
   switch; while the narrated cut plays the music switch is hidden and the captions switch appears. */
.service-media-controls button[data-media-narrated]{margin-left:auto;gap:8px}
.service-media-controls button[data-media-narrated]::before{display:none}
.service-media-controls button[data-media-narrated]>svg{flex:none}
.service-media-controls button[data-media-captions]:not([hidden])+button[data-media-narrated],.service-media-controls button[data-media-narrated]~button[data-media-music]{margin-left:0}
[data-media-narrated-state="on"] .media-narr-off,.service-demo-shell:not([data-media-narrated-state="on"]) .media-narr-on{display:none}
.service-media-controls button:focus-visible{outline:2px solid #0c1a2d;outline-offset:2px}
[data-media-narration="on"] .media-sound-off,.service-demo-shell:not([data-media-narration="on"]) .media-sound-on{display:none}
[data-media-caption-state="on"] .media-cc-off,.service-demo-shell:not([data-media-caption-state="on"]) .media-cc-on{display:none}
.service-media-controls .media-short{display:none}
@media(max-width:560px){.service-media-controls .media-long{display:none}.service-media-controls .media-short{display:inline}}
.service-demo-video::cue{font-family:"General Sans",Arial,sans-serif;background:#0c1a2dd9;color:#fff}
.service-editorial main>.service-overview{padding:72px 0 88px}
.service-overview>.wrap{border-top:1px solid #dce1db!important;padding-top:58px!important}
.service-essentials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.service-essential{min-width:0}
.service-essential::before{content:"";display:block;width:25px;height:2px;background:#ad8a58;margin-bottom:24px}
.service-editorial .service-essential h3{font-family:"General Sans",Arial,sans-serif;font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:#0c1a2d;margin:0 0 13px;min-height:2.8em;max-width:23ch;text-wrap:balance}
.budgeting-editorial .service-essential h3{min-height:0}
.service-editorial .service-essential p{font-size:16px;line-height:1.75;margin:0;max-width:36ch}
.service-editorial .service-scope-note{font-size:14px;line-height:1.75;margin:38px 0 0;max-width:86ch;color:#52615d}
.service-scope-note a,.service-long-copy a{color:#0c1a2d;text-decoration:underline;text-underline-offset:4px}
.service-editorial main>.service-example{background:#edf2ee;padding:80px 0}
.service-example>.wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:84px;align-items:center}
.service-editorial .service-example h2{max-width:12ch;margin:0 0 24px}
.service-editorial .service-example-copy>p{font-size:18px;line-height:1.75;max-width:34ch;margin:0}
.service-editorial .planning-visual{margin:0;min-width:0}
.service-editorial .planning-visual-placeholder{width:100%;min-width:0;aspect-ratio:1.85;min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:15px;padding:28px;color:#0c1a2d;background:#f8faf7;border:1px dashed #aabbb2;border-radius:12px}
.service-editorial .planning-visual-placeholder>svg{width:46px;height:46px;color:#597068}
.service-editorial .planning-visual-placeholder>span{font-family:"General Sans",Arial,sans-serif;font-weight:500;font-size:20px;line-height:1.4}
.service-editorial .planning-visual-placeholder>small{font-size:13px;color:#55645f;line-height:1.6}
.service-editorial .planning-visual>img{display:block;width:100%;height:auto;border-radius:10px}
.service-editorial .planning-visual>figcaption{color:#55645f;font-size:12px;line-height:1.6;padding:14px 0 0}
.service-editorial main>.service-reading{padding:88px 0 40px}
.service-reading-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:84px;align-items:start}
.service-reading-grid>h2{padding-top:19px}
.service-expander{border-bottom:1px solid #d4ddd7}
.service-expander:first-child{border-top:1px solid #d4ddd7}
.service-expander>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;cursor:pointer;min-height:72px;color:#0c1a2d;font-size:18px;font-weight:500;line-height:1.5}
.service-expander>summary::-webkit-details-marker{display:none}
.service-expander>summary::marker{content:""}
.service-expander>summary>svg{flex:none;color:#64796e;transition:transform .2s}
.service-expander[open]>summary>svg{transform:rotate(45deg)}
.service-long-copy{padding:0 0 28px;max-width:68ch}
.service-editorial .service-long-copy p{font-size:16px;line-height:1.85;margin:0 0 20px}
.service-long-copy p:last-child{margin-bottom:0}
.service-editorial .service-long-copy strong{font-weight:500;color:#0c1a2d}
.service-editorial .service-long-copy .d-list{display:block;max-width:none;columns:auto;margin:0;padding:0}
.service-editorial .service-long-copy .d-list li{font-size:15px;color:#4c585b;line-height:1.75;padding:10px 0 10px 20px;margin:0;border:0}
.service-editorial .service-long-copy .d-list li::before{top:21px;left:0;background:#708477;border:0;width:4px;height:4px}
.service-editorial main>.service-questions{padding:50px 0 88px}
.service-editorial .service-question{border-color:#d4ddd7}
.service-editorial .service-question>summary{font-family:"General Sans",Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.55;letter-spacing:-.01em;min-height:72px;padding:22px 24px 22px 0;color:#0c1a2d}
.service-editorial .service-question>div{padding-bottom:26px;max-width:66ch}
.service-editorial .service-question p{font-size:16px;line-height:1.85;color:#4c585b;margin:0 0 20px}
/* Sept 19, 2026: 'A closer look' was folded into Common questions, so an answer can now run to
   several paragraphs and can carry the scope .d-list. Without these the paragraphs butt together. */
.service-editorial .service-question p:last-child{margin-bottom:0}
.service-editorial .service-question strong{font-weight:500;color:#0c1a2d}
.service-editorial .service-question .d-list{margin:4px 0 0}
.budgeting-editorial .service-question p{margin:0 0 20px}
.budgeting-editorial .service-question p:last-child{margin-bottom:0}
.service-editorial main>.service-related{padding:0 0 80px}
.service-editorial .reading-links{border-top:1px solid #dce1db;padding-top:38px;margin:0 0 50px;max-width:none}
.service-editorial .reading-links h2,.service-editorial .service-other-links h2{font-size:28px;margin:0 0 24px}
.service-editorial .reading-links ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;list-style:none;margin:0;padding:0}
.service-editorial .reading-links li{padding:0;margin:0;border:0;line-height:1.6}
.service-editorial .reading-links a{display:block;min-height:44px;font-size:15px;line-height:1.7;font-weight:400;color:#4c585b;text-decoration-color:#b8c3bb;text-underline-offset:4px}
.service-other-links{padding-top:34px;border-top:1px solid #dce1db;display:flex;align-items:center;gap:12px 30px;flex-wrap:wrap}
.service-editorial .service-other-links h2{flex:0 0 100%;margin-bottom:6px}
.service-other-links>a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5;color:#52645b;text-decoration:underline;text-decoration-color:#bcc8bf;text-underline-offset:5px}
.service-editorial main>.service-explorer{padding:76px 0;background:#edf2ee}
.service-editorial .portfolio-explorer{margin:0}
.service-editorial .pe-heading .eyebrow{display:none}
.service-editorial .portfolio-explorer .pe-heading{margin-bottom:36px}
.service-editorial .portfolio-explorer h2{margin-bottom:20px}
.service-editorial .pe-item[open]{background:#fcfcf9}
.service-editorial .banner{background:#0c1a2d;color:#f3f3f3}
.service-editorial .banner .b-text{color:#f3f3f3}
.service-editorial main :is(a,button,summary,video):focus-visible{outline:2px solid #0c1a2d;outline-offset:5px}
.service-editorial .banner a:focus-visible{outline-color:#d7b486}
@media(max-width:1100px){
 .service-lead-grid,.service-example>.wrap,.service-reading-grid{gap:48px}
 .service-essentials{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
 .service-editorial .service-essential h3{min-height:0}
 .service-editorial .service-lead h1{font-size:48px}
}
@media(max-width:760px){
 .service-editorial main>section>.wrap{width:calc(100% - 44px)}
 .service-editorial main>section{padding:56px 0}
 .service-editorial main>.service-lead{padding:118px 0 42px}
 .service-lead-grid,.service-example>.wrap,.service-reading-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .service-lead-copy{padding:0}
 .service-back{margin-bottom:22px}
 .service-editorial .service-lead h1{font-size:43px;max-width:16ch;margin-bottom:22px}
 .service-editorial .service-lead-copy>p{font-size:17px;line-height:1.75;margin-bottom:18px}
 .service-lead-photo img{aspect-ratio:1.65;border-radius:9px}
 .service-lead-media figcaption{font-size:11px}
 .service-media-controls{gap:12px;padding:6px 12px}
 .service-media-controls button,.service-media-controls a{font-size:12px;gap:6px}
 .service-editorial main>.service-overview{padding:24px 0 54px}
 .service-overview>.wrap{padding-top:42px!important}
 .service-editorial main h2{font-size:34px;margin-bottom:30px}
 .service-essentials{grid-template-columns:minmax(0,1fr);gap:28px}
 .service-essential::before{width:20px;margin-bottom:16px}
 .service-editorial .service-essential h3{font-size:19px;margin-bottom:8px}
 .service-editorial .service-essential p{max-width:45ch;font-size:16px}
 .service-editorial .service-scope-note{margin-top:30px}
 .service-editorial main>.service-example{padding:52px 0}
 .service-editorial .service-example h2{max-width:18ch;margin-bottom:20px}
 .service-editorial .service-example-copy>p{font-size:17px;max-width:45ch}
 .service-editorial .planning-visual-placeholder{min-height:210px;padding:24px 14px}
 .service-editorial .planning-visual-placeholder>span{font-size:18px}
 .service-editorial main>.service-reading{padding:50px 0 30px}
 .service-reading-grid{gap:0}
 .service-reading-grid>h2{padding-top:0}
 .service-expander>summary,.service-editorial .service-question>summary{font-size:17px;padding-top:21px;padding-bottom:21px}
 .service-editorial main>.service-questions{padding:32px 0 50px}
 .service-editorial main>.service-related{padding:0 0 50px}
 .service-editorial .reading-links ul{grid-template-columns:1fr;gap:20px}
 .service-editorial .reading-links{padding-top:28px;margin-bottom:28px}
 .service-other-links{gap:6px 22px;padding-top:28px}
 .service-editorial main>.service-explorer{padding:48px 0}
}
@media(prefers-reduced-motion:reduce){.service-text-link svg,.service-expander>summary>svg{transition:none}}
@media print{
 .service-editorial,.service-editorial main,.service-editorial main>section{background:#fff!important}
 .service-editorial main>section>.wrap{width:100%}
 .service-lead-grid,.service-reading-grid,.service-example>.wrap{display:block}
 .service-lead-photo{max-width:400px;margin-top:24px}
 .service-editorial main>.service-lead{padding-top:24px!important}
 .service-media-controls,.service-text-link{display:none}
 .service-expander::details-content,.service-question::details-content{content-visibility:visible}
 .service-expander>div,.service-question>div{display:block!important}
 .service-lead-media,.service-essential{break-inside:avoid}
}

/* Service tours, Oct 13 2026: one video per page, one "Watch with narration" button (scripts/service-media.js). */
.service-media-controls button[data-media-narrate]{gap:8px}
.service-media-controls button[data-media-narrate]::before{display:none}
.service-media-controls button[data-media-narrate]>svg{flex:none}
.service-demo-shell:not([data-media-narration-state="on"]) .media-narr-stop,.service-demo-shell:not([data-media-narration-state="again"]) .media-narr-again,.service-demo-shell:is([data-media-narration-state="on"],[data-media-narration-state="again"]) .media-narr-mic{display:none}
.service-demo-shell[data-media-tour]{position:relative}
.service-demo-shell[data-media-tour] .service-demo-video{cursor:pointer}
.service-demo-shell[data-media-tour] .service-demo-video:focus-visible{outline:2px solid #0c1a2d;outline-offset:-2px}
.service-demo-shell[data-media-user-paused="true"]::after{content:"";position:absolute;left:50%;top:calc(50% - 29px);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;background:#0c1a2dcc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat}

/* Service tours, Oct 13 2026: progress bar over the bottom of the video, shown on hover or tap (scripts/service-media.js). */
.media-stage{position:relative}
.media-seek{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:34px 18px 10px;background:linear-gradient(to top,rgba(12,26,45,.6),rgba(12,26,45,.25) 55%,rgba(12,26,45,0));opacity:0;pointer-events:none;transition:opacity .25s ease}
.service-demo-shell[data-media-bar="on"] .media-seek,.media-seek:has(input:focus-visible){opacity:1;pointer-events:auto}
.media-seek input[type=range]{--media-progress:0%;flex:1;min-width:0;height:24px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
.media-seek input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fff var(--media-progress),rgba(255,255,255,.4) var(--media-progress))}
.media-seek input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4.5px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,26,45,.45);transition:transform .15s}
.media-seek input[type=range]:hover::-webkit-slider-thumb,.media-seek input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.media-seek input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.media-seek input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.media-seek input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,26,45,.45)}
.media-seek input[type=range]:focus{outline:none}
.media-seek input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.media-seek input[type=range]:disabled{cursor:default;opacity:.5}
.media-time{font-family:"General Sans",Arial,sans-serif;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 2px rgba(12,26,45,.5);white-space:nowrap}
@media(max-width:560px){.media-seek{gap:10px;padding:26px 12px 6px}.media-time{font-size:11px}}
@media(prefers-reduced-motion:reduce){.media-seek{transition:none}.media-seek input[type=range]::-webkit-slider-thumb{transition:none}}