/* Atomic Shelf — services styling.
 *
 * Extracted from services.html so the landing page and the per-service detail
 * pages share ONE definition of how a service block looks. Previously this was
 * an inline <style> on the landing page only, which meant a detail page could
 * only match it by copying it - exactly the drift this file removes.
 *
 * Generated alongside services-build.js; edit services.html and re-run
 * `node services-build.js` rather than editing the generated pages.
 */
/* Step 14: keyboard users can jump past the repeated nav on every page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:.75rem 1rem;background:var(--color-accent-primary,var(--amber-deep));color:var(--espresso);font-weight:700;border-radius:0 0 4px 0;}
.skip-link:focus{left:0;}

/* =========================================================
   TOKENS — Section 50.10 of the Atomic Shelf design system
   (identical to index.html / pricing.html; kept in sync by hand
   until these pages share one stylesheet)
   ========================================================= */
:root{
--color-bg-dark:var(--espresso);
--color-bg-light:var(--oat);
--color-surface-dark:var(--espresso);
--color-surface-light:var(--parchment);
--color-surface-mid:var(--parchment);
--color-accent-primary:var(--amber-deep);
--color-accent-primary-hover:var(--amber);
--color-accent-primary-pressed:var(--amber-deep);/* Was var(--amber-deep). This token is used as TEXT (.sd-tag, .sd-field h4, .sd-next a,
   .svc-card-tag), and at var(--amber-deep) it measured 3.65:1 on --color-bg-light.
   Now 5.06:1, still in the same warm family as the accent it is pressed from. */

--color-accent-secondary:var(--edge-light);
--color-text-primary-dark:var(--paper-sunk);
--color-text-secondary-dark:var(--ink-mute);
--color-text-primary-light:var(--ink);
--color-text-secondary-light:var(--ink-mute);
--color-border-dark:var(--ink-soft);
--color-border-light:var(--rule);
--color-success:var(--shelf);
--color-error:var(--brick);
/* Type: the board names Instrument Serif / Instrument Sans / IBM Plex Mono.
   Declared, not loaded — the site removed Google Fonts in 696f607 after
   measuring 7.4-9.6s of render-blocking CSS, and no self-hosted copy exists.
   These are the board's own fallback stacks, so no stack terminates in a
   family that would trigger a download. */
--font-family-display:'Instrument Serif', Georgia, serif;
--font-family-body:'Instrument Sans', system-ui, sans-serif;
--font-family-mono:'IBM Plex Mono', ui-monospace, monospace;
--font-size-display-xl: clamp(2.5rem, 1.35rem + 5.2vw, 5.5rem);
--font-size-display-l: clamp(2rem, 1.25rem + 3.4vw, 4rem);
--font-size-display-m: clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem);
--font-size-heading: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
--font-size-body-l: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
--font-size-body: 1rem;
--font-size-body-s: clamp(0.875rem, 0.84rem + 0.14vw, 0.9375rem);
--font-size-label: clamp(0.6875rem, 0.66rem + 0.1vw, 0.8125rem);
--font-size-mono: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
--line-height-display: 1.08;
--line-height-body: 1.65;
--letter-spacing-label: 0.1em;
--space-section-xl: clamp(80px, 30px + 15vw, 160px);
--space-section-l: clamp(60px, 24px + 11vw, 120px);
--space-section-m: clamp(40px, 16px + 7.5vw, 80px);
--space-component: clamp(24px, 14px + 3vw, 40px);
--space-inner: clamp(20px, 15px + 1.5vw, 32px);
--space-xs: 8px; --space-s: 12px; --space-m: 20px; --space-l: 32px; --space-xl: 48px;
--grid-max-width: 1280px;
--grid-margin-desktop: 80px;
--grid-margin-tablet: 40px;
--grid-margin-mobile: 20px;
--border-radius-button: 4px;
--border-radius-card: 4px;
--border-radius-badge: 3px;
--border-width-default: 1px;
--border-width-accent: 1.5px;
--motion-duration-fast: 120ms;
--motion-duration-standard: 240ms;
--motion-duration-slow: 420ms;
--motion-easing-standard: ease;
--motion-easing-decelerate: ease-out;
--motion-easing-accelerate: ease-in;
--z-navigation: 500;
--z-modal: 900;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{ font-family:var(--font-family-body); font-size:var(--font-size-body); line-height:var(--line-height-body); background:var(--color-bg-light); color:var(--color-text-primary-light); overflow-x:clip; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-family-display); line-height:var(--line-height-display); font-weight:400; }
:focus-visible{ outline:2px solid var(--color-accent-primary); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
.wrap{ max-width:var(--grid-max-width); margin:0 auto; padding:0 var(--grid-margin-mobile); }
@media (min-width:768px){ .wrap{ padding:0 var(--grid-margin-tablet); } }
@media (min-width:1280px){ .wrap{ padding:0 var(--grid-margin-desktop); } }
section{ padding:var(--space-section-m) 0; }
.section-l{ padding:var(--space-section-l) 0; }
.dark{ background:var(--color-bg-dark); color:var(--color-text-primary-dark); }
.light{ background:var(--color-bg-light); color:var(--color-text-primary-light); }
.eyebrow{ display:inline-block; font-size:var(--font-size-label); font-weight:600; letter-spacing:var(--letter-spacing-label); text-transform:uppercase; margin-bottom:var(--space-m); }
.dark .eyebrow{ color:var(--color-accent-primary); }
.light .eyebrow{ color:var(--color-text-secondary-light); }
.section-head{ max-width:640px; margin-bottom:var(--space-component); }
.section-head h2{ font-size:var(--font-size-display-l); margin-bottom:var(--space-m); max-width:20ch; }
.section-head p{ font-size:var(--font-size-body-l); max-width:60ch; }
.dark .section-head p{ color:var(--color-text-secondary-dark); }
.light .section-head p{ color:var(--color-text-secondary-light); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 26px; font-family:var(--font-family-body); font-size:var(--font-size-body-s); font-weight:600; border-radius:var(--border-radius-button); border:var(--border-width-accent) solid transparent; cursor:pointer; white-space:nowrap; transition:background var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard), border-color var(--motion-duration-fast) var(--motion-easing-standard); }
.btn-primary{ background:var(--color-accent-primary); border-color:var(--color-accent-primary); color:var(--color-text-primary-light); }
.btn-primary:hover{ background:var(--color-accent-primary-hover); border-color:var(--color-accent-primary-hover); }
.btn-secondary-dark{ border-color:var(--color-accent-primary); color:var(--color-accent-primary); }
.btn-secondary-dark:hover{ background:rgba(200,146,42,.1); }
.btn-secondary-light{ border-color:var(--color-text-primary-light); color:var(--color-text-primary-light); }
.btn-secondary-light:hover{ background:rgba(28,26,24,.06); }
.btn-ghost{ height:auto; padding:0; border:none; font-weight:500; }
.btn-ghost.on-dark{ color:var(--color-text-primary-dark); }
.btn-ghost.on-light{ color:var(--color-text-primary-light); }
.btn-ghost:hover{ text-decoration:underline; }
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-m); }

