/* ==========================================================================
   SERVICE PAGES — the four /services/ leaves and their hub

   WHAT THIS IS AND IS NOT. This is the only stylesheet the service pages add
   on top of tokens.css and base.css. Everything those two already provide is
   used as-is: `.shell`, `.section`, `.display`, `.title`, `.eyebrow`,
   `.label`, `.lead`, `.btn`, `.rule`, `.measure`. Nothing here redefines a
   token, and nothing here is imported by index.html — the home page has its
   own sections.css and the two never meet.

   IT IS NOT policy-legacy.css EITHER. The three policy pages deliberately
   keep the old site's off-scheme colours and typefaces because they are
   archived documents; these pages are new, they are the brand, and they take
   the current palette. Do not merge the two.

   NO JAVASCRIPT. The home page is a choreographed thing that needs GSAP, a
   loader curtain and a roster renderer. These pages are flat documents whose
   job is to be crawled, read and understood, so they ship as static HTML with
   no script tag at all. The one interactive element, the FAQ, is a native
   <details> — it opens with JS off, it is keyboard-operable for free, and
   Google expands it when indexing. That is the whole reason it is not a
   custom accordion.

   THE PAGES DUPLICATE THEIR OWN CHROME, which is the site's existing
   convention rather than an oversight — the three policy pages each carry a
   full copy of their header and footer too. There is no build step in this
   repo and no templating layer; adding one for five pages would be a heavier
   commitment than the duplication it saves. If the nav or the footer changes,
   it has to be changed in all five files, and that is the trade that was
   accepted knowingly.
   ========================================================================== */

body {
  background: var(--bone);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   NAV — static, and deliberately unlike the home page's

   The home nav has three states and a scroll listener behind them. This one
   has none: it is a solid bar from the first paint, because there is no hero
   video underneath it to be legible against. `position: sticky` rather than
   `fixed` so it takes part in layout and nothing needs a top offset.
   -------------------------------------------------------------------------- */

.svc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 6, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.svc-nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--nav-h);
  padding-block: var(--sp-3);
}

.svc-nav__mark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}

.svc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.svc-nav__links a {
  color: var(--slate);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

.svc-nav__links a:hover,
.svc-nav__links a:focus-visible {
  color: var(--paper);
}

/* Below the breakpoint the middle links go and the mark plus the CTA stay.
   A hamburger would need script; these pages have none, and a four-item menu
   that is one tap from the home page does not justify introducing it. */
@media (max-width: 760px) {
  .svc-nav__links {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   BREADCRUMB — the visible half of the BreadcrumbList in the page's JSON-LD

   Both halves have to agree. If the trail here changes, the structured data
   in the <head> has to change with it, or the page is telling a crawler one
   hierarchy and a reader another.
   -------------------------------------------------------------------------- */

.svc-crumb {
  padding-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--slate-dim);
}

.svc-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-crumb li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--rule-firm);
}

.svc-crumb a {
  color: var(--slate-dim);
  text-decoration: none;
}

.svc-crumb a:hover,
.svc-crumb a:focus-visible {
  color: var(--paper);
}

.svc-crumb [aria-current="page"] {
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.svc-hero {
  padding-block: var(--sp-8) var(--sp-9);
}

.svc-hero__title {
  font-size: var(--fs-display);
  color: var(--paper);
  margin-top: var(--sp-4);
  max-width: 18ch;
}

.svc-hero__lead {
  margin-top: var(--sp-5);
  max-width: var(--max-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--slate);
}

.svc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   A CONTENT BLOCK — heading left, prose right, on one hairline

   The two-column split is the same shape `.sec-head` uses on the home page,
   so the pages read as the same publication. It collapses to one column at
   900px, which is where the heading column stops being wide enough to hold a
   two-word heading without hyphenating.
   -------------------------------------------------------------------------- */

.svc-block {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8);
}

.svc-block__in {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--sp-6) var(--sp-9);
  align-items: start;
}

.svc-block__head {
  font-size: var(--fs-title);
  color: var(--paper);
  line-height: var(--lh-tight);
}

.svc-block__body > * + * {
  margin-top: var(--sp-4);
}

.svc-block__body p {
  max-width: var(--max-text);
}

.svc-block__body strong {
  color: var(--paper);
  font-weight: 500;
}

@media (max-width: 900px) {
  .svc-block__in {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   STEPS — how the work actually runs

   An ordered list, numbered by CSS rather than by the browser's own markers,
   so the number can take the mono face and the accent without fighting
   `list-style`. It stays an <ol> because the order is real: these are stages,
   not bullet points.
   -------------------------------------------------------------------------- */

.svc-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--sp-7);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.svc-steps > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.svc-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-mono);
  /* The accent as a mark, never as small body text — the palette rule in
     tokens.css. At --fs-label on the page ground this is a label, which is
     the one size the accent is cleared for. */
  color: var(--accent);
}

.svc-steps > li:first-child::before {
  top: 0;
}

.svc-steps h3 {
  font-size: var(--fs-body);
  color: var(--paper);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
}

.svc-steps p {
  margin: 0;
  max-width: var(--max-text);
}

