/* ============================================================
   Loop Methods — cookie consent (banner, preferences modal, toast)
   + footer legal row. Loaded on every page after loop.css.
   ============================================================ */

/* ---- Shared buttons (follow the global rule: blue = white text, white = blue text) ---- */
.ck-btn{min-height:44px;padding:0 18px;border-radius:9999px;font:inherit;font-size:.875rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;transition:filter .2s ease-out,background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;text-decoration:none}
.ck-btn:focus-visible{outline:2px solid #7DC4FF;outline-offset:3px}
.ck-btn-primary{background:#4FA8FF;border:1px solid #4FA8FF;color:#fff}
.ck-btn-primary:hover{filter:brightness(1.1)}
.ck-btn-light{background:#fff;border:1px solid #fff;color:#2B6FD6}
.ck-btn-light:hover{background:rgba(255,255,255,.9)}
.ck-btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.88)}
.ck-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
.ck-btn svg{width:16px;height:16px;transition:transform .25s ease-out}
.ck-btn:hover svg.ck-arrow{transform:translateX(3px)}

/* ---- Layered-ring glow badge (same language as the service icon badges) ---- */
.ck-badge{flex-shrink:0;width:44px;height:44px;border-radius:9999px;display:grid;place-items:center;color:#4FA8FF;background:rgba(79,168,255,.08);box-shadow:0 0 0 1px rgba(79,168,255,.38),0 0 0 6px rgba(79,168,255,.05),0 0 0 7px rgba(79,168,255,.16),0 0 26px rgba(79,168,255,.22)}
.ck-badge svg{width:20px;height:20px}
.ck-badge-sm{width:36px;height:36px;box-shadow:0 0 0 1px rgba(79,168,255,.32),0 0 0 5px rgba(79,168,255,.05),0 0 0 6px rgba(79,168,255,.13)}
.ck-badge-sm svg{width:17px;height:17px}

.ck-link{color:#7DC4FF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(125,196,255,.45);transition:text-decoration-color .2s}
.ck-link:hover{text-decoration-color:#7DC4FF}
.ck-link:focus-visible{outline:2px solid #7DC4FF;outline-offset:2px;border-radius:2px}

/* ---- Banner: floating glass card (desktop) / bottom sheet (mobile) ---- */
.ck-banner{position:fixed;left:50%;bottom:24px;z-index:180;width:calc(100% - 32px);max-width:720px;padding:22px 24px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(11,13,18,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(79,168,255,.12),0 24px 60px -24px rgba(79,168,255,.45),0 14px 40px -14px rgba(0,0,0,.75);opacity:0;transform:translate(-50%,18px);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease-out}
.ck-banner[hidden]{display:none}
.ck-banner.is-in{opacity:1;transform:translate(-50%,0)}
.ck-banner.is-suppressed{opacity:0 !important;pointer-events:none;visibility:hidden}
.ck-b-head{display:flex;gap:16px;align-items:flex-start}
.ck-b-title{font-size:1rem;font-weight:600;color:#F5F6F8;letter-spacing:-.01em;line-height:1.3;padding-top:2px}
.ck-b-desc{margin-top:4px;font-size:.875rem;line-height:1.55;color:#9AA0AC;text-wrap:pretty}
.ck-actions{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

/* ---- Preferences modal (same shell as the Contact / Case Study modals) ---- */
.ck-backdrop{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.ck-backdrop.open{opacity:1;pointer-events:auto}
.ck-modal{position:fixed;inset:0;z-index:211;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none;visibility:hidden;transition:visibility 0s linear .3s}
.ck-modal.open{pointer-events:auto;visibility:visible;transition:visibility 0s}
.ck-panel{position:relative;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:32px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#0b0d12;box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 70px -24px rgba(79,168,255,.3);opacity:0;transform:scale(.96) translateY(10px);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease-out}
.ck-modal.open .ck-panel{opacity:1;transform:none}
.ck-panel::before{content:"";position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(79,168,255,.16),transparent 68%);pointer-events:none}
.ck-panel > *{position:relative}
.ck-grab{display:none}
.ck-close{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:9999px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background-color .2s,border-color .2s}
.ck-close:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.ck-close:focus-visible{outline:2px solid #7DC4FF;outline-offset:2px}
.ck-close svg{width:16px;height:16px}
.ck-h{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:#F5F6F8;padding-right:48px;line-height:1.2}
.ck-sub{margin-top:6px;font-size:.9rem;color:#9AA0AC;line-height:1.55}
.ck-signal{margin-top:14px;padding:10px 14px;border-radius:12px;border:1px solid rgba(79,168,255,.22);background:rgba(79,168,255,.06);font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.8)}
.ck-rows{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.ck-row{border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:16px 18px;transition:border-color .2s}
.ck-row.is-on{border-color:rgba(79,168,255,.28)}
.ck-row-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start}
.ck-row-name{font-size:.95rem;font-weight:600;color:#F5F6F8;line-height:1.3;padding-top:1px}
.ck-row-desc{margin-top:3px;font-size:.84rem;line-height:1.5;color:#9AA0AC;text-wrap:pretty}
.ck-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:3px}
.ck-always{font-size:.72rem;color:rgba(255,255,255,.6);white-space:nowrap}

/* Switch: state carried by position + glyph (check / dash), not colour alone */
.ck-switch{position:relative;flex-shrink:0;width:50px;height:28px;padding:0;border-radius:9999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out}
.ck-switch::after{content:"";position:absolute;inset:-8px -4px}
.ck-switch:focus-visible{outline:2px solid #7DC4FF;outline-offset:3px}
.ck-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:9999px;display:grid;place-items:center;background:rgba(255,255,255,.78);color:#0b0d12;transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s,color .2s}
.ck-knob svg{width:12px;height:12px}
.ck-knob .ck-g-on{display:none}
.ck-switch[aria-checked="true"]{background:#4FA8FF;border-color:#4FA8FF}
.ck-switch[aria-checked="true"] .ck-knob{transform:translateX(22px);background:#fff;color:#2B6FD6}
.ck-switch[aria-checked="true"] .ck-g-on{display:block}
.ck-switch[aria-checked="true"] .ck-g-off{display:none}
.ck-switch[aria-disabled="true"]{cursor:not-allowed;background:rgba(79,168,255,.42);border-color:rgba(79,168,255,.42)}
.ck-switch[aria-disabled="true"] .ck-knob{background:rgba(255,255,255,.85)}

.ck-more{margin-top:10px;margin-left:50px;min-height:32px;padding:0;display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:.8rem;color:#7DC4FF;cursor:pointer}
.ck-more:focus-visible{outline:2px solid #7DC4FF;outline-offset:2px;border-radius:4px}
.ck-more svg{width:14px;height:14px;transition:transform .2s ease-out}
.ck-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.ck-tbl{margin-top:6px;margin-left:50px;overflow-x:auto}
.ck-tbl[hidden]{display:none}
.ck-empty{font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.6);padding:4px 0}

/* Shared cookie table (modal + policy page) */
.ck-table{width:100%;border-collapse:collapse;font-size:.8rem}
.ck-table th{text-align:left;font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.55);padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.ck-table td{padding:10px;color:rgba(255,255,255,.78);border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;line-height:1.45}
.ck-table tr:last-child td{border-bottom:0}
.ck-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;color:#F5F6F8}
.ck-tag{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:9999px;border:1px solid rgba(255,255,255,.18);font-size:.66rem;color:rgba(255,255,255,.65);white-space:nowrap}

.ck-foot{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ck-links{margin-top:16px;display:flex;justify-content:center;gap:18px;font-size:.8rem}

/* ---- Toast ---- */
.ck-toast{position:fixed;left:50%;bottom:24px;z-index:230;max-width:calc(100% - 32px);padding:12px 20px;border-radius:9999px;background:#0b0d12;border:1px solid rgba(79,168,255,.35);box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 30px -12px rgba(79,168,255,.4);color:#F5F6F8;font-size:.875rem;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .3s ease-out,transform .35s cubic-bezier(.22,1,.36,1)}
.ck-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- Footer legal row ---- */
.ft-legal{display:flex;flex-direction:column;align-items:center;gap:8px}
.ft-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 18px;font-size:.8125rem}
.ft-legal-links a,.ft-legal-links button{padding:4px 0;background:none;border:0;font:inherit;color:rgba(255,255,255,.6);cursor:pointer;transition:color .2s ease-out}
.ft-legal-links a:hover,.ft-legal-links button:hover,.ft-legal-links [aria-current="page"]{color:#fff}
.ft-legal-links a:focus-visible,.ft-legal-links button:focus-visible{outline:2px solid #7DC4FF;outline-offset:2px;border-radius:2px}
@media (min-width:640px){.ft-legal{align-items:flex-start}.ft-legal-links{justify-content:flex-start}}

/* ---- Mobile ---- */
@media (max-width:640px){
  .ck-banner{left:0;right:0;bottom:0;width:100%;max-width:none;border-radius:20px 20px 0 0;border-bottom:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .ck-banner.is-in{transform:translateY(0)}
  .ck-actions,.ck-foot{grid-template-columns:1fr}
  .ck-modal{padding:0}
  .ck-panel{max-width:100%;max-height:100%;height:100%;border-radius:0;border:0;padding:20px 20px calc(24px + env(safe-area-inset-bottom))}
  .ck-grab{display:block;width:40px;height:4px;margin:0 auto 18px;border-radius:9999px;background:rgba(255,255,255,.22)}
  .ck-more,.ck-tbl{margin-left:0}
  .ck-table thead{display:none}
  .ck-table tr{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .ck-table tr:last-child{border-bottom:0}
  .ck-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:3px 0;border:0}
  .ck-table td::before{content:attr(data-label);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);padding-top:2px}
}

@media (prefers-reduced-motion: reduce){
  .ck-banner,.ck-banner.is-in,.ck-panel,.ck-modal.open .ck-panel,.ck-toast,.ck-toast.show{transform:none !important}
  .ck-banner{transition:opacity .2s linear}
  .ck-knob,.ck-more svg,.ck-btn svg{transition:none}
  @media (min-width:641px){.ck-banner,.ck-banner.is-in{transform:translateX(-50%) !important}.ck-toast,.ck-toast.show{transform:translateX(-50%) !important}}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){.ck-toast,.ck-toast.show{transform:translateX(-50%) !important}}