/* Nav (identical to index.html / pricing.html) */
.nav{ position:fixed; top:0; left:0; right:0; z-index:var(--z-navigation); height:68px; display:flex; align-items:center; background:transparent; border-bottom:1px solid transparent; transition:background var(--motion-duration-standard) var(--motion-easing-standard), border-color var(--motion-duration-standard) var(--motion-easing-standard); }
.nav.scrolled{ background:rgba(15,14,12,.92); backdrop-filter:blur(10px); border-color:var(--color-border-dark); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-brand{ font-family:var(--font-family-display); font-size:1.2rem; color:var(--color-text-primary-dark); }
.nav-brand span{ color:var(--color-accent-primary); }
.nav-links{ display:none; align-items:center; gap:var(--space-l); }
.nav-links a{ font-size:var(--font-size-body-s); color:var(--color-text-secondary-dark); font-weight:500; }
.nav-links a:hover{ color:var(--color-text-primary-dark); }
.nav-links a[aria-current="page"]{ color:var(--color-text-primary-dark); }
.nav-links a.nav-cta{ color:var(--color-bg-dark); background:var(--color-accent-primary); padding:.55rem 1.1rem; border-radius:var(--border-radius-button); font-weight:600; }
.nav-links a.nav-cta:hover{ background:var(--color-accent-primary-hover); }
.nav-toggle{ display:inline-flex; background:none; border:1px solid var(--color-border-dark); color:var(--color-text-primary-dark); border-radius:var(--border-radius-button); width:44px; height:44px; align-items:center; justify-content:center; font-size:1.15rem; cursor:pointer; }
@media (min-width:900px){ .nav-links{ display:flex; } .nav-toggle{ display:none; } }
.nav-drawer{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); top:0; height:100vh; background:var(--color-bg-dark); border-left:1px solid var(--color-border-dark); padding:calc(68px + var(--space-l)) var(--space-l) var(--space-l); transform:translateX(100%); transition:transform var(--motion-duration-standard) var(--motion-easing-standard); z-index:var(--z-navigation); display:flex; flex-direction:column; gap:var(--space-m); }
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer a{ font-size:var(--font-size-body-l); color:var(--color-text-primary-dark); padding:6px 0; }
.nav-drawer a.nav-cta{ margin-top:var(--space-m); text-align:center; background:var(--color-accent-primary); color:var(--color-bg-dark); padding:.85rem; border-radius:var(--border-radius-button); font-weight:600; }

