/*! social-pinks — shared responsive + nav fixes (loads last)
    Generated from the static build. Edit the source HTML and re-run
    tools/build-theme.py, or edit here directly once you stop regenerating. */
/* ============================================================
     PINK SOCIALS — SHARED RESPONSIVE + NAV FIXES
     Keep this block LAST in the stylesheet so it wins on cascade.
     Applied identically to every page.
     ============================================================ */
/* --- spacing: heroes, bands, and button rows stay in one rhythm --- */
.cta-row{display:flex;gap:var(--space-btn,16px);flex-wrap:wrap;align-items:center}
.cta-row .btn{margin:0}
.hero:not(.hero2){padding:var(--space-hero-y,40px) 0 var(--space-hero-b,56px)}
.hero.fold{min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--space-hero-y,40px) 0 var(--space-hero-b,56px)}
.band{padding:var(--space-section,56px) 0}
.nav-right{gap:14px}
@media(max-width:620px){
  .cta-row{gap:12px}
  .cta-row .btn{justify-content:center}
}

/* --- page-level overflow guards --- */
html{overflow-x:hidden}
body{overflow-wrap:break-word}
video{max-width:100%}
.wrap{min-width:0}
*:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:6px}
/* flex/grid children default to min-width:auto and refuse to shrink
     below their content — these are the ones that clipped on phones */
.hero.fold>.wrap{min-width:0;width:100%}
.hero-grid>*{min-width:0}
.rc-wrap>*{min-width:0}
.rc-budget-row{flex-wrap:wrap}
.rc-goal-toggle{max-width:100%;flex-wrap:wrap}
.ba>*,.ba-col{min-width:0}
.demo-wrap>*{min-width:0}
/* --- wide tables scroll instead of being crushed --- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
@media(max-width:820px){
    .tscroll table{min-width:660px}
    .tscroll{box-shadow:inset -18px 0 18px -18px rgba(10,34,31,.28)}
  }
/* --- segmented view toggle --- */
@media(max-width:860px){.cmp-toggle{max-width:100%}.cmp-toggle button{padding:9px 12px;font-size:.82rem}}
@media(max-width:640px){
    .cmp-toggle{flex-direction:column;width:100%;max-width:420px;border-radius:20px;gap:4px}
    .cmp-toggle button{width:100%;padding:12px 14px;font-size:.9rem}
  }
/* --- mega dropdown: bridge the 10px gap so hover survives the trip
         from the nav link down into the panel --- */
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
@media(max-width:1180px){
    .mega.svc{width:min(840px,calc(100vw - 40px))}
    .mega.ind{width:min(600px,calc(100vw - 40px))}
    .mega.loc{width:min(540px,calc(100vw - 40px))}
  }
/* --- header: the sticky bottom bar carries the CTA on phones --- */
.nav-right .btn{white-space:nowrap}
.navburger{margin-left:auto}
@media(max-width:720px){.nav-right{display:none}.nav-in{height:70px}}
/* --- logos --- */
.logo-img{height:46px;width:auto}
.mmenu .mm-top img{height:42px;width:auto}
footer.ft .logo-img{filter:none;height:72px}
@media(max-width:720px){.logo-img{height:42px}}
@media(max-width:360px){
    .wrap{padding:0 16px}
    .logo-img{height:38px}
    footer.ft .logo-img{height:60px}
  }
