/* =========================================================
   NURV service inner-page styles
   Shared across phone-systems / ai-agents / teams / numbers /
   internet / mobile. Matches direction-b/blended.html register.
   ========================================================= */

/* Palette + fonts now come from the shared tokens.css (linked before this
   file on every inner page). It defines the inner vocabulary (--paper /
   --accent / --ink-2…) as aliases of the canonical --c-* palette, so every
   var() below is unchanged. Edit colours in tokens.css, not here. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  /* Dense SQUARE grid — must match blended.html's body grid exactly so the
     mesh flows continuously from the home page onto every inner page (no globe
     SVG here, so the CSS grid is the sole owner). Both axes, 40px, 0.06. */
  background-image:
    linear-gradient(to bottom, rgba(20,17,15,0.06) 1px, transparent 1px),
    linear-gradient(to right,  rgba(20,17,15,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  letter-spacing: -0.32px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 100;
  background: var(--accent-2); color: #FFFFFF;
  padding: 10px 16px; border-radius: 10px;
  font-weight: 700; font-size: 14px;
  transition: top 140ms ease;
}
.skip-link:focus { top: 8px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 880px) { .wrap { padding: 0 32px; } }

section { padding: 64px 0; }
@media (min-width: 880px) { section { padding: 96px 0; } }

/* Top-nav styling lives in the shared nav.css (loaded via <link>) */

.nav-cta {
  display: inline-flex; align-items: center;
  background: var(--accent-2); color: #FFFFFF;
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.15px;
  text-decoration: none;
  transition: transform 80ms ease, filter 160ms ease;
}
.nav-cta:hover { background: var(--accent-2); filter: brightness(0.93); color: #FFFFFF; text-decoration: none; }
.nav-cta:active { transform: scale(0.98); }

/* Mobile top-nav styling lives in nav.css */

/* ============ Breadcrumb ============ */
.crumb {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 24px 0 0;
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--ink-4); margin: 0 6px; }
.crumb .here { color: var(--ink); }

/* ============ Page hero ============ */
.page-hero {
  padding-top: 32px;
  padding-bottom: 56px;
}
@media (min-width: 880px) { .page-hero { padding-bottom: 80px; } }
.page-hero .eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.page-hero h1 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 44px; line-height: 1.05; letter-spacing: -1.3px;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 18ch;
}
@media (min-width: 880px) {
  .page-hero h1 { font-size: 64px; letter-spacing: -1.8px; }
}
.page-hero .lede {
  font-size: 18px; line-height: 1.5; letter-spacing: -0.4px;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 58ch;
}
.page-hero .cta-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* ============ Section header ============ */
.sec-head {
  margin-bottom: 36px;
  max-width: 720px;
}
.sec-head .num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.sec-head h2 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.8px;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 22ch;
}
@media (min-width: 880px) {
  .sec-head h2 { font-size: 40px; letter-spacing: -1.2px; }
}
.sec-head .desc {
  font-size: 16px; line-height: 1.5; color: var(--ink-2);
  max-width: 60ch; margin: 0;
}

/* ============ Feature grid ============ */
.feat-grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 720px)  { .feat-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.feat {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.feat .num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.feat h3 {
  font-size: 20px; line-height: 1.2; letter-spacing: -0.4px;
  font-weight: 700; color: var(--ink);
  margin: 0; max-width: 22ch;
}
.feat p {
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  margin: 0;
}
.feat ul {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; line-height: 1.4; color: var(--ink-2);
}
.feat li { position: relative; padding-left: 14px; }
.feat li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ============ Two-col split ============ */
.split {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}
.split .body {
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
}
.split .body h3 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.5px;
  color: var(--ink); margin: 0 0 16px;
}
.split .body p { margin: 0 0 16px; }
.split .body strong { color: var(--ink); font-weight: 600; }
.split .aside {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
}
.split .aside h4 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
}
.split .aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.split .aside li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.split .aside li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.split .aside li strong { color: var(--ink); font-weight: 600; }

