/* ── The Connection · Two Forces / Tug-of-War ──────────────────── */
.tf-wrap{box-sizing:border-box;background:linear-gradient(160deg,#2B3D52 0%,#22344A 60%,#1b2c3f 100%);color:#fff;padding:64px 0;font-family:'Alegreya Sans',Arial,sans-serif;position:relative;overflow:hidden;container-type:inline-size;container-name:tf}
.tf-inner{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
.tf-wrap *{box-sizing:border-box;min-width:0}
.tf-wrap:before{content:"";position:absolute;top:-140px;right:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,61,.10),transparent 70%);pointer-events:none}
.tf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#FFC43D;border:1px solid rgba(255,196,61,.4);border-radius:40px;padding:7px 18px;margin-bottom:22px}
.tf-eyebrow i{width:8px;height:8px;border-radius:50%;background:#FFC43D;display:inline-block}
.tf-heading{font-family:'Playfair Display',Georgia,serif;font-weight:800;color:#fff;font-size:clamp(1.45rem,3vw,2.4rem);line-height:1.18;margin:0 0 14px;max-width:820px}
.tf-heading em{font-style:italic;color:#FFC43D}
.tf-intro{font-size:1.02rem;line-height:1.7;color:rgba(237,250,253,.9);max-width:820px;margin:0 0 8px;overflow-wrap:anywhere}
.tf-intro a{color:#FFC43D;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,196,61,.4)}
.tf-toggle{display:inline-flex;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-radius:40px;padding:5px;margin:18px 0 24px;gap:4px}
.tf-toggle .tf-tab,.tf-toggle .tf-tab:hover,.tf-toggle .tf-tab:focus,.tf-toggle .tf-tab:active{-webkit-appearance:none;appearance:none;font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.03em;border:0;background:none;color:rgba(237,250,253,.7);padding:9px 20px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s;box-shadow:none}
.tf-tab.on{background:#FFC43D;color:#2B3D52}
.tf-tab:focus-visible{outline:3px solid #FFC43D;outline-offset:2px}
.tf-forces{display:grid;grid-template-columns:1fr 96px 1fr;align-items:stretch;gap:0}
.tf-force{border-radius:14px;padding:22px;position:relative;min-width:0;transition:transform .5s,opacity .5s,box-shadow .5s}
.tf-force.left{background:rgba(255,196,61,.07);border:1px solid rgba(255,196,61,.28)}
.tf-force.right{background:rgba(120,170,255,.07);border:1px solid rgba(120,170,255,.26)}
.tf-tagline{font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;display:block}
.tf-force.left .tf-tagline{color:#FFC43D}
.tf-force.right .tf-tagline{color:#9cc2ff}
.tf-ftitle{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#fff;font-size:1.12rem;margin:0 0 8px;overflow-wrap:anywhere}
.tf-ftext{font-size:.92rem;line-height:1.55;color:rgba(237,250,253,.82);margin:0;overflow-wrap:anywhere}
.tf-arrow{position:absolute;top:50%;font-size:1.5rem;color:rgba(255,255,255,.45);transition:.5s}
.tf-force.left .tf-arrow{right:-13px;transform:translateY(-50%)}
.tf-force.right .tf-arrow{left:-13px;transform:translateY(-50%)}
.tf-beam{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.tf-knot{width:64px;height:64px;border-radius:50%;background:#2B3D52;border:2px solid #FFC43D;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:1.05rem;color:#FFC43D;transition:transform .5s,border-color .5s;text-align:center;line-height:1}
.tf-knot small{font-size:.5rem;font-family:'Montserrat',Arial,sans-serif;letter-spacing:.05em;font-weight:700}
.tf-rope{font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,250,253,.45)}
.tf-stage[data-mode="one"] .tf-force.left{transform:translateX(26px) scale(1.04);box-shadow:0 14px 40px rgba(255,196,61,.18)}
.tf-stage[data-mode="one"] .tf-force.right{opacity:.4;transform:translateX(18px) scale(.97)}
.tf-stage[data-mode="one"] .tf-knot{transform:translateX(20px);border-color:rgba(255,196,61,.5)}
.tf-stage[data-mode="both"] .tf-force.left{transform:none}
.tf-stage[data-mode="both"] .tf-force.right{transform:none;opacity:1}
.tf-stage[data-mode="both"] .tf-knot{transform:none;border-color:#FFC43D}
.tf-read{margin-top:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-left:4px solid #FFC43D;border-radius:12px;padding:16px 20px;min-height:78px}
.tf-read .t{font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#FFC43D;margin:0 0 6px}
.tf-read .x{font-size:.98rem;line-height:1.55;color:rgba(237,250,253,.92);margin:0;overflow-wrap:anywhere}
@media(max-width:860px){.tf-wrap{padding:48px 0}.tf-inner{padding:0 28px}.tf-forces{grid-template-columns:1fr;gap:42px}.tf-beam{flex-direction:row;gap:14px}.tf-force .tf-arrow{display:none}.tf-stage[data-mode="one"] .tf-force.left{transform:scale(1.03)}.tf-stage[data-mode="one"] .tf-force.right{transform:scale(.98)}.tf-stage[data-mode="one"] .tf-knot{transform:none}}
@media(max-width:560px){.tf-wrap{padding:44px 0}.tf-inner{padding:0 18px}.tf-force{padding:18px}.tf-toggle{display:flex;width:100%}.tf-toggle .tf-tab{flex:1}}
@media(prefers-reduced-motion:reduce){.tf-force,.tf-knot{transition:none}}