/* UI layer added on top of the design export: cookie banner, footer legal links,
   video tile, and Calendly embed. Uses the design tokens already defined on :root. */

/* ---- cookie consent banner ---- */
#cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  padding:0 clamp(14px,4vw,28px) clamp(14px,4vw,24px);
  transform:translateY(120%);transition:transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
#cookie-banner.cb-show{transform:translateY(0);pointer-events:auto;}
#cookie-banner .cb-inner{
  max-width:920px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(14px,3vw,28px);flex-wrap:wrap;
  background:rgba(20,18,16,.96);border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.85);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
}
#cookie-banner .cb-text{
  flex:1 1 280px;margin:0;color:#cfc9bf;
  font:400 13.5px/1.55 'Hanken Grotesk',sans-serif;
}
#cookie-banner .cb-text a{color:var(--accent);text-decoration:none;}
#cookie-banner .cb-text a:hover{text-decoration:underline;}
#cookie-banner .cb-actions{display:flex;gap:10px;flex:0 0 auto;}
#cookie-banner .cb-btn{
  font:600 13px/1 'Hanken Grotesk',sans-serif;letter-spacing:.02em;
  padding:11px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
#cookie-banner .cb-accept{background:var(--accent);color:#150a06;}
#cookie-banner .cb-accept:hover{background:#ff6a47;}
#cookie-banner .cb-decline{background:transparent;color:var(--ink);border-color:var(--line);}
#cookie-banner .cb-decline:hover{border-color:rgba(243,239,231,.4);}

/* ---- footer legal links ---- */
.legal-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.legal-links a,.legal-links button{
  background:none;border:0;padding:0;cursor:pointer;
  font:400 13px/1.4 'Hanken Grotesk',sans-serif;color:var(--faint);
  text-decoration:none;letter-spacing:.02em;
}
.legal-links a:hover,.legal-links button:hover{color:var(--muted);}

/* ---- portfolio video tile ----
   The video is inserted in DOM right after the gradient/grain placeholder layers,
   so it paints over them but stays below the framing overlays (vignette, notch,
   play button, label/scrub). No z-index needed: pure source-order stacking. */
[data-tile] video[data-clip]{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;background:#0f0f12;display:block;
}
[data-play]{transition:opacity .3s ease;}

/* ---- Calendly inline embed ---- */
.calendly-inline-widget{min-width:280px;}
#calendly-fallback{display:block;}
.consent-accepted #calendly-fallback{display:none;}
#calendly-embed{display:none;}
.consent-accepted #calendly-embed{display:block;}

/* ---- Responsive layout at the CSS level ----
   The design export drove all responsive layout from JS (componentDidMount),
   which shifts layout after first paint (CLS). These rules mirror site.js's
   breakpoints (desk >= 980, mid >= 640) so the correct layout is in place at
   first paint; site.js then sets the same values (no shift). !important is
   needed because the export hard-codes the desktop layout as inline styles.
   site.js remains as a progressive-enhancement fallback. */
@media (max-width: 979.98px){
  #hero-grid{flex-direction:column !important;align-items:flex-start !important;gap:52px !important;}
  #hero-right{align-self:center !important;transform:scale(.9) !important;transform-origin:center top !important;}
  #nav-links{display:none !important;}
}
@media (max-width: 559.98px){
  #hero-right{transform:scale(.78) !important;}
}
@media (min-width: 640px) and (max-width: 979.98px){
  [data-grid="work"]{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width: 639.98px){
  [data-grid="work"]{grid-template-columns:1fr !important;}
  #why-band{flex-direction:column !important;}
  #contact-row{flex-direction:column !important;}
}