/* ==========================================================================
   Brand 513 Collective — Design System  (light / minimal)
   Marketing • Graphics • Design | Lebanon, Ohio
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --red:#ED1C24;
  --red-600:#CE1219;
  --red-300:#FF6A70;
  --red-050:#FEF2F2;
  --red-tint:rgba(237,28,36,.08);

  --ink:#0E1013;
  --ink-2:#191C22;
  --ink-3:#2A2F38;
  --body:#454C57;
  --muted:#767E8B;
  --faint:#A3AAB5;

  --paper:#FFFFFF;
  --paper-2:#FAFAFB;
  --paper-3:#F3F4F6;
  --line:#E8EAEE;
  --line-2:#DFE2E7;
  --line-dark:rgba(255,255,255,.12);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Archivo','Inter',-apple-system,sans-serif;

  --wrap:1200px;
  --wrap-narrow:780px;
  --gutter:clamp(20px,5vw,44px);
  --sec:clamp(66px,8.5vw,118px);

  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:22px; --r-pill:100px;
  --sh-xs:0 1px 2px rgba(14,16,19,.05);
  --sh-sm:0 1px 3px rgba(14,16,19,.06),0 6px 18px rgba(14,16,19,.05);
  --sh-md:0 2px 6px rgba(14,16,19,.06),0 18px 44px rgba(14,16,19,.08);
  --sh-lg:0 30px 80px rgba(14,16,19,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  font-feature-settings:'kern' 1,'liga' 1,'cv11' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
svg{display:inline-block;vertical-align:middle;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0 0 .5em;font-family:var(--display);color:var(--ink);
  font-weight:800;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0 0 1.15em;text-wrap:pretty}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin:0 0 .45em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px}
::selection{background:var(--red);color:#fff}

/* ---------- Type ---------- */
.h-xl{font-size:clamp(2.6rem,6.2vw,4.7rem);line-height:1.02;letter-spacing:-.038em}
.h-lg{font-size:clamp(2rem,4vw,3.15rem);letter-spacing:-.032em}
.h-md{font-size:clamp(1.55rem,2.6vw,2.15rem);letter-spacing:-.026em}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.016em}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.62;color:var(--body)}
.small{font-size:.9rem}
.muted{color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:.735rem;font-weight:700;
  letter-spacing:.185em;text-transform:uppercase;color:var(--red);
  margin:0 0 1.05rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red);flex:none;border-radius:2px}
