/* Moved out of global.css: loaded only on the templates that render this section (inc/part-styles.php). Loads before global.css, as a page stylesheet does. */
/* ══════════════════════════════════════════════════
   BEFORE & AFTER
   ══════════════════════════════════════════════════
   Client sites, the old one beside the one we built: centered head,
   two laptops with chevrons between, a client switcher when there
   is more than one pair, and a row of four points. Markup in
   template-parts/before-after.php; the feature row reuses the
   .sc-features styles from the proof bands above.
   ══════════════════════════════════════════════════ */
.before-after{
  position:relative;
  padding:clamp(72px,7.5vw,112px) 0 clamp(56px,6vw,80px);
  background:var(--navy-deep);
  color:var(--text);
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,0.08);
}
/* Two soft teal blooms in the corners over a deep blue field. */
.before-after::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 36% 50% at 0% 10%, rgba(22,192,183,0.14), transparent 70%),
    radial-gradient(ellipse 36% 50% at 100% 90%, rgba(22,192,183,0.12), transparent 70%),
    linear-gradient(180deg, #0a1a2b 0%, #0d1f2d 55%, #081524 100%);
  pointer-events:none;
  z-index:-1;
}
.before-after > .container{position:relative;}

/* ── Head ── */
.ba-head{text-align:center;max-width:760px;margin:0 auto;}
/* Kicker with a rule either side, centered. Space Mono like every
   other kicker; the rules replace the hex mark, which has no side
   to sit on when the line is centered. */
.ba-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-family:var(--mono2);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:18px;
}
.ba-eyebrow::before,
.ba-eyebrow::after{
  content:"";
  width:48px;height:1px;
  background:currentColor;
  opacity:0.6;
}
.ba-h2{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(32px,4.2vw,62px);
  line-height:1.14;
  letter-spacing:-0.02em;
  margin:0;
  color:#fff;
  -webkit-text-fill-color:currentColor;
}
.ba-h2 .boxed{font-size:1.08em;margin:0 0.06em;-webkit-text-fill-color:currentColor;}
.ba-sub{
  margin:18px auto 0;
  max-width:56ch;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.6;
  color:var(--muted);
}

/* ── Switcher ── */
.ba-switch{margin-top:clamp(32px,4vw,52px);}
.ba-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:4px 6px;
  margin:0 0 26px;
}
/* The client names are labels, not buttons: the two calls to action
   above are the buttons, and seven more shapes in the same clothes
   made the hero a wall of them. Small mono, a hex marker that fills
   on the active one, an underline that draws in on hover. */
.ba-pick{
  display:inline-flex;align-items:center;gap:6px;
  margin-right:10px;
  font-family:'Instrument Serif','Instrument Serif Fallback',serif;
  font-style:italic;
  font-size:19px;
  color:rgba(248,250,252,0.85);
  transform:rotate(-3deg);
}
.ba-pick svg{width:30px;height:auto;color:var(--teal);margin-top:6px;}
.ba-tab{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono2);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:9px 10px 8px;
  color:rgba(248,250,252,0.62);
  cursor:pointer;
  transition:color 0.2s;
}
.ba-tab::before{
  content:"";
  width:8px;height:9px;flex-shrink:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:currentColor;
  opacity:0.35;
  transition:opacity 0.2s,transform 0.25s;
}
.ba-tab::after{
  content:"";
  position:absolute;left:10px;right:10px;bottom:2px;
  height:2px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.25s cubic-bezier(0.2,0,0,1);
}
.ba-tab:hover{color:var(--text);}
.ba-tab:hover::before{opacity:0.7;}
.ba-tab:hover::after{transform:scaleX(1);}
.ba-radio:focus-visible + .ba-tab{outline:2px solid var(--teal);outline-offset:3px;}
/* A pair shows only while its radio is checked. The radios and
   labels are siblings in .ba-tabs; the pairs are siblings of
   .ba-tabs, so the pair is found with :has() on the switcher. One
   pair (no tabs) is always shown. */