/* Page hero (identical pattern to pricing.html) */
.page-hero{ background:var(--color-bg-dark); color:var(--color-text-primary-dark); padding-top:calc(68px + var(--space-section-m)); padding-bottom:var(--space-section-m); }
.page-hero h1{ font-size:var(--font-size-display-xl); max-width:18ch; margin-bottom:var(--space-l); }
.page-hero .lede{ font-size:var(--font-size-body-l); color:var(--color-text-secondary-dark); max-width:60ch; margin-bottom:var(--space-l); }

/* Stage-stage legend chips (reuses accent language from the five-stage system) */
.stage-legend{ display:flex; flex-wrap:wrap; gap:var(--space-s); margin-top:var(--space-m); }
.stage-chip{ font-size:var(--font-size-label); letter-spacing:var(--letter-spacing-label); text-transform:uppercase; font-weight:600; color:var(--color-text-secondary-dark); border:1px solid var(--color-border-dark); border-radius:var(--border-radius-badge); padding:4px 10px; }

/* Service detail blocks */
.service-detail-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--color-border-light); }
.service-detail{ padding:var(--space-component) 0; border-bottom:1px solid var(--color-border-light); display:grid; grid-template-columns:1fr; gap:var(--space-m); }
@media (min-width:860px){ .service-detail{ grid-template-columns:280px 1fr; gap:var(--space-l); } }
.sd-head{ display:flex; flex-direction:column; gap:var(--space-s); }
.sd-tag{ display:inline-flex; align-self:flex-start; font-size:var(--font-size-label); letter-spacing:var(--letter-spacing-label); text-transform:uppercase; color:var(--color-accent-primary-pressed); border:1px solid var(--color-accent-primary); border-radius:var(--border-radius-badge); padding:3px 8px; }
.sd-head h3{ font-size:var(--font-size-heading); max-width:16ch; }
.sd-plans{ font-size:var(--font-size-label); color:var(--color-text-secondary-light); }
.sd-plans b{ color:var(--color-text-primary-light); font-weight:600; }
.sd-body{ display:grid; grid-template-columns:1fr; gap:var(--space-m); }
@media (min-width:640px){ .sd-body{ grid-template-columns:1fr 1fr; } }
.sd-field h4{ font-family:var(--font-family-body); font-size:var(--font-size-label); letter-spacing:var(--letter-spacing-label); text-transform:uppercase; color:var(--color-accent-primary-pressed); margin-bottom:6px; font-weight:700; }
.sd-field p{ font-size:var(--font-size-body-s); color:var(--color-text-secondary-light); max-width:52ch; }
.sd-field.full{ grid-column:1 / -1; }
.sd-next{ margin-top:var(--space-s); }
.sd-next a{ font-size:var(--font-size-body-s); font-weight:600; color:var(--color-accent-primary-pressed); }
.sd-next a:hover{ text-decoration:underline; }

/* Coverage note */
.coverage-note{ background:var(--color-surface-mid); border-radius:var(--border-radius-card); padding:var(--space-inner); margin-top:var(--space-l); font-size:var(--font-size-body-s); color:var(--color-text-secondary-light); max-width:760px; }
.coverage-note b{ color:var(--color-text-primary-light); }

