/* ══════════════════════════════════════════════════════════════
   INNER PAGES (Phase E rollout, started 2026-09-30)
   Loaded after style.css and home.css by every rebuilt inner page
   (<body class="inner">). home.css supplies the shared system — the
   tokens (body.home, body.inner), .home-section, .home-head, .home-h2,
   .home-lead, .home-dark, .home-link, .home-actions, .home-hero-trust,
   .home-accent, .home-media, .home-work / .home-steps, .home-faq,
   .home-cta and the motion rules — so inner pages and the homepage stay
   identical. This file adds only the inner-page parts, all pg- prefixed.

   Page rhythm: NAVY hero (breadcrumb, H1, image) > white "In brief" >
   tint services > white explainer > tint guide > NAVY steps > white
   promises > tint FAQ > NAVY CTA > navy footer.
   ══════════════════════════════════════════════════════════════ */

/* Nav over the navy page hero: transparent until the page scrolls, as on
   the homepage; never while the mobile drawer is open. */
html:not(.nav-open) body.inner .nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.inner .footer { border-top: 1px solid var(--home-line); }

/* ── Page hero ──────────────────────────────────────────────── */
.pg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(76px + clamp(36px, 5vw, 72px)) var(--gutter) clamp(56px, 7vw, 96px);
  background: var(--grad-hero);
  color: var(--text-dark-body);
}
.pg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.pg-hero .breadcrumb { margin-bottom: 22px; }
.pg-hero .eyebrow { color: var(--teal); margin-bottom: 18px; }
.pg-h1 {
  font-size: clamp(2.125rem, 1.3rem + 2.7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--white);
  text-wrap: balance;
}
.pg-hero-sub {
  margin-top: 22px;
  max-width: 58ch;
  font-size: var(--home-lead);
  line-height: 1.6;
  color: var(--text-dark-sub);
}
.pg-hero .home-actions { margin-top: 32px; }
.pg-hero .home-hero-trust { margin-top: 34px; padding-top: 22px; }
.pg-hero a:focus-visible { outline-color: var(--white); }

/* The page's one illustration, framed on the navy hero. */
.pg-hero-figure { margin: 0; }
.pg-hero-figure .home-media {
  display: block;               /* <picture> is inline by default: without this the ratio, radius and clipping do not apply */
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
  border: 1px solid var(--home-line);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
}
.pg-hero-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Case studies reuse their own 16:9 case image (the one on the homepage and portfolio). */
.pg-hero-figure.is-wide .home-media { aspect-ratio: 16 / 9; }
/* Text-only hero for legal and utility pages: one column, copy width capped. */
.pg-hero.is-plain .pg-hero-grid { grid-template-columns: minmax(0, 1fr); }
.pg-hero.is-plain .pg-hero-copy { max-width: 860px; }

/* Standards a page works to: small outline chips under the hero copy. */
.pg-refs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 22px;
}
.pg-refs li {
  padding: 5px 12px;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dark-sub);
}
.pg-refs .pg-refs-label {
  margin-right: 4px;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

/* ── In brief: three plain answers for busy readers ─────────── */
.pg-brief-band { padding-block: clamp(48px, 6vw, 80px); }
.pg-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.pg-brief > div { padding: clamp(24px, 2.6vw, 34px); }
.pg-brief > div + div { border-left: 1px solid var(--gray-100); }
.pg-brief dt {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--blue);
}
.pg-brief dd { font-size: 1.0625rem; line-height: 1.6; color: var(--text); }

/* ── Service groups ─────────────────────────────────────────── */
.pg-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--home-gap); }
.pg-group {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.pg-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: rgba(26, 92, 245, 0.08);
  color: var(--blue);
}
.pg-group h3 { font-size: 1.3125rem; line-height: 1.25; margin-bottom: 10px; }
.pg-group > p { font-size: 0.9875rem; line-height: 1.6; color: var(--text-soft); }
.pg-links { margin-top: 20px; border-top: 1px solid var(--gray-100); }
.pg-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.9375rem; font-weight: 500;
  color: var(--text);
  transition: color 0.2s;
}
.pg-links svg { flex-shrink: 0; color: var(--gray-400); transition: transform 0.2s var(--ease), color 0.2s; }
.pg-link:hover { color: var(--blue); }
.pg-link:hover svg { color: var(--blue); transform: translateX(3px); }
.pg-more { margin-top: clamp(24px, 3vw, 36px); color: var(--text-soft); }

