/* ============================================================
   SEO Northridge — redesign
   Palette drawn from the brand mark: navy + California red.
   ============================================================ */

:root{
  --navy-900:#061530;
  --navy-800:#0a2048;
  --navy-700:#0e2a5c;
  --navy-600:#14376f;
  --red:#d1232a;
  --red-600:#b81d24;
  --red-300:#ff5a62;
  --sand:#d9a05b;

  --ink:#0d1b2e;
  --body:#495a70;
  --muted:#6b7a8f;
  --line:#e3e8ef;
  --surface:#ffffff;
  --surface-alt:#f5f7fb;

  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(6,21,48,.06), 0 4px 12px rgba(6,21,48,.05);
  --shadow-md:0 8px 30px rgba(6,21,48,.10);
  --shadow-lg:0 24px 60px rgba(6,21,48,.16);

  --font-display:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  --container:1180px;
  --header-h:84px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--body);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
h1,h2,h3{font-family:var(--font-display); color:var(--ink); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5vw,3.65rem); font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.6rem); font-weight:800}
h3{font-size:1.2rem; font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0; padding:0; list-style:none}

.container{width:min(100% - 40px, var(--container)); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-900); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--red-300); outline-offset:3px; border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.6rem; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--font-display); font-weight:700; font-size:.97rem; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 8px 22px rgba(209,35,42,.3)}
.btn-primary:hover{background:var(--red-600); transform:translateY(-2px); box-shadow:0 14px 30px rgba(209,35,42,.38)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.btn-outline{background:transparent; color:var(--navy-700); border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy-700); background:var(--navy-700); color:#fff; transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:.65rem 1.2rem; font-size:.88rem}
.btn-lg{padding:1.08rem 2.1rem; font-size:1.05rem}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.eyebrow.dark{color:var(--red)}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(209,35,42,.18)}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm); border-bottom-color:var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:var(--header-h)}
.brand img{width:auto; height:52px}
.nav{display:flex; align-items:center; gap:.4rem}
.nav a{
  padding:.55rem .85rem; border-radius:999px; font-family:var(--font-display);
  font-weight:600; font-size:.93rem; color:var(--navy-800); transition:background .18s ease, color .18s ease;
}
.nav a:hover{background:var(--surface-alt); color:var(--red)}
.nav .nav-cta{background:var(--red); color:#fff; padding:.68rem 1.3rem; margin-left:.5rem; box-shadow:0 6px 18px rgba(209,35,42,.28)}
.nav .nav-cta:hover{background:var(--red-600); color:#fff}

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; padding:0; place-items:center; gap:5px;
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--navy-800); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; background:var(--navy-900); color:#fff; padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,8vw,7rem)}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 65% at 50% 25%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 25%, #000 40%, transparent 100%);
}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orb-a{width:520px; height:520px; background:#1d4ed8; top:-180px; left:-120px}
.orb-b{width:460px; height:460px; background:var(--red); bottom:-200px; right:-100px; opacity:.38}
.orb-c{width:520px; height:520px; background:#1d4ed8; top:-230px; left:50%; transform:translateX(-50%); opacity:.4}

.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.hero h1{color:#fff; margin-bottom:1.1rem}
.hero h1 em{font-style:normal; color:var(--red-300); position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:var(--red); border-radius:999px; opacity:.55;
}
.lede{font-size:clamp(1.03rem,1.6vw,1.18rem); color:rgba(255,255,255,.76); max-width:36em; margin-bottom:1.75rem}

.hero-list{display:grid; gap:.7rem; margin-bottom:2.1rem}
.hero-list li{position:relative; padding-left:2rem; color:rgba(255,255,255,.88); font-size:.99rem}
.hero-list li::before{
  content:""; position:absolute; left:0; top:.38em; width:18px; height:18px; border-radius:50%;
  background:rgba(209,35,42,.22); border:1.5px solid var(--red-300);
}
.hero-list li::after{
  content:""; position:absolute; left:5.5px; top:.68em; width:7px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem}

/* ---------- lead form ---------- */
.form-card{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:clamp(1.5rem,2.4vw,2.1rem);
  backdrop-filter:blur(18px); box-shadow:var(--shadow-lg); scroll-margin-top:110px;
}
.form-head h2{color:#fff; font-size:1.5rem; margin-bottom:.4rem}
.form-head p{color:rgba(255,255,255,.66); font-size:.93rem; margin-bottom:1.4rem}
.lead-form{display:grid; gap:.95rem}
.field{display:grid; gap:.35rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:.95rem}
.field label{font-family:var(--font-display); font-weight:600; font-size:.83rem; color:rgba(255,255,255,.82)}
.field input,.field textarea{
  width:100%; padding:.82rem 1rem; border-radius:12px; font:inherit; font-size:.95rem;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18); color:#fff;
  transition:border-color .18s ease, background .18s ease;
}
.field textarea{resize:vertical; min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--red-300); background:rgba(255,255,255,.13)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red-300); background:rgba(209,35,42,.12)}
.err{font-size:.78rem; color:#ffb4b8; min-height:0}
.err:not(:empty){min-height:1em}
.form-note{font-size:.79rem; color:rgba(255,255,255,.5); text-align:center; margin:.3rem 0 0}
.form-status{font-size:.88rem; margin:.2rem 0 0; text-align:center; color:#9ff0c4}
.form-status:empty{display:none}

/* ============ TICKER ============ */
.ticker{background:var(--navy-800); border-top:1px solid rgba(255,255,255,.08); padding:1.05rem 0; overflow:hidden}
.ticker-track{display:flex; width:max-content; animation:scroll 36s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex; align-items:center; gap:2.4rem; padding-right:2.4rem}
.ticker-set span{
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap;
}
.ticker-set span:not(.ticker-label)::before{content:"◆"; color:var(--red-300); margin-right:2.4rem; font-size:.6rem; vertical-align:middle}
.ticker-label{color:var(--red-300) !important}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ STATS ============ */
.stats{background:var(--surface-alt); border-bottom:1px solid var(--line); padding:clamp(2.2rem,4vw,3rem) 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center}
.stat{display:grid; gap:.3rem}
.stat-num{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.2vw,2.5rem); color:var(--navy-700); line-height:1}
.stat-label{font-size:.88rem; color:var(--muted)}

/* ============ SECTIONS ============ */
.section{padding:clamp(3.8rem,7vw,6.5rem) 0}
.section-alt{background:var(--surface-alt)}
.section-head{max-width:46rem; margin:0 auto clamp(2.4rem,4vw,3.4rem); text-align:center}
.section-sub{color:var(--muted); font-size:1.04rem; margin:0}

/* ---------- service cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2rem 1.75rem; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--red),var(--sand)); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card-icon{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:#fff;
  box-shadow:0 8px 20px rgba(14,42,92,.25);
}
.card-icon svg{width:26px; height:26px}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem; margin-bottom:1.1rem}
.card-link{
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--red);
  display:inline-flex; gap:.4rem; align-items:center;
}
.card-link span{transition:transform .2s ease}
.card:hover .card-link span{transform:translateX(4px)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.5rem}
.step-num{
  display:inline-block; font-family:var(--font-display); font-weight:800; font-size:.92rem;
  color:var(--red); letter-spacing:.08em; margin-bottom:.8rem;
}
.step h3{font-size:1.1rem; margin-bottom:.45rem}
.step p{font-size:.93rem; margin:0}
.step::after{
  content:""; position:absolute; top:2.35rem; right:-1.4rem; width:1.4rem; height:1.5px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.step:last-child::after{display:none}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about-visual{position:relative; min-height:360px; display:grid; place-items:center}
.about-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:2.6rem 2.2rem; text-align:center; display:grid; gap:1rem; justify-items:center;
}
.about-card img{width:230px; height:auto}
.about-card-tag{margin:0; font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.about-chip{
  position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; font-family:var(--font-display); font-weight:700; font-size:.8rem;
  color:var(--navy-700); box-shadow:var(--shadow-md); animation:float 5s ease-in-out infinite;
}
.chip-1{top:4%; left:-4%}
.chip-2{bottom:10%; right:-6%; animation-delay:-1.6s}
.chip-3{bottom:-2%; left:4%; animation-delay:-3.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.check-list{display:grid; gap:.65rem; margin:1.5rem 0 2rem}
.check-list li{position:relative; padding-left:2rem; font-size:.97rem}
.check-list li::before{
  content:""; position:absolute; left:0; top:.3em; width:19px; height:19px; border-radius:50%;
  background:rgba(209,35,42,.1); border:1.5px solid var(--red);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:.62em; width:7px; height:4px;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg);
}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:start}
.plan{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2.2rem 1.9rem; transition:transform .25s ease, box-shadow .25s ease;
}
.plan:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.plan-featured{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); border-color:transparent;
  color:rgba(255,255,255,.76); box-shadow:var(--shadow-lg); transform:scale(1.035);
}
.plan-featured:hover{transform:scale(1.035) translateY(-5px)}
.plan-featured h3,.plan-featured .price{color:#fff}
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem 1rem; border-radius:999px;
  box-shadow:0 6px 18px rgba(209,35,42,.4); white-space:nowrap;
}
.plan h3{font-size:1.3rem; margin-bottom:.25rem}
.plan-for{font-size:.88rem; color:var(--muted); margin-bottom:1.2rem}
.plan-featured .plan-for,.plan-featured .plan-best{color:rgba(255,255,255,.55)}
.price{font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--ink); line-height:1; margin:0 0 1.5rem; letter-spacing:-.03em}
.price .cur{font-size:1.4rem; vertical-align:super; margin-right:.1rem}
.price .per{font-size:.92rem; font-weight:600; color:var(--muted); letter-spacing:0}
.plan-featured .price .per{color:rgba(255,255,255,.55)}
.plan-list{display:grid; gap:.72rem; margin-bottom:1.8rem}
.plan-list li{position:relative; padding-left:1.7rem; font-size:.94rem}
.plan-list li::before{
  content:""; position:absolute; left:0; top:.52em; width:8px; height:5px;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg);
}
.plan-featured .plan-list li::before{border-color:var(--red-300)}
.plan-featured .btn-primary{box-shadow:0 8px 22px rgba(209,35,42,.45)}
.plan-best{font-size:.82rem; color:var(--muted); margin:1rem 0 0; text-align:center}

/* ---------- faq ---------- */
.faq-wrap{max-width:860px}
.faq{display:grid; gap:.8rem}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease}
.faq-item[open]{border-color:rgba(209,35,42,.35); box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.2rem 3.4rem 1.2rem 1.5rem; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:""; position:absolute; right:1.5rem; top:1.5rem; width:11px; height:11px;
  border-right:2.2px solid var(--red); border-bottom:2.2px solid var(--red);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); top:1.75rem}
