/* /organic-seo/ "SEO for your business": four selector cards + one panel (template-parts/seo-v2-zig.php, Mike 2026-09-28,
   option B). Panel row = copy + case fan; the fan + chip rules live in cs-fan.css (shared with the PPC tabs). Tokens from
   .sv2 (services-hub-v2.css). Motion: 150 ms panel fade + hover only. */
.szig{background:#fff}
/* selector cards -> the tabs section: one tight seam, not two full bands (Mike 2026-09-28 "tighten a bit") */
.sv2-sec.szig{padding-bottom:64px}
.szig+.sv2-sec{padding-top:64px}
@media (max-width:760px){.sv2-sec.szig{padding-bottom:44px}.szig+.sv2-sec{padding-top:44px}}
.szig__head .sv2-h2 .hl{display:block;width:fit-content}

/* selector: ARIA tabs styled as cards; every card has a visible 1.5px stroke + soft shadow so all four read as clickable */
.szig-sel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.szig-sel__c{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:center;text-align:left;font-family:var(--font);background:#fff;border:1.5px solid var(--ss-line-strong,#c9d2db);border-radius:18px;padding:18px;cursor:pointer;color:var(--ink);box-shadow:0 6px 18px -12px rgba(0,27,46,.45);transition:border-color .15s,box-shadow .15s,transform .15s}
.szig-sel__ic{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ground);color:var(--navy2);transition:background-color .15s,color .15s}
.szig-sel__ic svg{width:22px;height:22px}
.szig-sel__c b{font-size:18px;font-weight:700;line-height:1.2}
.szig-sel__l{font-size:14.5px;line-height:1.35;color:var(--ink2)}
.szig-sel__c:hover{border-color:#a9b6c3;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,27,46,.08)}
.szig-sel__c[aria-selected=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 12px 30px rgba(181,105,11,.14)}
.szig-sel__c[aria-selected=true]:hover{transform:none}
.szig-sel__c[aria-selected=true] .szig-sel__ic{background:var(--navy);color:var(--gold)}
.szig-sel__c:focus-visible{outline:3px solid var(--navy2);outline-offset:3px}

/* panel */
.szig-panel{position:relative;background:var(--ground);border-radius:24px;padding:48px 56px;animation:szig-in .15s ease-out;touch-action:pan-y pinch-zoom} /* horizontal swipe = prev / next type (seo-v2-zig.php script) */
/* prev/next type arrows on the panel (Mike 2026-09-28), same round buttons as the homepage rails */
.szig-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--ss-line-strong,#c9d2db);background:#fff;color:var(--ss-navy);box-shadow:0 6px 18px rgba(var(--ss-navy-deep-rgb),.14);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.szig-nav svg{width:18px;height:18px}
.szig-nav:hover{background:var(--ss-navy);color:#fff;border-color:var(--ss-navy)}
.szig-nav--prev{left:-24px}.szig-nav--next{right:-24px}
@media (max-width:1100px){.szig-nav--prev{left:8px}.szig-nav--next{right:8px}}
@media (max-width:760px){.szig-nav{top:auto;bottom:12px;transform:none;width:40px;height:40px}.szig-nav--prev{left:12px}.szig-nav--next{right:12px}.szig-panel{padding-bottom:64px}}
.szig-panel[hidden]{display:none}
.szig-panel:focus-visible{outline:3px solid var(--navy2);outline-offset:3px}
@keyframes szig-in{from{opacity:0}to{opacity:1}}
.szig__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;min-height:340px}
.szig__copy{display:grid;gap:18px;justify-items:start;max-width:500px}
.szig__h{font-size:clamp(28px,2.7vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0}
.szig__h .hl{display:block;width:fit-content;padding-bottom:.14em;margin-bottom:-.14em;padding-right:.06em;margin-right:-.06em;color:#06304f;background:linear-gradient(120deg,#0b4a7a 0%,#2f7fbf 55%,#06304f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.szig__sub{font-size:18px;line-height:1.55;color:var(--ink2);margin:0;max-width:44ch}
.szig__go{margin-top:6px}

.szig__vis{display:flex;justify-content:center;min-width:0}

@media (min-width:901px){.szig-sel:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}} /* six cards = 3 x 2 (Web Design, 2026-09-28) */
@media (min-width:901px){.szig-sel:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,calc((100% - 48px) / 4));justify-content:center}} /* three cards (Franchise SEO, 2026-09-29): the four-card width, centred */
@media (max-width:900px){.szig-sel:has(>:nth-child(3):last-child)>:last-child{grid-column:1/-1}} /* three cards on phones: 2 + 1 full width, no lone half card */
@media (max-width:1100px){
  .szig-sel__c{grid-template-columns:1fr}.szig-sel__ic{grid-row:auto;margin-bottom:8px}
  .szig-panel{padding:40px 36px}.szig__row{gap:36px}
}
@media (max-width:900px){
  .szig-sel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .szig-sel__c{padding:14px 14px 13px;border-radius:14px;row-gap:2px}
  .szig-sel__ic{width:36px;height:36px;border-radius:10px;margin-bottom:6px}.szig-sel__ic svg{width:19px;height:19px}
  .szig-sel__c b{font-size:16px}.szig-sel__l{font-size:13px}
  .szig-panel{padding:28px 20px 32px;border-radius:18px;overflow:hidden}
  .szig__row{grid-template-columns:1fr;gap:28px;min-height:0}
}
@media (max-width:560px){
  .szig__sub{font-size:16.5px}
  .szig__go{width:100%;padding:16px 14px;font-size:15px;gap:8px}
}
/* /organic-seo/ services tabs, phones: keep "Learn more about <service>" on one line (same treatment as .szig__go above;
   this sheet only loads on /organic-seo/, so the service-engine tabs are untouched). 2026-09-28 copy pass. */
@media (max-width:560px){[data-svc2-wt] .svc2-wt__go{white-space:nowrap;padding:16px 14px;font-size:15px;gap:8px}}
@media (prefers-reduced-motion:reduce){.szig-sel__c{transition:none}.szig-panel{animation:none}}
@media (min-width:901px){.szig-sel:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}} /* five cards (PPC + Enterprise PPC, 2026-09-29): one row */
@media (max-width:900px){.szig-sel:has(>:nth-child(5):last-child)>:last-child{grid-column:1/-1}} /* five cards on two columns: the last spans, no orphan */