/*
Theme Name: AIS
Theme URI: https://www.aislabs.com/
Author: All Information Services, Inc.
Description: Block theme for All Information Services (AIS). Header, top bar and footer are editable template parts; brand colours, fonts and font sizes live in Global Styles (theme.json). Content is built with the AIS Blocks plugin.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ais
Tags: full-site-editing, block-templates, business
*/

/* =============================================================================
   AIS — All Information Services | Design System
   -----------------------------------------------------------------------------
   This is a direct port of the original static-site styles.css. The ONLY changes
   from the original are:
     1. The :root token block now reads its values from the theme.json presets
        (--wp--preset--color--*, --wp--preset--font-size--*, --wp--preset--font-family--*)
        with the original literal as the fallback, so Global Styles drives them.
     2. The four literal #f0e2d3 card borders now use var(--card-border).
     3. The five tokenised font sizes (body, lede, h1, h2, h3) use var(--fs-*).
     4. A clearly-marked ADDITIONS section at the very bottom for things the
        blocks expose that the static pages did with inline style attributes.
   Rule order, selectors, and every other value are unchanged from the original.

   Deliberately NOT tokenised (see README "Fidelity notes"):
     - #fff literals (.step::before, .site-footer .brand-name strong, .checklist
       li.na etc.) are pure white; --white is #FEFFFF. Mapping them would shift
       the rendered colour.
     - Near-identical one-off sizes such as .stat .lbl (.87rem) and
       .team-card .role (.88rem) stay literal; collapsing them to one token
       moves one of them.
     - #b42318 (.form-error) is not part of the brand palette.
   ============================================================================= */