.faq-item summary:hover{color:var(--red)}
.faq-body{padding:0 1.5rem 1.35rem; animation:fade .3s ease}
.faq-body p{margin:0; font-size:.96rem}
@keyframes fade{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ============ CTA ============ */
.cta{position:relative; overflow:hidden; background:var(--navy-900); color:#fff; padding:clamp(3.5rem,6vw,5.5rem) 0; text-align:center}
.cta-bg{position:absolute; inset:0; pointer-events:none}
.cta-inner{position:relative; max-width:42rem; margin-inline:auto}
.cta h2{color:#fff; margin-bottom:.7rem}
.cta p{color:rgba(255,255,255,.7); font-size:1.08rem; margin-bottom:1.9rem}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.62); padding:clamp(3rem,5vw,4rem) 0 1.6rem; border-top:1px solid rgba(255,255,255,.07)}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem}
.footer-brand img{height:58px; width:auto; background:#fff; padding:.5rem .7rem; border-radius:12px; margin-bottom:1rem}
.footer-brand p{font-size:.9rem; max-width:30ch; margin:0}
.footer-col{display:grid; align-content:start; gap:.55rem}
.footer-col h3{color:#fff; font-size:.84rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem}
.footer-col a{font-size:.93rem; transition:color .18s ease, padding-left .18s ease; width:fit-content}
.footer-col a:hover{color:#fff; padding-left:4px}
.footer-areas{font-size:.9rem; line-height:1.9; margin-bottom:1rem}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem;
}
.footer-bottom p{margin:0; font-size:.85rem}
.footer-bottom a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-legal{display:flex; flex-wrap:wrap; gap:1.4rem}
.footer-legal a{font-size:.85rem; text-decoration:none; color:rgba(255,255,255,.62)}
.footer-legal a:hover{color:#fff}

/* ============ TO TOP ============ */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90; width:46px; height:46px; border-radius:50%;
  background:var(--red); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(209,35,42,.42);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--red-600)}
.to-top svg{width:21px; height:21px}

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .65s cubic-bezier(.22,.8,.3,1), transform .65s cubic-bezier(.22,.8,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:2rem 1rem}
  .footer-grid{grid-template-columns:1fr 1fr; gap:2rem}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .about-grid{grid-template-columns:1fr; gap:2.5rem}
  .about-visual{min-height:300px; order:2}
  .chip-1{left:2%}
  .chip-2{right:0}
  .plans{grid-template-columns:1fr; max-width:480px; margin-inline:auto}
  .plan-featured{transform:none}
  .plan-featured:hover{transform:translateY(-5px)}
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:var(--header-h) 0 auto; flex-direction:column; align-items:stretch;
    background:#fff; padding:1rem 20px 1.6rem; gap:.25rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md); transform:translateY(-130%); transition:transform .3s cubic-bezier(.22,.8,.3,1); max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{padding:.85rem 1rem; font-size:1rem}
  .nav .nav-cta{margin:.5rem 0 0; text-align:center; justify-content:center; display:flex}
  .nav-toggle{display:grid}
}
@media (max-width:560px){
  body{font-size:16px}
  .cards,.steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start; text-align:left}
  .about-chip{display:none}
  .brand img{height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

@media print{
  .site-header,.to-top,.ticker,.hero-bg,.cta-bg{display:none}
  body{color:#000}
}

/* ============================================================
   OPTIONAL PHOTOGRAPHY LAYERS
   These sit *behind* the existing gradients. If the image files
   don't exist yet, nothing breaks — you simply see the gradient,
   exactly as the site looks without photography. Drop the files
   into assets/img/ (see scripts/generate-images.sh) and they
   activate automatically.
   ============================================================ */

.hero-photo,
.cta-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.22; mix-blend-mode:luminosity; pointer-events:none;
}
.hero-photo{background-image:url("../img/hero-bg.jpg"); opacity:.55; mix-blend-mode:normal}
.cta-photo{background-image:url("../img/cta-bg.jpg"); opacity:.16}

/* keep the navy readable over any photo */
.hero::after,
.cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,21,48,.58) 0%, rgba(6,21,48,.80) 55%, rgba(6,21,48,.94) 100%);
}
.hero-grid,
.cta-inner{position:relative; z-index:2}
.hero-bg,.cta-bg{z-index:1}



