/* Paws Trend — inner pages (about, services, contact, services/*).

   Loads *after* studio.css and depends on it: studio.css supplies the token
   system, aurora, navbar, footer, social icons and buttons. This file only
   adds the vocabulary those pages use that the homepage does not
   (.glass-card, .bento-grid, .tag, .page-header, form controls, …), styled to
   the system documented in docs/design-system.md.

   It replaces assets/css/style.css on those pages — that sheet is the older
   pure-black system still used by index-classic.html.

   Tokens only: no raw hex below this line. */

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

main > section,
body > section {
  padding: var(--space-9) 0;
}

.section-heading {
  margin-bottom: var(--space-8);
  text-align: center;
}

.section-heading h2 {
  margin-top: var(--space-4);
}

/* ── Page header ────────────────────────────────────────────────────────────
   The inner-page counterpart to the homepage hero: one dark band directly on
   the light page, so every page opens on the same dark-on-light contrast the
   system is built around. The legacy markup carries an inline --page-bg
   photograph; it is deliberately not painted — the aurora plus this band is
   the system's own language, and an arbitrary stock photo behind white text
   is the one thing here with no contrast guarantee. */

.page-header {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: calc(var(--space-10) + var(--space-6)) 0 var(--space-9);
  border-radius: 0 0 var(--radius-shell) var(--radius-shell);
  background: var(--ink);
  color: var(--on-ink-dim);
  text-align: center;
}

.page-header .container { position: relative; z-index: 1; }

.page-header h1 {
  margin: 0 0 var(--space-4);
  color: var(--on-ink);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.page-header p {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--on-ink-dim);
  font-size: clamp(17px, 2vw, 20px);
}

/* Decorative particle layer (assets/js/particles.js). */
.page-header-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Gradient word ──────────────────────────────────────────────────────────
   Same treatment as studio.css's .gradient-word. On --ink the gradient's own
   hues carry it; no text-shadow is inherited here to bleed through. */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── Cards ──────────────────────────────────────────────────────────────────
   The dark glass surface from the homepage. Rebinding the surface + ink
   tokens on the card means its descendants inherit the dark context.

   `color` is re-declared deliberately: body sets color: var(--text-dim),
   which resolves at body level and inherits down as an already-computed
   value, so rebinding the token alone cannot reach it. See
   docs/design-system.md §3. */

.glass-card {
  --surface: #14161a;
  --surface-sunken: #0f1114;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #fafafa;
  --text-dim: rgba(255, 255, 255, 0.66);

  position: relative;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(9, 10, 13, 0.92);
  color: var(--text-dim);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35),
              0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    -webkit-backdrop-filter: blur(var(--glass-blur-card)) saturate(var(--glass-saturate));
            backdrop-filter: blur(var(--glass-blur-card)) saturate(var(--glass-saturate));
  }
}

.glass-card h2,
.glass-card h3,
.glass-card h4 { color: var(--text); }

.glass-card p { color: var(--text-dim); }

/* .tilt is legacy markup from the old system; here it simply opts a card into
   the lift. No JS is bound to it on these pages. */
.glass-card:hover,
.glass-card.tilt:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
              0 20px 48px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .glass-card { transition: none; }
  .glass-card:hover { transform: none; }
}

/* Links inside a dark card need the vivid accent, not the light-page ink
   form — see the --svc-*-ink note in docs/design-system.md §3. */
.glass-card a:not(.btn) {
  color: var(--blue);
  text-decoration: none;
}

.glass-card a:not(.btn):hover { text-decoration: underline; }

/* ── Bento grid ─────────────────────────────────────────────────────────── */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-4 { grid-column: span 2; }
}

@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .span-2, .span-4 { grid-column: span 1; }
}


/* ── Per-page service accent ────────────────────────────────────────────────
   studio.css rebinds the --svc channel only on .showcase[data-service]. Each
   service page sets data-service on <body> so its tag, icons, quote rule and
   fallback illustration all take that service's hue, exactly as the homepage
   tabs do. The -ink form is used on the light page and the vivid form inside
   dark cards, per docs/design-system.md §3. */

[data-service="build"] {
  --svc: var(--svc-build); --svc-ink: var(--svc-build-ink);
  --svc-soft: var(--svc-build-soft); --svc-glow: var(--svc-build-glow);
}
[data-service="intelligence"] {
  --svc: var(--svc-intelligence); --svc-ink: var(--svc-intelligence-ink);
  --svc-soft: var(--svc-intelligence-soft); --svc-glow: var(--svc-intelligence-glow);
}
[data-service="content"] {
  --svc: var(--svc-content); --svc-ink: var(--svc-content-ink);
  --svc-soft: var(--svc-content-soft); --svc-glow: var(--svc-content-glow);
}
[data-service="growth"] {
  --svc: var(--svc-growth); --svc-ink: var(--svc-growth-ink);
  --svc-soft: var(--svc-growth-soft); --svc-glow: var(--svc-growth-glow);
}
[data-service="foundation"] {
  --svc: var(--svc-foundation); --svc-ink: var(--svc-foundation-ink);
  --svc-soft: var(--svc-foundation-soft); --svc-glow: var(--svc-foundation-glow);
}

