/* ============================================================
   SEO Thunder Bay
   Palette drawn from the brand mark: navy and maple red, with amethyst.
   ============================================================ */

/* ============================================================
   Fonts, served from the theme instead of Google Fonts: one less
   connection and no render-blocking third-party stylesheet.
   Both are variable fonts, so one file covers every weight used.
   ============================================================ */
@font-face{
  font-family:"Red Hat Display"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url("../fonts/red-hat-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --navy-900:#06183a;
  --navy-800:#0a2756;
  --navy-700:#0d3374;
  --navy-600:#15448f;
  --red:#d81f26;
  --red-600:#b9161d;
  --red-300:#ff5b61;
  --accent:#8e5bd0;
  --accent-300:#d3b5ff;

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

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

  --font-display:"Red Hat Display", 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(216,31,38,.3)}
.btn-primary:hover{background:var(--red-600); transform:translateY(-2px); box-shadow:0 14px 30px rgba(216,31,38,.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(--accent); box-shadow:0 0 0 4px rgba(142,91,208,.22)}

/* ============ 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(216,31,38,.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(2.9rem,5.2vw,4.75rem) 0 clamp(3.25rem,5.6vw,5.25rem)}
.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-grid>*{min-width:0}
/* the highlighted phrase may wrap; the underline is drawn under every line */
.hero h1 em{
  font-style:normal; color:var(--accent-300);
  background:linear-gradient(rgba(216,31,38,.55),rgba(216,31,38,.55)) 0 92%/100% .14em no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.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(216,31,38,.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(216,31,38,.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(2.75rem,4.6vw,4.5rem) 0}
.section-alt{background:var(--surface-alt)}
.section-head{max-width:46rem; margin:0 auto clamp(1.9rem,3.1vw,2.7rem); 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(--accent),var(--accent-300)); 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(216,31,38,.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(216,31,38,.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(216,31,38,.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(216,31,38,.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(2.75rem,4.6vw,4.4rem) 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; width:fit-content}
.footer-col a:not(.btn){transition:color .18s ease, padding-left .18s ease}
.footer-col a:not(.btn):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(216,31,38,.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}

/* Visually hidden, still read by screen readers and parsed by crawlers.
   Used to keep the h1 -> h2 -> h3 order intact on pages where the visible
   section heading is suppressed because the page banner already says it. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ 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,24,58,.58) 0%, rgba(6,24,58,.80) 55%, rgba(6,24,58,.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(2.3rem,4.1vw,3.85rem) 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}
/* keep the media column the same width on flipped rows, so the illustration
   does not change size as the layout alternates down the page */
.svc-flip .svc-grid{grid-template-columns:1fr 1.05fr}
.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,.svc-flip .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(2.5rem,4.2vw,4rem) 0 clamp(3.25rem,5.4vw,5rem);
}

/* --- 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,24,58,.82) 0%, rgba(6,24,58,.90) 55%, rgba(6,24,58,.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 --- */
/* One clean hero visual.
   This was three overlapping rotated cards, which read as clutter, sat at
   low opacity and competed with the headline. Current practice for a B2B
   interior hero is a single, high-quality image with strong text contrast,
   so the banner now shows one straight, properly sized visual. */
.pb-stack{
  position:relative; z-index:1; width:100%; pointer-events:none;
}
.pb-stack img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:20px; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(0,0,0,.5);
  opacity:0; animation:pbCard .9s cubic-bezier(.22,.8,.3,1) .35s forwards;
}

/* --- 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){
  .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%; max-width:520px; height:auto; justify-self:end;
}
@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)}

/* ============================================================
   LEGAL PAGES — sticky contents + typeset prose
   ============================================================ */
.legal{padding-top:clamp(2.6rem,4.5vw,3.75rem)}
.legal-grid{
  display:grid; grid-template-columns:270px 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}

/* --- contents sidebar --- */
.legal-toc{position:sticky; top:calc(var(--header-h) + 1.5rem)}
.legal-updated{
  display:flex; flex-direction:column; gap:.15rem; margin:0 0 1.4rem;
  padding:.85rem 1.1rem; border-radius:12px;
  background:var(--surface-alt); border-left:3px solid var(--red);
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.legal-updated strong{
  font-family:var(--font-display); font-size:.95rem; letter-spacing:0;
  text-transform:none; color:var(--ink);
}
.legal-toc-h{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.8rem;
}
.legal-toc ol{counter-reset:toc; display:grid; gap:.1rem}
.legal-toc li{counter-increment:toc}
.legal-toc a{
  display:block; padding:.42rem .7rem .42rem 1.9rem; position:relative;
  border-radius:8px; font-size:.88rem; color:var(--body); line-height:1.4;
  transition:background .18s ease, color .18s ease;
}
.legal-toc a::before{
  content:counter(toc); position:absolute; left:.7rem; top:.42rem;
  font-family:var(--font-display); font-weight:700; font-size:.72rem; color:var(--muted);
}
.legal-toc a:hover{background:var(--surface-alt); color:var(--red)}
.legal-toc a:hover::before{color:var(--red)}

/* --- prose --- */
.legal-body{max-width:46rem}
.legal-intro{
  font-size:1.07rem; color:var(--ink); line-height:1.7;
  padding-bottom:1.6rem; margin-bottom:.5rem; border-bottom:1px solid var(--line);
}
.legal-section{scroll-margin-top:calc(var(--header-h) + 1.5rem); padding:1.9rem 0 0}
.legal-section h2{
  font-size:1.22rem; margin-bottom:.7rem; padding-bottom:.55rem;
  border-bottom:2px solid var(--surface-alt);
}
.legal-section h3{
  font-size:1rem; margin:1.4rem 0 .45rem; color:var(--navy-700);
}
.legal-section p{font-size:.96rem; line-height:1.72}
.legal-section a{color:var(--red); border-bottom:1px solid rgba(216,31,38,.35)}
.legal-section a:hover{border-bottom-color:var(--red)}
.legal-list{display:grid; gap:.5rem; margin:.3rem 0 1.1rem}
.legal-list li{position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.6}
.legal-list li::before{
  content:""; position:absolute; left:.2rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--red); opacity:.55;
}

/* --- contact block --- */
.legal-contact{
  margin-top:2.8rem; padding:1.8rem 1.9rem; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); color:rgba(255,255,255,.72);
}
.legal-contact h2{color:#fff; font-size:1.1rem; margin-bottom:.7rem}
.legal-contact p{margin:0 0 .3rem; font-size:.94rem}
.legal-contact a{color:#fff; border-bottom:1px solid rgba(255,255,255,.4)}
.legal-contact a:hover{border-bottom-color:#fff}

@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr; gap:2rem}
  .legal-toc{position:static}
  .legal-toc ol{
    display:flex; flex-wrap:wrap; gap:.4rem;
    padding:1rem; background:var(--surface-alt); border-radius:14px;
  }
  .legal-toc a{padding:.35rem .75rem; background:#fff; border:1px solid var(--line); font-size:.82rem}
  .legal-toc a::before{display:none}
}

/* ============================================================
   BLOG — archive, lead card, single post
   ============================================================ */

/* ---------- category filter chips ---------- */
.blog-filters{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.4rem}
.blog-filters a{
  padding:.5rem 1.1rem; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-display); font-weight:600; font-size:.87rem; color:var(--body);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.blog-filters a:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px)}
.blog-filters a.is-active{background:var(--navy-900); border-color:transparent; color:#fff}

/* ---------- lead (first) post ---------- */
.post-lead{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  margin-bottom:1.6rem; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.post-lead:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.post-lead .post-media{height:100%}
.post-lead .post-media img{height:100%; min-height:300px; aspect-ratio:auto; object-fit:cover}
.post-lead .post-body{padding:clamp(1.6rem,3vw,2.4rem); justify-content:center}
.post-lead h3{font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.25}
.post-excerpt{font-size:.98rem; color:var(--muted); margin:0 0 1.1rem}
@media (max-width:860px){
  .post-lead{grid-template-columns:1fr}
  .post-lead .post-media img{min-height:0; aspect-ratio:16/9}
}

/* ---------- post meta row on cards ---------- */
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.post-cat{
  background:rgba(216,31,38,.1); color:var(--red); padding:.2rem .6rem; border-radius:999px;
  font-size:.7rem; letter-spacing:.08em;
}
.post-rt{color:var(--muted)}
.post-rt::before{content:"·"; margin-right:.5rem; color:var(--line)}

/* ---------- pagination ---------- */
.pagination{margin-top:2.8rem}
.pagination .nav-links{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; align-items:center}
.pagination .page-numbers{
  min-width:42px; height:42px; padding:0 .8rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--body);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.pagination .page-numbers:hover{border-color:var(--red); color:var(--red)}
.pagination .page-numbers.current{background:var(--navy-900); border-color:transparent; color:#fff}
.pagination .page-numbers.dots{border:none; background:none}

/* ---------- empty state ---------- */
.blog-empty{text-align:center; max-width:34rem; margin:0 auto; padding:3rem 0}
.blog-empty h2{margin-bottom:.6rem}
.blog-empty p{color:var(--muted); margin-bottom:1.6rem}
.blog-empty form{display:flex; gap:.5rem; justify-content:center; margin-bottom:1.6rem}
.blog-empty input[type="search"]{
  padding:.8rem 1.1rem; border-radius:999px; border:1.5px solid var(--line);
  font:inherit; font-size:.95rem; min-width:min(100%,280px);
}
.blog-empty input[type="search"]:focus{outline:none; border-color:var(--red)}
.blog-empty button{
  padding:.8rem 1.4rem; border-radius:999px; border:none; cursor:pointer;
  background:var(--navy-900); color:#fff; font-family:var(--font-display); font-weight:700;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.post-banner .pb-photo{opacity:.20}
.post-meta-row{
  display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.4rem;
  font-family:var(--font-display); font-weight:600; font-size:.88rem; color:rgba(255,255,255,.72);
  opacity:0; animation:pbUp .7s .52s cubic-bezier(.22,.8,.3,1) forwards;
}
.post-meta-row li{position:relative}
.post-meta-row li + li::before{
  content:""; position:absolute; left:-.75rem; top:50%; width:4px; height:4px;
  border-radius:50%; background:rgba(255,255,255,.35); transform:translateY(-50%);
}

.single-wrap{max-width:46rem}
.single-hero{
  margin:-4.5rem 0 2.4rem; position:relative; z-index:4;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.single-hero img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}

/* ---------- article prose ---------- */
.prose{font-size:1.04rem; line-height:1.78; color:var(--body)}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-size:1.5rem; margin:2.4rem 0 .2rem; line-height:1.25}
.prose h3{font-size:1.18rem; margin:1.9rem 0 .2rem}
.prose h2 + p, .prose h3 + p{margin-top:.6rem}
.prose ul,.prose ol{display:grid; gap:.55rem; padding-left:0}
.prose ul li{position:relative; padding-left:1.6rem}
.prose ul li::before{
  content:""; position:absolute; left:.25rem; top:.68em; width:6px; height:6px;
  border-radius:50%; background:var(--red); opacity:.6;
}
.prose ol{counter-reset:p}
.prose ol li{position:relative; padding-left:2rem; counter-increment:p}
.prose ol li::before{
  content:counter(p); position:absolute; left:0; top:.08em;
  font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--red);
}
.prose a{color:var(--red); border-bottom:1px solid rgba(216,31,38,.35)}
.prose a:hover{border-bottom-color:var(--red)}
.prose img{border-radius:14px; box-shadow:var(--shadow-sm)}
.prose blockquote{
  margin:1.8rem 0; padding:1.1rem 1.5rem; border-left:3px solid var(--red);
  background:var(--surface-alt); border-radius:0 14px 14px 0;
  font-size:1.08rem; color:var(--ink);
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{
  background:var(--surface-alt); padding:.15em .45em; border-radius:6px;
  font-size:.92em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.prose hr{border:none; border-top:1px solid var(--line); margin:2.4rem 0}

/* ---------- tags ---------- */
.post-tags{display:flex; flex-wrap:wrap; gap:.45rem; margin:2.2rem 0 0}
.post-tags li a{
  display:inline-block; padding:.35rem .85rem; border-radius:999px;
  background:var(--surface-alt); font-size:.82rem; color:var(--body);
  transition:background .18s ease, color .18s ease;
}
.post-tags li a:hover{background:var(--navy-900); color:#fff}

/* ---------- in-article CTA ---------- */
.post-cta{
  margin:2.8rem 0 0; padding:2rem 2.1rem; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); color:rgba(255,255,255,.72);
}
.post-cta h2{color:#fff; font-size:1.25rem; margin-bottom:.5rem}
.post-cta p{margin-bottom:1.3rem; font-size:.96rem}

/* ---------- prev / next ---------- */
.post-nav{margin-top:2.4rem}
.post-nav .nav-links{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.post-nav .nav-next{text-align:right}
.post-nav a{
  display:block; padding:1.1rem 1.3rem; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.post-nav a:hover{border-color:transparent; transform:translateY(-3px); box-shadow:var(--shadow-md)}
.pn-dir{
  display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); font-family:var(--font-display); font-weight:700; margin-bottom:.3rem;
}
.pn-title{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:.98rem; color:var(--ink); line-height:1.35;
}
@media (max-width:620px){
  .post-nav .nav-links{grid-template-columns:1fr}
  .post-nav .nav-next{text-align:left}
  .single-hero{margin-top:-2.5rem}
}

/* ============================================================
   WORDPRESS INTEGRATION
   wp_nav_menu wraps items in <li>; the static markup used bare
   <a>. display:contents keeps the existing .nav a rules working.
   ============================================================ */
.nav li,
.footer-col li,
.footer-legal li{
  list-style:none !important; margin:0; padding:0; display:block;
}
.nav li::marker,
.footer-col li::marker,
.footer-legal li::marker{content:"" !important}
.nav ul,.footer-col ul,.footer-legal ul{list-style:none; margin:0; padding:0; display:contents}
/* the <a> already carries the pill styling */
.nav li > a{display:inline-block}
.footer-col li > a,.footer-legal li > a{display:block}

/* custom logo */
.brand .custom-logo-link{display:block}
.brand img,.brand .custom-logo{width:auto; height:52px; max-width:none}

/* ---------- WPForms inside the dark form card ----------
   WPForms' own CSS is disabled (Settings > disable-css = 3), so these
   rules are the only styling. Selectors are doubled on .form-card to
   outrank anything the plugin still injects inline. */
.form-card .wpforms-container,
.form-card div.wpforms-container-full{margin:0; padding:0}
.form-card .wpforms-container form,
.form-card .wpforms-form{display:block}
/* the fields live in this wrapper, so the grid belongs here */
.form-card .wpforms-field-container{display:block}

.form-card .wpforms-form .wpforms-field{padding:0 0 .95rem; margin:0; border:0}
.form-card .wpforms-form .wpforms-field-label,
.form-card .wpforms-form label.wpforms-field-label{
  display:block; margin:0 0 .35rem; padding:0;
  font-family:var(--font-display); font-weight:600; font-size:.83rem;
  color:rgba(255,255,255,.82); line-height:1.3;
}
.form-card .wpforms-form .wpforms-field-sublabel{
  font-size:.74rem; color:rgba(255,255,255,.45); margin-top:.25rem;
}
.form-card .wpforms-form .wpforms-required-label{color:var(--red-300); border:0}

.form-card .wpforms-form input[type="text"],
.form-card .wpforms-form input[type="email"],
.form-card .wpforms-form input[type="tel"],
.form-card .wpforms-form input[type="url"],
.form-card .wpforms-form input[type="number"],
.form-card .wpforms-form select,
.form-card .wpforms-form textarea{
  width:100%; max-width:100%; display:block; margin:0;
  padding:.82rem 1rem; border-radius:12px;
  font-family:var(--font-body); font-size:.95rem; line-height:1.4;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18);
  color:#fff; box-shadow:none; -webkit-appearance:none; appearance:none;
  transition:border-color .18s ease, background .18s ease;
}
.form-card .wpforms-form textarea{min-height:120px; resize:vertical}
.form-card .wpforms-form input::placeholder,
.form-card .wpforms-form textarea::placeholder{color:rgba(255,255,255,.38); opacity:1}
.form-card .wpforms-form input:focus,
.form-card .wpforms-form textarea:focus,
.form-card .wpforms-form select:focus{
  outline:none; border-color:var(--red-300); background:rgba(255,255,255,.13);
}
/* the Name field renders as a nested container in classic markup */
.form-card .wpforms-form .wpforms-field-name input{width:100%}

.form-card .wpforms-form .wpforms-field-description{color:rgba(255,255,255,.5); font-size:.8rem; margin-top:.3rem}
.form-card .wpforms-form label.wpforms-error,
.form-card .wpforms-form em.wpforms-error{color:#ffb4b8; font-size:.78rem; display:block; margin-top:.3rem}
.form-card .wpforms-form input.wpforms-error,
.form-card .wpforms-form textarea.wpforms-error{border-color:var(--red-300); background:rgba(216,31,38,.12)}

.form-card .wpforms-form .wpforms-submit-container{padding:.2rem 0 0; margin:0}
.form-card .wpforms-form button[type="submit"],
.form-card .wpforms-form .wpforms-submit{
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  padding:.92rem 1.6rem; margin:0; border:none; border-radius:999px; cursor:pointer;
  background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.97rem;
  box-shadow:0 8px 22px rgba(216,31,38,.3);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.form-card .wpforms-form button[type="submit"]:hover,
.form-card .wpforms-form .wpforms-submit:hover{
  background:var(--red-600); transform:translateY(-2px); box-shadow:0 14px 30px rgba(216,31,38,.38);
}
.form-card .wpforms-form .wpforms-submit-spinner{margin-left:.5rem}

.form-card .wpforms-confirmation-container-full,
.form-card .wpforms-confirmation-container{
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35);
  color:#d9fbe7; border-radius:12px; padding:1rem 1.2rem; margin:0;
}
.form-card .wpforms-confirmation-container p,
.form-card .wpforms-confirmation-container-full p{margin:0; color:#d9fbe7}

/* honeypot / antispam must stay hidden */
.form-card .wpforms-form .wpforms-field-hp,
.form-card .wpforms-form .wpforms-field-hidden,
.form-card .wpforms-field-container > .wpforms-field:first-child:has(input[name^="wpforms[hp"]){display:none !important}

/* Phone + Website side by side, as in the original design */
@media (min-width:520px){
  .form-card .wpforms-field-container{
    display:grid; grid-template-columns:1fr 1fr; column-gap:.75rem;
  }
  .form-card .wpforms-field-container > .wpforms-field{grid-column:1 / -1}
  .form-card .wpforms-field-container > .sn-half-left{grid-column:1 / 2}
  .form-card .wpforms-field-container > .sn-half-right{grid-column:2 / 3}
}
}

/* ============================================================
   HEADER REFINEMENT + MOBILE TOGGLE FIX
   The burger bars were grid rows, so the open-state rotations
   never met at a common centre and drew a ">" instead of an X.
   Absolute-centring all three makes the cross exact.
   ============================================================ */

/* --- slightly larger, better-balanced logo --- */
:root{--header-h:92px}
.brand img,.brand .custom-logo{height:60px; width:auto; max-width:none; display:block}
.header-inner{gap:1.25rem}
.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 24px rgba(6,24,58,.08);
  border-bottom-color:var(--line);
}
.site-header{position:sticky}

/* --- nav links: a touch more presence --- */
.nav a{font-size:.95rem; padding:.6rem .9rem}
.nav a:not(.nav-cta){position:relative}
.nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.3rem; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.22,.8,.3,1);
}
.nav a:not(.nav-cta):hover::after,
.nav a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1)}
.nav a[aria-current="page"]:not(.nav-cta){background:transparent; color:var(--red)}
.nav .nav-cta{padding:.72rem 1.4rem; margin-left:.65rem}

/* --- the burger, rebuilt --- */
.nav-toggle{
  position:relative; display:none; width:48px; height:48px; padding:0;
  border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-toggle:hover{border-color:var(--navy-700); box-shadow:var(--shadow-sm)}
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:21px; height:2.5px; margin-left:-10.5px; margin-top:-1.25px;
  background:var(--navy-900); border-radius:3px;
  transition:transform .3s cubic-bezier(.22,.8,.3,1), opacity .18s ease, background .2s ease;
}
.nav-toggle span:nth-child(1){transform:translateY(-6.5px)}
.nav-toggle span:nth-child(2){transform:translateY(0)}
.nav-toggle span:nth-child(3){transform:translateY(6.5px)}
.nav-toggle[aria-expanded="true"]{border-color:var(--red)}
.nav-toggle[aria-expanded="true"] span{background:var(--red)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0; transform:scaleX(0)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* --- mobile panel --- */
@media (max-width:820px){
  .brand img,.brand .custom-logo{height:50px}
  .nav-toggle{display:block}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto; z-index:99;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:.75rem 20px 1.5rem;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(6,24,58,.14);
    transform:translateY(-130%);
    transition:transform .34s cubic-bezier(.22,.8,.3,1);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{
    padding:.95rem .6rem; font-size:1.02rem; border-radius:10px;
    border-bottom:1px solid var(--line);
  }
  .nav li:last-of-type a{border-bottom:none}
  .nav a:not(.nav-cta)::after{display:none}
  .nav a[aria-current="page"]:not(.nav-cta){background:var(--surface-alt); color:var(--red)}
  .nav .nav-cta{
    margin:.9rem 0 0; justify-content:center; display:flex;
    padding:.95rem 1.4rem; border-bottom:none;
  }
}
@media (max-width:560px){
  :root{--header-h:84px}
  .brand img,.brand .custom-logo{height:46px}
}

/* mobile menu links must fill the row so dividers span full width */
@media (max-width:820px){
  .nav li{display:block; width:100%}
  .nav li > a{display:block; width:100%}
  .nav .nav-cta{width:100%}
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.thanks{padding:clamp(4rem,9vw,7rem) 0}
.thanks-inner{max-width:44rem; margin-inline:auto; text-align:center}
.thanks-mark{
  width:86px; height:86px; margin:0 auto 1.6rem; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg,#16a34a,#15803d);
  box-shadow:0 14px 34px rgba(22,163,74,.32);
  animation:thanksPop .55s cubic-bezier(.22,1.2,.4,1) both;
}
.thanks-mark svg{width:40px; height:40px; animation:thanksTick .5s .28s both}
@keyframes thanksPop{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}}
@keyframes thanksTick{from{stroke-dasharray:28; stroke-dashoffset:28} to{stroke-dasharray:28; stroke-dashoffset:0}}

.thanks h1{font-size:clamp(2rem,4vw,2.9rem); margin-bottom:.7rem}
.thanks .eyebrow{justify-content:center}
.lede-dark{font-size:1.08rem; color:var(--body); max-width:38rem; margin:0 auto 2.4rem; line-height:1.72}
.thanks-body{color:var(--body); margin-bottom:2.2rem}

.thanks-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  text-align:left; margin:0 0 2.4rem;
}
.thanks-steps li{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--surface-alt); border-radius:var(--radius); padding:1.2rem 1.25rem;
}
.ts-num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--navy-900); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:.85rem;
}
.thanks-steps h3{font-size:.99rem; margin:0 0 .2rem}
.thanks-steps p{font-size:.89rem; color:var(--muted); margin:0; line-height:1.55}

.thanks-actions{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}
@media (max-width:760px){
  .thanks-steps{grid-template-columns:1fr}
}

/* ============================================================
   INDUSTRY LANDING PAGES
   ============================================================ */
.ind-intro{max-width:46rem; margin-inline:auto; text-align:center}
.ind-intro h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:1.1rem}
.ind-intro p{font-size:1.05rem; line-height:1.75}

/* ---------- keyword table ---------- */
.kw-table{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.kw-head,.kw-row{display:grid; grid-template-columns:1.1fr .45fr 1.6fr; gap:1rem; align-items:center}
.kw-head{
  padding:.9rem 1.5rem; background:var(--navy-900); color:rgba(255,255,255,.72);
  font-family:var(--font-display); font-weight:700; font-size:.76rem;
  letter-spacing:.11em; text-transform:uppercase;
}
.kw-row{padding:1rem 1.5rem; border-top:1px solid var(--line); transition:background .18s ease}
.kw-row:hover{background:var(--surface-alt)}
.kw-term{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem;
  color:var(--ink); font-weight:600;
}
.kw-term::before{content:"\201C"; color:var(--muted)}
.kw-term::after{content:"\201D"; color:var(--muted)}
.kw-intent{
  justify-self:start; padding:.24rem .7rem; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.kw-urgent{background:rgba(216,31,38,.12); color:var(--red)}
.kw-high{background:rgba(22,163,74,.12); color:#16a34a}
.kw-medium{background:rgba(245,165,36,.16); color:#b2780f}
.kw-research{background:rgba(142,91,208,.14); color:#55298f}
.kw-low{background:rgba(107,122,143,.14); color:var(--muted)}
.kw-note{font-size:.92rem; color:var(--body)}

.kw-insight{
  margin-top:1.6rem; padding:1.6rem 1.8rem; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); color:rgba(255,255,255,.78);
}
.kw-insight h3{color:#fff; font-size:1.12rem; margin-bottom:.5rem}
.kw-insight p{margin:0; font-size:.99rem; line-height:1.7}
.kw-insight strong{color:#fff}

@media (max-width:860px){
  .kw-head{display:none}
  .kw-row{grid-template-columns:1fr; gap:.4rem; padding:1.1rem 1.25rem}
  .kw-term{font-size:.95rem}
}

/* ---------- numbered work cards ---------- */
.card-step{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:.84rem; letter-spacing:.08em; color:var(--red); margin-bottom:.7rem;
}
.card .card-step + h3{margin-bottom:.5rem}

/* ---------- compliance block ---------- */
.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.trust-copy h2{font-size:clamp(1.6rem,2.8vw,2.1rem); margin-bottom:.7rem}
.trust-copy p{margin-bottom:1.6rem}
.trust-list{display:grid; gap:.8rem}
.trust-list li{
  position:relative; padding:1rem 1.1rem 1rem 3rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  font-size:.95rem; line-height:1.6;
}
.trust-list li::before{
  content:""; position:absolute; left:1.1rem; top:1.25rem;
  width:17px; height:17px; border-radius:50%;
  background:rgba(22,163,74,.12); border:1.5px solid #16a34a;
}
.trust-list li::after{
  content:""; position:absolute; left:1.44rem; top:1.52rem;
  width:6px; height:3.5px; border-left:2px solid #16a34a; border-bottom:2px solid #16a34a;
  transform:rotate(-45deg);
}
@media (max-width:860px){ .trust-grid{grid-template-columns:1fr} }

/* linked industry tiles */
.ind-linked{position:relative}
.ind-cover{position:absolute; inset:0; z-index:3}
.ind-linked:hover{border-color:transparent; box-shadow:var(--shadow-lg)}
.ind-linked .card-link{margin-top:.9rem; display:inline-flex}
.ind-linked:hover .card-link span{transform:translateX(4px)}
.ind-linked .ind-body h3{transition:color .18s ease}
.ind-linked:hover .ind-body h3{color:var(--red)}

/* ---------- industry page: visuals ---------- */
/* One alternating two-column rhythm for the whole page, so every
   section lines up on the same grid instead of each doing its own thing. */
.ind-split{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.ind-split-rev .ind-split-art{order:-1}
.ind-split-copy h2{font-size:clamp(1.65rem,2.9vw,2.2rem); margin-bottom:1rem; line-height:1.2}
.ind-split-copy > p{font-size:1.03rem; line-height:1.75}

.ind-split-art{position:relative; justify-self:center; width:100%; max-width:340px}
.ind-split-art.wide{max-width:470px}
.ind-split-art::before{
  content:""; position:absolute; inset:-10% -14%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(77,119,255,.15), transparent 70%);
}
.ind-split-art img{position:relative; z-index:1; width:100%; height:auto; display:block}
.ind-split-art .svc-media-note{position:relative; z-index:1}

/* small stat strip that balances the copy column against the artwork */
.mini-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin:1.8rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
}
.ms-fig{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2rem); color:var(--navy-700); line-height:1.1;
}
.ms-lab{display:block; margin-top:.3rem; font-size:.84rem; color:var(--muted); line-height:1.45}

/* labelled point list, used in the profile section */
.pt-list{display:grid; gap:1rem; margin:1.6rem 0 0}
.pt-list > div{
  padding-left:1.15rem; border-left:2px solid var(--line); transition:border-color .2s ease;
}
.pt-list > div:hover{border-left-color:var(--red)}
.pt-list dt{
  font-family:var(--font-display); font-weight:700; font-size:.99rem;
  color:var(--ink); margin-bottom:.2rem;
}
.pt-list dd{margin:0; font-size:.93rem; color:var(--body); line-height:1.6}

/* compliance: photo and list share one column so the grid stays 2-up */
.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.trust-copy{padding-top:.25rem}
.trust-copy h2{font-size:clamp(1.6rem,2.8vw,2.1rem); margin-bottom:.7rem}
.trust-copy p{margin-bottom:1.6rem}
.trust-side{display:grid; gap:1rem}
.trust-photo{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); margin:0;
}
.trust-list{display:grid; gap:.8rem; margin:0}

@media (max-width:900px){
  .ind-split{grid-template-columns:1fr; gap:2.25rem}
  .ind-split-art,.ind-split-rev .ind-split-art{order:-1; max-width:300px}
  .ind-split-art.wide{max-width:420px}
  .trust-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .mini-stats{grid-template-columns:1fr; gap:.9rem; text-align:left}
  .mini-stats li{display:flex; align-items:baseline; gap:.7rem}
  .ms-fig{font-size:1.4rem}
}

/* ---------- compliance: left column content ---------- */
.trust-quote{
  margin:1.6rem 0 1.4rem; padding:1.5rem 1.7rem; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  position:relative; overflow:hidden;
}
.trust-quote::before{
  content:"\201C"; position:absolute; top:-.35em; right:.25em;
  font-family:var(--font-display); font-size:7rem; line-height:1;
  color:#fff; opacity:.07;
}
.trust-quote figcaption{
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--red-300); margin-bottom:.6rem;
}
.trust-quote blockquote{
  margin:0; border:0; padding:0; background:none;
  font-family:var(--font-display); font-weight:600;
  font-size:1.12rem; line-height:1.5; color:#fff; position:relative; z-index:1;
}
.trust-note{font-size:.96rem; line-height:1.7; color:var(--body); margin-bottom:1.5rem}

.trust-meta{display:grid; gap:0; margin:0 0 1.8rem; border-top:1px solid var(--line)}
.trust-meta > div{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--line);
}
.trust-meta dt{
  font-family:var(--font-display); font-weight:700; font-size:.88rem; color:var(--ink);
  white-space:nowrap;
}
.trust-meta dd{margin:0; font-size:.9rem; color:var(--muted); text-align:right}
@media (max-width:520px){
  .trust-meta > div{grid-template-columns:1fr; gap:.1rem}
  .trust-meta dd{text-align:left}
}

/* ---------- service page: Google's three ranking factors ---------- */
.factors{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.factor{
  position:relative; overflow:hidden; padding:2rem 1.75rem 1.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.factor::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,#16a34a,#4ade80);
}
.factor-off::before{background:linear-gradient(90deg,var(--muted),var(--line))}
.factor:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent}
.factor-n{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:.82rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.6rem;
}
.factor h3{font-size:1.28rem; margin-bottom:.5rem}
.factor-tag{
  display:inline-block; margin-bottom:.9rem; padding:.26rem .72rem; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase;
  background:rgba(22,163,74,.12); color:#16a34a;
}
.factor-off .factor-tag{background:var(--surface-alt); color:var(--muted)}
.factor p{font-size:.94rem; line-height:1.68; margin:0}
@media (max-width:980px){ .factors{grid-template-columns:1fr} }

/* ---------- service page: diagnostic list ---------- */
.diag{display:grid; gap:.9rem; counter-reset:none; max-width:54rem; margin-inline:auto}
.diag-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start;
  padding:1.4rem 1.6rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.diag-item:hover{transform:translateX(4px); box-shadow:var(--shadow-sm); border-color:rgba(216,31,38,.3)}
.diag-n{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:.86rem;
}
.diag-item h3{font-size:1.06rem; margin-bottom:.3rem}
.diag-item p{font-size:.94rem; line-height:1.68; margin:0; color:var(--body)}
@media (max-width:560px){
  .diag-item{grid-template-columns:1fr; gap:.7rem; padding:1.2rem 1.25rem}
}

/* ---------- service page: comparison table ---------- */
.cmp{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); max-width:60rem; margin-inline:auto;
}
.cmp-row{display:grid; grid-template-columns:1fr 1.15fr 1.15fr; gap:1rem; align-items:center}
.cmp-head{
  padding:1rem 1.5rem; background:var(--navy-900); color:rgba(255,255,255,.72);
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.cmp-head .cmp-hi{color:#fff}
.cmp-row:not(.cmp-head){padding:1rem 1.5rem; border-top:1px solid var(--line); font-size:.94rem}
.cmp-row:not(.cmp-head):hover{background:var(--surface-alt)}
.cmp-label{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:.92rem}
.cmp-row:not(.cmp-head) .cmp-hi{
  color:var(--ink); font-weight:600;
  box-shadow:inset 3px 0 0 rgba(216,31,38,.35); padding-left:.9rem;
}
@media (max-width:820px){
  .cmp-head{display:none}
  .cmp-row:not(.cmp-head){grid-template-columns:1fr; gap:.35rem; padding:1.1rem 1.25rem}
  .cmp-row:not(.cmp-head) span:nth-child(2)::before{content:"Google Search Ads: "; font-weight:700; color:var(--muted)}
  .cmp-row:not(.cmp-head) .cmp-hi{box-shadow:none; padding-left:0}
  .cmp-row:not(.cmp-head) .cmp-hi::before{content:"Local Services Ads: "; font-weight:700; color:var(--red)}
}

/* ---------- compliance block: self-balancing columns ----------
   The copy column length varies per page. Stretching the row and
   letting the photo absorb the slack keeps both sides equal without
   hand-tuning the text on every service and industry page. */
@media (min-width:901px){
  .trust-grid{align-items:stretch}
  .trust-side{display:flex; flex-direction:column; gap:1rem}
  .trust-photo{flex:1 1 auto; min-height:200px; aspect-ratio:auto; object-fit:cover}
  .trust-list{flex:0 0 auto}
}


/* ---------- related links: cross-links between service and industry pages ---------- */
.rel-grid{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.rel-h{font-size:clamp(1.15rem,1.9vw,1.4rem); margin-bottom:.4rem}
.rel-sub{color:var(--muted); font-size:.93rem; margin:0 0 1.1rem; line-height:1.6}
.rel-list{display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:0; padding:0}
.rel-list li{margin:0}
.rel-list a{
  display:inline-block; padding:.46rem .95rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  color:var(--ink); text-decoration:none; line-height:1.35;
  transition:border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rel-list a:hover,.rel-list a:focus-visible{
  border-color:var(--red); color:var(--red);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
@media (max-width:860px){
  .rel-grid{grid-template-columns:1fr; gap:2rem}
}

/* ================= PRICING EXPLAINER ================= */

/* --- the price band: three segments, the middle one is the real answer --- */
.pr-bands{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch}
.pr-band{
  position:relative; overflow:hidden; padding:1.9rem 1.6rem 1.7rem; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.pr-band::before{
  content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--line);
}
.pr-low::before,.pr-high::before{background:linear-gradient(90deg,#cbd5e1,#e2e8f0)}
.pr-mid{
  background:linear-gradient(170deg,var(--navy-800),var(--navy-900)); border-color:transparent;
  box-shadow:var(--shadow-lg); transform:translateY(-6px);
}
.pr-mid::before{background:linear-gradient(90deg,var(--red),#ff6b5e)}
.pr-band-range{
  font-family:var(--font-display); font-weight:800; line-height:1.1; margin:0 0 .35rem;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink);
}
.pr-mid .pr-band-range{color:#fff}
.pr-band-label{
  font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .9rem;
}
.pr-mid .pr-band-label{color:var(--red-300)}
.pr-band-text{font-size:.93rem; line-height:1.65; color:var(--body); margin:0}
.pr-mid .pr-band-text{color:rgba(255,255,255,.78)}
.pr-note{
  margin:1.6rem auto 0; max-width:46rem; text-align:center;
  font-size:.95rem; color:var(--muted); line-height:1.65;
}
@media (max-width:860px){
  .pr-bands{grid-template-columns:1fr; gap:.9rem}
  .pr-mid{transform:none}
}

/* --- what moves the price: numbered rows --- */
.pr-factors{
  list-style:none; margin:0 auto; padding:0; max-width:52rem; display:grid; gap:.7rem;
}
.pr-factors li{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pr-factors li:hover{transform:translateX(4px); box-shadow:var(--shadow-sm); border-color:rgba(216,31,38,.3)}
.pr-fnum{
  font-family:var(--font-display); font-weight:800; font-size:.82rem;
  color:var(--red); letter-spacing:.06em; padding-top:.18rem;
}
.pr-fbody{display:block}
.pr-fbody strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:var(--ink); margin-bottom:.22rem;
}
.pr-fbody span{display:block; font-size:.94rem; line-height:1.68; color:var(--body)}
@media (max-width:560px){ .pr-factors li{grid-template-columns:1fr; gap:.5rem} }

/* --- what is included: copy beside a photo --- */
.pr-include{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
.pr-include-copy h2{font-size:clamp(1.55rem,2.7vw,2.1rem); margin-bottom:.6rem}
.pr-lead{color:var(--body); margin-bottom:1.4rem}
.pr-include-art img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block;
}
@media (max-width:900px){
  .pr-include{grid-template-columns:1fr; gap:2rem}
  .pr-include-art{order:-1; max-width:520px; margin-inline:auto}
}

/* --- timeline: three stages on one rail --- */
.pr-time{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative;
}
.pr-time::before{
  content:""; position:absolute; top:11px; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg,var(--red),rgba(216,31,38,.25)); z-index:0;
}
.pr-time li{position:relative; padding-top:2.6rem; z-index:1}
.pr-time li::before{
  content:""; position:absolute; top:4px; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--red); border:3px solid var(--surface-alt); box-shadow:0 0 0 2px rgba(216,31,38,.25);
}
.pr-time-when{
  display:block; font-family:var(--font-display); font-weight:800; font-size:.76rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--red); margin-bottom:.4rem;
}
.pr-time h3{font-size:1.1rem; margin-bottom:.35rem}
.pr-time p{font-size:.93rem; line-height:1.65; color:var(--body); margin:0}
@media (max-width:820px){
  .pr-time{grid-template-columns:1fr; gap:1.6rem}
  .pr-time::before{top:0; bottom:0; left:7px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,var(--red),rgba(216,31,38,.2))}
  .pr-time li{padding-top:0; padding-left:2.2rem}
  .pr-time li::before{top:2px; left:0}
}

/* --- worth it / not worth it --- */
.pr-fit{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:58rem; margin-inline:auto}
.pr-fit-card{
  padding:1.9rem 1.8rem; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line);
}
.pr-fit-card h3{font-size:1.12rem; margin-bottom:1rem}
.pr-fit-card ul{list-style:none; margin:0; padding:0; display:grid; gap:.72rem}
.pr-fit-card li{
  position:relative; padding-left:1.7rem; font-size:.94rem; line-height:1.6; color:var(--body);
}
.pr-fit-card li::before{
  position:absolute; left:0; top:-.05em; font-weight:800; font-family:var(--font-display);
}
.pr-fit-yes{border-top:3px solid #16a34a}
.pr-fit-yes li::before{content:"\2713"; color:#16a34a}
.pr-fit-no{border-top:3px solid var(--muted); background:var(--surface-alt)}
.pr-fit-no li::before{content:"\2013"; color:var(--muted)}
@media (max-width:760px){ .pr-fit{grid-template-columns:1fr} }

/* --- closing promises on a dark band --- */
.pr-wont-sec{background:linear-gradient(165deg,var(--navy-800),var(--navy-900)); color:#fff}
.pr-wont-h{
  text-align:center; color:#fff; margin-bottom:clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(1.5rem,2.6vw,2rem);
}
.pr-wont{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.pr-wont > div{
  padding:1.5rem 1.6rem; border-radius:var(--radius);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.pr-wont h3{color:#fff; font-size:1.04rem; margin-bottom:.4rem}
.pr-wont p{color:rgba(255,255,255,.72); font-size:.93rem; line-height:1.65; margin:0}
@media (max-width:820px){ .pr-wont{grid-template-columns:1fr; gap:1rem} }

/* ================= CONTACT DETAIL ================= */
.ct-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.ct-include h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.5rem}

/* the direct-email panel: a dark counterweight to the list beside it */
.ct-email{
  position:sticky; top:110px;
  padding:2rem 1.9rem; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--navy-800),var(--navy-900));
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.ct-email::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--red),#ff6b5e);
}
.ct-email h2{color:#fff; font-size:1.2rem; margin-bottom:.5rem}
.ct-email p{color:rgba(255,255,255,.72); font-size:.93rem; line-height:1.65; margin:0 0 1.2rem}
.ct-email-link{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(.98rem,1.5vw,1.1rem); color:#fff; text-decoration:none;
  padding:.85rem 1rem; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  word-break:break-word;
}
.ct-email-link:hover,.ct-email-link:focus-visible{
  background:var(--red); border-color:var(--red); transform:translateY(-2px);
}
.ct-email-foot{margin:1rem 0 0 !important; font-size:.84rem !important; color:rgba(255,255,255,.55) !important}

.ct-chips{justify-content:center; max-width:60rem; margin-inline:auto}

@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr; gap:2rem}
  .ct-email{position:static}
}

/* --- legal and plain pages: content written in the WordPress editor --- */
.legal-body > h2{
  font-size:1.22rem; margin:1.9rem 0 .7rem; padding-bottom:.55rem;
  border-bottom:2px solid var(--surface-alt);
  scroll-margin-top:calc(var(--header-h) + 1.5rem);
}
.legal-body > h3{font-size:1rem; margin:1.4rem 0 .45rem; color:var(--navy-700)}
.legal-body > p{font-size:.96rem; line-height:1.72}
.legal-body > p a{color:var(--red); border-bottom:1px solid rgba(216,31,38,.35)}
.legal-body > ul,.legal-body > ol{display:grid; gap:.5rem; margin:.3rem 0 1.1rem}
.legal-body > ul li,.legal-body > ol li{position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.6}
.legal-body > ul li::before,.legal-body > ol li::before{
  content:""; position:absolute; left:.2rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7;
}

/* ============================================================
   Tick marks
   Each tick is one SVG, so the check sits in the exact centre of
   its circle at every font size. The older two-piece version
   (a circle plus a rotated box) drifted off-centre.
   ============================================================ */
.hero-list li::after,
.check-list li::after,
.trust-list li::after{content:none}

.hero-list li::before,
.check-list li::before,
.trust-list li::before,
.plan-list li::before{
  content:""; position:absolute; left:0;
  width:20px; height:20px; border:0; border-radius:0; transform:none;
  background:center / contain no-repeat;
  top:.2em;                              /* fallback */
  top:calc((1lh - 20px) / 2);            /* centred on the first line of text */
}
.hero-list li,.check-list li{padding-left:2.1rem}

.hero-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23d81f26' fill-opacity='.24' stroke='%23ff5b61' stroke-width='1.5'/%3E%3Cpath d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23d81f26' fill-opacity='.1' stroke='%23d81f26' stroke-width='1.5'/%3E%3Cpath d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='%23d81f26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.trust-list li::before{
  left:1.1rem; top:1rem; top:calc(1rem + (1lh - 20px) / 2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%2316a34a' fill-opacity='.12' stroke='%2316a34a' stroke-width='1.5'/%3E%3Cpath d='M6 10.3l2.7 2.7L14 7.6' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.plan-list li::before,
.plan-featured .plan-list li::before{
  width:16px; height:16px; top:.25em; top:calc((1lh - 16px) / 2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23d81f26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.plan-featured .plan-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23ff5b61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Decorative glows sit slightly outside their boxes. Clip them at the page
   edge so narrow screens never scroll sideways. "clip" (not "hidden") keeps
   sticky elements inside <main> working. */
main{overflow-x:clip}

/* ============================================================
   Rendering cost
   The soft glows were large circles under an 80–90px blur filter, and
   the header, form card and banner chips used backdrop blur. On a phone
   those are among the most expensive things a page can paint. Radial
   gradients give the same soft light at a fraction of the cost.
   ============================================================ */
.orb{filter:none; border-radius:0}
.orb-a{width:760px; height:760px; top:-300px; left:-240px;
  background:radial-gradient(closest-side, rgba(28,122,84,.9), rgba(28,122,84,0))}
.orb-b{width:680px; height:680px; bottom:-310px; right:-210px;
  background:radial-gradient(closest-side, rgba(216,31,38,.95), rgba(216,31,38,0))}
.orb-c{width:760px; height:760px; top:-350px;
  background:radial-gradient(closest-side, rgba(28,122,84,.85), rgba(28,122,84,0))}

.pb-aurora span{filter:none; border-radius:0; will-change:auto}
.pb-aurora span:nth-child(1){width:640px; height:640px; top:-260px; left:-180px;
  background:radial-gradient(closest-side, rgba(37,99,235,.95), rgba(37,99,235,0))}
.pb-aurora span:nth-child(2){width:540px; height:540px; bottom:-260px;
  background:radial-gradient(closest-side, rgba(216,31,38,.95), rgba(216,31,38,0))}
.pb-aurora span:nth-child(3){width:440px; height:440px;
  background:radial-gradient(closest-side, rgba(28,122,84,.95), rgba(28,122,84,0))}

.site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.97)}
.site-header.scrolled{background:#fff}
.form-card{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,38,84,.78)}
.btn-ghost,.pb-chips li{backdrop-filter:none; -webkit-backdrop-filter:none}

/* Decorative motion is the first thing to go on small screens. */
@media (max-width:760px){
  .pb-photo,.pb-aurora span{animation:none}
}

/* ---------- related services, at the foot of each post ---------- */
.post-services{
  margin-top:2rem; padding:1.6rem 1.7rem; border-radius:var(--radius-lg);
  background:var(--surface-alt); border:1px solid var(--line);
}
.post-services h2{font-size:1.1rem; margin:0 0 1rem}
.post-services ul{display:grid; gap:.9rem; margin:0; padding:0; list-style:none}
.post-services li{margin:0; padding:0}
.post-services li::before{content:none}
.post-services a{
  font-family:var(--font-display); font-weight:700; color:var(--navy-700);
  border-bottom:1px solid rgba(13,51,116,.25);
}
.post-services a:hover{color:var(--red); border-bottom-color:var(--red)}
.post-services p{margin:.25rem 0 0; font-size:.92rem; line-height:1.6; color:var(--body)}

/* Sections below the first screen are laid out only as they approach the
   viewport. The reserved height keeps the scrollbar steady meanwhile.
   Sections holding a sticky element are left out, so it keeps sticking. */
main > section:nth-child(n+4):not(:has(.legal-toc, .faq-aside, .ct-email)){
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* ---------- single post ----------
   WordPress gives the article the class "post", which the blog cards also
   use, so the card's clipping, border and hover lift were landing on the
   whole article. That clipped the top of the featured image where it
   overlaps the banner. Reset them here. */
article.single-post{
  display:block; overflow:visible; transform:none !important; transition:none;
  background:none; border:0; border-radius:0; box-shadow:none !important;
  padding-bottom:clamp(3.5rem,6vw,5rem);
}
/* The image sits fully below the banner. Overlapping it put a dark image
   over a dark banner, which read as the image being cut off. */
article.single-post .single-hero{margin:clamp(2rem,4vw,3rem) 0 clamp(2rem,3.5vw,2.75rem)}
@media (max-width:620px){ article.single-post .single-hero{margin-top:1.5rem} }
article.single-post .post-nav{margin-top:clamp(2.25rem,4vw,3rem)}
/* On phones the date line wraps and the separator dot lands at the start of
   the second line. The last item is the site name, already in the header. */
@media (max-width:480px){
  .post-meta-row{row-gap:.4rem}
  .post-meta-row li:nth-child(3){display:none}
}

/* contextual links added for internal linking */
.about-more{margin:1rem 0 0}
.pr-faq-link{text-align:center; margin:.4rem 0 1.4rem}

/* ---------- footer: centred on phones ---------- */
@media (max-width:560px){
  .footer-grid{text-align:center; justify-items:center}
  .footer-brand img{margin-inline:auto}
  .footer-brand p{margin-inline:auto}
  .footer-col{justify-items:center}
  .footer-col a{margin-inline:auto}
  .footer-col a:not(.btn):hover{padding-left:0}
  .footer-bottom{align-items:center; text-align:center}
  .footer-legal{justify-content:center}
}

/* ============================================================
   Mega menus (Services, Industries) — inc/mega-menu.php
   ============================================================ */
.nav li.has-mega{display:flex; align-items:center}
.mega-toggle{
  display:inline-grid; place-items:center; flex:none; width:24px; height:24px; padding:0; margin-left:-.6rem;
  border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.8,.3,1), color .18s ease, background .18s ease;
}
.mega-toggle svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.mega-toggle:hover,.mega-toggle:focus-visible{color:var(--red)}
.mega{display:none}
.nav .mega ul{display:grid; list-style:none; margin:0; padding:0}
.nav .mega li{display:block; margin:0; padding:0}
.nav .mega a{font-size:inherit; padding:0; border-bottom:0; background:none}
.nav .mega a::after{display:none}

/* panel content */
.mega-inner{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:2.4rem; padding-top:1.9rem; padding-bottom:2.1rem}
.mega-eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .9rem .85rem;
}
.nav .mega a.mega-link{
  display:flex; align-items:center; gap:.95rem; padding:.72rem .85rem; border-radius:14px;
  color:var(--ink); transition:background .18s ease;
}
.nav .mega a.mega-link:hover,.nav .mega a.mega-link:focus-visible{background:var(--surface-alt); color:var(--ink)}
.mega-ico{
  flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:#fff;
  box-shadow:0 6px 16px rgba(14,42,92,.22); transition:background .2s ease, transform .2s ease;
}
.mega-ico svg{width:22px; height:22px}
.mega-link:hover .mega-ico{background:linear-gradient(145deg,var(--red),var(--red-600)); transform:translateY(-1px)}
.mega-txt{display:block; min-width:0}
.mega-title{display:block; font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1.3; color:var(--ink); transition:color .18s ease}
.mega-link:hover .mega-title{color:var(--red)}
.mega-desc{display:block; margin-top:.18rem; font-family:var(--font-body); font-weight:400; font-size:.84rem; line-height:1.45; color:var(--muted)}
.mega-grid-services{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem 1rem}
.mega-grid-ind{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.1rem .6rem}
.nav .mega a.mega-link-ind{padding:.5rem .7rem; gap:.75rem}
.mega-link-ind img{
  flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line); transition:box-shadow .2s ease;
}
.mega-link-ind:hover img{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--red)}
.mega-link-ind .mega-title{font-weight:600; font-size:.9rem}
.nav .mega a.mega-all{
  display:inline-flex; align-items:center; gap:.4rem; margin:1rem 0 0 .85rem;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--red);
}
.nav .mega a.mega-all:hover{color:var(--red-600); gap:.6rem}

/* feature cards */
.mega-feature{border-radius:var(--radius-lg); padding:1.6rem 1.6rem 1.5rem; display:flex; flex-direction:column; align-items:flex-start}
.mega-feature-dark{
  color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(209,35,42,.35), transparent 55%),
    linear-gradient(160deg,var(--navy-700),var(--navy-900));
  box-shadow:0 18px 40px rgba(6,21,48,.25);
}
.mega-feature-light{background:var(--surface-alt); border:1px solid var(--line); padding-top:1rem}
.mega-feature-img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:16px; margin-bottom:1.1rem}
.mega-feature-eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-300); margin:0 0 .5rem;
}
.mega-feature-title{font-family:var(--font-display); font-weight:800; font-size:1.22rem; line-height:1.25; margin:0 0 .5rem; color:var(--ink)}
.mega-feature-dark .mega-feature-title{color:#fff}
.mega-feature-text{font-size:.88rem; line-height:1.55; margin:0 0 1.15rem; color:var(--body)}
.mega-feature-dark .mega-feature-text{color:rgba(255,255,255,.76)}
.nav .mega .btn{padding:.72rem 1.25rem; font-size:.9rem; color:#fff; background:var(--red)}
.nav .mega .btn:hover{background:var(--red-600); color:#fff}
.nav .mega a.mega-feature-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font-family:var(--font-display); font-weight:700; font-size:.88rem; color:var(--red);
}
.mega-feature-dark a.mega-feature-link{color:#fff}
.nav .mega .mega-feature-dark a.mega-feature-link{color:#fff}
.nav .mega a.mega-feature-link:hover{gap:.6rem}

/* desktop: full-width panel under the header */
@media (min-width:821px){
  /* The header's backdrop blur makes Chrome mis-paint anything that hangs below it,
     so switch it off while a panel is open; the header turns solid white instead. */
  .site-header:has(.has-mega:hover),
  .site-header:has(.has-mega:focus-within),
  .site-header:has(.has-mega.is-open){-webkit-backdrop-filter:none; backdrop-filter:none; background:#fff}
  .mega{
    position:absolute; left:0; right:0; top:100%; z-index:90;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 30px 60px rgba(6,21,48,.14);
  }
  .mega::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:30px}  /* hover bridge from the link */
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega,
  .has-mega.is-open > .mega{display:block; animation:megaIn .24s cubic-bezier(.22,.8,.3,1)}
  .has-mega.mega-off > .mega{display:none}
  .has-mega:hover > .mega-toggle,
  .has-mega:focus-within > .mega-toggle,
  .has-mega.is-open > .mega-toggle{transform:rotate(180deg); color:var(--red)}
  .has-mega.mega-off > .mega-toggle{transform:none}
  .has-mega:hover > a:not(.nav-cta),
  .has-mega.is-open > a:not(.nav-cta){color:var(--red)}
}
@media (min-width:821px) and (max-width:1060px){
  .mega-inner{grid-template-columns:minmax(0,1fr) 270px; gap:1.6rem}
  .mega-grid-ind{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@keyframes megaIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.has-mega > .mega{animation:none !important}}

/* phones: accordion inside the menu panel */
@media (max-width:820px){
  .nav li.has-mega{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border-bottom:1px solid var(--line)}
  .nav li.has-mega > a{border-bottom:0}
  .mega-toggle{width:44px; height:44px; margin:0; border-radius:12px; color:var(--navy-800)}
  .mega-toggle svg{width:18px; height:18px}
  .has-mega.is-open > .mega-toggle{transform:rotate(180deg); color:var(--red); background:var(--surface-alt)}
  .mega{grid-column:1 / -1}
  .has-mega.is-open > .mega{display:block}
  .mega-inner{display:block; padding:0 0 .7rem}
  .mega-eyebrow,.mega-desc,.mega-feature{display:none}
  .mega-grid-services,.mega-grid-ind{grid-template-columns:1fr; gap:0}
  .nav .mega a.mega-link{padding:.55rem .6rem; gap:.75rem; border-radius:10px}
  .mega-ico{width:34px; height:34px; border-radius:10px; box-shadow:none}
  .mega-ico svg{width:18px; height:18px}
  .mega-link-ind img{width:32px; height:32px}
  .mega-title{font-size:.95rem; font-weight:600}
  .nav .mega a.mega-all{margin:.5rem 0 0 .6rem}
}