/* ---------- local visibility ---------- */
.visibility{background:var(--surface)}
.vis-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.vis-art{position:relative}
.vis-art::before{
  content:""; position:absolute; inset:-8% -6%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(77,119,255,.14), transparent 68%);
}
.vis-art img{position:relative; z-index:1; width:100%; height:auto}
.vis-copy h2{margin-bottom:.8rem}
@media (max-width:900px){
  .vis-grid{grid-template-columns:1fr; gap:2.5rem}
  .vis-art{order:2; max-width:460px; margin-inline:auto}
}

/* ---------- industries ---------- */
.industries{background:var(--surface-alt)}
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.ind{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ind:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.ind img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.ind:hover img{transform:scale(1.06)}
.ind-body{padding:1.3rem 1.4rem 1.5rem}
.ind-body h3{font-size:1.08rem; margin-bottom:.35rem}
.ind-body p{font-size:.92rem; margin:0; color:var(--muted)}
@media (max-width:1040px){ .ind-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .ind-grid{grid-template-columns:1fr} }

/* ---------- about: photo treatment ---------- */
.about-visual{min-height:0; display:block; padding-bottom:3.5rem}
.about-photo{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); position:relative; z-index:1;
}
.about-visual .about-card{
  position:absolute; left:-1.5rem; bottom:0; z-index:3;
  padding:1.2rem 1.5rem; gap:.5rem; border-radius:var(--radius);
}
.about-visual .about-card img{width:170px}
.about-visual .about-card-tag{font-size:.72rem}
.about-visual .about-chip{top:1.4rem; right:-1.2rem; left:auto; bottom:auto; z-index:3}
@media (max-width:900px){
  .about-visual{padding-bottom:3rem}
  .about-visual .about-card{left:0}
  .about-visual .about-chip{right:0}
}
@media (max-width:560px){
  .about-visual .about-card{position:static; margin-top:1rem; left:auto}
  .about-visual{padding-bottom:0}
}

