/* ============================================================================ services.css — /services only. Layered on top of landing.css. Consumes its tokens (--gold, --accent, --ink, --hair, --panel, --max, …); defines no palette of its own. Two scoping rules, used for two different jobs: 1. New components are prefixed .svc- so they cannot collide with a landing.css class name. In particular the in-page jump nav is .svc-subnav-link / .is-current and never touches the global nav's .nav-link / .is-active, whose active-state logic must not see it. 2. Overrides of class names SHARED with landing.css (.hero-title, .section-title) are nested under .svc-page — set on here — so they cannot leak if this file is ever linked from another template. Beyond that, scoping is by stylesheet: services.css is linked only from services.html. This file declares no :root and no hex literals; every colour comes from a landing.css token, so both themes work with no extra code. ========================================================================== */ /* Smooth scrolling for the jump nav. scroll-behavior only takes effect on the root element, so this is the one rule that cannot be selector-scoped to the page — it is scoped by the stylesheet alone. Reset under reduced-motion below. */ html { scroll-behavior: smooth; } /* ---------- Display type (services page only) ---------- The rest of the site sets headings to `inherit` (system sans). Here the display roles — page title, section titles, step and question headings — take EB Garamond, which is already loaded for /name. Prose and the uppercase micro-labels (.pillar-title, .block-title, .hero-eyebrow) stay on the body sans: they are a different type role and Garamond reads badly letterspaced. */ .svc-page .hero-title, .svc-page .section-title, .svc-page .svc-step-title, .svc-page .svc-faq-q { font-family: "EB Garamond", Georgia, serif; } .svc-page .hero-title { font-weight: 400; letter-spacing: -.01em; } .svc-page .section-title { font-weight: 400; } /* ---------- In-page jump nav ---------- Deliberately NOT .nav-link: the global nav's active-link logic keys off .nav-link/.is-active and must not see these. */ .svc-subnav { position: sticky; top: 67px; z-index: 40; border-bottom: 1px solid var(--hair); background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .svc-subnav-inner { max-width: var(--max); margin: 0 auto; display: flex; gap: 28px; align-items: center; padding: 0 28px; overflow-x: auto; scrollbar-width: none; } .svc-subnav-inner::-webkit-scrollbar { display: none; } .svc-subnav-link { flex: none; padding: 14px 0; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--subtle); border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .svc-subnav-link:hover { color: var(--ink-soft); } .svc-subnav-link.is-current { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- Service cards ---------- The reference's card grid, rebuilt on our surfaces: panel fill, hairline border, gold rule on hover. No shadows — this design system uses hairlines. */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .svc-card { position: relative; padding: 28px 26px 30px; background: var(--panel); border: 1px solid var(--hair2); border-radius: 12px; transition: border-color .25s ease, transform .25s ease; } .svc-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: var(--gold); opacity: 0; transition: opacity .25s ease; } .svc-card:hover { border-color: var(--hair2); transform: translateY(-2px); } .svc-card:hover::before { opacity: .85; } .svc-card-title { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .svc-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; } /* ---------- Process timeline ---------- */ .svc-steps { max-width: 820px; margin: 24px 0 0; padding: 0; list-style: none; position: relative; } .svc-steps::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 1px; background: var(--hair2); } .svc-step { display: flex; gap: 28px; align-items: flex-start; padding-bottom: 36px; } .svc-step:last-child { padding-bottom: 0; } .svc-step-num { flex: none; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair2); border-radius: 50%; background: var(--bg); color: var(--subtle); font-size: 12px; font-weight: 600; letter-spacing: .06em; font-feature-settings: "tnum" 1; transition: color .25s ease, border-color .25s ease; } .svc-step:hover .svc-step-num { color: var(--gold); border-color: var(--gold); } .svc-step-body { padding-top: 6px; } .svc-step-title { font-size: 1.2rem; font-weight: 500; color: var(--ink); margin: 0 0 6px; } .svc-step-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; } /* ---------- FAQ accordion ---------- Built on native

: it opens and closes with zero JS and is keyboard- and screen-reader-accessible for free. The JS in services.js only adds the single-open behaviour (opening one closes the others) — if it never runs, the accordion still works, it just allows several open at once. */ .svc-faq { max-width: 820px; margin: 24px 0 0; } .svc-faq-item { border-bottom: 1px solid var(--hair); } .svc-faq-item:first-child { border-top: 1px solid var(--hair); } .svc-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; font-size: 1.12rem; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; transition: color .15s ease; } .svc-faq-q::-webkit-details-marker { display: none; } .svc-faq-q:hover { color: var(--accent); } .svc-faq-q:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .svc-faq-icon { flex: none; width: 14px; height: 14px; color: var(--subtle); transition: transform .25s ease, color .25s ease; } .svc-faq-item[open] .svc-faq-q { color: var(--accent); } .svc-faq-item[open] .svc-faq-icon { transform: rotate(45deg); color: var(--accent); } /* Height animation without measuring in JS: 0fr → 1fr on a grid row. Falls back to a plain show/hide in browsers without grid-row interpolation. */ .svc-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .svc-faq-item[open] .svc-faq-a { grid-template-rows: 1fr; } .svc-faq-a > div { overflow: hidden; } .svc-faq-a p { margin: 0; padding: 0 2px 24px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; max-width: 70ch; } /* ---------- Scroll reveal ---------- The hidden state applies ONLY under html.svc-js. That class is set by a tiny inline