.ba-switch-multi .ba-pair{display:none;}
.ba-switch-multi:has(.ba-radio:nth-of-type(1):checked) .ba-pair[data-pair="0"],
.ba-switch-multi:has(.ba-radio:nth-of-type(2):checked) .ba-pair[data-pair="1"],
.ba-switch-multi:has(.ba-radio:nth-of-type(3):checked) .ba-pair[data-pair="2"],
.ba-switch-multi:has(.ba-radio:nth-of-type(4):checked) .ba-pair[data-pair="3"],
.ba-switch-multi:has(.ba-radio:nth-of-type(5):checked) .ba-pair[data-pair="4"],
.ba-switch-multi:has(.ba-radio:nth-of-type(6):checked) .ba-pair[data-pair="5"],
.ba-switch-multi:has(.ba-radio:nth-of-type(7):checked) .ba-pair[data-pair="6"],
.ba-switch-multi:has(.ba-radio:nth-of-type(8):checked) .ba-pair[data-pair="7"]{display:block;}
.ba-switch-multi:has(.ba-radio:nth-of-type(1):checked) .ba-tab:nth-of-type(1),
.ba-switch-multi:has(.ba-radio:nth-of-type(2):checked) .ba-tab:nth-of-type(2),
.ba-switch-multi:has(.ba-radio:nth-of-type(3):checked) .ba-tab:nth-of-type(3),
.ba-switch-multi:has(.ba-radio:nth-of-type(4):checked) .ba-tab:nth-of-type(4),
.ba-switch-multi:has(.ba-radio:nth-of-type(5):checked) .ba-tab:nth-of-type(5),
.ba-switch-multi:has(.ba-radio:nth-of-type(6):checked) .ba-tab:nth-of-type(6),
.ba-switch-multi:has(.ba-radio:nth-of-type(7):checked) .ba-tab:nth-of-type(7),
.ba-switch-multi:has(.ba-radio:nth-of-type(8):checked) .ba-tab:nth-of-type(8){
  color:var(--teal);
}
.ba-switch-multi:has(.ba-radio:nth-of-type(1):checked) .ba-tab:nth-of-type(1)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(2):checked) .ba-tab:nth-of-type(2)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(3):checked) .ba-tab:nth-of-type(3)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(4):checked) .ba-tab:nth-of-type(4)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(5):checked) .ba-tab:nth-of-type(5)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(6):checked) .ba-tab:nth-of-type(6)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(7):checked) .ba-tab:nth-of-type(7)::before,
.ba-switch-multi:has(.ba-radio:nth-of-type(8):checked) .ba-tab:nth-of-type(8)::before{
  opacity:1;
  transform:rotate(30deg) scale(1.15);
}
.ba-switch-multi:has(.ba-radio:nth-of-type(1):checked) .ba-tab:nth-of-type(1)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(2):checked) .ba-tab:nth-of-type(2)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(3):checked) .ba-tab:nth-of-type(3)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(4):checked) .ba-tab:nth-of-type(4)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(5):checked) .ba-tab:nth-of-type(5)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(6):checked) .ba-tab:nth-of-type(6)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(7):checked) .ba-tab:nth-of-type(7)::after,
.ba-switch-multi:has(.ba-radio:nth-of-type(8):checked) .ba-tab:nth-of-type(8)::after{
  transform:scaleX(1);
}
/* A picked pair settles in rather than snapping: display toggles
   from none, which restarts the animation each time. */
@keyframes ba-in{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
.ba-switch-multi .ba-pair{animation:ba-in 0.45s cubic-bezier(0.2,0,0,1) both;}
/* Browsers without :has() (a sliver now) see every pair stacked,
   which is the content in full rather than a blank. */
@supports not selector(:has(a)){
  .ba-switch-multi .ba-pair{display:block;}
  .ba-tabs{display:none;}
}
.ba-client{
  text-align:center;
  margin:0 0 18px;
  font-size:14.5px;
  color:rgba(248,250,252,0.7);
}
.ba-client strong{color:#fff;font-weight:800;}

/* ── The pair ── */
.ba-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  gap:0 12px;
  align-items:end;
}
.ba-side{margin:0;min-width:0;}
.ba-side figcaption{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.ba-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono2);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;
}
.ba-tag::before{
  content:"";
  width:9px;height:10px;flex-shrink:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:currentColor;
}
/* BEFORE in the quiet color, AFTER in teal with a glow behind its
   marker: the pair says which side the site is on without two more
   buttons. */