/* ---------- "don't see your industry" card ---------- */
.ind-ask{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  border-color:transparent; display:grid; align-items:center;
}
.ind-ask .ind-body{padding:1.9rem 1.6rem}
.ind-ask h3{color:#fff; margin-bottom:.5rem}
.ind-ask p{color:rgba(255,255,255,.68); margin-bottom:1.2rem}
.ind-ask:hover{transform:translateY(-6px)}


/* active nav item */
.nav a[aria-current="page"]{background:var(--surface-alt); color:var(--red)}
.nav .nav-cta[aria-current="page"]{background:var(--red); color:#fff}

/* ---------- service detail blocks ---------- */
.svc-outcome{
  background:var(--surface-alt); border-left:3px solid var(--red);
  padding:1rem 1.2rem; border-radius:0 12px 12px 0; font-size:.96rem; margin:1.5rem 0 1.8rem;
}
.section-alt .svc-outcome{background:#fff}
.svc-detail .check-list{margin:1.3rem 0 0}

/* ---------- contact page ---------- */
.contact-section{padding-top:clamp(3rem,5vw,4.5rem)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.contact-areas-h{margin-top:2rem; font-size:.84rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.contact-areas{color:var(--body); margin:0}
/* the lead form is navy-on-navy by default; on the light contact page give it a dark shell */
.contact-form-wrap .form-card{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  border-color:transparent; backdrop-filter:none;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- industries: compact "we also work with" tier ---------- */
.ind-more-h{
  margin:2.6rem 0 1.1rem; font-size:.84rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); text-align:center;
}
.ind-compact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.ind-compact{
  display:flex; align-items:flex-start; gap:.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.2rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ind-compact:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
.ind-compact svg{
  flex:0 0 auto; width:34px; height:34px; padding:7px; border-radius:10px;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:#fff;
}
.ind-compact h4{
  font-family:var(--font-display); font-weight:700; font-size:.97rem;
  color:var(--ink); margin:0 0 .15rem; line-height:1.3;
}
.ind-compact p{font-size:.85rem; color:var(--muted); margin:0}

/* the ask card spans the full width below both tiers */
.industries .ind-ask{margin-top:1.4rem}

/* ---------- home preview: "see all" tile ---------- */
.ind-seemore{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  border-color:transparent; display:grid; align-items:center;
}
.ind-seemore .ind-body{padding:1.9rem 1.6rem}
.ind-seemore h3{color:#fff; margin-bottom:.5rem}
.ind-seemore p{color:rgba(255,255,255,.68); margin-bottom:1.2rem}
.ind-seemore:hover{transform:translateY(-6px)}

@media (max-width:1040px){ .ind-compact-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .ind-compact-grid{grid-template-columns:1fr} }

/* ---------- home preview: "see all services" card ---------- */
.card-seemore{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  border-color:transparent; display:flex; flex-direction:column; align-items:flex-start;
}
.card-seemore h3{color:#fff}
.card-seemore p{color:rgba(255,255,255,.68)}
.card-seemore .card-icon{background:rgba(255,255,255,.12); box-shadow:none}
.card-seemore::before{display:none}
.card-seemore:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card-seemore .btn{margin-top:auto}

/* ---------- section footer link ---------- */
.section-foot{text-align:center; margin:2.4rem 0 0}
.link-arrow{
  font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--red);
  display:inline-flex; align-items:center; gap:.45rem; border-bottom:1.5px solid transparent;
  transition:border-color .2s ease;
}
.link-arrow:hover{border-bottom-color:var(--red)}
.link-arrow span{transition:transform .2s ease}
.link-arrow:hover span{transform:translateX(4px)}

/* ---------- compact pricing (home) ---------- */
.plans-compact .plan{padding:1.9rem 1.6rem}
.plans-compact .price{font-size:2.5rem; margin-bottom:1.2rem}
.plans-compact .plan-list{margin-bottom:1.5rem}

/* ---------- FAQ split layout (home) ---------- */
.faq-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.faq-aside{position:sticky; top:calc(var(--header-h) + 2rem)}
.faq-aside h2{margin-bottom:.7rem}
.faq-aside p{color:var(--muted); margin-bottom:1.6rem}
@media (max-width:900px){
  .faq-split{grid-template-columns:1fr}
  .faq-aside{position:static}
}

/* ---------- blog cards ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.post:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.post-media{display:block; overflow:hidden}
.post-media img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.post:hover .post-media img{transform:scale(1.06)}
.post-body{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.post-meta{
  font-family:var(--font-display); font-weight:600; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .5rem;
}
.post h3{font-size:1.06rem; line-height:1.35; margin-bottom:1rem}
.post h3 a{transition:color .18s ease}
.post:hover h3 a{color:var(--red)}
.post .card-link{margin-top:auto}
@media (max-width:900px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .posts{grid-template-columns:1fr} }

/* ---------- service detail: alternating two-column ---------- */
.svc-block{padding:clamp(3rem,5.5vw,4.75rem) 0}
.svc-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,4.5vw,4rem); align-items:center;
}
.svc-flip .svc-media{order:2}
.svc-media{position:relative}
.svc-media::before{
  content:""; position:absolute; inset:-9% -7%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(77,119,255,.15), transparent 68%);
}
.svc-media img{
  position:relative; z-index:1; width:100%; height:auto;
  transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.svc-block:hover .svc-media img{transform:translateY(-6px) scale(1.015)}
.svc-text h2{font-size:clamp(1.55rem,2.7vw,2.1rem); margin-bottom:.7rem}
.svc-text > p:first-of-type{color:var(--body)}
.svc-text .check-list{margin:1.3rem 0 0}
.svc-outcome{
  background:var(--surface-alt); border-left:3px solid var(--red);
  padding:1rem 1.2rem; border-radius:0 12px 12px 0; font-size:.95rem; margin:1.5rem 0 1.7rem;
}
.section-alt .svc-outcome{background:#fff}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr; gap:2rem}
  .svc-flip .svc-media{order:0}
  .svc-media{max-width:460px; margin-inline:auto}
}

.svc-media-note{
  position:relative; z-index:1; text-align:center; margin:.7rem 0 0;
  font-size:.74rem; letter-spacing:.04em; color:var(--muted); opacity:.75;
}

/* ============================================================
   INTERIOR PAGE BANNER
   Layered: duotone photo → drifting aurora → mesh grid → content,
   with a word-by-word title reveal and an angled base.
   ============================================================ */
.page-banner{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--navy-900); color:#fff;
  padding:clamp(3.2rem,6vw,5.25rem) 0 clamp(4.5rem,8vw,7rem);
}

/* --- layer 1: the photo, pushed to a navy duotone --- */
.pb-photo{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.1); opacity:.26;
  transform:scale(1.06); animation:pbDrift 26s ease-in-out infinite alternate;
}
.page-banner::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 15% 20%, rgba(29,78,216,.55), transparent 60%),
    linear-gradient(180deg, rgba(6,21,48,.82) 0%, rgba(6,21,48,.90) 55%, rgba(6,21,48,.99) 100%);
}

/* --- layer 2: drifting aurora light --- */
.pb-aurora{position:absolute; inset:0; z-index:-2; pointer-events:none}
.pb-aurora span{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.5;
  will-change:transform;
}
.pb-aurora span:nth-child(1){
  width:460px; height:460px; background:#2563eb; top:-170px; left:-90px;
  animation:pbFloat1 18s ease-in-out infinite alternate;
}
.pb-aurora span:nth-child(2){
  width:380px; height:380px; background:var(--red); bottom:-180px; right:4%;
  opacity:.38; animation:pbFloat2 22s ease-in-out infinite alternate;
}
.pb-aurora span:nth-child(3){
  width:300px; height:300px; background:#7c3aed; top:20%; right:28%;
  opacity:.26; animation:pbFloat3 26s ease-in-out infinite alternate;
}

/* --- layer 3: mesh grid --- */
.pb-mesh{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 35%, #000 25%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 35%, #000 25%, transparent 100%);
}

/* --- content --- */
.pb-inner{position:relative; z-index:2; max-width:46rem}
.has-stack .pb-inner{max-width:38rem}

.crumbs{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
  font-family:var(--font-display); font-weight:600; font-size:.83rem;
  color:rgba(255,255,255,.55);
  opacity:0; animation:pbUp .6s .05s cubic-bezier(.22,.8,.3,1) forwards;
}
.crumbs a{color:rgba(255,255,255,.78); border-bottom:1px solid transparent; transition:border-color .2s, color .2s}
.crumbs a:hover{color:#fff; border-bottom-color:var(--red)}
.crumb-sep{color:rgba(255,255,255,.3)}

.page-banner .eyebrow{opacity:0; animation:pbUp .6s .14s cubic-bezier(.22,.8,.3,1) forwards}

.pb-title{
  color:#fff; font-size:clamp(2.15rem,4.8vw,3.5rem);
  line-height:1.08; margin-bottom:.85rem;
}
.pb-w{
  display:inline-block; opacity:0;
  animation:pbWord .7s cubic-bezier(.22,.8,.3,1) forwards;
  animation-delay:calc(220ms + var(--d));
}
.page-banner .lede{
  margin-bottom:0; opacity:0;
  animation:pbUp .7s .52s cubic-bezier(.22,.8,.3,1) forwards;
}

.pb-chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem}
.pb-chips li{
  padding:.46rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(8px);
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:rgba(255,255,255,.88);
  opacity:0; animation:pbUp .55s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:var(--d);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.pb-chips li:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.3); transform:translateY(-2px)}