/* ── Explainer: heading left, prose right ───────────────────── */
.pg-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.pg-split .home-head { margin-bottom: 0; }
.pg-prose > * + * { margin-top: 16px; }
.pg-prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-soft); }
.pg-prose h3 { margin-top: 28px; font-size: 1.1875rem; }
.pg-checks { display: grid; gap: 12px; }
.pg-checks li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  font-size: 1.0625rem; line-height: 1.6; color: var(--text-soft);
}
.pg-checks svg { margin-top: 4px; color: var(--blue); }
.pg-checks b { color: var(--text); }

/* ── Guide: the question you have > the service that answers it ─ */
.pg-guide { border-top: 1px solid var(--gray-200); }
.pg-guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px 32px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--text);
}
.pg-guide-q { font-size: 1.0625rem; line-height: 1.5; }
.pg-guide-a {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px;
  font-weight: 600;
  color: var(--blue);
}
.pg-guide-a svg { flex-shrink: 0; transition: transform 0.2s var(--ease); }
.pg-guide-row:hover .pg-guide-q { color: var(--navy); }
.pg-guide-row:hover .pg-guide-a { text-decoration: underline; text-underline-offset: 4px; }
.pg-guide-row:hover svg { transform: translateX(3px); }

/* ── Side panel on the navy steps band ──────────────────────── */
.pg-panel {
  position: sticky; top: 110px;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--navy-2);
  border: 1px solid var(--home-line);
  border-radius: var(--r-xl);
}
.pg-panel .eyebrow { color: var(--teal); margin-bottom: 18px; }
.pg-panel dl { display: grid; gap: 18px; }
.pg-panel dt { font-weight: 700; color: var(--white); }
.pg-panel dd { margin-top: 4px; color: var(--text-dark-body); }

/* ── Promise cards and the scope note ───────────────────────── */
.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--home-gap); }
.pg-card {
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.pg-card h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 10px; }
.pg-card p { font-size: 0.9875rem; line-height: 1.6; color: var(--text-soft); }
.pg-note {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 20px 24px;
  background: var(--off-white);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-soft);
}
.pg-note svg { margin-top: 3px; color: var(--blue); }
.pg-note strong { color: var(--text); }

/* ══ Page-specific parts (pg-<page>-*) ══════════════════════ */
/* ── portfolio.html: case-study grid ───────────────────────────
   Nine cards, three per row (two below 1100px, one below 640px), on the
   tint band. The card look follows .home-proj in home.css, without its
   carousel rules. Each card spans five rows of the parent grid (image,
   eyebrow, title, summary, figures) and shares them through subgrid, so
   titles, summaries, the divider and the figures line up across a row
   however the text wraps. The whole card is one link (the title's ::after
   covers it), so each card is a single tab stop. */
.pg-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--home-gap);
  row-gap: 0;
  /* Cards space their rows with margin-bottom; cancel the last one. */
  margin-bottom: calc(-1 * var(--home-gap));
}
.pg-portfolio-card {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin-bottom: var(--home-gap);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition-property: transform, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease);
}
.pg-portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pg-portfolio-card:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; }
.pg-portfolio-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pg-portfolio-body {
  display: grid;
  grid-row: 2 / span 4;
  grid-template-rows: subgrid;
  row-gap: 10px;
  padding: 22px 24px 24px;
}
.pg-portfolio-card .eyebrow { margin: 0; color: var(--blue); }
.pg-portfolio-card h3 { font-size: 1.1875rem; line-height: 1.3; color: var(--navy); }
.pg-portfolio-card h3 a { color: inherit; }
.pg-portfolio-card h3 a::after { content: ""; position: absolute; inset: 0; }
.pg-portfolio-card h3 a:focus-visible { outline: none; }
.pg-portfolio-card:hover h3 a { color: var(--blue); }
.pg-portfolio-sum { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); }
.pg-portfolio-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-content: start;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.pg-portfolio-metrics dt { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.pg-portfolio-metrics dd { margin-top: 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-soft); }