/* Inside a dark card the vivid hue is the accessible one. */
.glass-card { --svc-ink: var(--svc); }

/* ── Tag ────────────────────────────────────────────────────────────────────
   On the light page the accent must be the -ink form (the vivid blue is
   3.49:1 on white and fails AA); inside a dark card the vivid form is the
   accessible one. */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--svc-soft);
  color: var(--svc-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.glass-card .tag { color: var(--svc); }

/* ── Buttons ────────────────────────────────────────────────────────────────
   studio.css owns .btn and .btn--primary (BEM). This markup predates that and
   uses the hyphenated .btn-primary, so it is mapped here rather than editing
   eight pages of HTML. */

.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
  border-color: transparent;
}

.btn-primary:hover { background: var(--text); }

/* Inside a dark card the near-black fill would disappear. */
.glass-card .btn-primary,
.page-header .btn-primary {
  background: var(--on-ink);
  color: var(--ink);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.form-group label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px min: smaller triggers iOS zoom-on-focus */
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.form-success {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--svc-foundation-soft);
  color: var(--svc-foundation-ink);
  font-weight: 600;
}

.glass-card .form-success { color: var(--svc-foundation); }

/* ── Footer bits studio.css does not already cover ──────────────────────── */

.footer-logo img { height: 28px; width: auto; }

.footer-tagline {
  margin-top: var(--space-3);
  color: var(--text-dim);
  font-size: 15px;
}

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────
   Opaque, not glass. studio.css's bar is 72%-white with a backdrop-filter,
   which is correct over the light aurora but composites to ~#b9b9b9 when a
   dark card scrolls beneath it — where --text-dim links measure ~2.8:1 and
   fail AA (the same failure measured on the homepage hero). The homepage can
   track a single dark section with an observer; these pages have dark cards
   passing under the bar continuously, so it simply stays opaque. */
.navbar {
  background: var(--surface);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ── Legacy no-ops ──────────────────────────────────────────────────────────
   The old system's mobile menu button has no handler on these pages (the
   nav links wrap instead), so it is hidden rather than shipped dead — the
   same call studio.css makes. */
