/* Canonical footer styles (same rules every cclaw.group page carries inline, plus the
   payment button). Loaded by /chrome/footer.js on blog.cclaw.group and by 404.html. */
#x-ftr{--forest:#102217;--navy:#0A140D;--navy2:#0d1a11;--blue:#A9BAC0;--blue2:#c2cfd3;--ivory:#F3F1EC;}
#x-ftr *{margin:0;padding:0;box-sizing:border-box;}
#x-ftr body{font-family:'Inter',sans-serif;background:#cfc9bd;color:#3a3a3a;-webkit-font-smoothing:antialiased;}
#x-ftr .serif{font-family:'Cormorant Garamond',serif;}
#x-ftr a{text-decoration:none;}
#x-ftr .ph{max-width:1040px;margin:0 auto;padding:2.6rem 30px .4rem;}
#x-ftr .ph .k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#5c6657;font-weight:600;margin-bottom:.5rem;}
#x-ftr .ph h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2rem;color:var(--forest);}
#x-ftr .ph p{font-size:.86rem;color:#555f50;margin-top:.4rem;max-width:74ch;line-height:1.55;}
#x-ftr .lab{max-width:1180px;margin:2.4rem auto .7rem;padding:0 24px;display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;}
#x-ftr .lab .n{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--forest);font-weight:500;}
#x-ftr .lab .t{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#5c6657;font-weight:600;}
#x-ftr .lab .d{font-size:.82rem;color:#6c7567;font-style:italic;}
#x-ftr .frame{max-width:1180px;margin:0 auto 2.6rem;padding:0 18px;}
#x-ftr .frame>.ftr{border-radius:5px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.18);}
#x-ftr /* shared atoms */
  .ftr{background:var(--navy);color:rgba(255,255,255,.74);position:relative;}
#x-ftr .accent{height:2px;background:linear-gradient(90deg,var(--blue),rgba(169,186,192,0));}
#x-ftr .in{max-width:1120px;margin:0 auto;padding:0 52px;}
#x-ftr .logo-w{width:215px;height:auto;opacity:.96;display:block;}
#x-ftr .tag{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);font-weight:600;}
#x-ftr /* blog field */
  .bf .l{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.6);margin-bottom:.5rem;}
#x-ftr .bf .l b{color:var(--blue);font-weight:600;}
#x-ftr .bf .row{display:flex;gap:8px;}
#x-ftr .bf input{flex:1;min-width:150px;background:transparent;border:1px solid rgba(255,255,255,.26);color:#fff;padding:.5rem .8rem;font-size:.82rem;border-radius:2px;font-family:'Inter',sans-serif;}
#x-ftr .bf input::placeholder{color:rgba(255,255,255,.4);}
#x-ftr .bf input:focus{outline:none;border-color:var(--blue);}
#x-ftr .bf button{background:var(--blue);color:var(--forest);border:none;padding:.5rem .9rem;border-radius:2px;font-weight:700;cursor:pointer;font-size:.9rem;line-height:1;}
#x-ftr /* focus pills */
  .pills{display:flex;flex-wrap:wrap;gap:.6rem;}
#x-ftr .pills a{background:var(--blue);border:1px solid var(--blue);border-radius:2px;padding:.45rem .8rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--forest);transition:.2s;}
#x-ftr .pills{gap:.45rem;}
#x-ftr .pills a:hover{background:#c2cfd3;border-color:#c2cfd3;color:var(--forest);}
#x-ftr /* contact */
  .contact{font-size:.85rem;font-weight:300;color:rgba(255,255,255,.78);line-height:1.7;}
#x-ftr .contact a{color:rgba(255,255,255,.78);}
#x-ftr .contact a:hover{color:var(--blue);}
#x-ftr /* 24/7 */
  .b247{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--blue);color:var(--blue);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:.45rem .9rem;border-radius:999px;white-space:nowrap;}