@media (max-width: 1100px) {
  .pg-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pg-portfolio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-portfolio-card:hover { transform: none; }
}
html.motion-paused .pg-portfolio-card:hover { transform: none; }
@media print {
  .pg-portfolio-card { break-inside: avoid; box-shadow: none; }
}

/* ── Contact page (contact.html) ────────────────────────────────
   Replaces the 37 inline style="" attributes of the original page. Values
   are copied from those attributes, so the form card and the navy details
   card look as before. The responsive rules below take over from the
   !important rules in style.css that targeted the old inline styles
   (.contact-services-grid, .contact-info-sticky, .contact-form-card,
   .contact-info-card), which contact.html no longer uses.
   Also used on the page, already in style.css: .form-alert (error banner),
   .field-error (#serviceError), fieldset.form-group / legend.form-label
   (the checkbox group) and .sr-only (honeypot). */

/* Form card + contact details side by side (was .grid-2 with gap:64px;
   align-items:start). The form comes first, so it is first on phones. */
.pg-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: start;
}

/* Form card */
.pg-contact-form-card {
  padding: 48px 44px;
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.pg-contact-form-title { margin-bottom: 8px; }
.pg-contact-form-intro { margin-bottom: 32px; font-size: 1rem; color: var(--text-soft); }
.pg-contact-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pg-contact-turnstile { margin: 8px 0 18px; }
.pg-contact-privacy { margin-top: 14px; font-size: 0.875rem; text-align: center; color: var(--text-xsoft); }
.pg-contact-privacy svg { display: inline-block; margin-right: 6px; vertical-align: -2px; }

/* Contact details card (navy, sticky beside the form) */
.pg-contact-info {
  position: sticky; top: 100px;
  padding: 48px 40px;
  background: var(--navy);
  border-radius: var(--r-xl);
}
.pg-contact-info-title { margin-bottom: 12px; font-size: 1.7rem; color: var(--white); }
.pg-contact-info-lead { margin-bottom: 36px; font-size: 1rem; line-height: 1.6; color: var(--text-dark-sub); }
.pg-contact-methods { display: flex; flex-direction: column; gap: 20px; }
.pg-contact-method { display: flex; align-items: flex-start; gap: 16px; }
.pg-contact-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--r-sm);
  color: var(--teal);
}
.pg-contact-ico-wa { background: #25D366; color: var(--white); }
.pg-contact-label {
  margin-bottom: 4px;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal);
}
.pg-contact-value { font-size: 0.92rem; font-weight: 600; color: var(--white); }
.pg-contact-meta { margin-top: 2px; font-size: 0.8125rem; color: var(--text-dark-muted); }
.pg-contact-address { font-size: 1rem; color: var(--text-dark-sub); }
.pg-contact-wa { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.pg-contact-value:hover,
.pg-contact-wa:hover { color: var(--teal); }
/* A --blue focus ring is too faint on navy. */
.pg-contact-info a:focus-visible { outline-color: var(--white); }

@media (max-width: 900px) {
  .pg-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-contact-info { position: static; }
}
@media (max-width: 640px) {
  .pg-contact-services { grid-template-columns: minmax(0, 1fr); }
  .pg-contact-form-card { padding: 32px 24px; }
  .pg-contact-info { padding: 36px 28px; }
}

/* ── Technical depth, collapsed by default ─────────────────── */
/* Long pages keep their detail for technical readers in <details
   class="pg-deep"> blocks, so managers can skim the page and engineers
   can open what they need. The text stays in the page for search engines. */
.pg-deeps { border-top: 1px solid var(--gray-200); }
.pg-cards + .pg-deeps,
.pg-groups + .pg-deeps,
.pg-guide + .pg-deeps,
.pg-more + .pg-deeps,
.pg-note + .pg-deeps,
.tbl-wrap + .pg-deeps { margin-top: clamp(24px, 3vw, 36px); }
.pg-prose > .pg-deeps { margin-top: 28px; }
.pg-deep { border-bottom: 1px solid var(--gray-200); }
.pg-deep > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  color: var(--text);
}
.pg-deep > summary::-webkit-details-marker { display: none; }
.pg-deep > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--blue);
  transition: transform 0.2s var(--ease);
}
.pg-deep[open] > summary::after { transform: rotate(45deg); }
.pg-deep > summary:hover { color: var(--navy); }
.pg-deep-body { padding: 0 0 26px; max-width: 78ch; }
.pg-deep-body > * + * { margin-top: 14px; }
.pg-deep-body p,
.pg-deep-body li { font-size: 1rem; line-height: 1.7; color: var(--text-soft); }
.pg-deep-body ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.pg-deep-body h4 { margin-top: 22px; font-size: 1rem; color: var(--text); }