/* --- sticky bottom CTA bar: cannot outgrow the viewport --- */
.mobilecta{width:100%;max-width:100vw;box-sizing:border-box;overflow:hidden;
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.mobilecta .btn{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:13px 8px}
.mobilecta .btn svg{flex:none}
.mobilecta .lbl-short{display:none}
@media(max-width:380px){
    .mobilecta{gap:8px;padding:9px 10px calc(9px + env(safe-area-inset-bottom))}
    .mobilecta .btn{font-size:.86rem;padding:12px 6px}
    .mobilecta .lbl-long{display:none}
    .mobilecta .lbl-short{display:inline}
  }
header.nav{width:100%;max-width:100vw;box-sizing:border-box}
/* --- header: same solid, blurred nav on every page except the video-hero home page, which keeps its own transparent-to-solid scroll transition (see page-home.css). Previously this rule only existed, duplicated, in six of the seventeen page bundles, leaving the rest with an unstyled (transparent) header. --- */
body:not(.home) header.nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
/* --- tap targets --- */
@media(max-width:1000px){.mmenu a.mm-link{min-height:52px;display:flex;align-items:center}}
/* --- hero on short landscape phones --- */
@media(max-height:560px) and (orientation:landscape){
    .hero2 .bgwrap{min-height:auto}
    .hero2 .wrap{padding:44px 24px}
    .hero2 h1{font-size:clamp(1.6rem,4.4vw,2.4rem)}
    .hero2 .sub{margin:14px auto 22px}
  }
/* --- very small phones --- */
@media(max-width:380px){
    .hero2 h1{font-size:1.85rem}
    .hero2 .wrap{padding:56px 18px}
    .btn{padding:12px 18px;font-size:.92rem}
  }
@media(min-width:1600px){.hero2 .bgwrap{min-height:min(78vh,760px)}}
/* --- decorative site mockups: keep their chrome inside the frame --- */
.wd-site-nav,.ba-nav{gap:8px;flex-wrap:nowrap}
.wd-navlinks,.ba-links{min-width:0;overflow:hidden}
.wd-logo,.ba-logo,.wd-navbtn,.ba-btn{flex:none;white-space:nowrap}
@media(max-width:560px){.wd-navlinks,.ba-links{display:none}}
/* budget-split bar: the thin segments can't hold a % label on a phone,
     and the legend underneath already carries the real figures */
@media(max-width:600px){.bt-seg span{display:none}}

/* ---------------------------------------------------------------------
   Coming soon — pages that exist in the site map but have no content yet.
   Deliberately reads as a considered placeholder, not a broken page: the
   badge names the state, the copy explains why it is empty, and there are
   always three ways out.
   ------------------------------------------------------------------ */
.ps-soon{padding-block:clamp(48px,7vw,96px)}
.ps-soon-box{max-width:640px;margin-inline:auto;text-align:center;padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--lilac);box-shadow:var(--shadow-sm)}
.ps-soon-badge{display:inline-block;margin-bottom:14px;padding:4px 12px;border-radius:999px;
  background:#fdf1d8;color:#946200;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ps-soon-box h2{margin:0 0 12px;font-size:clamp(1.3rem,2.6vw,1.9rem)}
.ps-soon-box p{margin:0 auto 10px;max-width:52ch;color:#4a4750}
.ps-soon-box .ps-soon-note{font-size:.92rem;color:#6b6870}
.ps-soon-box .cta-row{justify-content:center;margin-top:22px;flex-wrap:wrap}

/* the same state, inline in a list on the services hub */
.ps-soon-tag{margin-left:6px;padding:1px 7px;border-radius:999px;background:#fdf1d8;color:#946200;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* services hub: the child list inside each pillar card */
.svc-sub{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:4px}
.svc-sub li{font-size:.88rem;line-height:1.45}
.svc-sub a{color:inherit;opacity:.82;text-decoration:none}
.svc-sub a:hover{opacity:1;color:var(--pink)}

/* ---------------------------------------------------------------------
   Sub-service pages own their two-column feature layout.

   These pages load their PARENT pillar's stylesheet, and the pillars do
   not define .geo identically: page-web-design.css adds
   `.geo>div:first-child{display:flex}`, which collapses a copy column
   into side-by-side strips. So the shared renderer uses its own ss-*
   classes here rather than inheriting whichever .geo happens to load.
   ------------------------------------------------------------------ */
.ss-geo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ss-geo>div{min-width:0}
.ss-copy h2{font-size:clamp(1.7rem,3vw,2.15rem);letter-spacing:-.03em;max-width:18ch}
.ss-copy .lead{margin:14px 0 18px;font-size:1.02rem;max-width:46ch}
.ss-checks{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.ss-checks li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.5}
.ss-checks li svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:3px}
.ss-mock{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff;line-height:0}
.ss-mock svg{display:block;width:100%;height:auto}
@media(max-width:900px){.ss-geo{grid-template-columns:1fr;gap:28px}}

/* Content-engine calendar: two extra post types used by the Social Media
   sub-service pages, so a LinkedIn month can show documents and a TikTok
   month can show a live session. The pillar's three types are unchanged. */
.ce-d.ce-doc{background:#0a66c2}
.ce-d.ce-live{background:var(--green)}

/* Footer legal links (Privacy Policy / Terms of Service): plain text color
   by inheritance from .fbottom, just a hover state so they read as links. */
.fbottom .flegal a:hover{color:#fff}

/* ======================================================================
   HOME PAGE + SITEWIDE PHONE PASS — 2026-09-23
   Phase 1 of the responsive audit (see project-analysis.md, issue #22).
   Every section on the home page already stacked correctly at its own
   breakpoint; what was left was horizontal breathing room. Dark panels
   (.ctamid, .cta-box, .cband, .locf) all carried 32–44px of side padding
   at every width, which on a 360px screen leaves ~230px of usable text
   column inside a 312px .wrap — the "cramped / overlapping" look. These
   rules only reduce padding and type scale below 600px; nothing above
   that breakpoint changes.
   ====================================================================== */

/* a slightly tighter page gutter buys ~12px of content width on phones */
@media(max-width:480px){.wrap{padding:0 18px}}

/* dark CTA panels: mid-page band and the closing box */
@media(max-width:600px){
  .ctamid{padding:26px 22px;border-radius:var(--r-lg);gap:18px}
  .ctamid h3{max-width:none}
  .ctamid p{max-width:none}
  .cta-box{padding:34px 22px;border-radius:var(--r-lg)}
  .cta-box h2{max-width:none}
  .cta-box p{font-size:.98rem;max-width:none}
}
@media(max-width:440px){
  .ctamid .btns,.cta-box .btns{width:100%;flex-direction:column;align-items:stretch}
  .ctamid .btns .btn,.cta-box .btns .btn{width:100%;justify-content:center}
}

/* counters band */
@media(max-width:600px){.cband{padding:26px 20px}}
@media(max-width:480px){
  .counters{gap:16px}
  .counter b{font-size:2.05rem}
  .counter small{font-size:.76rem}
}

/* "home base" locations panel */
@media(max-width:600px){
  .locf{padding:26px 22px}
  .locf h3{font-size:1.65rem}
  .locmeta{gap:16px;flex-wrap:wrap}
}

/* pricing cards */
@media(max-width:420px){
  .plan{padding:22px 20px}
  .plan .pdesc{min-height:0}
  .plan .price{font-size:1.5rem}
}

/* dark SEO band stat row */
@media(max-width:520px){
  .seostats{gap:18px 24px;margin-bottom:20px}
  .seostats b{font-size:1.9rem}
}

/* FAQ accordion */
@media(max-width:420px){
  .faq summary{padding:16px 16px;font-size:.96rem;gap:12px}
  .faq .a{padding:0 16px 18px;font-size:.92rem}
}

/* blog feed: the featured card and its three-row list */
@media(max-width:600px){
  .blogfeat{gap:16px}
  .fpost .fph{height:170px}
  .fpost .fbody{padding:18px 18px 20px}
  .fpost .fbody h3{font-size:1.22rem}
  .fpost .fbody p{font-size:.9rem}
  .fpost .fbody .fmeta{flex-wrap:wrap;gap:8px}
  .fpost .fbody .fmeta .rd{margin-left:0;width:100%}
}

/* service tab pills wrap into fewer, shorter rows */
@media(max-width:480px){
  .svctabs{gap:6px}
  .svctab{font-size:.82rem;padding:7px 13px 7px 8px}
  .svctab .ti svg{width:17px;height:17px}
}

/* partner logo strip */
@media(max-width:480px){.logos{gap:10px 18px}.strip{padding:20px 0}}

/* hero media card */
@media(max-width:480px){.mediacard img{height:230px}}

/* section headers: let a long h2 use the full column instead of 16ch */
@media(max-width:600px){.shead{gap:14px}.shead h2{max-width:none}}

/* ----------------------------------------------------------------------
   Footer vs. the sticky conversion bar — 2026-09-23 (second pass).

   The first pass reserved 76px on <body> against a bar that measures
   69-74.5px depending on width, leaving only ~29px of clearance. That is
   enough for the copyright line but NOT for the row under it: .fbottom is
   `justify-content:space-between; flex-wrap:wrap`, so on a phone the five
   .flegal links wrap onto their own second line BELOW the copyright, and
   that second line is what ends up under the bar.

   Two changes:
   1. The reserve is now split explicitly and sized generously — 36px of
      padding under .fbottom plus the 84px body reserve in base.css = 120px
      against a 74.5px
      bar, so the last line clears it by ~45px at every tested width
      (360 / 375 / 430 / 487 / 600 / 719).
   2. .fbottom stacks on phones instead of pushing the legal links to the
      right edge, so they read as their own block and each link stays
      whole instead of breaking mid-name.
   -------------------------------------------------------------------- */
@media(max-width:720px){
  footer.ft{padding:36px 0}
  .fbottom{margin-top:28px;padding-bottom:36px}
}
@media(max-width:600px){
  .fbottom{flex-direction:column;align-items:flex-start;gap:10px;line-height:1.75}
  .fbottom .flegal{display:block}
  .fbottom .flegal a{white-space:nowrap}
}

/* last-resort guard: no grid/flex child on the home page may force the
   page wider than the viewport */
.band>.wrap>*{min-width:0}

/* Locations publishing gate: a state that has not passed the gate is shown as a
   market served, not a link. Same chip look as the linked ones, no hover state. */
.mmenu .mm-chips span{font-size:.84rem;font-weight:600;color:var(--ink-2);background:var(--lilac);border:1px solid var(--line);border-radius:999px;padding:9px 14px}