:root, body {
  --navy-950:var(--wp--preset--color--navy-950,#0d1d33); --navy-900:var(--wp--preset--color--navy-900,#162E4C); --navy-800:var(--wp--preset--color--navy-800,#1e3d66); --navy-700:var(--wp--preset--color--navy-700,#27507f);
  --blue-600:var(--wp--preset--color--blue-600,#2098D5); --blue-500:var(--wp--preset--color--blue-500,#3995D3); --blue-100:var(--wp--preset--color--blue-100,#BBE4F8); --blue-50:var(--wp--preset--color--blue-50,#e6f4fc);
  --sky-400:var(--wp--preset--color--sky-400,#BBE4F8); --green-500:var(--wp--preset--color--green-500,#5FBA46); --green-600:var(--wp--preset--color--green-600,#459934); --green-50:var(--wp--preset--color--green-50,#eef7e8); --beige:var(--wp--preset--color--beige,#FFF8F1);
  --ink-900:var(--wp--preset--color--ink-900,#141B54); --ink-700:var(--wp--preset--color--ink-700,#344054); --ink-500:var(--wp--preset--color--ink-500,#667085); --ink-300:var(--wp--preset--color--ink-300,#d0d5dd); --ink-100:var(--wp--preset--color--ink-100,#f2f4f7); --ink-50:var(--wp--preset--color--ink-50,#f9fafb);
  --white:var(--wp--preset--color--white,#FEFFFF);
  --card-border:var(--wp--preset--color--card-border,#f0e2d3);
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --shadow-md:0 6px 16px -4px rgba(16,24,40,.12);
  --shadow-lg:0 20px 40px -12px rgba(16,24,40,.18);
  --font:var(--wp--preset--font-family--ais-sans,"Myriad Pro","Myriad","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,sans-serif);
  --fs-base:var(--wp--preset--font-size--base,16px);
  --fs-lede:var(--wp--preset--font-size--lede,1.13rem);
  --fs-h3:var(--wp--preset--font-size--heading-s,1.25rem);
  --fs-h2:var(--wp--preset--font-size--heading-m,clamp(1.6rem,3vw,2.3rem));
  --fs-h1:var(--wp--preset--font-size--heading-l,clamp(2.1rem,4.5vw,3.4rem));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink-700);background:var(--white);line-height:1.65;font-size:var(--fs-base);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue-600);text-decoration:none}
h1,h2,h3,h4,h5{color:var(--ink-900);line-height:1.2;font-weight:700;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;border:1.5px solid transparent;transition:all .18s ease;white-space:nowrap}
.btn-primary{background:var(--green-500);color:var(--white)}
.btn-primary:hover{background:var(--green-600);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{border-color:var(--ink-300);color:var(--ink-900);background:var(--white)}
.btn-outline:hover{border-color:var(--blue-600);color:var(--blue-600)}
.btn-light{background:var(--white);color:var(--navy-900)}
.btn-light:hover{background:var(--blue-100)}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:var(--white)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-sm{padding:9px 18px;font-size:.88rem}
/* Topbar + header */
.topbar{background:var(--navy-950);color:rgba(255,255,255,.85);font-size:.82rem;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar a{color:rgba(255,255,255,.85);font-weight:500}
.topbar a:hover{color:var(--white)}
.topbar .topbar-links{display:flex;gap:20px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-100)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:11px;flex:none;background:linear-gradient(135deg,var(--blue-600),var(--navy-800));display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:800;font-size:1.05rem;letter-spacing:-.03em}
.brand-name{display:flex;flex-direction:column;line-height:1.15}
.brand-name strong{color:var(--ink-900);font-size:1.05rem;letter-spacing:-.01em}
.brand-name span{color:var(--ink-500);font-size:.72rem;font-weight:500}
.nav{display:flex;align-items:center;gap:4px}
.nav > .nav-item{position:relative}
.nav a.nav-link{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:8px;color:var(--ink-700);font-weight:600;font-size:.93rem;white-space:nowrap}
.nav a.nav-link:hover,.nav .nav-item:hover > a.nav-link{color:var(--blue-600);background:var(--blue-50)}
.nav a.nav-link.active{color:var(--blue-600)}
.caret{width:9px;height:9px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:1px solid var(--ink-100);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s ease}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-700);font-weight:500;font-size:.9rem}
.dropdown a:hover{background:var(--blue-50);color:var(--blue-600)}
.dropdown .dd-label{padding:10px 12px 4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500)}
.dropdown-wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.dropdown-wide-3{min-width:820px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px;left:50%;transform:translate(-50%,6px)}
.nav-item:hover .dropdown-wide-3,.nav-item:focus-within .dropdown-wide-3{transform:translate(-50%,0)}
.dd-foot{grid-column:1/-1;border-top:1px solid var(--ink-100);margin-top:10px;padding:12px 12px 6px}
.dd-foot a{display:inline;padding:0;font-weight:600;color:var(--blue-600)}
.dd-foot-links a{display:inline-block;padding:7px 12px;border-radius:8px;margin:-4px 0}
.dd-foot a:hover{background:var(--green-50);color:var(--green-600);text-decoration:none}
.dd-foot-links{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink-900);margin:5px 0;border-radius:2px;transition:.2s}
/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 75% 15%,rgba(33,150,213,.28),transparent),radial-gradient(ellipse 60% 50% at 15% 90%,rgba(56,189,248,.14),transparent),linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);color:var(--white);padding:110px 0 120px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%)}
.hero .container{position:relative;z-index:1}
.hero h1{color:var(--white);max-width:780px}
.hero h1 em{font-style:normal;color:var(--green-500)}
.hero p.lede{max-width:620px;margin-top:20px;font-size:var(--fs-lede);color:rgba(255,255,255,.82)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-500);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green-500);border-radius:2px}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.page-hero{padding:56px 0;min-height:470px;display:flex}
.page-hero .container{width:100%;min-height:358px;display:flex;flex-direction:column;align-items:flex-start}
.page-hero .hero-actions{margin-top:auto;padding-top:28px}
.breadcrumb{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:20px}
.breadcrumb a{color:rgba(255,255,255,.75);font-weight:500}
.breadcrumb a:hover{color:var(--white)}
.breadcrumb .sep{margin:0 8px;opacity:.5}
/* Sections */
.section{padding:88px 0}
.section-alt{background:var(--beige)}
.section-dark{background:linear-gradient(160deg,var(--navy-950),var(--navy-900));color:rgba(255,255,255,.8)}
.section-dark h2,.section-dark h3{color:var(--white)}
.section-tight{padding:60px 0}
.section-head{max-width:720px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .kicker,.two-col .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-600);display:block;margin-bottom:12px}
.section-dark .kicker{color:var(--green-500)}
.section-head p{margin-top:14px;font-size:1.05rem;color:var(--ink-500)}
.section-dark .section-head p{color:rgba(255,255,255,.72)}
/* Cards & grids */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--beige);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px;transition:all .2s ease;position:relative}
.section-alt .card{background:var(--white);border-color:var(--ink-100)}
a.card{display:block;color:inherit}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--green-500)}
.card h3{margin:18px 0 10px;font-size:1.12rem}
.card p{font-size:.94rem;color:var(--ink-500)}
.card .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:.9rem;color:var(--green-600)}
.card:hover .card-link{gap:10px}
.card .card-link::after{content:"\2192";transition:.15s}
.section-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.section-dark .card h3{color:var(--white)}
.section-dark .card p{color:rgba(255,255,255,.68)}
.section-dark .card:hover{border-color:rgba(56,189,248,.4);box-shadow:none}
.icon-circle{width:52px;height:52px;border-radius:13px;flex:none;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.icon-circle svg{width:26px;height:26px}
.section-dark .icon-circle{background:rgba(56,189,248,.12);color:var(--sky-400)}
/* Stat band */
.stat-band{border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);background:var(--white)}
.stat-band .container{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:36px 20px;text-align:center;border-left:1px solid var(--ink-100)}
.stat:first-child{border-left:none}
.stat .num{font-size:2rem;font-weight:800;color:var(--navy-900);letter-spacing:-.03em;display:block}
.stat .lbl{font-size:.87rem;color:var(--ink-500);margin-top:4px;display:block}
/* Two-col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two-col h2{margin-bottom:18px}
.two-col p + p{margin-top:14px}
.two-col .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.figure-panel{border-radius:var(--radius);min-height:340px;background:radial-gradient(ellipse 70% 60% at 70% 25%,rgba(33,150,213,.35),transparent),linear-gradient(150deg,var(--navy-900),var(--navy-700));position:relative;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.figure-panel::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}
.figure-panel svg{width:130px;height:130px;color:rgba(255,255,255,.9);position:relative;z-index:1}
/* Checklist */
.checklist{list-style:none;display:grid;gap:12px}
.checklist li{padding-left:34px;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--green-50)}
.checklist li::after{content:"";position:absolute;left:5px;top:8px;width:9px;height:5px;border-left:2px solid var(--green-500);border-bottom:2px solid var(--green-500);transform:rotate(-45deg)}
.checklist.cols-2{grid-template-columns:1fr 1fr;gap:12px 32px}
.checklist.cols-3{grid-template-columns:1fr 1fr 1fr;gap:12px 28px}
.checklist strong{color:var(--ink-900)}
/* Feature rows */
.feature-row{display:flex;gap:18px}
.feature-row .icon-circle{width:44px;height:44px;border-radius:11px}
.feature-row .icon-circle svg{width:22px;height:22px}
.feature-row h4{font-size:1.02rem;margin-bottom:5px}
.feature-row p{font-size:.92rem;color:var(--ink-500)}
/* Testimonials */
.testimonial{background:var(--beige);border:1px solid var(--card-border);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:18px}
.testimonial .quote-mark{font-size:2.6rem;line-height:.6;color:var(--blue-600);font-weight:800;font-family:Georgia,serif}
.testimonial p{font-size:.96rem;color:var(--ink-700);font-style:italic}
.testimonial footer{font-size:.85rem;font-weight:600;color:var(--ink-500);font-style:normal}
/* Pricing */
.price-card{display:flex;flex-direction:column}
.price-card .badge{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--blue-50);color:var(--blue-600);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.price-card.featured{border-color:var(--blue-600);border-width:2px;box-shadow:var(--shadow-lg)}
.price-card .checklist{margin-top:18px;font-size:.92rem}
.price-card .btn{align-self:flex-start;margin-top:24px}
/* FAQ */
.faq-group h3{margin:42px 0 14px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-600)}
details.faq{border:1px solid var(--ink-100);border-radius:var(--radius-sm);margin-bottom:12px;background:var(--white);overflow:hidden}
details.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink-900);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.3rem;color:var(--blue-600);font-weight:400;flex:none}
details.faq[open] summary::after{content:"\2013"}
details.faq .faq-body{padding:0 22px 20px;color:var(--ink-500);font-size:.95rem}
details.faq .faq-body p + p{margin-top:10px}
details.faq[open]{border-color:var(--blue-100);box-shadow:var(--shadow-sm)}
/* CTA band */
.cta-band{background:radial-gradient(ellipse 70% 90% at 80% 20%,rgba(33,150,213,.35),transparent),linear-gradient(140deg,var(--navy-950),var(--navy-800));border-radius:20px;padding:64px 56px;color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.cta-band h2{color:var(--white);margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.75);max-width:520px}
.cta-band .actions{display:flex;gap:12px;flex:none;flex-wrap:wrap}
/* Detail layout */
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.detail-body h2{margin:44px 0 16px;font-size:1.5rem}
.detail-body h2:first-child{margin-top:0}
.detail-body p + p{margin-top:14px}
.detail-body .checklist{margin-top:8px}
.detail-body .lead-in{font-size:1.08rem;color:var(--ink-700)}
.aside-card{background:var(--beige);border:1px solid var(--ink-100);border-radius:var(--radius);padding:28px;position:sticky;top:100px}
.aside-card h3{font-size:1.05rem;margin-bottom:8px}
.aside-card p{font-size:.9rem;color:var(--ink-500);margin-bottom:18px}
.aside-card .btn{width:100%;justify-content:center;margin-bottom:10px}
.aside-card .aside-contact{font-size:.88rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--ink-300)}
.aside-card .aside-contact a{font-weight:600}
/* Phases */
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.phase{background:var(--beige);border:1px solid var(--card-border);border-left:3px solid var(--green-500);border-radius:var(--radius-sm);padding:20px 22px}
.phase h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-600);margin-bottom:10px}
.phase ul{list-style:none}
.phase li{font-size:.9rem;padding:4px 0 4px 18px;position:relative;color:var(--ink-700)}
.phase li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:50%;background:var(--blue-100);border:1.5px solid var(--blue-500)}
/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--white);border:1px solid var(--ink-300);padding:7px 16px;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--ink-700)}
/* Team */
.team-card{text-align:center}
.avatar{width:108px;height:108px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,var(--blue-600),var(--navy-800));display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.9rem;font-weight:700;letter-spacing:-.02em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.team-card .role{color:var(--blue-600);font-weight:600;font-size:.88rem}
/* Footer */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.72);padding:72px 0 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px}
.site-footer h5{color:var(--white);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--white)}
.footer-brand .brand-name strong{color:var(--white)}
.footer-brand .brand-name span{color:rgba(255,255,255,.55)}
.footer-brand p{margin:18px 0 8px}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.footer-social a:hover{background:var(--blue-600)}
.footer-social svg{width:17px;height:17px;fill:currentColor}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.83rem;color:rgba(255,255,255,.5)}
.footer-bottom .links{display:flex;gap:22px}
/* Utility */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}.mt-5{margin-top:56px}
.center{text-align:center}
.muted{color:var(--ink-500)}
.lead{font-size:1.08rem}
/* Responsive */
@media (max-width:1020px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .dropdown-wide{min-width:440px}
  .dropdown-wide-3{min-width:600px;grid-template-columns:1fr 1fr}
  .detail-layout{grid-template-columns:1fr}
  .aside-card{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none;position:fixed;inset:74px 0 auto 0;background:var(--white);flex-direction:column;align-items:stretch;padding:16px 20px 28px;gap:2px;border-bottom:1px solid var(--ink-100);box-shadow:var(--shadow-lg);max-height:calc(100vh - 74px);overflow-y:auto}
  .nav.open{display:flex}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0}
  .dropdown-wide,.dropdown-wide-3{display:block;min-width:0;left:auto;transform:none}
  .nav-toggle{display:block}
  .header-cta .hide-mobile{display:none}
  .two-col{grid-template-columns:1fr;gap:40px}
  .stat-band .container{grid-template-columns:1fr 1fr}
  .stat{border-left:none;border-top:1px solid var(--ink-100)}
  .stat:nth-child(-n+2){border-top:none}
  .cta-band{flex-direction:column;align-items:flex-start;padding:44px 32px}
  .checklist.cols-2,.checklist.cols-3{grid-template-columns:1fr}
  .phase-grid{grid-template-columns:1fr}
  .topbar .topbar-links{display:none}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hero{padding:72px 0 80px}
  .page-hero{min-height:0;padding:56px 0 64px}
  .page-hero .container{min-height:0}
  .page-hero .hero-actions{margin-top:34px;padding-top:0}
  .section{padding:64px 0}
  .footer-grid{grid-template-columns:1fr}
}

