:root { --rule: color-mix(in srgb, var(--ink) 22%, transparent); --paper: #fffdf7; }
.service-header { min-height:4.625rem; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; background:var(--ivory); }
.header-contact { min-height:2.75rem; display:inline-flex; align-items:center; font-weight:700; text-underline-offset:.22em; }
.breadcrumb { padding:.8rem var(--gutter); display:flex; gap:.65rem; align-items:center; border-top:1px solid var(--rule); font-size:.9rem; line-height:1.4; }
.breadcrumb a { min-height:2.75rem; display:inline-flex; align-items:center; text-underline-offset:.2em; }
.service-hero { padding:clamp(2.5rem,5vw,5.5rem) var(--gutter); display:grid; grid-template-columns:minmax(18rem,.75fr) minmax(34rem,1.25fr); gap:clamp(2.5rem,5vw,6.5rem); align-items:start; background:var(--pine); color:var(--ivory); }
.service-intro { padding-top:clamp(.5rem,2vw,2rem); }
.service-intro h1 { max-width:12ch; font-size:clamp(3rem,5vw,5.25rem); line-height:.96; }
.service-intro > p { max-width:39ch; font-size:clamp(1.08rem,1.45vw,1.35rem); line-height:1.5; }
.service-hero :focus-visible,.next-step :focus-visible { outline-color:var(--focus); }
.service-demo { min-width:0; padding:clamp(1.15rem,2vw,2rem); border:1px solid color-mix(in srgb,var(--ivory) 28%,transparent); background:var(--ivory); color:var(--ink); box-shadow:0 1.5rem 4rem rgba(0,0,0,.14); }
.demo-heading { display:grid; grid-template-columns:1fr minmax(12rem,.7fr); gap:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.demo-heading h2,.service-demo h3 { margin:0; }
.demo-heading h2 { font-size:clamp(1.55rem,2.5vw,2.35rem); line-height:1.04; letter-spacing:-.035em; }
.demo-heading p { margin:.25rem 0 0; line-height:1.45; }
.demo-label { margin:0 0 .4rem!important; font-size:.875rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.demo-controls { margin:1rem 0; padding:0; border:0; }
.demo-controls[hidden] { display:none; }
.demo-controls legend,.slot-list legend { margin-bottom:.5rem; font-size:.9rem; font-weight:800; }
.segmented,.question-buttons,.handoff-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.segmented button,.question-buttons button,.handoff-actions button,.demo-action,.demo-reset { min-height:2.75rem; padding:.55rem .85rem; border:1px solid var(--ink); background:transparent; color:var(--ink); font:700 .9rem/1.2 Helvetica,Arial,sans-serif; cursor:pointer; }
.segmented button[aria-pressed="true"],.question-buttons button[aria-pressed="true"],.demo-action { background:var(--ink); color:var(--ivory); }
.demo-reset { text-decoration:underline; text-underline-offset:.2em; border-color:transparent; }
.demo-reset-row { display:flex; justify-content:flex-end; margin-bottom:0; }
.demo-split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.demo-split section,.listing-note,.site-notes,.estimate-draft,.packet-status,.handoff,.detail-list { padding:1rem; border:1px solid var(--rule); background:var(--paper); }
.demo-split p,.listing-note p,.site-notes p,.estimate-draft p,.packet-status p,.handoff p,.detail-list { line-height:1.45; }
.demo-output { transition:opacity 180ms ease; }
.demo-output.is-changing { opacity:.42; }
.feedback-quote { margin-top:1rem; padding:1.2rem; font-size:1.18rem; line-height:1.45; border-left:.35rem solid var(--pine); background:var(--paper); }
.demo-note { font-size:.9rem; }
.listing-note { margin-top:1rem; }
.event-line { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:0; list-style:none; counter-reset:event; }
.event-line li { padding-top:2.4rem; position:relative; border-top:2px solid var(--pine); font-weight:700; }
.event-line li::before { counter-increment:event; content:counter(event); position:absolute; top:.45rem; left:0; font-size:.8rem; }
.slot-list,.packet-list { display:grid; gap:.5rem; margin:1rem 0; padding:0; border:0; }
.service-demo:not(.is-ready) .slot-list,.service-demo:not(.is-ready) .packet-list { display:none; }
.slot-list label,.packet-list label,.check-label { min-height:2.75rem; display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; border:1px solid var(--rule); background:var(--paper); }
.slot-list input,.packet-list input,.check-label input { width:1.15rem; height:1.15rem; }
.slot-list label.is-reserved { opacity:.5; text-decoration:line-through; }
.demo-controls label:not(.check-label) { display:grid; gap:.4rem; font-size:.9rem; font-weight:750; }
.demo-controls select,.demo-controls input[type="number"] { min-height:2.75rem; width:100%; padding:.55rem; border:1px solid var(--ink); border-radius:0; background:white; color:var(--ink); font:1rem Helvetica,Arial,sans-serif; }
.detail-list ul,.packet-status ul { padding-left:1.2rem; }
.estimate-controls { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.estimate-controls .check-label { grid-column:1/-1; }
.line-item { margin:1rem 0; display:flex; justify-content:space-between; gap:1rem; }
.line-item span { text-align:right; }
.packet-status > strong { display:block; font-size:1.25rem; }
.question-buttons button { flex:1 1 14rem; text-align:left; line-height:1.35; }
.handoff { margin-top:1rem; }
.website-frame { position:relative; overflow:hidden; height:30rem; margin-top:1rem; background:var(--pine-deep); }
.website-canvas { position:absolute; top:0; left:0; width:1280px; height:1200px; transform-origin:top left; }
.website-canvas iframe { width:100%; height:100%; display:block; border:0; pointer-events:none; }
.website-frame[data-viewport="phone"] .website-canvas { width:390px; }
.demo-link { min-height:2.75rem; display:inline-flex; align-items:center; margin-top:.7rem; font-weight:750; text-underline-offset:.2em; }
.noscript-note { padding:.75rem; border:1px solid var(--rule); font-size:.9rem; }
.service-rail { padding:0 var(--gutter); display:grid; grid-template-columns:repeat(7,1fr); gap:0; border-bottom:1px solid var(--rule); }
.service-rail a { min-width:0; min-height:4.75rem; padding:.8rem .65rem; display:flex; align-items:center; border-left:1px solid var(--rule); font-size:.875rem; font-weight:700; line-height:1.25; text-decoration:none; }
.service-rail a:last-child { border-right:1px solid var(--rule); }
.service-rail a[aria-current="page"] { background:var(--ink); color:var(--ivory); }
.editorial-row,.paired-rows,.next-step { padding:clamp(3.75rem,6vw,6.5rem) var(--gutter); border-bottom:1px solid var(--rule); }
.editorial-row { display:grid; grid-template-columns:minmax(15rem,.65fr) minmax(20rem,1.35fr); gap:clamp(2rem,6vw,7rem); }
.editorial-row > h2,.editorial-row > div > h2,.paired-rows h2,.next-step h2 { margin:0; font-size:clamp(2rem,3.5vw,3.6rem); line-height:1.02; letter-spacing:-.035em; }
.editorial-row > p,.editorial-row > div > p,.paired-rows p,.next-step p { margin:0; max-width:48ch; font-size:clamp(1.04rem,1.35vw,1.25rem); line-height:1.55; }
.deliverable-list,.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; }
.deliverable-list article,.process-list li { padding:0 clamp(1rem,2vw,2rem); border-left:1px solid var(--rule); }
.deliverable-list h3,.process-list h3 { margin:0 0 .8rem; font-size:1.15rem; }
.deliverable-list p,.process-list p { margin:0; line-height:1.5; }
.process-list { list-style:none; counter-reset:steps; }
.process-list li::before { counter-increment:steps; content:"0" counter(steps); display:block; margin-bottom:1.5rem; font-size:.82rem; font-weight:800; }
.paired-rows { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,7vw,8rem); background:var(--paper); }
.paired-rows article { display:grid; gap:1.5rem; }
.value ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.value li { padding:1rem 0; border-bottom:1px solid var(--ink); font-size:1.08rem; font-weight:750; }
.next-step { display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(3rem,8vw,9rem); background:var(--pine); color:var(--ivory); }
.next-step > div { display:grid; align-content:start; gap:1.35rem; }
.contact-note { font-size:.9rem!important; }
.related-links { display:grid; }
.related-links a { min-height:3.5rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid color-mix(in srgb,var(--ivory) 35%,transparent); font-weight:750; text-decoration:none; }
.related-links a:last-child { border-bottom:1px solid color-mix(in srgb,var(--ivory) 35%,transparent); }
@media (max-width:1050px) { .service-hero { grid-template-columns:1fr; } .service-intro h1 { max-width:14ch; } .service-rail { overflow-x:auto; grid-template-columns:repeat(7,minmax(9rem,1fr)); } .editorial-row { grid-template-columns:1fr; } }
@media (max-width:620px) { .service-header { min-height:4rem; } .wordmark { font-size:1.45rem; } .header-contact { font-size:.9rem; } .breadcrumb span[aria-current="page"] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .service-hero { padding-top:2.25rem; } .service-intro h1 { font-size:clamp(2.65rem,14vw,4rem); } .demo-heading,.demo-split,.estimate-controls,.paired-rows,.next-step { grid-template-columns:1fr; } .event-line { grid-template-columns:1fr; } .event-line li { padding:.8rem 0 .8rem 2rem; border-top:0; border-left:2px solid var(--pine); } .event-line li::before { top:.9rem; left:.65rem; } .deliverable-list,.process-list { grid-template-columns:1fr; } .deliverable-list article,.process-list article { padding:1.5rem 0; border-left:0; border-top:1px solid var(--rule); } .website-frame { height:25rem; } .line-item { display:grid; } .line-item span { text-align:left; } }
@media (prefers-reduced-motion:reduce) { .demo-output { transition:none; } }
@media (max-width:620px) { .process-list li { padding:1.5rem 0; border-left:0; border-top:1px solid var(--rule); } }
/* September 14 completion: shared editorial type, clear service navigation and resilient examples. */
.service-header{min-height:5.5rem}.service-intro h1{font-family:var(--serif);font-weight:500;line-height:1.04;font-size:clamp(3.2rem,4.5vw,4.85rem);max-width:15ch}.service-hero{gap:clamp(2.5rem,5vw,6rem)}.service-demo{box-shadow:none;border-color:var(--rule)}.demo-heading h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1.08}.demo-label{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}.service-demo .demo-label{font-size:.8rem}.service-demo h3{font-size:1rem;line-height:1.3}.demo-heading{grid-template-columns:1fr}.demo-heading>p{font-size:.9rem;color:var(--muted)}.feedback-quote{border-left:1px solid var(--pine)}.demo-output.is-changing{opacity:.82}.editorial-row>h2,.editorial-row>div>h2,.paired-rows h2,.next-step h2{font-family:var(--serif);font-weight:500;line-height:1.08}.service-directory{padding:0 var(--gutter);border-bottom:1px solid var(--rule)}.service-directory summary{padding:1.1rem 0;min-height:3.5rem;cursor:pointer;font-weight:600;list-style-position:inside}.service-directory summary:focus-visible{outline-offset:0}.service-rail{padding:0 0 1.5rem;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;overflow:visible}.service-rail a{min-height:3rem;padding:.8rem 1rem;border:1px solid var(--rule);font-size:.9rem}.service-rail a:last-child{border-right:1px solid var(--rule)}.service-rail a::after{display:none}.service-rail a:hover{background:#e1e6d9}.service-rail a[aria-current=page]:hover{background:var(--ink)}.website-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.website-frame .website-canvas{visibility:hidden}.website-frame.is-ready .website-canvas{visibility:visible}.website-frame.is-ready .website-fallback{visibility:hidden}.contact-note{min-height:2.75rem;display:inline-flex;align-items:center;overflow-wrap:anywhere}.service-page footer p{margin:0}.demo-action:hover,.segmented button:hover,.question-buttons button:hover,.handoff-actions button:hover{border-color:var(--pine);box-shadow:inset 0 -2px var(--pine)}.line-item span{font-variant-numeric:tabular-nums}.value>div>p{margin-top:1.3rem}
@media(max-width:1050px){.service-hero{grid-template-columns:1fr}.service-intro h1{max-width:19ch}.service-intro>p{max-width:58ch}.service-demo{width:100%;max-width:52rem;justify-self:center}.service-rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.service-header{min-height:4.5rem;gap:.5rem}.service-header .wordmark{font-size:1.4rem}.service-intro h1{font-size:clamp(2.8rem,11.5vw,4rem)}.service-rail{grid-template-columns:1fr}.service-rail a{min-height:2.75rem}.service-demo{padding:1.1rem}.demo-split section,.listing-note,.site-notes,.estimate-draft,.packet-status,.handoff,.detail-list{padding:.9rem}.editorial-row,.paired-rows,.next-step{padding-top:3.5rem;padding-bottom:3.5rem}.demo-controls select,.demo-controls input[type=number]{font-size:1rem}}
.demo-heading h2{max-width:26ch}.demo-heading .demo-label{margin-top:.6rem!important}.demo-heading>div{display:flex;flex-direction:column}.demo-heading h2{order:-1}.service-demo .demo-split section{border-width:0;background:transparent}.service-demo .demo-split section+section{border-left:1px solid var(--rule)}
@media(max-width:620px){.service-demo .demo-split section+section{border-left:0;border-top:1px solid var(--rule)}}