/* Increase Construction — site-wide polish layer.
   Loaded after each page's inline <style>, so equal-specificity rules here win.
   Scope: brand token corrections, motion tokens, press/hover feedback, reveal
   choreography, and the approved interaction set (shine, ripple, nav pill,
   card spotlight, image lift, settle reveals, word-cascade headings, cursor
   spotlight, hero mouse drift, ROI stat replay). */

:root {
  --ink: #161e2a;
  --steel: #225985;
  --focus: #225985;
  --paper: #f5f7fa;
  --paper-line: #e1e6ec;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.nav { transition: box-shadow 0.3s ease; }
.nav.is-scrolled { box-shadow: 0 10px 30px -22px rgba(15, 27, 45, 0.35); }
.nav-toggle {
  width: 44px; height: 44px;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.94); }
.nav-cta {
  padding: 11px 18px;
  touch-action: manipulation;
  transition: border-color 0.2s ease, background 0.2s ease, transform 160ms var(--ease-out);
}
.nav-cta:active { transform: scale(0.97); }
/* Sliding pill: a single transform-only element follows the hovered link */
.nav-links { position: relative; isolation: isolate; }
.nav-links a { position: relative; z-index: 1; padding: 6px 10px; margin: 0 -10px; }
.ic-pill {
  position: absolute; left: 0; top: 50%;
  width: 100px; height: 32px; margin-top: -16px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  transform-origin: left center;
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
  pointer-events: none;
}
.ic-pill.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: inherit; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Shine: a gloss sweep crosses the button on hover */
.btn::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg) translateX(-160%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--gold-bright); transform: none; box-shadow: none; }
  .btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: none; }
  .btn-navy:hover { background: var(--navy-soft); transform: none; }
  .btn:hover::before { transform: skewX(-20deg) translateX(420%); transition: transform 650ms var(--ease-in-out); }
}
/* Ripple press (span injected by site-polish.js) */
.btn:active { transform: scale(0.985); box-shadow: none; }
.ic-ripple {
  position: absolute; width: 12px; height: 12px; margin: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.2); opacity: 1;
  animation: icRipple 480ms var(--ease-out) forwards;
  pointer-events: none;
}
.btn-ghost .ic-ripple { background: rgba(232, 168, 63, 0.35); }
@keyframes icRipple { to { transform: scale(28); opacity: 0; } }

/* ---------- Reveals: "settle" + staggered children ---------- */
.reveal { transform: scale(0.96) translateY(14px); transition-duration: 0.8s; }
.reveal.is-in { transform: none; }
.card-row.reveal .problem-card, .blog-row.reveal .blog-card, .process-step.reveal .process-num {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.25s ease;
}
.card-row.reveal.is-in .problem-card, .blog-row.reveal.is-in .blog-card, .process-step.reveal.is-in .process-num { opacity: 1; transform: none; }
.card-row.reveal.is-in .problem-card:nth-child(2), .blog-row.reveal.is-in .blog-card:nth-child(2) { transition-delay: 0.1s; }
.card-row.reveal.is-in .problem-card:nth-child(3), .blog-row.reveal.is-in .blog-card:nth-child(3) { transition-delay: 0.2s; }
/* Word cascade headings (spans injected by site-polish.js) */
.ic-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.is-in .ic-w { opacity: 1; transform: none; }

/* ---------- Cards ---------- */
.problem-card { position: relative; overflow: hidden; transition: background 0.3s ease; }
.problem-card-mark { transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out); }
/* Spotlight: gold radial follows the cursor (--mx/--my set by site-polish.js) */
.problem-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(207, 142, 37, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .problem-card:hover::after { opacity: 1; }
  .problem-card:hover .problem-card-mark { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); }
}
.process-step.is-lit .process-num { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); }

/* Blog cards */
.blog-card { overflow: hidden; }
.blog-card-img { transition: transform 0.5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover { border-color: var(--gold); transform: translateY(-3px); }
}
.blog-card:active { transform: scale(0.99); }
.blog-card-meta { font-size: 0.72rem; color: var(--text-soft); }

/* Client-result images: lift on hover */
.proof-featured-card.is-in, .proof-card.is-in { transition: transform 280ms var(--ease-out), box-shadow 280ms ease; }
@media (hover: hover) and (pointer: fine) {
  .proof-featured-card:hover, .proof-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(15, 27, 45, 0.5); }
}

/* ---------- Navy grounds: grain ---------- */
.hero::after, .roi::after, .final::after, .cta-section::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Hero mouse drift (transforms set by site-polish.js) ---------- */
.hero-photo { transition: transform 700ms var(--ease-out); }
.hero-inner { transition: transform 700ms var(--ease-out); }

/* ---------- Cursor spotlight overlay (element injected by site-polish.js) ---------- */
.ic-spot {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 300ms ease;
}
.ic-spot.is-on { opacity: 1; }

/* ---------- Forms & footer ---------- */
.form-step {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(6px); }
}
.assessment-form .form-fine { font-size: 0.8rem; color: var(--text-soft); }
.ic-footer-nav a { padding: 8px 0; }
@media (hover: hover) and (pointer: fine) {
  .form-back:hover { color: var(--gold); }
}

/* ---------- Reduced motion: keep opacity/colour, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .card-row.reveal .problem-card, .blog-row.reveal .blog-card, .process-step.reveal .process-num,
  .ic-w, .proof-featured-card, .proof-card { opacity: 1; transform: none; transition: none; }
  .btn::before, .ic-ripple { display: none; }
  .hero-photo, .hero-inner { transition: none; }
}