.ba-tag-before{color:rgba(248,250,252,0.6);}
.ba-tag-after{color:var(--teal);}
.ba-tag-after::before{box-shadow:0 0 14px var(--teal);}
.ba-cap{
  font-size:clamp(16px,1.3vw,21px);
  font-weight:400;
  color:rgba(248,250,252,0.86);
  text-align:center;
}
.ba-side-before .ba-laptop{opacity:0.9;}
.ba-laptop{transition:transform 0.4s cubic-bezier(0.2,0,0,1);}
.ba-side:hover .ba-laptop{transform:translateY(-6px);}
.ba-side-after:hover .ba-screen{
  box-shadow:
    0 0 0 1px rgba(22,192,183,0.6),
    0 36px 64px -20px rgba(0,0,0,0.75),
    0 0 64px rgba(22,192,183,0.3);
}
/* The chevrons between, which read as "becomes". */
.ba-arrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  padding-bottom:22%;
  color:var(--teal);
  font-size:28px;
  letter-spacing:-0.3em;
}
.ba-arrow i{animation:ba-nudge 1.8s ease-in-out infinite;}
.ba-arrow i:nth-child(1){opacity:0.4;animation-delay:0s;}
.ba-arrow i:nth-child(2){opacity:0.7;animation-delay:0.15s;}
.ba-arrow i:nth-child(3){animation-delay:0.3s;}
@keyframes ba-nudge{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(4px);}
}
@media (prefers-reduced-motion:reduce){
  .ba-arrow i{animation:none;}
  .ba-switch-multi .ba-pair{animation:none;}
  .ba-laptop{transition:none;}
}

/* ── The laptop ── */
.ba-laptop{position:relative;}
.ba-screen{
  position:relative;
  aspect-ratio:16 / 10;
  background:#0b1420;
  border:10px solid #1b2430;
  border-bottom-width:14px;
  border-radius:16px 16px 4px 4px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 30px 60px -20px rgba(0,0,0,0.75);
}
.ba-screen img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
}
/* Camera notch. */
.ba-screen::before{
  content:"";
  position:absolute;
  top:-10px;left:50%;
  width:60px;height:8px;
  transform:translateX(-50%);
  background:#1b2430;
  border-radius:0 0 8px 8px;
  z-index:1;
}
.ba-base{
  height:14px;
  margin:0 -4%;
  background:linear-gradient(180deg,#d9dee5 0%,#aeb6c1 60%,#7f8894 100%);
  border-radius:0 0 14px 14px;
  position:relative;
}
.ba-base::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:16%;height:4px;
  transform:translateX(-50%);
  background:#8d96a3;
  border-radius:0 0 6px 6px;
}
.ba-side-after .ba-screen{
  box-shadow:
    0 0 0 1px rgba(22,192,183,0.35),
    0 30px 60px -20px rgba(0,0,0,0.75),
    0 0 48px rgba(22,192,183,0.18);
}

/* The feature row under the laptops. The rules are the ones the
   Search Console proof band uses (parts/sc-proof.css), repeated here
   because the homepage and the portfolio render this part without
   that one: when the row left global.css it lost its styling on
   both and printed as a bulleted list. */
.sc-features{
  list-style:none;
  margin:clamp(44px,5vw,72px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.sc-feature{
  display:flex;
  gap:18px;
  align-items:center;
  padding:6px 28px 6px 0;
  margin-right:28px;
  border-right:1px solid rgba(255,255,255,0.12);
}
.sc-feature:last-child{border-right:none;margin-right:0;padding-right:0;}
.sc-feature-icon{
  width:72px;height:72px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,192,183,0.08);
  border:1px solid rgba(22,192,183,0.4);
  box-shadow:0 0 24px rgba(22,192,183,0.14) inset;
  color:var(--teal);
  font-size:26px;
}
.sc-feature h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-0.01em;color:#fff;}
.sc-feature p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted);}
@media (max-width:1100px){
  .sc-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0;}
  .sc-feature:nth-child(2n){border-right:none;margin-right:0;padding-right:0;}
}
@media (max-width:700px){
  .sc-features{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:40px;}
  .sc-feature{border-right:none;margin-right:0;padding-right:0;}
  .sc-feature-icon{width:56px;height:56px;font-size:21px;}
}
.ba-features{margin-top:clamp(44px,5vw,64px);}

@media (max-width:900px){
  .ba-grid{
    grid-template-columns:minmax(0,1fr);
    gap:20px 0;
  }
  .ba-arrow{
    padding:0;
    transform:rotate(90deg);
    font-size:22px;
  }
  .ba-tabs{gap:2px 4px;}
  .ba-side figcaption{margin-bottom:14px;}
  .ba-base{margin:0 -2%;}
}
@media (max-width:700px){
  .before-after{padding:64px 0 56px;}
  .ba-h2{line-height:1.18;}
  .ba-tag{font-size:11px;}
  .ba-tab{padding:8px 8px 7px;font-size:11px;}
  .ba-pick{width:100%;justify-content:center;margin:0 0 4px;}
  .ba-features{margin-top:40px;}
}