.dark .eyebrow,.on-dark .eyebrow{color:var(--red-300)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section-sm{padding-block:clamp(42px,5.5vw,70px)}
.tint{background:var(--paper-2)}
.dark{background:var(--ink);color:#B9C0CB}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lede{color:#AEB6C2}
.dark .muted{color:#8B93A0}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.mb-0{margin-bottom:0}
@media(max-width:980px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.sec-head{max-width:720px;margin-bottom:clamp(30px,3.6vw,52px)}
.sec-head.center{margin-inline:auto}
/* A band whose only content IS the heading block — the head's bottom margin
   would otherwise stack on the section's bottom padding and leave a gap with
   nothing in it. */
.sec-head:last-child{margin-bottom:0}

/* A shallower section, for bands that hold a heading and a line or two rather
   than a full block of content — the standard rhythm left more blank space
   around them than they had content. */
.section-tight{padding-block:clamp(42px,5.2vw,74px)}
/* Headings inside one gallery section, spaced as headings instead of as
   separate sections. */
.tpl-group + .tpl-group{margin-top:clamp(48px,5.4vw,80px)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.88rem 1.55rem;background:var(--bg);color:var(--fg);
  border:1.5px solid var(--bd);border-radius:var(--r-xs);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.93rem;
  letter-spacing:.005em;line-height:1;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background .16s,color .16s,border-color .16s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(237,28,36,.26)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:1.05rem 1.95rem;font-size:1rem}
.btn-dark{--bg:var(--ink);--bd:var(--ink)}
.btn-dark:hover{box-shadow:0 10px 24px rgba(14,16,19,.24)}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn-ghost:hover{--bd:var(--ink);box-shadow:0 8px 20px rgba(14,16,19,.10)}
.dark .btn-ghost,.on-dark .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.3)}
.dark .btn-ghost:hover,.on-dark .btn-ghost:hover{--bd:#fff;background:rgba(255,255,255,.08);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-row.center{justify-content:center}

.tlink{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);
  font-weight:700;font-size:.9rem;color:var(--red)}
.tlink svg{transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- Header (light) ---------- */
.site-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.topbar{background:var(--ink);color:#98A0AC;font-size:.8rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar a,.topbar span{color:#C3C9D2;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar a:hover{color:#fff}
.topbar b{display:inline-flex;align-items:center;gap:.4rem;color:#fff}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.topbar svg{opacity:.65}
@media(max-width:860px){.topbar .hide-sm{display:none}}
@media(max-width:560px){.topbar{display:none}}

.nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:88px}
.brand{display:flex;align-items:center;flex:none;padding:.45rem 0}
.brand img{height:66px;width:auto}
@media(max-width:1100px){.nav{min-height:76px}.brand img{height:56px}}
@media(max-width:520px){.brand img{height:48px}}

.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav-links>li{margin:0;position:relative}
.nav-links>li>a,.nav-links>li>button{
  display:inline-flex;align-items:center;gap:.3rem;padding:.66rem .76rem;
  background:none;border:0;cursor:pointer;border-radius:var(--r-xs);
  font-family:var(--display);font-weight:600;font-size:.895rem;color:var(--ink-3);
  transition:color .15s,background .15s;
}
.nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li.open>button{color:var(--ink);background:var(--paper-3)}
.nav-links>li>a[aria-current="page"]{color:var(--ink)}
.nav-links>li>a[aria-current="page"]::after{content:"";position:absolute;left:.76rem;right:.76rem;
  bottom:.3rem;height:2px;background:var(--red);border-radius:2px}
.caret{transition:transform .2s var(--ease);opacity:.55}
.nav-links>li.open .caret{transform:rotate(180deg)}
.nav-cta{margin-left:.45rem}

.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:1.5rem;min-width:min(700px,88vw);
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
li.open>.mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.mega-col h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.8rem}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li{margin:0}
.mega-col a{display:block;padding:.4rem .6rem;margin-left:-.6rem;border-radius:var(--r-xs);
  font-size:.895rem;font-weight:500;color:var(--body);transition:background .14s,color .14s}
.mega-col a:hover{background:var(--paper-2);color:var(--red)}
.mega-foot{margin-top:1.3rem;padding-top:1.05rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.mega-foot .small{color:var(--muted);margin:0}

.burger{display:none;background:none;border:1.5px solid var(--line-2);border-radius:var(--r-xs);
  padding:.58rem .68rem;cursor:pointer;color:var(--ink);line-height:0}
.burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  margin:4px 0;transition:transform .22s var(--ease),opacity .18s}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){
  .burger{display:block}
  /* The slide-in drawer is position:fixed and must size to the VIEWPORT.
     backdrop-filter on an ancestor makes that ancestor the containing block for
     fixed descendants, which collapsed the drawer to the header's own height
     (only the first link was visible). Solid background on mobile instead. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  /* Keep the burger above the open drawer so its X close state is tappable. */
  .burger{position:relative;z-index:900}
  .nav-links{position:fixed;inset:0 0 0 auto;z-index:890;width:min(400px,90vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:92px 1.1rem 2.5rem;overflow-y:auto;
    transform:translateX(102%);transition:transform .3s var(--ease);
    border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(14,16,19,.14)}
  body.nav-open .nav-links{transform:none}
  body.nav-open{overflow:hidden}
  .nav-links>li>a,.nav-links>li>button{width:100%;justify-content:space-between;padding:.85rem .7rem;font-size:1rem}
  .nav-links>li>a[aria-current="page"]::after{display:none}
  .nav-links>li{border-bottom:1px solid var(--line)}
  .mega{position:static;transform:none;opacity:1;visibility:visible;display:none;
    background:transparent;border:0;box-shadow:none;padding:.2rem 0 1rem;min-width:0}
  li.open>.mega{display:block;transform:none}
  .mega-grid{grid-template-columns:1fr;gap:1rem}
  .nav-cta{margin:1.1rem .7rem 0;width:calc(100% - 1.4rem)}
}
.nav-scrim{position:fixed;inset:0;background:rgba(14,16,19,.4);opacity:0;visibility:hidden;
  transition:opacity .28s,visibility .28s;z-index:880;backdrop-filter:blur(2px)}
body.nav-open .nav-scrim{opacity:1;visibility:visible}

/* ---------- Hero (light) ---------- */
.hero{position:relative;background:var(--paper);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(760px 460px at 82% -12%,rgba(237,28,36,.075),transparent 66%),
    radial-gradient(620px 420px at 2% 104%,rgba(14,16,19,.045),transparent 64%),
    linear-gradient(#FFFFFF,#FAFAFB)}
.hero::after{content:"";position:absolute;z-index:-1;top:-18%;right:-10%;width:52%;height:136%;
  transform:skewX(-12deg);pointer-events:none;
  background:linear-gradient(102deg,transparent 0 44%,rgba(237,28,36,.05) 44% 48%,
             transparent 48% 62%,rgba(14,16,19,.028) 62% 64%,transparent 64%)}
.hero-inner{padding-block:clamp(58px,8vw,112px);position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .accent{color:var(--red);font-style:italic;display:inline-block;transform:skewX(-4deg)}
.hero .lede{max-width:54ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem;padding:0;list-style:none}
.hero-badges li{margin:0;display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .8rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;font-size:.805rem;font-weight:600;color:var(--ink-3);font-family:var(--display)}
.hero-badges li svg{color:var(--red)}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  border:1px solid var(--line);background:var(--paper-3);aspect-ratio:4/3;object-fit:cover}
.hero-tag{position:absolute;left:-12px;bottom:-14px;background:var(--red);color:#fff;
  padding:.66rem 1.05rem;border-radius:var(--r-xs);box-shadow:0 14px 34px rgba(237,28,36,.34);
  font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase}
@media(max-width:1000px){.hero-tag{left:0}}

/* ---------- Stats bar ---------- */
.statbar{background:var(--ink);color:#fff}
.statbar .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);padding-block:clamp(30px,3.6vw,46px)}
.statbar .stat{text-align:center;position:relative}
.statbar .stat+.stat::before{content:"";position:absolute;left:calc(-1*clamp(7px,1vw,14px));
  top:12%;bottom:12%;width:1px;background:var(--line-dark)}
.statbar b{display:block;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1;letter-spacing:-.035em;color:#fff}
.statbar span{display:block;margin-top:.5rem;font-size:.755rem;font-weight:600;color:#98A0AC;
  letter-spacing:.13em;text-transform:uppercase;font-family:var(--display)}
@media(max-width:760px){.statbar .wrap{grid-template-columns:repeat(2,1fr);row-gap:2rem}
  .statbar .stat:nth-child(3)::before{display:none}}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,2vw,1.75rem);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
a.card:hover,.card.hoverable:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.card h3{font-size:1.1rem;margin-bottom:.4rem}
.card p{font-size:.93rem;color:var(--muted);margin-bottom:1rem;flex:1}
.card .tlink{margin-top:auto}
.card-ico{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;
  margin-bottom:.95rem;background:var(--red-050);color:var(--red);flex:none}
.card-ico svg{width:21px;height:21px}
.dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.dark .card p{color:#98A0AC}
.dark .card-ico{background:rgba(237,28,36,.16);color:var(--red-300)}
.dark a.card:hover{border-color:rgba(255,255,255,.24);box-shadow:0 24px 50px rgba(0,0,0,.35)}

.svc-card{padding:0}
.svc-card .svc-img{aspect-ratio:16/10;background:var(--paper-3);overflow:hidden;position:relative}
.svc-card .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a.svc-card:hover .svc-img img{transform:scale(1.05)}
.svc-card .svc-body{padding:1.25rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1}
.badge-new{position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--red);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.32rem .62rem;border-radius:4px;box-shadow:0 6px 16px rgba(237,28,36,.36)}

/* ---------- Packages ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}
@media(max-width:960px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.4vw,2.1rem);display:flex;flex-direction:column;position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.tier:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.tier.featured{border-color:var(--ink);box-shadow:var(--sh-md)}
.tier.featured::before{content:attr(data-flag);position:absolute;top:-13px;left:50%;
  transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--display);
  font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.36rem .85rem;border-radius:var(--r-pill);white-space:nowrap;
  box-shadow:0 6px 16px rgba(237,28,36,.32)}
.tier-name{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:.35rem}
.tier-for{font-size:.875rem;color:var(--muted);margin-bottom:1.2rem;min-height:2.6em}
.tier hr{margin:0 0 1.25rem}
.tier ul{list-style:none;padding:0;margin:0 0 1.6rem;flex:1}
.tier li{position:relative;padding-left:1.6rem;margin-bottom:.62rem;font-size:.925rem;color:var(--body)}
.tier li::before{content:"";position:absolute;left:.1rem;top:.42em;width:12px;height:7px;
  border-left:2.2px solid var(--red);border-bottom:2.2px solid var(--red);transform:rotate(-45deg)}
.tier li.off{color:var(--faint)}
.tier li.off::before{border-color:var(--line-2)}
.tier .btn{width:100%}

/* ---------- Reviews ---------- */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.35rem,2vw,1.8rem);display:flex;flex-direction:column}
.dark .review{background:var(--ink-2);border-color:var(--line-dark)}
.stars{display:flex;gap:2px;color:var(--red);margin-bottom:.85rem}
.stars svg{width:16px;height:16px}
.review blockquote{margin:0 0 1.15rem;font-size:1.01rem;line-height:1.6;color:var(--ink-3);flex:1}
.dark .review blockquote{color:#CBD1DA}
.review blockquote::before{content:"\201C"}
.review blockquote::after{content:"\201D"}
.review cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:.92rem;
  color:var(--ink);display:block}
.dark .review cite{color:#fff}
.review .role{font-size:.845rem;color:var(--muted);display:block;margin-top:.08rem}
.dark .review .role{color:#98A0AC}

/* ---------- Portfolio tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.6vw,20px)}
.tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  aspect-ratio:4/3;border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.tile:hover img{transform:scale(1.055)}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:1.5rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(10,11,13,.86));color:#fff;
  font-family:var(--display);font-weight:700;font-size:.93rem}
.tile figcaption small{display:block;font-weight:500;font-size:.755rem;color:#BFC5CE;
  letter-spacing:.07em;text-transform:uppercase;margin-top:.12rem;font-family:var(--sans)}
.tile.contain{background:#fff}
.tile.contain img{object-fit:contain;padding:9%}

/* ---------- Process ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.step{padding-top:1.35rem;border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);display:block;margin-bottom:.7rem;
  font-family:var(--display);font-weight:800;font-style:italic;font-size:1.35rem;
  color:var(--red);letter-spacing:-.02em}
.step h3{font-size:1.03rem;margin-bottom:.35rem}
.step p{font-size:.91rem;color:var(--muted);margin:0}
.dark .step{border-top-color:var(--line-dark)}
.dark .step p{color:#98A0AC}
/* Three-step variant. The base grid is four columns; a three-item list left in
   it filled three quarters of the row and left a column of dead space. */
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-inline:auto}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}
  .steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.steps-3{grid-template-columns:1fr;max-width:420px}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.dark .faq{border-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line)}
.dark .faq details{border-color:var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 3rem 1.25rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.03rem;color:var(--ink);line-height:1.42}
.dark .faq summary{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;
  border-right:2.4px solid var(--red);border-bottom:2.4px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .answer{padding:0 2rem 1.45rem 0;color:var(--muted);font-size:.99rem}
.dark .faq .answer{color:#98A0AC}
.faq .answer p:last-child{margin-bottom:0}
.faq summary:hover{color:var(--red)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--ink);color:#B9C0CB;overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(720px 400px at 80% 8%,rgba(237,28,36,.22),transparent 64%)}
.cta-band .wrap{padding-block:clamp(50px,6.5vw,82px)}
.cta-band h2{color:#fff;max-width:20ch}
.cta-band .lede,.cta-band p{color:#AEB6C2}
.cta-inner{display:grid;grid-template-columns:1.25fr auto;gap:2.2rem;align-items:center}
@media(max-width:860px){.cta-inner{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.85rem;
  color:var(--ink);margin-bottom:.4rem}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;padding:.8rem .92rem;
  border:1.5px solid var(--line-2);border-radius:var(--r-xs);background:#fff;font-size:1rem;
  transition:border-color .16s,box-shadow .16s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-tint)}
.field .hint{font-size:.82rem;color:var(--muted);margin:.32rem 0 0}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--sh-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Full-width form band used at the foot of content pages */
.form-band{max-width:790px;margin:0 auto}
.form-band .form-card{padding:clamp(1.4rem,3vw,2.4rem)}
.form-card > h2:empty,.form-card > p.muted:empty{display:none;margin:0}
.form-card-compact{padding:clamp(1.2rem,2.4vw,1.7rem)}

.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:.9rem;margin:0 0 1.3rem;align-items:flex-start}
.info-list .ico{width:38px;height:38px;border-radius:var(--r-sm);background:var(--red-050);
  color:var(--red);display:grid;place-items:center;flex:none}
.info-list .ico svg{width:18px;height:18px}
.info-list b{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.14rem;font-weight:700}
.info-list a,.info-list span{font-size:1.02rem;color:var(--ink);font-weight:500}
.info-list a:hover{color:var(--red)}
.dark .info-list a,.dark .info-list span{color:#fff}
.dark .info-list .ico{background:rgba(237,28,36,.16);color:var(--red-300)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--muted);padding-block:1rem;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"/";color:var(--faint)}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------- Page hero (light) ---------- */
.page-hero{position:relative;background:var(--paper-2);overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 380px at 84% -18%,rgba(237,28,36,.075),transparent 66%)}
.page-hero .wrap{padding-block:clamp(44px,6vw,80px)}
.page-hero h1{max-width:19ch}
.page-hero .lede{max-width:58ch;margin-bottom:0}
.page-hero.center{text-align:center}
.page-hero.center h1,.page-hero.center .lede{margin-inline:auto}
.page-hero.center .eyebrow{justify-content:center}
.page-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,54px);align-items:center}
@media(max-width:900px){.page-hero-grid{grid-template-columns:1fr}}
.page-hero-media img{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-md);
  width:100%;aspect-ratio:16/11;object-fit:cover;background:var(--paper-3)}