.navbar .hamburger { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ELABORATED SECTION PATTERNS
   ══════════════════════════════════════════════════════════════════════════
   Reusable blocks for the rewritten inner pages. Everything below composes
   from the tokens already defined; no new colour enters the system here. */

/* ── Section intro ──────────────────────────────────────────────────────── */

.section-intro {
  max-width: 62ch;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-intro h2 {
  margin: var(--space-4) 0 var(--space-4);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.section-intro p {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(17px, 2vw, 19px);
}

/* ── Split: copy beside a visual ────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split--reverse .split-visual { order: -1; }

.split-copy h2 {
  margin: var(--space-4) 0 var(--space-5);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.split-copy p {
  margin-bottom: var(--space-4);
  color: var(--text-dim);
  font-size: 17px;
}

.split-copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--reverse .split-visual { order: 0; }
}

/* ── 3D object stage ────────────────────────────────────────────────────────
   assets/js/page-object.js mounts a canvas here and adds .is-live only once
   the scene actually built. The inline SVG fallback stays visible until then,
   so a WebGL failure, the static tier, or no JS at all still leaves a
   deliberate illustration rather than an empty box. */

.object-stage {
  position: relative;
  display: grid;
  place-items: center;
  /* Tall enough for the object to read. The scene's camera distance is tuned
     for the homepage's wide, short showcase window, so in a squarer stage the
     object needs vertical room or it sits small and lost in the box. */
  min-height: 440px;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(9, 10, 13, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.object-stage .object-fallback {
  width: min(100%, 320px);
  height: auto;
  color: var(--svc);
  opacity: 0.9;
}

.object-stage.is-live .object-fallback { display: none; }

/* ── Value / feature cards with an icon ─────────────────────────────────── */

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.value-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--svc-soft);
  color: var(--svc);
}

.glass-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.glass-card p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ── Numbered process ───────────────────────────────────────────────────── */

.process-list {
  display: grid;
  gap: var(--space-1);
  counter-reset: step;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-window);
  background: var(--surface);
}

.process-step + .process-step { margin-top: var(--space-4); }

.process-step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 700;
}

.process-step h3 { margin: 0 0 var(--space-3); font-size: 18px; font-weight: 700; }
.process-step p { margin: 0; color: var(--text-dim); font-size: 16px; }

@media (max-width: 560px) {
  .process-step { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ── Pull quote ─────────────────────────────────────────────────────────────
   A stated position in the brand's own voice. Not a testimonial: nothing here
   is attributed to a client, because no client quote in this repo has been
   verified. */

.pull-quote {
  max-width: 46ch;
  margin: var(--space-8) auto;
  padding-left: var(--space-5);
  border-left: 3px solid var(--svc);
  color: var(--text);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

/* ── Fact row ───────────────────────────────────────────────────────────── */

.fact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  text-align: center;
}

.fact-value {
  display: block;
  color: var(--text);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.fact-label {
  display: block;
  margin-top: var(--space-3);
  color: var(--text-dim);
  font-size: 15px;
}

/* Unfilled client data, drawn as an obviously empty slot so it can never be
   mistaken for a shipped figure. Mirrors .stat-value--input in studio.css. */
.fact-value--input {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

/* ── Checklist ──────────────────────────────────────────────────────────── */

.check-list { margin: 0; padding: 0; list-style: none; }

.check-list li {
  position: relative;
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
  color: var(--text-dim);
  font-size: 16px;
}

.check-list li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--svc);
}

.glass-card .check-list li { color: var(--text-dim); }

/* ── Interactive service cards (services.html) ──────────────────────────────
   The overview page deliberately does NOT mount five 3D scenes: five WebGL
   contexts on one page is a real cost for a page whose job is to route people
   onward. Each card instead carries flat line art that reacts on hover, and
   links to the service page that does carry the live object. */

.service-list { display: grid; gap: var(--space-5); }

.service-card {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(9, 10, 13, 0.92);
  color: var(--text-dim);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.service-card {
  --text: #fafafa;
  --text-dim: rgba(255, 255, 255, 0.66);
  --svc-ink: var(--svc);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--svc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55),
              0 0 0 1px var(--svc-glow);
}

.service-num {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--svc);
  /* 20px/800 is deliberate, not decorative. At 13px this is small text needing
     4.5:1, and vivid violet measured 4.02:1 on the card — the weakest of the
     five hues. At >=18.66px bold WCAG's threshold is 3:1, which all five clear,
     and a larger index number reads better here regardless. */
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.service-card h3 {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.service-card p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* The interactive part: line art that brightens, scales and re-draws toward
   the service hue on hover. */
.service-art {
  width: 132px;
  height: 96px;
  color: var(--text-dim);
  transition: color var(--transition), transform var(--transition);
}

.service-art * {
  transition: stroke-dashoffset 0.7s ease, opacity var(--transition);
}

.service-card:hover .service-art {
  color: var(--svc);
  transform: scale(1.06);
}

.service-arrow {
  color: var(--svc);
  transition: transform var(--transition);
}

.service-card:hover .service-arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-art,
  .service-arrow { transition: none; }
  .service-card:hover { transform: none; }
  .service-card:hover .service-art { transform: none; }
  .service-card:hover .service-arrow { transform: none; }
}

@media (max-width: 720px) {
  .service-card { grid-template-columns: 1fr; gap: var(--space-5); }
  .service-arrow { display: none; }
  .service-art { width: 108px; height: 78px; }
}

/* ── Contact layout ─────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

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

.contact-aside .glass-card + .glass-card { margin-top: var(--space-5); }

.contact-aside h3 { margin: 0 0 var(--space-3); font-size: 17px; }
.contact-aside p { margin: 0; font-size: 15px; }

/* A numbered "what happens next" so the form is not a black hole. */
.next-list { margin: 0; padding: 0; list-style: none; counter-reset: nx; }

.next-list li {
  position: relative;
  margin-bottom: var(--space-4);
  padding-left: var(--space-7);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  counter-increment: nx;
}

.next-list li::before {
  content: counter(nx);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--svc-soft);
  color: var(--svc);
  font-size: 13px;
  font-weight: 700;
}

/* Hidden until submit. assets/js/main.js adds .visible — the page previously
   showed this confirmation before anyone had sent anything. */
.form-success { display: none; }
.form-success.visible { display: block; }

/* ── Situations ─────────────────────────────────────────────────────────── */

.situation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.situation {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--svc);
  border-radius: var(--radius-window);
  background: var(--surface);
}

.situation-quote {
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.situation p:last-child { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* ── FAQ ────────────────────────────────────────────────────────────────────
   Native <details>/<summary>: keyboard accessible and open-by-default when
   printed or when JS is unavailable, with no script of our own. */

.faq-list {
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-window);
  background: var(--surface);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

/* Both are needed: the ::marker rule covers modern engines, the WebKit
   pseudo-element covers older Safari. */
.faq-item summary::marker { content: ''; }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--svc);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq-item[open] summary::after { content: '\2212'; }

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

.faq-answer {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
}

/* ── Contact form anti-spam ─────────────────────────────────────────────────
   The honeypot is positioned off-screen rather than display:none, since some
   bots skip fields that are not rendered at all. It is aria-hidden and
   tabindex="-1" in the markup, so it is unreachable for real users including
   keyboard and screen-reader users. */

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile { margin-bottom: var(--space-5); }

.form-error {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(255, 77, 77, 0.12);
  color: #ff9d9d;
  font-size: 15px;
  font-weight: 600;
}

.form-error.visible { display: block; }