/* Brand logo */
.brand-logo{height:48px;width:auto;flex:none}
.site-footer .brand-logo{height:44px;background:none;border-radius:0;padding:0}

.brand-name strong{color:var(--blue-600)}
.brand-name strong .g{color:var(--green-500)}
.site-footer .brand-name strong{color:#fff}
.site-footer .brand-name strong .g{color:var(--green-500)}
.footer-services{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-weight:600;font-size:.88rem;color:var(--sky-400);letter-spacing:.02em}
.footer-services span{color:var(--green-500);margin:0 10px}

/* Numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{background:var(--beige);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px;position:relative;counter-increment:step}
.step::before{content:counter(step);width:44px;height:44px;border-radius:50%;background:var(--green-500);color:#fff;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.94rem;color:var(--ink-500)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
/* Path cards (two ways to work with us) */
.path-card{border-top:4px solid var(--blue-600)}
.path-card.green{border-top-color:var(--green-500)}

/* Plan feature lists: excluded items */
.checklist li.na{color:var(--ink-500)}
.checklist li.na::before{background:var(--ink-100)}
.checklist li.na::after{border:none;transform:none;content:"\00d7";color:var(--ink-500);font-weight:700;left:0;top:3px;width:20px;height:20px;font-size:.95rem;line-height:20px;text-align:center}
.plan-badge{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--green-50);color:var(--green-600);border:1.5px solid var(--green-500);padding:4px 14px;border-radius:6px;margin-bottom:16px;line-height:1.5}
.plan-note{font-size:.82rem;color:var(--ink-500);margin-top:18px}
.price-card .contact-sales{font-weight:700;color:var(--ink-900);font-size:1.05rem;margin-bottom:4px}

