/* sonr.co /agencies: For agencies. Builds on fleets.css (hero, referral spine, contact form, FAQ); tokens live in site.css. */

/* ---------- Hero: the city grid from above, ring in the middle ---------- */
.ag-hero .bg img{object-position:50% 50%;transform-origin:50% 50%}
.ag-hero .actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- The gap: head, then three numbered points ---------- */
.ag-gap-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.ag-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.ag-point{border-top:1px solid var(--line-strong);padding-top:24px}
.ag-point .mono{display:block;font-size:12px;color:var(--accent);margin-bottom:14px}
.ag-point h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.01em;margin-bottom:10px}
.ag-point p{color:var(--text-secondary);max-width:36ch}
@media (max-width:860px){.ag-points{grid-template-columns:1fr}}

/* ---------- What it costs: the signal mark beside one big statement ---------- */
.ag-free-wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:center}
.ag-free-mark{width:min(220px,100%);justify-self:center}
.ag-free-mark .signal{width:100%;height:auto}
.ag-free-mark .signal .dot,.ag-free-mark .signal .waves path{fill:var(--accent)}
.ag-free .h2{max-width:20ch}
.ag-free-note{margin-top:24px;max-width:60ch;color:var(--text-secondary);border-left:2px solid var(--accent);padding-left:18px}
@media (max-width:720px){.ag-free-wrap{grid-template-columns:1fr}.ag-free-mark{width:120px;justify-self:start}}

/* ---------- What your agency gets: six cards ---------- */
.ag-gets-head{margin-bottom:clamp(36px,4vw,56px)}
.ag-gets-head .h2{max-width:22ch}
.ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ag-card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 26px 28px}
.ag-card h3{font-family:var(--sans);font-weight:700;font-size:20px;margin-bottom:8px}
.ag-card p{color:var(--text-secondary)}
@media (max-width:960px){.ag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ag-grid{grid-template-columns:1fr}}

/* ---------- Levels: a four-step ladder ---------- */
.ag-levels-head{margin-bottom:clamp(36px,4vw,56px)}
.ag-levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:lvl}
.ag-level{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px 26px;background:var(--panel)}
.ag-level:nth-child(-n+2){border-color:var(--accent-muted)}
.ag-level .mono{display:block;font-size:12px;color:var(--accent);margin-bottom:14px}
.ag-level h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,1.9vw,26px);letter-spacing:-.01em;margin-bottom:10px}
.ag-level p{color:var(--text-secondary);font-size:16px}
@media (max-width:1040px){.ag-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ag-levels{grid-template-columns:1fr}}

/* ---------- Safety ---------- */
.ag-safe-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.ag-safe-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ag-safe-list li{padding:20px 0;border-bottom:1px solid var(--line);color:var(--text-secondary)}
.ag-safe-list strong{display:block;color:var(--text-primary);font-size:19px;margin-bottom:4px}
@media (max-width:860px){.ag-safe-wrap{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.ag-contact-lede{margin-inline:auto}