/* ---------- Prose ---------- */
.prose h2{font-size:clamp(1.45rem,2.3vw,1.95rem);margin-top:2.5rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.12rem,1.6vw,1.3rem);margin-top:1.85rem}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.6rem;margin-bottom:.5rem}
.prose ul li::before{content:"";position:absolute;left:.2rem;top:.62em;width:6px;height:6px;
  background:var(--red);border-radius:2px;transform:rotate(45deg)}
.prose ol{padding-left:1.25rem}
.prose a:not(.btn):not(.tlink){color:var(--red);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(237,28,36,.34)}
.prose a:not(.btn):not(.tlink):hover{text-decoration-color:var(--red)}

.callout{border-left:3px solid var(--red);background:var(--paper-2);padding:1.2rem 1.35rem;
  border-radius:0 var(--r-xs) var(--r-xs) 0;margin:1.85rem 0}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--ink)}

.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem 1.5rem}
.checks li{position:relative;padding-left:1.75rem;margin:0;font-size:.97rem}
.checks li::before{content:"";position:absolute;left:0;top:.36em;width:14px;height:8px;
  border-left:2.3px solid var(--red);border-bottom:2.3px solid var(--red);transform:rotate(-45deg)}
@media(max-width:640px){.checks{grid-template-columns:1fr}}