/* ── cost-calculator.html: the calculator inside a page band ───
   The calculator markup and its own inline <style> block are unchanged.
   It used to sit under the old hero with a negative top margin; as a band
   the spacing comes from the band's padding. The inline rules are one
   class strong, so these two-class selectors win wherever they sit. */
.calc-page.pg-cost-calculator-band { min-height: 0; }
.pg-cost-calculator-band .calc-shell { margin-top: 0; margin-bottom: 0; }
@media (max-width: 700px) {
  .pg-cost-calculator-band .calc-shell { margin-left: 0; margin-right: 0; }
}
/* The Cloudflare Turnstile box is 300px wide; on the smallest phones the
   shell reaches 6px into the gutter so nothing is clipped. */
@media (max-width: 360px) {
  .pg-cost-calculator-band .calc-shell { margin-left: -6px; margin-right: -6px; }
}

/* ── Long-form documents (privacy policy, terms) ────────────── */
/* The legal text itself is kept word for word; this only sets a readable measure. */
.pg-doc { max-width: 78ch; }
.pg-doc > * + * { margin-top: 16px; }
.pg-doc h2 { margin-top: 48px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.25; }
.pg-doc h3 { margin-top: 28px; font-size: 1.1875rem; line-height: 1.3; }
.pg-doc > h2:first-child,
.pg-doc > h3:first-child { margin-top: 0; }
.pg-doc p,
.pg-doc li { font-size: 1.0625rem; line-height: 1.7; color: var(--text-soft); }
.pg-doc ul,
.pg-doc ol { display: grid; gap: 8px; padding-left: 1.25em; }
.pg-doc ul { list-style: disc; }
.pg-doc ol { list-style: decimal; }
.pg-doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.pg-doc strong { color: var(--text); }

/* Case-study results: four figures on the navy band (home-facts has three). */
.home-facts.pg-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Straight under a section heading (case studies) the row needs no divider or extra gap:
   the heading's own bottom margin sets the standard head-to-content distance. */
.home-head + .home-facts { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Responsive (site breakpoints: 1100 / 900 / 640 / 480) ──── */
@media (max-width: 1100px) {
  .pg-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pg-hero-grid,
  .pg-split { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the same head-to-content gap as every other section. */
  .pg-split { row-gap: 0; }
  .pg-split .home-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
  .pg-hero-figure { max-width: 600px; }
  .pg-brief { grid-template-columns: minmax(0, 1fr); }
  .pg-brief > div + div { border-left: 0; border-top: 1px solid var(--gray-100); }
  .pg-cards { grid-template-columns: minmax(0, 1fr); }
  .pg-panel { position: static; }
  .home-facts.pg-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pg-groups { grid-template-columns: minmax(0, 1fr); }
  .home-facts.pg-facts-4 { grid-template-columns: minmax(0, 1fr); }
  .pg-guide-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pg-guide-a { justify-content: flex-start; }
}

@media print {
  .pg-hero { padding-top: 48px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pg-panel { position: static; }
}