#x-ftr .b247 .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);position:relative;flex:none;}
#x-ftr .b247 .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--blue);opacity:.6;animation:x-ftr_pl 2s ease-out infinite;}
@keyframes x-ftr_pl{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
#x-ftr /* languages */
  .langs{display:flex;flex-wrap:wrap;gap:.45rem;}
#x-ftr .langs span{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.35rem .8rem;font-size:.74rem;color:rgba(255,255,255,.72);}
#x-ftr .lk{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;}
#x-ftr /* social */
  .soc{display:flex;gap:16px;align-items:center;}
#x-ftr .soc a{color:rgba(255,255,255,.5);display:inline-flex;transition:color .2s;}
#x-ftr .soc a:hover{color:var(--blue);}
#x-ftr .soc svg{width:18px;height:18px;}
#x-ftr /* disclaimer */
  .disc{border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 0 2.4rem;}
#x-ftr .disc p{font-size:.66rem;line-height:1.6;color:rgba(255,255,255,.38);max-width:58ch;}
#x-ftr .disc .legal{display:flex;gap:.4rem 1.1rem;flex-wrap:wrap;background:transparent;}
#x-ftr .disc .legal a{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);}
#x-ftr .anchor-wm{position:absolute;right:2.5rem;top:50%;transform:translateY(-50%);width:200px;height:200px;color:rgba(169,186,192,.05);pointer-events:none;}
#x-ftr /* ===== V1 — Asymmetric Editorial (brand rail) ===== */
  .v1 .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;padding:2.6rem 0 2rem;}
#x-ftr .v1 .rail{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;border-right:1px solid rgba(255,255,255,.1);padding-right:2.4rem;}
#x-ftr .v1 .right{display:flex;flex-direction:column;gap:1.6rem;}
#x-ftr .v1 .right .bf{max-width:330px;}
#x-ftr .v1 .rail .b247{align-self:flex-start;}
#x-ftr .v1 .feat-h{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--blue);margin-bottom:.9rem;}
#x-ftr /* ===== V2 — Big Statement ===== */
  .v2 .state{padding:3.4rem 0 2rem;}
#x-ftr .v2 .state h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.7rem;line-height:1.12;color:#fff;max-width:18ch;}
#x-ftr .v2 .state h2 em{font-style:italic;color:var(--blue);}
#x-ftr .v2 .util{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;padding:1.2rem 0 2.4rem;align-items:start;}
#x-ftr /* ===== V3 — Two-tone top strip ===== */
  .v3 .strip{background:var(--navy2);border-bottom:1px solid rgba(169,186,192,.18);}
#x-ftr .v3 .strip-in{max-width:1120px;margin:0 auto;padding:1.5rem 52px;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
#x-ftr .v3 .strip .l{margin-bottom:0;}
#x-ftr .v3 .body{display:grid;grid-template-columns:1.3fr 1fr;gap:2.4rem;padding:2.6rem 0 2rem;}
#x-ftr .v3 .meta{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-end;text-align:right;}
#x-ftr /* ===== V4 — Minimal Airy Luxe ===== */
  .v4 .in{padding:0 64px;}
#x-ftr .v4 .top{display:flex;justify-content:space-between;align-items:center;padding:4rem 0 2.6rem;gap:2rem;flex-wrap:wrap;}
#x-ftr .v4 .areas-lux{display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;padding-bottom:2.8rem;}
#x-ftr .v4 .areas-lux a{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:#fff;}
#x-ftr .v4 .areas-lux a:hover{color:var(--blue);}
#x-ftr .v4 .row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:3rem;}
#x-ftr /* ===== V5 — Anchored Grid (watermark) ===== */
  .v5 .grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:2.4rem;padding:3.2rem 0 2.2rem;position:relative;z-index:1;}
#x-ftr .v5 .col-h{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--blue);margin-bottom:1rem;}
@media(max-width:780px){#x-ftr .v1 .grid, #x-ftr .v2 .util, #x-ftr .v3 .body, #x-ftr .v5 .grid{grid-template-columns:1fr;}
#x-ftr .v1 .rail{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding-right:0;padding-bottom:1.6rem;}
#x-ftr .v3 .meta{align-items:flex-start;text-align:left;}}

/* Footer: compact "Current Clients" row in the left brand rail, below the contact
   details. Outlined so it reads as distinct from the solid practice-area pills. */
body #x-ftr .cc-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}

body #x-ftr .cc-pay-btn svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--blue);
  transition: color 0.2s;
}

body #x-ftr .cc-pay-btn:hover {
  background: var(--blue);
  color: var(--forest);
}

body #x-ftr .cc-pay-btn:hover svg {
  color: var(--forest);
}

body #x-ftr .cc-pay-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}