.pills{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0}
.pills li{margin:0}
.pills a,.pills span{display:inline-block;padding:.42rem .88rem;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:.86rem;font-weight:500;background:#fff;transition:all .16s}
.pills a:hover{border-color:var(--red);color:var(--red);background:var(--red-050)}
.dark .pills a,.dark .pills span{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:#C3C9D2}
.dark .pills a:hover{border-color:var(--red-300);color:#fff}

.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(30px,4.5vw,62px);align-items:start}
@media(max-width:980px){.with-aside{grid-template-columns:1fr}}
.aside-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;position:sticky;top:122px}
.aside-card h3{font-size:1.08rem}
.aside-card p{font-size:.92rem;color:var(--muted)}
.aside-card .btn{width:100%}
.aside-links{list-style:none;padding:0;margin:0}
.aside-links li{margin:0;border-bottom:1px solid var(--line)}
.aside-links li:last-child{border-bottom:0}
.aside-links a{display:block;padding:.58rem 0;font-size:.925rem;font-weight:500;transition:color .14s,padding .14s}
.aside-links a:hover{color:var(--red);padding-left:.3rem}

/* ---------- Logo strip ---------- */
.trust{border-block:1px solid var(--line);background:#fff;padding-block:1.6rem}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,3.5vw,3rem);flex-wrap:wrap}
.trust-label{font-family:var(--display);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.trust-logos{display:flex;align-items:center;gap:clamp(1.3rem,3.2vw,2.6rem);flex-wrap:wrap;justify-content:center}
.trust-logos img{height:38px;width:auto;max-width:128px;object-fit:contain;
  opacity:.52;filter:grayscale(1);transition:opacity .2s}
.trust-logos img:hover{opacity:1;filter:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#8B93A0;padding-block:clamp(48px,6vw,74px) 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.05fr;gap:clamp(26px,3.5vw,52px)}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:.755rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0 0 .55rem}
.site-footer a{color:#98A0AC;font-size:.925rem;transition:color .15s}
.site-footer a:hover{color:#fff}
.footer-brand img{height:74px;width:auto;margin-bottom:1.1rem;object-fit:contain}
.footer-brand p{font-size:.92rem;max-width:36ch;color:#8B93A0}
.socials{display:flex;gap:.55rem;margin-top:1rem}
.socials a{width:36px;height:36px;border:1px solid var(--line-dark);border-radius:var(--r-sm);
  display:grid;place-items:center;color:#98A0AC;transition:all .18s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.footer-bottom{margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line-dark);
  padding-block:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.845rem}
.footer-bottom p{margin:0}
.footer-bottom nav{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ---------- Mobile call bar ---------- */
.callbar{display:none}
@media(max-width:720px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;inset:auto 0 0 0;z-index:850;
    background:var(--line-dark);border-top:1px solid rgba(0,0,0,.08);box-shadow:0 -6px 24px rgba(14,16,19,.16)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.92rem;
    font-family:var(--display);font-weight:700;font-size:.9rem;background:var(--ink);color:#fff}
  .callbar a.primary{background:var(--red)}
  body{padding-bottom:54px}
}

/* ---------- Utility ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:.8rem 1.2rem;
  z-index:999;border-radius:0 0 6px 0}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.map-embed{border:0;width:100%;height:360px;border-radius:var(--r);filter:grayscale(.3) contrast(1.03)}
.hero-map{border:0;width:100%;aspect-ratio:8/5.5;min-height:320px;display:block;
  border-radius:var(--r-lg);box-shadow:var(--sh);filter:grayscale(.18) contrast(1.02)}
p,li,td,dd,h1,h2,h3{overflow-wrap:break-word}
.img-pair img{aspect-ratio:16/11;object-fit:cover;width:100%;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper-3)}
.dark .img-pair img{border-color:var(--line-dark)}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}
@media(min-width:1101px){
  .nav-links>li.has-mega:last-of-type .mega{left:auto;right:0;transform:translate(0,8px)}
  .nav-links>li.has-mega:last-of-type.open>.mega{transform:translate(0,0)}
}
@media print{
  .site-header,.site-footer,.callbar,.cta-band,.nav-scrim{display:none!important}
  body{font-size:11pt;color:#000}
  .dark,.statbar{background:#fff!important;color:#000!important}
  .dark h2,.statbar b{color:#000!important}
}

/* ---------- Graceful image failure ---------- */
img.img-failed{
  background:linear-gradient(135deg,var(--paper-3),var(--line));
  border:0;color:transparent;font-size:0;
}
.trust-logos img.img-failed,.tile.contain img.img-failed{display:none}
.dark img.img-failed,.img-pair img.img-failed{background:linear-gradient(135deg,#232730,#14161B)}


/* ---------- Hero collage ---------- */
.hero-collage{
  display:grid;grid-template-columns:1.08fr .92fr;grid-auto-rows:1fr;
  gap:clamp(9px,1vw,13px);aspect-ratio:1/1.02;
}
.hero-collage figure{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  border:1px solid var(--line);box-shadow:var(--sh-sm);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hero-collage figure:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.hero-collage img{width:100%;height:100%;object-fit:cover;display:block}
.hero-collage .t1{grid-column:1;grid-row:1/3}
.hero-collage .t2{grid-column:2;grid-row:1}
.hero-collage .t3{grid-column:2;grid-row:2}
.hero-collage .t4{grid-column:1;grid-row:3}
.hero-collage .t5{grid-column:2;grid-row:3}
.hero-collage figcaption{
  position:absolute;left:.55rem;bottom:.55rem;background:rgba(14,16,19,.82);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.3rem .58rem;border-radius:4px;backdrop-filter:blur(3px);
}
@media(max-width:1000px){.hero-collage{aspect-ratio:1/.78;max-width:620px}}
@media(max-width:520px){
  .hero-collage{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-auto-rows:110px}
  .hero-collage .t1{grid-row:1/3}
  .hero-collage figcaption{font-size:.6rem}
}


/* ---------- Image trio (dark feature band) ---------- */
.img-trio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,15px)}
.img-trio img{width:100%;border-radius:var(--r);border:1px solid var(--line-dark);
  background:var(--ink-2);object-fit:cover;aspect-ratio:4/3}
.img-trio img:first-child{grid-column:1/3;aspect-ratio:16/10}


/* ---------- CTA tile (fills out a service grid row) ---------- */
.cta-tile{background:var(--ink);border-color:var(--ink);justify-content:center}
.cta-tile h3{color:#fff}
.cta-tile p{color:#AEB6C2}
.cta-tile .eyebrow{color:var(--red-300)}
.cta-tile .tlink{color:#fff}
a.cta-tile:hover{border-color:var(--ink);box-shadow:0 20px 44px rgba(14,16,19,.28)}


/* ---------- Website templates gallery (/templates/) ----------
   Each card carries a LIVE iframe of the real template, scaled down. The
   iframe renders at a fixed 1280x1000 desktop viewport and is scaled by
   --tpl-s, which site.js sets from the card's measured width (the .42 here is
   only the pre-JS guess). Scaling instead of resizing matters: an iframe
   narrowed to card width would trigger the template's own mobile layout and
   the thumbnail would show a phone site, not the desktop design being sold. */
.tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px)}
@media(max-width:820px){.tpl-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

.tpl{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.tpl:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-2)}

.tpl-shot{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;
  background:var(--paper-3);border-bottom:1px solid var(--line)}
.tpl-shot iframe{position:absolute;top:0;left:0;width:1280px;height:1000px;border:0;
  transform:scale(var(--tpl-s,.42));transform-origin:0 0;
  pointer-events:none}          /* inert: never traps the visitor's scroll */
.tpl-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(14,16,19,0) 45%,rgba(14,16,19,.06) 70%,rgba(14,16,19,.55) 100%);
  opacity:.85;transition:opacity .22s var(--ease)}
.tpl:hover .tpl-veil{opacity:1}

.tpl-num{position:absolute;top:.7rem;left:.7rem;z-index:3;background:var(--red);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.1em;
  padding:.3rem .55rem;border-radius:4px;box-shadow:0 6px 16px rgba(237,28,36,.34)}
.tpl-open{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.85rem 1rem;color:#fff;font-family:var(--display);font-weight:800;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}
.tpl-open svg{transition:transform .2s var(--ease)}
.tpl:hover .tpl-open svg{transform:translateX(4px)}

.tpl-body{padding:clamp(1.2rem,1.9vw,1.6rem);display:flex;flex-direction:column;flex:1}
.tpl-body h3{font-size:1.22rem;margin-bottom:.45rem}
.tpl-blurb{font-size:.93rem;color:var(--muted);margin-bottom:1.05rem}
.tpl-feats{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;gap:.5rem}
.tpl-feats li{display:flex;gap:.55rem;align-items:flex-start;
  font-size:.88rem;line-height:1.45;color:var(--body)}
.tpl-feats svg{color:var(--red);margin-top:.28rem}
.tpl-pages{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.25rem}
.tpl-pages span{font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--paper-3);border:1px solid var(--line);
  padding:.3rem .58rem;border-radius:var(--r-pill)}
.tpl-actions{margin-top:auto}
.tpl-actions .btn{flex:1;min-width:0;padding-inline:1rem}