/* --- floating photo stack --- */
.pb-stack{
  position:absolute; z-index:1; right:max(2vw, calc((100vw - var(--container)) / 2 - 40px));
  top:50%; translate:0 -50%; width:min(34vw, 420px); height:360px; pointer-events:none;
}
.pb-stack img{
  position:absolute; width:62%; border-radius:16px; object-fit:cover;
  box-shadow:0 26px 60px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14);
  opacity:0; animation:pbCard .9s cubic-bezier(.22,.8,.3,1) forwards;
}
.pb-s1{top:2%;  left:0;   rotate:-7deg; animation-delay:.45s}
.pb-s2{top:28%; left:30%; rotate: 3deg; animation-delay:.60s; z-index:2}
.pb-s3{top:56%; left:6%;  rotate:-3deg; animation-delay:.75s}
.pb-stack img:nth-child(2){box-shadow:0 30px 70px rgba(0,0,0,.55)}

/* --- angled base --- */
.pb-base{
  position:absolute; left:0; right:0; bottom:-1px; height:62px; z-index:3;
  background:var(--surface); clip-path:polygon(0 100%, 100% 32%, 100% 100%);
}
.page-banner + .section-alt .pb-base,
.page-banner:has(+ .section-alt) .pb-base{background:var(--surface-alt)}