/* Dropdown sales note */
.dd-note{font-size:.82rem;color:var(--ink-500);font-weight:400;padding:0;line-height:1.55;max-width:560px}
.dd-note a{font-weight:600}
/* Mobile hardening */
img{height:auto}
html,body{overflow-x:hidden}
.detail-layout > *{min-width:0}
.grid > *{min-width:0}
@media (max-width:420px){
  .btn{padding:11px 18px;font-size:.9rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .container{padding:0 18px}
  .card{padding:24px}
  .cta-band .actions{width:100%}
  .cta-band .actions .btn{width:100%;justify-content:center}
}

/* Brand title (logo + company name only) */
.brand-name .brand-title{font-size:1rem;font-weight:700;color:var(--ink-900);letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.site-footer .brand-name .brand-title{color:#fff}
@media (max-width:420px){.brand-name .brand-title{display:inline;font-size:.9rem}}

/* Anchored add-on sections */
section[id]{scroll-margin-top:96px}

/* One-line header: drop the phone button before things wrap */
@media (max-width:1280px){
  .header-cta .hide-mobile{display:none}
  .nav a.nav-link{padding:10px 10px;font-size:.9rem}
}

/* Services menu: support section */
.dd-support{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--blue-50);border-radius:10px;padding:12px 16px;margin-top:12px;font-size:.9rem;color:var(--ink-700)}
.dd-support .btn{margin:0}
.brand{flex:none}
.nav{min-width:0}

/* Get Started form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field label{font-weight:600;font-size:.88rem;color:var(--ink-900)}
.form-field input,.form-field select,.form-field textarea{font-family:var(--font);font-size:.95rem;color:var(--ink-900);padding:11px 14px;border:1.5px solid var(--ink-300);border-radius:var(--radius-sm);background:var(--white);width:100%}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-50)}
.form-field textarea{resize:vertical}
.form-span{grid-column:1/-1}
.form-note{font-size:.83rem;color:var(--ink-500);margin-top:14px}
.form-error{color:#b42318;font-weight:600;font-size:.9rem;margin-top:14px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

.section-alt .testimonial{background:var(--white);border-color:var(--ink-100)}
.section-alt .step{background:var(--white);border-color:var(--ink-100)}
.card .phase{background:var(--white);border-color:var(--ink-100);border-left-color:var(--green-500)}

/* Center the odd card out in a 3-col grid */
.grid-3 > *:last-child:nth-child(3n+1),
.grid-center-last > *:last-child:nth-child(3n+1){grid-column:2}
@media (max-width:1020px){.grid-3 > *:last-child:nth-child(3n+1),.grid-center-last > *:last-child:nth-child(3n+1){grid-column:auto}}

/* Service area map + drive-time tiers (markets.html) */
.map-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--ink-100);margin-bottom:40px}
.map-embed iframe{display:block;width:100%;height:520px;border:0}
.service-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;margin-bottom:32px}
.service-tiers .tier h4{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:.95rem;color:var(--ink-900)}
.tier-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:2px solid var(--white);box-shadow:0 0 0 1px var(--ink-300)}
.service-note{max-width:720px;margin:0 auto;text-align:center;color:var(--ink-500);font-size:1.02rem}
@media (max-width:760px){.service-tiers{grid-template-columns:1fr}.map-embed iframe{height:420px}}