/* ============ FAQ accordion ============ */
.faq { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0;
  transition: border-color 160ms ease;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  list-style: none;
  padding: 18px 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.32px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 20px;
  color: var(--accent); flex: 0 0 auto; transition: transform 160ms ease;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer {
  padding: 0 22px 20px;
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin: 0; }

/* ============ Pricing recap pill ============ */
.price-recap {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px;
}
.price-recap h3 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.15;
  color: var(--ink); margin: 0 0 16px;
}
.price-recap p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.price-recap .price-row {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 18px;
}
.price-recap .price-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px; border-radius: 8px; background: var(--paper);
  border: 1px solid var(--rule);
}
.price-recap .price-line .label {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.price-recap .price-line .label small {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  margin-top: 2px;
}
.price-recap .price-line .val {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.price-recap .price-line .val small { color: var(--ink-3); font-weight: 400; }

/* ============ People (About page) ============ */
.people-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 720px) { .people-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.person {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.person-avatar {
  width: 96px; height: 96px; border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 28px; font-weight: 500;
  color: var(--accent);
  overflow: hidden;
  flex: 0 0 auto;
}
.person-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* Editorial filter: warm grayscale that fits the cream + terracotta register
     without fighting the accent terracotta elsewhere. */
  filter: grayscale(1) sepia(0.28) contrast(1.05) brightness(1.02);
  transition: filter 240ms ease;
}
.person:hover .person-avatar img {
  filter: grayscale(0.4) sepia(0.1) contrast(1.05) brightness(1.02);
}
.person h3 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.5px;
  color: var(--ink); margin: 0;
}
.person .person-role {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.person p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.person .person-links {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.person .person-links a {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.person .person-links a:hover { color: var(--accent); border-color: var(--accent); }

/* ============ Related services ============ */
.rel-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-top: 24px;
}
@media (min-width: 720px)  { .rel-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1100px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel {
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.rel:hover {
  border-color: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
.rel .rel-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.rel h4 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--ink); margin: 0 0 6px;
}
.rel p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }

/* ============ CTA band ============ */
.cta-band {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 64px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.8px;
  color: var(--ink);
  margin: 0 auto 16px;
  max-width: 22ch;
}
@media (min-width: 880px) {
  .cta-band h2 { font-size: 40px; letter-spacing: -1.2px; }
}
.cta-band p {
  margin: 0 auto 24px;
  font-size: 16px; line-height: 1.5; color: var(--ink-2);
  max-width: 50ch;
}
.cta-band .cta-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.cta-band .btn-alt {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.15px;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.cta-band .btn-alt:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ============ Footer ============ */
/* Footer is injected + styled by site-footer.js (.sf-* classes). The old
   per-page footer CSS (.foot, .foot-grid, .foot-brand, .foot-legal) was
   removed 2026-06-01 — dead since the footer became JS-injected. */

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Policy / legal pages ─────────────────────────────────── */
/* Section sits on the site's 120px background grid like every other section. */
.policy { padding: 8px 0 72px; }
@media (min-width: 880px) { .policy { padding: 16px 0 104px; } }

/* Meta line under the hero lede */
.policy-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-4); margin: 4px 0 0;
}

/* Two-column: body + sticky aside (reuses the site .split grid) */
.split.policy-split { align-items: start; }
@media (min-width: 880px) {
  .split.policy-split { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
}

/* Long-form body typography */
.policy-body { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.policy-body h2 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 26px; line-height: 1.15; letter-spacing: -0.6px;
  color: var(--ink); margin: 38px 0 14px; scroll-margin-top: 84px;
}
.policy-body > :first-child { margin-top: 0; }
.policy-body h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 24px 0 8px; }
.policy-body p { margin: 0 0 15px; }
.policy-body strong { color: var(--ink); font-weight: 600; }
.policy-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.policy-body a:hover { color: var(--accent); }
.policy-body ul { list-style: none; margin: 0 0 18px; padding: 0; }
.policy-body ul li { position: relative; padding: 5px 0 5px 22px; }
.policy-body ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.policy-body ol { margin: 0 0 18px; padding-left: 20px; }
.policy-body ol li { padding: 5px 0 5px 6px; }

/* TL;DR callout at the top of the body */
.policy-tldr { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 24px; margin: 0 0 8px; }
.policy-tldr-h { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.policy-tldr p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* Inline note / callout */
.policy-note { border-left: 3px solid var(--accent); background: var(--paper-2); padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0 0 18px; font-size: 15px; color: var(--ink-3); }
.policy-note strong { color: var(--ink-2); }

/* In-body contact card (NURV complaints, TIO, OAIC, Privacy Officer) — row-divided */
.policy-contact { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 2px 22px; margin: 6px 0 22px; }
.policy-contact dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; }
.policy-contact dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); padding: 13px 0; align-self: baseline; }
.policy-contact dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.45; padding: 13px 0; }
.policy-contact dt:nth-of-type(n+2), .policy-contact dd:nth-of-type(n+2) { border-top: 1px solid var(--rule); }
.policy-contact a { color: var(--accent-2); }
.policy-contact a:hover { color: var(--accent); }

/* Sticky sidebar (on-this-page + other policies) */
.policy-aside { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 880px) { .policy-aside { position: sticky; top: 80px; } }
.policy-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; }
.policy-card h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.policy-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.policy-card li { font-size: 14px; line-height: 1.4; }
.policy-card a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; }
.policy-card a:hover { color: var(--accent); }
.policy-card.policy-more a { color: var(--ink); font-weight: 500; }
/* The on-this-page TOC is only useful alongside the body; hide it once the aside stacks below on mobile */
@media (max-width: 879px) { .policy-toc { display: none; } }

/* Inline reference link used in service-page + home body copy */
.policy-ref { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.policy-ref:hover { color: var(--accent); }