/* ── SMM PAGE ──────────────────────────────────────────────────────────────
   Ported from the socials.ilarocollective.com standalone page. Every selector
   is scoped under .ilaro-smm because five class names (btn, btn-primary,
   btn-white, section, section-title) and the :root variable block collide
   with the main theme. Scoping wins on specificity in both directions, so
   neither stylesheet can disturb the other.

   Loaded only on the SMM page template — see ilaro_smm_assets() in inc/smm.php.
   ────────────────────────────────────────────────────────────────────────── */

.ilaro-smm *, .ilaro-smm *::before, .ilaro-smm *::after{box-sizing:border-box;margin:0;padding:0}
.ilaro-smm{
  --navy:#284177; --navy-deep:#1e3060; --blue:#006BBD; --sky:#83CEEC;
  --cream:#EDE8E4; --white:#fff; --text:#1a2a40; --muted:#6b7688;
  --border:rgba(40,65,119,0.14);
}
.ilaro-smm{scroll-behavior:smooth}
.ilaro-smm{font-family:'Inter',sans-serif;color:var(--text);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ilaro-smm img{max-width:100%;display:block}
.ilaro-smm a{color:inherit;text-decoration:none}
.ilaro-smm .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.ilaro-smm .section{padding:88px 0}

/* ── BUTTONS ── */
.ilaro-smm .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 34px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;transition:all .22s ease;
}
.ilaro-smm .btn-primary{background:var(--navy);color:#fff}
.ilaro-smm .btn-primary:hover{background:var(--blue)}
.ilaro-smm .btn-sky{background:var(--sky);color:var(--navy)}
.ilaro-smm .btn-sky:hover{background:#fff}
.ilaro-smm .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.ilaro-smm .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.ilaro-smm .btn-white{background:#fff;color:var(--navy);border-color:var(--border)}
.ilaro-smm .btn-white:hover{background:var(--navy);color:#fff}
/* Package CTA. Get a Quote is the only action on the cards now that calls are
   removed, so it takes the primary treatment. The white card gets the dark
   navy button; the featured card is navy itself, so it inverts to stay legible
   rather than disappearing into its own background. */
.ilaro-smm .btn-quote{background:#0f1a33;color:#fff}
.ilaro-smm .btn-quote:hover{background:#1c2c4d}
.ilaro-smm .pkg.featured .btn-quote{background:#fff;color:var(--navy)}
.ilaro-smm .pkg.featured .btn-quote:hover{background:var(--sky);color:var(--navy)}

/* ── BACK TO MAIN SITE ── */
/* This subdomain has its own separate header/footer (not ilarocollective.com's),
   so a fixed, always-visible pill is the way back for anyone who lands here
   from the new "SMM" nav tab — stays put through scroll instead of only
   living in the topbar. */
.ilaro-smm .back-to-main{
  position:fixed;top:18px;left:18px;z-index:999;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:50px;
  padding:10px 18px 10px 14px;
  font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);box-shadow:0 6px 20px rgba(40,65,119,.14);
  transition:background .2s,box-shadow .2s;
}
.ilaro-smm .back-to-main:hover{background:#fff;box-shadow:0 8px 26px rgba(40,65,119,.2)}
.ilaro-smm .back-to-main svg{width:15px;height:15px;flex-shrink:0}
@media(max-width:480px){
  .ilaro-smm .back-to-main{top:12px;left:12px;padding:9px 15px 9px 12px;font-size:10px}
}

/* ── TOP BRAND BAR ── */
.ilaro-smm .topbar{padding:26px 0 22px;text-align:center;border-bottom:1px solid var(--border)}
.ilaro-smm .topbar-inner{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.ilaro-smm .topbar img.emblem{height:26px;width:auto}
.ilaro-smm .topbar img.word{height:20px;width:auto}

/* ── HERO ── */
.ilaro-smm .hero{padding:150px 0 76px;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.ilaro-smm .tag{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:.42em;color:var(--blue);text-transform:uppercase;margin-bottom:20px}
.ilaro-smm .hero h1{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(30px,5.4vw,52px);line-height:1.08;color:var(--navy);letter-spacing:.01em;margin-bottom:22px}
.ilaro-smm .hero h1 em{font-family:'IM Fell English',serif;font-style:italic;font-weight:400;color:var(--blue)}
.ilaro-smm .hero-sub{font-family:'IM Fell English',serif;font-size:19px;color:var(--text);max-width:600px;margin:0 auto 40px}

/* Pano identity */
.ilaro-smm .pano{display:inline-flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--border);border-radius:60px;padding:12px 26px 12px 12px;margin-bottom:36px;box-shadow:0 8px 30px rgba(40,65,119,.08);max-width:100%}
.ilaro-smm .pano img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;flex-shrink:0}
.ilaro-smm .pano-id{text-align:left}
.ilaro-smm .pano-label{font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.ilaro-smm .pano-name{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--navy);line-height:1.2}
.ilaro-smm .pano-handle{font-family:'IM Fell English',serif;font-size:15px;color:var(--blue)}

/* Social row */
.ilaro-smm .socials{display:flex;justify-content:center;gap:16px;margin-bottom:38px}
.ilaro-smm .socials a{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .18s ease,box-shadow .18s ease}
.ilaro-smm .socials a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(40,65,119,.16)}
.ilaro-smm .socials svg{width:24px;height:24px}

.ilaro-smm .hero-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.ilaro-smm .hero-cta-note{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--muted)}

/* ── OUR RESULTS (dark) ── */
.ilaro-smm .our-results{background:var(--navy-deep);color:#fff;text-align:center}
.ilaro-smm .our-results .tag{color:var(--sky);margin-bottom:38px}
.ilaro-smm .results-subtitle{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(22px,3.4vw,32px);color:#fff;letter-spacing:.01em;margin:0 0 34px}
.ilaro-smm .results-subtitle em{font-family:'IM Fell English',serif;font-style:italic;font-weight:400;color:var(--sky)}
.ilaro-smm .results-subtitle--gap{margin-top:72px}

.ilaro-smm .client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ilaro-smm .client-card{background:#fff;border-radius:18px;padding:28px 20px;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.ilaro-smm .client-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.ilaro-smm .client-logo{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:1px solid var(--border)}
.ilaro-smm .client-brand{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:16px;min-height:2.4em;display:flex;align-items:center;justify-content:center;line-height:1.2}
.ilaro-smm .client-stats{display:flex;flex-direction:column;gap:9px}
.ilaro-smm .client-stat{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'IM Fell English',serif;font-size:15px;color:var(--text)}
.ilaro-smm .client-stat svg{width:16px;height:16px;flex-shrink:0;color:var(--blue)}

.ilaro-smm .stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.ilaro-smm .stat{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px 40px;min-width:200px;transition:transform .18s ease,background .18s ease}
.ilaro-smm .stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.ilaro-smm .stat svg{width:34px;height:34px;margin-bottom:12px}
.ilaro-smm .stat-num{font-family:'Cinzel',serif;font-size:34px;font-weight:900;color:#fff;line-height:1}
.ilaro-smm .stat-label{font-family:'IM Fell English',serif;font-size:15px;color:var(--sky);margin-top:6px}
.ilaro-smm .audience-note{font-family:'IM Fell English',serif;font-style:italic;font-size:18px;color:rgba(255,255,255,.82);margin-top:28px}

/* ── SECTION HEADINGS (light) ── */
.ilaro-smm .section-head{text-align:center;margin-bottom:54px}
.ilaro-smm .section-head .tag{margin-bottom:16px}
.ilaro-smm .section-title{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(24px,3.6vw,36px);letter-spacing:.01em;color:var(--navy)}
.ilaro-smm .section-title em{font-family:'IM Fell English',serif;font-style:italic;font-weight:400;color:var(--blue)}

/* ── PACKAGES ── */
.ilaro-smm .packages{background:var(--cream)}
.ilaro-smm .pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:860px;margin:0 auto}
.ilaro-smm .pkg{background:#fff;border:1px solid var(--border);border-radius:22px;padding:38px 32px;display:flex;flex-direction:column}
.ilaro-smm .pkg.featured{background:var(--navy);border-color:var(--navy);color:#fff;position:relative;box-shadow:0 20px 50px rgba(40,65,119,.22)}
.ilaro-smm .pkg-badge{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.ilaro-smm .pkg.featured .pkg-badge{color:var(--sky)}
.ilaro-smm .pkg-title{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:8px}
.ilaro-smm .pkg.featured .pkg-title{color:#fff}
.ilaro-smm .pkg-quote{font-family:'IM Fell English',serif;font-style:italic;font-size:16px;color:var(--muted);margin-bottom:22px}
.ilaro-smm .pkg.featured .pkg-quote{color:var(--sky)}
.ilaro-smm .pkg-icons{display:flex;gap:12px;margin-bottom:22px}
.ilaro-smm .pkg-icons a{display:flex;transition:transform .18s ease}
.ilaro-smm .pkg-icons a:hover{transform:translateY(-2px)}
.ilaro-smm .pkg-icons svg{width:26px;height:26px}
.ilaro-smm .pkg-items{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1}
.ilaro-smm .pkg-item{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45}
.ilaro-smm .pkg-item svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--blue)}
.ilaro-smm .pkg.featured .pkg-item svg{color:var(--sky)}
.ilaro-smm .pkg-btns{display:flex;flex-direction:column;gap:10px}
.ilaro-smm .pkg-btns .btn{width:100%}

/* ── FOOTER ── */
.ilaro-smm footer{background:#0f1a33;color:rgba(255,255,255,.7);text-align:center;padding:52px 24px 40px}
.ilaro-smm .foot-logo-link{display:block}
.ilaro-smm .foot-word{height:22px;width:auto;margin:0 auto 10px;opacity:.9}
.ilaro-smm .foot-emblem{height:38px;width:auto;margin:0 auto 20px;opacity:.95}
.ilaro-smm .foot-socials{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.ilaro-smm .foot-socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.ilaro-smm .foot-socials a:hover{background:rgba(255,255,255,.18)}
.ilaro-smm .foot-socials svg{width:19px;height:19px}
.ilaro-smm .foot-email{display:inline-block;font-family:'IM Fell English',serif;font-size:14px;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:12px;transition:color .2s}
.ilaro-smm .foot-email:hover{color:var(--sky)}
.ilaro-smm .foot-copy{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* ── QUOTE / CONTACT MODAL ── */
.ilaro-smm .qm-overlay{display:none;position:fixed;inset:0;z-index:2500;background:rgba(10,20,40,.85);align-items:center;justify-content:center;padding:20px}
.ilaro-smm .qm-overlay.open{display:flex}
.ilaro-smm .qm{background:#fff;border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;padding:48px 40px;text-align:left}
.ilaro-smm .qm-close{position:absolute;top:16px;right:16px;background:var(--cream);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.ilaro-smm .qm h3{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:2px}
.ilaro-smm .qm-sub{font-family:'IM Fell English',serif;font-size:17px;color:#2d2d2d;font-style:italic;margin-bottom:28px;line-height:1.6}
.ilaro-smm .qm-field{margin-bottom:16px}
.ilaro-smm .qm-field label{display:block;font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--navy);margin-bottom:6px;font-weight:700}
.ilaro-smm .qm-field input, .ilaro-smm .qm-field textarea{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);outline:none;background:#fff;resize:vertical}
.ilaro-smm .qm-field input:focus, .ilaro-smm .qm-field textarea:focus{border-color:var(--blue)}
.ilaro-smm .qm-submit{width:100%;padding:14px;background:var(--blue);color:#fff;border:none;border-radius:50px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;font-weight:700;transition:background .2s;margin-top:8px}
.ilaro-smm .qm-submit:hover{background:var(--navy)}
.ilaro-smm .qm-dm{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.ilaro-smm .qm-dm-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#333;margin-bottom:14px;display:block}
.ilaro-smm .qm-dm-icons{display:flex;gap:12px}
.ilaro-smm .qm-dm-link{width:48px;height:48px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;transition:background .2s;border:1px solid var(--border)}
.ilaro-smm .qm-dm-link:hover{background:var(--sky)}
.ilaro-smm .qm-dm-link svg{width:22px;height:22px}
@media(max-width:560px){.qm{padding:34px 22px}}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .ilaro-smm .client-grid{grid-template-columns:repeat(2,1fr)}
  .ilaro-smm .pkg-grid{grid-template-columns:1fr;max-width:460px}
}
@media(max-width:560px){
  .ilaro-smm .section{padding:56px 0}
  .ilaro-smm .wrap{padding:0 18px}
  .ilaro-smm .hero{padding:110px 0 58px}
  .ilaro-smm .hero-sub{font-size:16.5px}
  .ilaro-smm .topbar img.emblem{height:30px}
  .ilaro-smm .topbar img.word{height:19px}
  .ilaro-smm .pano{gap:14px;padding:10px 20px 10px 10px}
  .ilaro-smm .socials a{width:48px;height:48px}
  .ilaro-smm .hero-cta .btn{width:100%}
  .ilaro-smm .our-results .tag{margin-bottom:28px}
  .ilaro-smm .results-subtitle--gap{margin-top:54px}
  .ilaro-smm .client-grid{gap:14px}
  .ilaro-smm .client-card{padding:20px 12px}
  .ilaro-smm .client-logo{width:60px;height:60px}
  .ilaro-smm .client-brand{font-size:13px;margin-bottom:12px}
  .ilaro-smm .client-stat{font-size:13.5px}
  .ilaro-smm .stats{gap:12px}
  .ilaro-smm .stat{padding:20px 8px;min-width:0;flex:1 1 30%}
  .ilaro-smm .stat svg{width:28px;height:28px;margin-bottom:8px}
  .ilaro-smm .stat-num{font-size:25px}
  .ilaro-smm .stat-label{font-size:12.5px}
  .ilaro-smm .pkg{padding:30px 22px}
  .ilaro-smm .btn{padding:15px 22px;font-size:11px;letter-spacing:.12em}
}
@media(max-width:380px){
  .ilaro-smm .stats{flex-direction:column}
  .ilaro-smm .stat{flex:1 1 auto;width:100%}
}

/* ── FIXED-NAV CLEARANCE ─────────────────────────────────────────────────────
   #kefy-nav is position:fixed at 70px tall. The standalone page this was ported
   from had its own static topbar, so its spacing assumed nothing was floating
   above the content. Without this the hero sits under the nav on mobile and
   touches it on desktop.

   The hero's own top padding (150px / 110px, matching the Join page) handles
   the first screen. scroll-margin-top handles the rest: the "View Packages"
   button jumps to #packages, and without it that anchor lands underneath the
   nav too. */
.ilaro-smm .section{scroll-margin-top:86px}
.ilaro-smm [id]{scroll-margin-top:86px}