/* =============================================================================
   ADDITIONS — AIS blocks
   -----------------------------------------------------------------------------
   Everything below this line is NEW. The static pages achieved these effects
   with inline style="" attributes; the blocks expose them as controls instead,
   so each needs a class. Nothing above this line was modified to accommodate
   them, and every rule here notes which block option it backs.

   Two standing rules for this section:

   1. No new breakpoint may change how the ORIGINAL markup behaves. Every
      media query below is scoped to a variant class the original never used —
      the stat band still goes four-up, then two-up at 860px, and stays two-up
      all the way down, exactly as before.
   2. No near-identical value gets folded into a shared token. .stat .lbl stays
      .87rem and .team-card .role stays .88rem; tokenising both would move one
      of them and cascade the difference down the page.
   ============================================================================= */

/* --- Top bar ---------------------------------------------------------------
   The original right-hand strip carried style="display:flex", which quietly
   overrode `.topbar .topbar-links{display:none}` below 860px and kept the
   opening hours visible on mobile. Same behaviour, as a class. */
.topbar .topbar-links.topbar-always{display:flex}

/* --- Shared grid options ---------------------------------------------------
   Gap values the static pages set inline (style="gap:16px", "gap:18px"). */
.grid-gap-12{gap:12px}
.grid-gap-16{gap:16px}
.grid-gap-18{gap:18px}
.grid-gap-20{gap:20px}
.grid-gap-24{gap:24px}
.grid-gap-32{gap:32px}
/* A five-column grid is a block option the original never used, so it needs
   its own responsive steps. Scoped to .grid-5 only. */
.grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1020px){.grid-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-5{grid-template-columns:1fr}}
/* Opting out of the "centre a lone last card" rule that ships above. */
.grid.grid-center-off > *:last-child:nth-child(3n+1){grid-column:auto}

/* --- Bottom-margin utilities (mirror of the existing .mt-* set) ------------
   Backs the testimonial's "space below" option, which was style="margin-bottom:20px". */
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}

/* --- Buttons ---------------------------------------------------------------
   Centred button rows are a block option; the original only ever left-aligned. */
.actions-center{justify-content:center}

/* --- Hero ------------------------------------------------------------------
   The home hero's lede contains a bold run that the original wrote as
   <strong style="color:#fff">. Bold is now authored with RichText, which emits
   a plain <strong>, so the colour lives here. #fff, not var(--white): the
   original is pure white and --white is #FEFFFF. */
.hero p.lede strong{color:#fff}

/* --- Cards -----------------------------------------------------------------
   Accent colour and link style are per-card, because the Total Shield+ card on
   the home page is green-topped with a filled button while its two siblings
   are blue-topped with outlined buttons. .path-card / .path-card.green above
   already carry the blue and green top edges; these are the other two options. */
.path-card.accent-navy{border-top-color:var(--navy-900)}
.path-card.accent-none{border-top:1px solid var(--card-border)}
.section-alt .path-card.accent-none{border-top-color:var(--ink-100)}
/* Badge styles other than the outlined green .plan-badge that ships above. */
.card-badge{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--blue-50);color:var(--blue-600);padding:5px 12px;border-radius:999px;margin-bottom:16px}
.card-badge.badge-green{background:var(--green-50);color:var(--green-600)}
.card-badge.badge-neutral{background:var(--ink-100);color:var(--ink-700)}
/* The static path cards and team cards wrote style="margin-top:0" on the h3
   that follows a badge or an avatar. `.card h3` sets margin:18px 0 10px. */
.card > h3:first-child,
.card > .card-badge + h3,
.card > .plan-badge + h3,
.team-card > h3{margin-top:0}
/* A card icon supplied as an uploaded image rather than a library SVG. */
.icon-circle img{width:26px;height:26px;object-fit:contain}
.feature-row .icon-circle img{width:22px;height:22px}
.icon-circle.icon-plain{width:auto;height:auto;border-radius:0;background:none}
.icon-circle.icon-plain img{width:52px;height:52px;object-fit:contain}