/* FAQ (delivery questions, identical component to index.html/pricing.html) */
.faq-list{ border-top:1px solid var(--color-border-light); max-width:760px; }
.faq-item{ border-bottom:1px solid var(--color-border-light); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-m); padding:var(--space-m) 0; font-family:var(--font-family-body); font-size:var(--font-size-body); font-weight:600; color:var(--color-text-primary-light); }
.faq-ind{ font-size:1.2rem; color:var(--color-text-secondary-light); transition:color var(--motion-duration-fast) var(--motion-easing-standard); }
.faq-item.open .faq-ind{ color:var(--color-accent-primary); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--motion-duration-standard) var(--motion-easing-standard); }
.faq-a p{ font-size:var(--font-size-body-s); color:var(--color-text-secondary-light); padding-bottom:var(--space-m); max-width:60ch; }

/* Final CTA */
.final-cta{ background:var(--color-bg-dark); color:var(--color-text-primary-dark); }
.final-cta h2{ font-size:var(--font-size-display-l); max-width:16ch; margin-bottom:var(--space-m); }
.final-cta p{ font-size:var(--font-size-body-l); color:var(--color-text-secondary-dark); max-width:52ch; margin-bottom:var(--space-l); }

/* Footer (identical to index.html / pricing.html) */
footer{ background:var(--color-bg-dark); color:var(--color-text-primary-dark); padding:var(--space-section-m) 0 var(--space-l); border-top:1px solid var(--color-border-dark); }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-l); margin-bottom:var(--space-l); }
@media (min-width:768px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot-brand{ font-family:var(--font-family-display); font-size:1.3rem; margin-bottom:var(--space-s); }
.foot-brand span{ color:var(--color-accent-primary); }
.foot-desc{ font-size:var(--font-size-body-s); color:var(--color-text-secondary-dark); max-width:34ch; }
.foot-col h5{ font-family:var(--font-family-body); font-size:var(--font-size-label); letter-spacing:var(--letter-spacing-label); text-transform:uppercase; color:var(--color-text-secondary-dark); margin-bottom:var(--space-m); }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ font-size:var(--font-size-body-s); color:var(--color-text-secondary-dark); }
.foot-col a:hover{ color:var(--color-text-primary-dark); }
.foot-bottom{ border-top:1px solid var(--color-border-dark); padding-top:var(--space-m); display:flex; flex-wrap:wrap; gap:var(--space-s); justify-content:space-between; font-size:var(--font-size-label); color:var(--color-text-secondary-dark); }

.reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--motion-duration-slow) var(--motion-easing-decelerate), transform var(--motion-duration-slow) var(--motion-easing-decelerate); }
.reveal.in{ opacity:1; transform:translateY(0); }


/* ---- Service index (landing page) -------------------------------------
   The landing page used to carry every service's full detail inline, which made
   it a 27KB page that a reader had to scroll through to find one service. The
   detail now lives on its own page per service, generated by services-build.js
   from the same source, and this is a selection grid. Nothing was removed: every
   field is still on the detail page it belongs to. */

.service-index{display:flex;flex-direction:column;gap:2.25rem;}
.svc-group-heading{
  font-size:1.35rem;margin:0 0 1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.svc-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
}
.svc-card{
  display:flex;flex-direction:column;gap:.4rem;height:100%;
  padding:1.05rem 1.15rem;border:1px solid var(--border);border-radius:10px;
  background:var(--color-surface, #fff);text-decoration:none;color:inherit;
}
.svc-card:hover{border-color:var(--color-accent-primary,var(--amber-deep));}
.svc-card:focus-visible{outline:2px solid var(--color-accent-primary,var(--amber-deep));outline-offset:3px;border-radius:10px;}
.svc-card-tag{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent-primary-pressed,var(--amber-deep));
}
.svc-card-name{font-size:1.12rem;font-weight:700;line-height:1.25;}
.svc-card-summary{font-size:.9rem;color:var(--muted);}
/* The "see what is included" affordance sits at the bottom so every card's
   action lines up, whatever length its summary. */
.svc-card-more{margin-top:auto;padding-top:.6rem;font-size:.85rem;font-weight:600;
  color:var(--color-accent-primary,var(--amber-deep));}
.svc-card:hover .svc-card-more{text-decoration:underline;}

@media (max-width:520px){
  .svc-grid{grid-template-columns:1fr;}
}