/* active nav item */
.nav a[aria-current="page"]{background:var(--surface-alt); color:var(--red)}
.nav .nav-cta[aria-current="page"]{background:var(--red); color:#fff}

/* --- keyframes --- */
@keyframes pbWord{from{opacity:0; transform:translateY(26px) rotate(1.5deg)} to{opacity:1; transform:none}}
@keyframes pbUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes pbCard{from{opacity:0; transform:translateY(34px) scale(.94)} to{opacity:1; transform:none}}
@keyframes pbDrift{from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}
@keyframes pbFloat1{from{transform:translate3d(0,0,0)} to{transform:translate3d(70px,50px,0)}}
@keyframes pbFloat2{from{transform:translate3d(0,0,0)} to{transform:translate3d(-60px,-40px,0)}}
@keyframes pbFloat3{from{transform:translate3d(0,0,0)} to{transform:translate3d(40px,-55px,0)}}

@media (max-width:1100px){
  .pb-stack{width:30vw; height:300px; opacity:.5}
  .has-stack .pb-inner{max-width:34rem}
}
@media (max-width:880px){
  .pb-stack{display:none}
  .has-stack .pb-inner{max-width:46rem}
  .pb-base{height:40px}
}

@media (prefers-reduced-motion:reduce){
  .pb-photo,.pb-aurora span{animation:none}
  .pb-w,.crumbs,.page-banner .eyebrow,.page-banner .lede,.pb-chips li,.pb-stack img{
    opacity:1 !important; animation:none !important; transform:none !important;
  }
}

/* ---------- banner: grid layout so the photo stack never overlaps text ---------- */
.pb-wrap{position:relative; z-index:2}
.has-stack .pb-wrap{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.has-stack .pb-inner{max-width:none}
.page-banner .pb-stack{
  position:relative; right:auto; top:auto; translate:none;
  width:100%; height:clamp(280px,26vw,350px);
}
@media (max-width:1000px){
  .has-stack .pb-wrap{grid-template-columns:1fr}
  .page-banner .pb-stack{display:none}
}

/* the angled base must match whatever section sits beneath it */
.page-banner:has(+ .section-alt) .pb-base,
.page-banner:has(+ .industries) .pb-base{background:var(--surface-alt)}