/* --- Split feature ---------------------------------------------------------
   Column ratio, order and vertical alignment are block options; the original
   only ever used the even, centre-aligned, unreversed form, which needs no
   class and gets none. */
.two-col.split-reverse > *:first-child{order:2}
.two-col.split-align-start{align-items:start}
.two-col.split-ratio-wide-left{grid-template-columns:1.35fr 1fr}
.two-col.split-ratio-wide-right{grid-template-columns:1fr 1.35fr}
@media (max-width:860px){
  .two-col.split-ratio-wide-left,.two-col.split-ratio-wide-right{grid-template-columns:1fr}
  .two-col.split-reverse > *:first-child{order:0}
}

/* --- Stat band variants ----------------------------------------------------
   The original band is four-up and drops to two-up at 860px — untouched above.
   A stats-N class only appears when the editor picks a count the original
   never had, so these rules can never fire on the original layout. */
.stat-band .container.stats-2{grid-template-columns:repeat(2,1fr)}
.stat-band .container.stats-3{grid-template-columns:repeat(3,1fr)}
.stat-band .container.stats-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:860px){
  .stat-band .container.stats-3,.stat-band .container.stats-5{grid-template-columns:repeat(2,1fr)}
  .stat-band .container.stats-3 .stat:nth-child(-n+2),
  .stat-band .container.stats-5 .stat:nth-child(-n+2){border-top:none}
}

/* --- Checklist -------------------------------------------------------------
   The small size the pricing page set inline (style="font-size:.93rem" —
   rounded here to the .92rem `.price-card .checklist` already uses, so the two
   agree instead of differing by a hair). */
.checklist.checklist-sm{font-size:.92rem}

/* --- Plan cards ------------------------------------------------------------ */
.price-card .plan-price{font-weight:700;color:var(--ink-900);font-size:1.05rem;margin-bottom:4px}

/* --- Team grid ------------------------------------------------------------- */
.team-card .bio{font-size:.94rem;color:var(--ink-500);margin-top:10px}
.avatar.avatar-image{background:none}

/* --- FAQ -------------------------------------------------------------------- */
.faq-list{display:block}
details.faq .faq-body a{font-weight:600}

/* --- CTA band --------------------------------------------------------------- */
.cta-band.cta-center{flex-direction:column;text-align:center;align-items:center}
.cta-band.cta-center p{margin-left:auto;margin-right:auto}

/* --- Rich text block --------------------------------------------------------
   Deliberately minimal. The design system already styles h2/h3/p inside
   .two-col, .section-head and .detail-body; adding .ais-richtext rules for the
   same elements would out-specify them by virtue of coming later in the file
   and silently shift spacing. Only things the original never styled are here. */
.ais-richtext p + p{margin-top:14px}
.ais-richtext ul,.ais-richtext ol{margin-top:14px;padding-left:22px}
.ais-richtext ul{list-style:disc}
.ais-richtext ol{list-style:decimal}
.ais-richtext li{margin-bottom:6px}
.ais-richtext.text-lead{font-size:1.08rem;color:var(--ink-700)}
.ais-richtext.text-center{text-align:center}

/* --- Section head ----------------------------------------------------------- */
.section-head.left{margin-left:0;text-align:left}

/* --- Contact form ----------------------------------------------------------
   The honeypot is positioned off-screen rather than display:none, because some
   bots skip hidden inputs. */