/* --------------------------------------------------------------------------
   DELIVERABLES
   -------------------------------------------------------------------------- */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.svc-list > li {
  background: var(--bone);
  padding: var(--sp-4);
}

.svc-list strong {
  display: block;
  color: var(--paper);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

.svc-list span {
  display: block;
  font-size: var(--fs-small);
  color: var(--slate-dim);
}

/* --------------------------------------------------------------------------
   FAQ — native <details>, for the reasons in this file's header

   `list-style: none` plus the ::-webkit-details-marker reset removes the
   default triangle so the +/- can be drawn on the right instead, where it
   reads as a control rather than as a bullet.
   -------------------------------------------------------------------------- */

.svc-faq {
  border-top: 1px solid var(--rule);
}

.svc-faq details {
  border-bottom: 1px solid var(--rule);
}

.svc-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  cursor: pointer;
  color: var(--paper);
  font-weight: 500;
  list-style: none;
}

.svc-faq summary::-webkit-details-marker {
  display: none;
}

.svc-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  flex: none;
}

.svc-faq details[open] summary::after {
  content: "\2212"; /* minus */
}

.svc-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.svc-faq__a {
  padding-bottom: var(--sp-4);
  max-width: var(--max-text);
}

.svc-faq__a > * + * {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   RELATED — the internal links that make four pages a set rather than four
   orphans. Every service page links to the other three; this is most of the
   reason the pages sit under a /services/ parent at all.
   -------------------------------------------------------------------------- */

.svc-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
}

.svc-card {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--slate);
  transition: border-color var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft);
}

.svc-card:hover,
.svc-card:focus-visible {
  border-color: var(--rule-firm);
  background: var(--frost);
}

.svc-card strong {
  display: block;
  color: var(--paper);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

.svc-card span {
  display: block;
  font-size: var(--fs-small);
  color: var(--slate-dim);
}

/* --------------------------------------------------------------------------
   CLOSING CTA — the page's one filled plane

   `--bone-deep` is the purple plane the home page alternates its campaign
   panels on. It cannot carry a value contrast against the page ground (they
   sit 0.002 and 0.022 apart in luminance, which is the whole lesson recorded
   in tokens.css), so it is given a hairline edge to be seen by rather than
   being left to float.
   -------------------------------------------------------------------------- */

.svc-cta {
  margin-block: var(--sp-9);
  padding: var(--sp-8) var(--sp-6);
  background: var(--bone-deep);
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-shell);
  text-align: center;
}

.svc-cta h2 {
  font-size: var(--fs-title);
  color: var(--paper);
  max-width: 20ch;
  margin-inline: auto;
}

.svc-cta p {
  margin: var(--sp-4) auto 0;
  max-width: var(--max-text);
}

.svc-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   FOOTER — a compact copy of the home page's, carrying the same links

   Not the same markup: the home footer is a four-track grid with an Offices
   column and a services list that is plain text. Here the services ARE the
   links, because this is the set of pages they point at.
   -------------------------------------------------------------------------- */

.svc-foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8) var(--sp-6);
}

.svc-foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.svc-foot__head {
  color: var(--paper);
  margin-bottom: var(--sp-3);
}

.svc-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.svc-foot__col a {
  color: var(--slate);
  text-decoration: none;
}

.svc-foot__col a:hover,
.svc-foot__col a:focus-visible {
  color: var(--paper);
}

.svc-foot__addr {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.svc-foot__addr + .svc-foot__addr {
  margin-top: var(--sp-3);
}

.svc-foot__addr b {
  display: block;
  color: var(--paper);
  font-weight: 400;
}

.svc-foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro);
  color: var(--slate-dim);
}

.svc-foot__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.svc-foot__legal a {
  color: var(--slate-dim);
  text-decoration: none;
}

.svc-foot__legal a:hover,
.svc-foot__legal a:focus-visible {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   The hub page's index of the four services
   -------------------------------------------------------------------------- */

/* TWO COLUMNS, EXPLICITLY, NOT auto-fit. There are exactly four services and
   there is no plan for a fifth; `auto-fit` with a 20rem floor resolved to
   three tracks at desktop width and left the fourth card alone on its own
   row, which reads as a rendering fault rather than a layout. Two columns
   makes it a 2x2 block, and it also gives each card enough width that
   "Influencer Marketing" and "Clipping & Distribution" set on one line
   instead of breaking mid-name.

   If a fifth service is ever added this becomes 2+2+1 and has the same
   orphan problem upside down — at which point three columns is the right
   answer, not auto-fit. The count is small enough to decide by hand. */
.svc-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

@media (min-width: 860px) {
  .svc-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.svc-index__item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--slate);
  transition: border-color var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft);
}

.svc-index__item:hover,
.svc-index__item:focus-visible {
  border-color: var(--rule-firm);
  background: var(--frost);
}

.svc-index__item h2 {
  font-size: var(--fs-title);
  color: var(--paper);
  margin: var(--sp-3) 0 var(--sp-3);
}

.svc-index__item p {
  margin: 0;
  max-width: var(--max-text);
}

.svc-index__item .svc-more {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Reduced motion. There is almost nothing to still here — no scroll
   choreography, no autoplaying media — but the hover transitions are real
   movement and are switched off with everything else.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}