.card.form-card{padding:36px}
.form-heading{margin-bottom:6px}
.form-intro{margin-bottom:24px}
.ais-form .hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.form-success{background:var(--green-50);border:1px solid var(--green-500);color:var(--green-600);border-radius:var(--radius-sm);padding:14px 18px;font-weight:600;font-size:.92rem;margin-bottom:20px}
.form-failure{background:#fef3f2;border:1px solid #fda29b;color:#b42318;border-radius:var(--radius-sm);padding:14px 18px;font-weight:600;font-size:.92rem;margin-bottom:20px}
.form-field-check{flex-direction:row;align-items:flex-start;gap:10px}
.form-field-check input[type=checkbox]{width:auto;flex:none;margin-top:3px}
.form-field-check label{font-weight:500;color:var(--ink-700)}

/* --- Mobile menu: full-screen overlay ---------------------------------------
   This is a deliberate CHANGE from the original, not a port of it, and it is
   the only place in this stylesheet where that is true. See the README,
   "Mobile menu".

   The original kept "Submit a Ticket" and "Contact Us" in the bar at every
   width. Below 600px the two buttons plus the toggle are wider than the
   viewport, and `html,body{overflow-x:hidden}` hid the resulting scrollbar
   rather than solving it — 190px of overflow at 390px wide.

   Below 860px — the same breakpoint at which the menu already collapses to a
   toggle — the buttons now leave the bar and reappear at the bottom of the
   full-screen menu. Nothing is duplicated in the DOM: the toggle is a sibling
   of both, and grid placement moves the same .header-cta into the overlay.

   Above 860px not one rule here applies and the header is byte-identical to
   the original. */
@media (max-width:860px){
  /* The bar keeps only the brand and the toggle, so it cannot overflow. */
  .site-header .header-cta{display:none}

  /* Open: the header becomes the overlay. Making the header itself full-screen
     (rather than a separate panel below it) is what keeps the toggle in the
     top-right corner while the menu is open, with no second button. */
  .ais-nav-open .topbar{display:none}
  .ais-nav-open .site-header{position:fixed;inset:0;z-index:200;background:var(--white);backdrop-filter:none;border-bottom:none;overflow:hidden;display:flex;flex-direction:column}

  /* Three rows: the bar, the menu, the buttons. Only the middle row scrolls,
     so the toggle stays in the top-right corner and the buttons stay reachable
     however long the menu gets.

     The container takes its height from the flex parent rather than height:100%
     — a percentage height against a fixed box whose own height property is
     `auto` (resolved only by inset:0) is not a definite containing height, so
     the 1fr row would grow to fit its content instead of scrolling.

     align-items must be reset too: the bar is a flex row with
     align-items:center, and carried into grid that centres each item in its
     row at its natural height instead of stretching it — which leaves the menu
     unclipped and overflowing in both directions rather than scrolling. */
  .ais-nav-open .site-header .container{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:74px minmax(0,1fr) auto;column-gap:16px;padding-bottom:24px;align-items:stretch;justify-content:normal}
  .ais-nav-open .brand{grid-column:1;grid-row:1;align-self:center}
  .ais-nav-open .nav-toggle{grid-column:2;grid-row:1;align-self:center;justify-self:end}

  /* The menu itself: in flow inside the overlay rather than a fixed panel, and
     the only thing that scrolls. */
  .ais-nav-open .nav{grid-column:1/-1;grid-row:2;position:static;inset:auto;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;background:none;box-shadow:none;border-bottom:none;padding:8px 0 16px}
  .ais-nav-open .nav a.nav-link{font-size:1.05rem;padding:12px 0}
  .ais-nav-open .dropdown{padding:0 0 12px 14px}

  /* The buttons, moved. .header-cta is display:none in the bar above; the
     overlay turns it back on, pinned to the bottom row. */
  .ais-nav-open .header-cta{display:flex;grid-column:1/-1;grid-row:3;gap:12px;padding-top:20px;border-top:1px solid var(--ink-100)}
  .ais-nav-open .header-cta .btn{flex:1;justify-content:center}

  /* Hamburger becomes a cross. The spans are 2.5px tall with collapsing 5px
     margins, so the pitch is 7.5px. */
  .ais-nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .ais-nav-open .nav-toggle span:nth-child(2){opacity:0}
  .ais-nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
/* Scroll lock while the overlay is up. The class goes on <html> so both
   elements can be locked, which is what iOS Safari needs. */
html.ais-nav-open,html.ais-nav-open body{overflow:hidden}

/* --- WordPress shell: stop core layout fighting the AIS grid ----------------
   Template parts wrap their content in a div. A wrapper div would confine the
   sticky header to its own height, so the wrappers are removed from layout. */
.wp-site-blocks > .wp-block-template-part{display:contents}
/* Core's flow layout adds a 24px margin between siblings via :where(), which
   has zero specificity. These rules out-specify it so sections butt up exactly
   as they do in the original markup. */
.wp-site-blocks > *,
.wp-block-post-content > *,
main.wp-block-group > *{margin-block-start:0;margin-block-end:0}
main.wp-block-group,.wp-block-post-content{max-width:none;display:block}
.wp-site-blocks{display:block}