/* Marketing master layout (glass story). Ported verbatim from the static index.html <style> (main @ c3948cb). Do not restyle here without Guy/Yonatan. */
:root{
  /* Vivid+Co tokens (Refero) */
  --obsidian:#06070B; --bone:#fffdf9; --graphite:#495764; --ash:#403f3f; --fog:#6f879c;
  --fog-bright:#a6bccd; /* readable blue accent for text on dark (fog is too muted for copy) */
  --prism-red:#ff2a2a; --prism-cyan:#2a7fff; --prism-lime:#2aff2a;
  --sans:'General Sans','Inter',system-ui,-apple-system,sans-serif;
  --maxw:1440px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-hover:cubic-bezier(.33,1,.68,1);
  /* CTA pastel-psychedelic gradient — sampled from resolve.co.il (brand identity, matches the live button) */
  --cta-grad:
    radial-gradient(55% 80% at 18% 30%, rgba(255,231,128,.92), transparent 65%),
    radial-gradient(55% 80% at 82% 30%, rgba(74,220,255,.85), transparent 65%),
    radial-gradient(55% 80% at 18% 75%, rgba(255,159,200,.85), transparent 65%),
    radial-gradient(55% 80% at 82% 75%, rgba(177,158,255,.85), transparent 65%),
    radial-gradient(70% 70% at 50% 50%, rgba(255,235,200,.85), transparent 65%),
    linear-gradient(135deg,#FFE8A6 0%,#FFC1C9 30%,#C4B5FD 60%,#A5E8FF 100%);
}
*{box-sizing:border-box;margin:0}
/* overflow-x:clip on the ROOT stops mobile shrink-to-fit: the .scene::before veil is width:200% (absolute),
   which overflows the page horizontally and makes iOS/Android widen the layout viewport (~1.5x) so the whole
   site renders zoomed-out and tiny. body{overflow-x:hidden} alone does NOT prevent it; clipping at html does.
   `clip` (not hidden) avoids creating a scroll container that would fight Lenis. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--obsidian);color:var(--bone);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  font-feature-settings:"ss01" on}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4.5vw,64px)}

/* ---- fixed glass canvas: the through-line of the whole page ---- */
#glass-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;
  pointer-events:none;will-change:opacity}
/* soft circumferential halo — wide, feathered, breathing rings (no hard arcs, no banding).
   the wide gradient bands + a blur pass guarantee a smooth glow that flows instead of stepping. */
.flare{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 46%, transparent 55%, rgba(0,0,0,.40) 100%)}
.flare::before,.flare::after{content:"";position:absolute;border-radius:50%;
  mix-blend-mode:screen;filter:blur(16px);will-change:transform,opacity}
.flare::before{inset:-22% -26%;
  background:radial-gradient(circle at 38% 48%, transparent 33%, rgba(150,178,212,.11) 45%, transparent 64%),
             radial-gradient(circle at 41% 51%, transparent 24%, rgba(255,253,249,.06) 33%, transparent 48%);
  animation:breathe1 24s ease-in-out infinite}
.flare::after{inset:-26% -30%;
  background:radial-gradient(circle at 66% 50%, transparent 35%, rgba(120,150,190,.10) 47%, transparent 66%),
             radial-gradient(circle at 69% 52%, transparent 26%, rgba(200,215,235,.055) 35%, transparent 52%);
  animation:breathe2 31s ease-in-out infinite}
/* calmed to a near-static atmosphere (Guy: less noise, quiet not a show) — the halo barely breathes now */
@keyframes breathe1{0%,100%{transform:translate3d(-.3%,-.2%,0) scale(1);opacity:.9}
  50%{transform:translate3d(.4%,.3%,0) scale(1.02);opacity:1}}
@keyframes breathe2{0%,100%{transform:translate3d(.3%,.2%,0) scale(1.015);opacity:1}
  50%{transform:translate3d(-.4%,-.3%,0) scale(1);opacity:.9}}
.page{position:relative;z-index:2}

/* ---- NAV: transparent, uppercase ghost links + single outlined CONTACT ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav .brand{display:inline-flex;align-items:center;color:var(--bone);
  transition:opacity .25s var(--ease-hover)}
.nav .brand:hover{opacity:.72}
.brand-logo{height:21px;width:auto;display:block}
/* CONTACT in nav: a discreet ghost TEXT link at the top (while the hero + START A PROJECT are in view),
   morphing smoothly to the pastel-psychedelic CTA pill once the hero CTA scrolls out of view. The state
   is toggled by adding `.cta-live` to .nav (IntersectionObserver on the hero button, see script below). */
.nav .contact{position:relative;z-index:0;font-weight:600;font-size:13px;text-transform:uppercase;
  border:none;border-radius:100px;padding:10px 22px;color:var(--bone);background:transparent;
  transition:color .4s var(--ease-hover),transform .25s var(--ease-hover),filter .25s var(--ease-hover),opacity .25s var(--ease-hover)}
/* the pastel fill + glow live on a pseudo-element so opacity can cross-fade (a gradient can't be transitioned directly).
   the morph text->pill is a BLOOM, not a plain fade: the pastel disc rises + inflates from center (scale+translateY)
   with a soft ease-out settle, and reverses just as smoothly back to text (Guy: "make it cool, not just born"). */
.nav .contact::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:100px;background:var(--cta-grad);
  box-shadow:0 6px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0;transform:translateY(5px) scale(.58);transform-origin:center;
  transition:opacity .5s var(--ease-out),transform .58s var(--ease-out)}
.nav .contact:hover{opacity:.72}
.nav .contact:focus-visible{outline:2px solid #A5E8FF;outline-offset:3px}
/* scrolled past the hero (and past the finale CTA) -> becomes the bright CTA, blooming up into place */
.nav.cta-live .contact{color:#0A0908}
.nav.cta-live .contact::before{opacity:1;transform:translateY(0) scale(1)}
.nav.cta-live .contact:hover{opacity:1;transform:translateY(-1px);animation:ctaColorDrift 5s ease-in-out infinite}


/* ---- FROSTED PANEL behind the copy (Guy, 20.7.26: "shakifut keha aval be-blur").
   A pane of smoked glass sitting between the copy and the crystal.
   Why blur and not just a dark wash: it is SELF-ACTIVATING. Over empty page the blur has
   nothing to blur, so the panel is invisible. The moment a crystal drifts behind the copy
   the pane softens and darkens it and the type steps forward - the "entrance" Guy described
   happens on its own, with no JS, no tracking of the crystal, nothing to flicker.
   It is also the brand's own language: glass and frost.
   FEATHERED WITH mask-image, not with a gradient background - so the blur ITSELF fades out.
   A blurred rectangle with a visible border is an instant fail.
   The HERO is exempt: the crystal behind the giant type there is the frame Guy approved. ---- */
:root{ --frost-tint:0.52; }   /* tint lifted from .40 to recover the contrast the blur used to add */
.scene-in{ position:relative }
.scene-in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* box deliberately much larger than the copy: the mask below must finish fading INSIDE it.
     At the old -110px/-9% the ellipse was wider than its own box, got clipped at the edge before
     reaching transparent, and drew a hard black rectangle around the text (Guy flagged it). */
  top:-190px;bottom:-190px;left:-17%;right:-17%;
  /* NO backdrop-filter here. It ignores mask-image: the tint faded out softly along the mask
     while the BLUR stopped dead at the box edge, drawing a hard rectangle down the left and
     across the bottom (Guy flagged it twice). It was also what smeared the crystal and made the
     client logos unreadable. The masked tint alone carries legibility; the cube stays sharp. */
  background:rgba(6,7,11,var(--frost-tint));
  -webkit-mask-image:radial-gradient(ellipse 42% 40% at 50% 50%, #000 0%, rgba(0,0,0,.92) 32%,
    rgba(0,0,0,.55) 56%, rgba(0,0,0,.20) 78%, transparent 100%);
          mask-image:radial-gradient(ellipse 42% 40% at 50% 50%, #000 0%, rgba(0,0,0,.92) 32%,
    rgba(0,0,0,.55) 56%, rgba(0,0,0,.20) 78%, transparent 100%);
}
/* scene 6 is three columns wide - DISCOVER/BUILD/PARTNER is the frame Guy flagged, so the
   pane has to reach the outer columns, not just the middle. */
.scene.proof .scene-in::before{
  -webkit-mask-image:radial-gradient(ellipse 47% 44% at 50% 50%, #000 0%, rgba(0,0,0,.94) 38%,
    rgba(0,0,0,.60) 60%, rgba(0,0,0,.22) 80%, transparent 100%);
          mask-image:radial-gradient(ellipse 47% 44% at 50% 50%, #000 0%, rgba(0,0,0,.94) 38%,
    rgba(0,0,0,.60) 60%, rgba(0,0,0,.22) 80%, transparent 100%);
}
#s1 .scene-in::before{ display:none }   /* approved hero reference - untouched */

/* MOBILE GUARD: backdrop-filter over a WebGL canvas is a compositing cost that our desktop
   numbers cannot clear for real phone hardware (an M4 Pro at a 390px viewport is not a phone
   GPU). On coarse pointers we keep the tint and drop the blur - the tint alone measured free.
   Lift this only after a real-device test. */
@media (pointer:coarse), (max-width:820px){
  .scene-in::before{ background:rgba(6,7,11,calc(var(--frost-tint) * 1.10)); }
}

/* ---- STORY: each scene is one screen; the statement swaps as you scroll ---- */
.scene{min-height:100svh;display:flex;align-items:center;position:relative}
.scene-in{width:100%;max-width:min(92vw,1160px);margin-inline:auto;will-change:opacity,transform,filter}
/* .story = the <main> copy layer. Deliberately has NO mouse-driven transform: the text stands still,
   the crystal moves against it. (Kept as a semantic/structural hook only.) */
.eyebrow{font-weight:500;font-size:14px;text-transform:uppercase;color:var(--fog-bright);
  margin-bottom:clamp(22px,3vw,34px)}
.display{font-weight:400;font-size:clamp(44px,9.4vw,128px);line-height:1.0;letter-spacing:-.02em;
  text-wrap:balance;max-width:15ch;color:var(--bone);
  /* soft ambient lift so legibility comes from the glyphs, not from a dark disk over the crystal */
  text-shadow:0 1px 3px rgba(6,7,11,.5),0 2px 26px rgba(6,7,11,.45)}
.sub{font-weight:400;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--bone);opacity:.95;
  max-width:42ch;margin-top:clamp(24px,3vw,34px);text-wrap:pretty;
  text-shadow:0 1px 3px rgba(6,7,11,.5),0 1px 18px rgba(6,7,11,.45)}
/* accent word: STATIC bright white — the brightest word in the sub, but it never shimmers/moves on its own
   (Guy: revealed text stands still). No sweep animation, no background-clip — just a clean brighter fill. */
.sub .fog{opacity:1;color:#ffffff;text-shadow:none}
/* NOTE: headings must NOT use background-clip:text — their glyphs live in transformed .vp-word spans,
   which breaks the clip (piled/ghosted letters). The heading "shimmer" is a JS travelling weight-wave
   across the split chars instead (see weightWaveFrame). */
/* headings are split into words (scroll-reveal layer) and chars (weight-wave layer).
   font-variation-settings drives weight per char; wrapping still happens between the words. */
.display .vp-word{display:inline-block;will-change:opacity,filter,transform}
.display .vp-char{display:inline-block;font-variation-settings:"wght" 400}

.acts{display:flex;gap:14px;margin-top:clamp(30px,4vw,44px);flex-wrap:wrap}
/* CTA — pastel-psychedelic gradient pill (resolve.co.il brand button) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;text-transform:uppercase;padding:16px 40px;border-radius:100px;
  border:none;color:#0A0908;background:var(--cta-grad);
  box-shadow:0 12px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .28s var(--ease-hover),box-shadow .28s var(--ease-hover),filter .28s var(--ease-hover)}
/* soft warm cream halo behind the pill (the live button's glow) */
.btn::before{content:"";position:absolute;z-index:-1;inset:-45% -18%;border-radius:130px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,216,163,.6), rgba(255,186,150,.22) 52%, transparent 76%);
  filter:blur(20px);opacity:.9;transition:opacity .28s var(--ease-hover),transform .28s var(--ease-hover)}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.6);
  animation:ctaColorDrift 5s ease-in-out infinite}
.btn:hover::before{opacity:1;transform:scale(1.08)}
.btn:focus-visible{outline:2px solid #A5E8FF;outline-offset:3px}
.btn.solid{color:#0A0908}
/* HOVER: the psychedelic gradient drifts gently in colour (Guy) — a slow hue sweep so the pastels flow/travel
   while hovering. The near-black label (#0A0908) is ~neutral, so hue-rotate leaves the TEXT unchanged and only
   the saturated gradient shifts. saturate/brightness folded in so the animation doesn't drop the hover lift. */
@keyframes ctaColorDrift{
  0%,100%{filter:hue-rotate(0deg) saturate(1.05) brightness(1.02)}
  50%    {filter:hue-rotate(-22deg) saturate(1.14) brightness(1.05)}
}

/* scene 4 — the turn — stands alone, centred, largest */
.scene.turn .scene-in{text-align:center}
/* The turn line is longer than every other headline on the page. At the old 140px cap it ran
   to FIVE lines and filled 78% of the screen - a wall of text where the page wants its one
   dramatic beat. 120px lands it at four lines and 53%, still the largest type in the story. */
.scene.turn .display{max-width:18ch;margin-inline:auto;font-size:clamp(44px,9vw,120px)}

/* scene 6 — the proof — headline + 3 columns (Vivid services layout) */
.scene.proof{min-height:auto;padding-block:clamp(90px,13vh,150px)}
.proof-head{max-width:20ch;margin-bottom:clamp(48px,7vh,96px);
  font-size:clamp(32px,4.6vw,64px);line-height:1.05}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4.5vw,72px)}
.col-k{font-weight:500;font-size:clamp(17px,1.6vw,20px);color:var(--bone);
  margin-bottom:10px;letter-spacing:0}
.col-k .dots{display:grid;grid-template-columns:repeat(2,4px);grid-auto-rows:4px;gap:2px}
.col-k .dots i{background:var(--bone);width:4px;height:4px;display:block}
.col-k .dots i.off{background:rgba(255,253,249,.22)}
.col p{font-weight:400;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--bone);opacity:.82;
  text-wrap:pretty}

/* scene 7 — contact — closes the loop. Content sits HIGH (title + sub + CTA read clean at the top),
   the crystal drops low beneath it as a signature (path-Y drop in JS), and the page ends close to the
   content so there is no sea of black below the cube. */
.scene.contact-scene{min-height:100svh;align-items:flex-start;
  padding-top:clamp(112px,15vh,176px);padding-bottom:clamp(40px,7vh,96px)}
.scene.contact-scene .scene-in{text-align:center}
/* finale title a step smaller than the hero (hierarchy: the hero is the loudest moment) so it lands in
   TWO lines, leaving the lower screen for the crystal signature instead of a 3-line wall of text. */
.scene.contact-scene .display{font-size:clamp(38px,5.6vw,78px);max-width:20ch;margin-inline:auto}
.scene.contact-scene .sub{margin-inline:auto}
.contact-scene .acts{justify-content:center}
/* discreet legal links: pinned to the ABSOLUTE bottom of the finale — under the RESOLVE wordmark,
   in the lowest margin, so they read only at the very end of the scroll and never compete with the crystal.
   position:absolute (section is position:relative) + z-index lifts them clear of the .scene::before veil. */
.legal-links{position:absolute;left:0;right:0;bottom:clamp(16px,3vh,30px);z-index:4;
  margin:0;text-align:center;font-size:13px;
  letter-spacing:.01em;color:var(--fog);display:flex;gap:.5em;justify-content:center}
.legal-links a,.legal-links .cc-prefs{color:var(--fog);transition:color .2s var(--ease-hover)}
.legal-links a:hover,.legal-links .cc-prefs:hover{color:var(--bone)}
.legal-links a:focus-visible,.legal-links .cc-prefs:focus-visible{outline:2px solid var(--fog-bright);outline-offset:3px;border-radius:3px;color:var(--bone)}
.legal-links .cc-prefs{font:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:inherit}
/* (Real Office sticker removed 20.10.26 - a banner designed by Yonatan replaces it.) */
/* the one-line disclosure above the legal line: quiet, same size as the legal line, a step brighter */
.ro-caption{position:absolute;left:0;right:0;bottom:calc(clamp(16px,3vh,30px) + 24px);z-index:4;margin:0;padding-inline:16px;
  text-align:center;font-size:13px;line-height:1.3;color:var(--fog-bright);text-wrap:balance}
.nw{white-space:nowrap}
@media (max-width:640px){.ro-caption{bottom:calc(clamp(16px,3vh,30px) + 20px);font-size:12px;white-space:nowrap;padding-inline:8px}}
@media (max-width:359px){.ro-caption{white-space:normal;bottom:calc(clamp(16px,3vh,30px) + 18px)}}
.contact-mail{display:inline-block;margin-top:clamp(28px,3.5vw,40px);font-weight:500;
  font-size:clamp(18px,2vw,26px);border-bottom:1px solid var(--ash);padding-bottom:5px;
  transition:border-color .25s var(--ease-hover)}
.contact-mail:hover{border-color:var(--bone)}

/* readability veil behind statement blocks — a soft radial blob that feathers to fully
   transparent DEEP inside the element, so no rectangular edge/frame is ever visible.
   the box is oversized (200%) precisely so the gradient's transparent zone swallows every edge. */
.scene::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200%;height:200%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 45% 50%,rgba(6,7,11,.82),rgba(6,7,11,.44) 48%,transparent 72%)}
.scene.turn::before{background:radial-gradient(ellipse 48% 44% at 50% 50%,rgba(6,7,11,.84),rgba(6,7,11,.46) 48%,transparent 72%)}
/* contained veil (top:0/height:100%, NOT the shared 200%-tall centred one): the contact scene is the LAST
   element, and a 200% veil overflows ~450px BELOW the document — that phantom height was both the sea of
   black under the crystal AND what shoved the title up off the top. Kept within the scene, it fixes both. */
.scene.contact-scene::before{top:0;height:100%;transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 40% at 50% 40%,rgba(6,7,11,.48),rgba(6,7,11,.22) 46%,transparent 66%)}
.scene.proof::before{background:radial-gradient(ellipse 54% 50% at 50% 42%,rgba(6,7,11,.66),rgba(6,7,11,.32) 46%,transparent 70%)}

@media(prefers-reduced-motion:reduce){
  .flare::before,.flare::after{animation:none}
  /* no bloom/scale for the CONTACT morph under reduced motion -> a plain quick cross-fade */
  .nav .contact::before,.nav.cta-live .contact::before{transform:none;transition:opacity .2s linear}
  /* no hover colour-drift under reduced motion */
  .btn:hover,.nav.cta-live .contact:hover{animation:none}
}
@media(max-width:860px){
  .cols{grid-template-columns:1fr;gap:36px}
}
@media(max-width:720px){
  .nav-in{height:66px}
}
/* ---- PHONE: fluid headings sized for narrow screens, roomier rhythm, 44px+ tap targets ---- */
@media(max-width:600px){
  .wrap{padding-inline:22px}
  .nav-in{height:60px}
  .brand-logo{height:19px}
  /* keep the ghost/CTA morph, just give the tap area 44px min height */
  .nav .contact{padding:10px 18px;min-height:44px;display:inline-flex;align-items:center}
  .eyebrow{font-size:12.5px;margin-bottom:18px}
  .display{font-size:clamp(37px,10vw,60px);max-width:16ch}
  .scene.turn .display{font-size:clamp(41px,11.6vw,66px);max-width:14ch}
  /* PHONE readability veil: on a narrow screen the crystal can't fully clear the (near full-width) centred
     copy — the turn line especially. The veil sits IN FRONT of the crystal + behind the text, so a stronger,
     wider blob restores contrast for the headline without hiding the crystal (its body reads outside it). */
  .scene::before{background:radial-gradient(ellipse 66% 42% at 50% 50%,rgba(6,7,11,.72),rgba(6,7,11,.42) 50%,transparent 72%)}
  .scene.turn::before{background:radial-gradient(ellipse 82% 48% at 50% 50%,rgba(6,7,11,.9),rgba(6,7,11,.6) 50%,transparent 76%)}
  .scene.contact-scene::before{top:0;height:100%;transform:translateX(-50%);
    background:radial-gradient(ellipse 72% 42% at 50% 40%,rgba(6,7,11,.66),rgba(6,7,11,.36) 50%,transparent 72%)}
  .sub{font-size:17px;line-height:1.5;margin-top:22px;max-width:36ch}
  .acts{margin-top:28px;gap:12px}
  .btn{padding:15px 30px;font-size:14px;min-height:48px}
  .scene.proof{padding-block:76px}
  .proof-head{font-size:clamp(27px,7.2vw,40px);margin-bottom:44px}
  .col-k{font-size:17px;margin-bottom:8px}
  .col p{font-size:15.5px}
  .scene.contact-scene .display{max-width:14ch}
  .contact-mail{font-size:19px}
}
@media(max-width:380px){
  .display{font-size:clamp(33px,9.2vw,54px)}
  .scene.turn .display{font-size:clamp(36px,10.4vw,58px)}
}
/* LANDSCAPE phone (short height): the centred scene content would rise into the fixed nav and the tall
   compositions won't fit in ~390px of height. Compact the headings + rhythm so every scene reads and the
   hero eyebrow clears the nav. Scoped to landscape+short so portrait is never touched. */
@media(orientation:landscape) and (max-height:520px){
  .display{font-size:clamp(26px,5.2vw,40px);max-width:26ch}
  .scene.turn .display{font-size:clamp(28px,5.6vw,44px);max-width:24ch}
  .scene.contact-scene .display{font-size:clamp(26px,4.4vw,40px);max-width:28ch}
  .eyebrow{font-size:11.5px;margin-bottom:10px}
  .sub{margin-top:14px;font-size:15.5px;line-height:1.45}
  .acts{margin-top:16px}
  .scene.contact-scene{padding-top:clamp(60px,15vh,96px);padding-bottom:clamp(20px,5vh,48px)}
}
/* ---- Resolve Cookies: discreet consent bar (dogfood). Non-modal landmark, keyboard-operable, AA contrast,
   respects reduced motion. Marketing tags load ONLY after Accept (see the consent script before </body>). ---- */
.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);flex-wrap:wrap;
  padding:13px clamp(16px,4vw,40px);
  background:rgba(9,11,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.09);color:var(--bone);font-family:var(--sans);
  transform:translateY(110%);transition:transform .45s var(--ease-out);will-change:transform}
.cookie-consent.cc-in{transform:translateY(0)}
.cookie-consent.cc-out{transform:translateY(110%)}
.cc-text{font-size:13.5px;line-height:1.5;color:#c3ccd4;margin:0;max-width:64ch}
.cc-text a{color:var(--fog-bright);text-decoration:underline;text-underline-offset:2px}
.cc-text a:hover{color:var(--bone)}
.cc-actions{display:flex;gap:10px;flex-shrink:0}
.cc-btn{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:9px 20px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:border-color .2s var(--ease-hover),color .2s var(--ease-hover),filter .2s var(--ease-hover)}
.cc-decline{background:transparent;border-color:rgba(255,255,255,.22);color:#c3ccd4}
.cc-decline:hover{border-color:rgba(255,255,255,.5);color:var(--bone)}
.cc-accept{background:var(--bone);color:#0a0c11}
.cc-accept:hover{filter:brightness(1.08)}
.cc-btn:focus-visible{outline:2px solid var(--fog-bright);outline-offset:3px}
.cc-btn.cc-current{box-shadow:0 0 0 2px rgba(166,188,205,.55)}   /* marks the currently-active choice when re-opened */
@media (prefers-reduced-motion:reduce){.cookie-consent{transition:none}}
@media (max-width:560px){.cookie-consent{justify-content:flex-start}.cc-actions{width:100%}.cc-btn{flex:1}}

/* ---- WP port fixes (deviations from the static file, each deliberate) ----
   1. cookie bar text: the static page left "Privacy" alone on the last line at 390px (Guy's no-widow rule). */
.cc-text{text-wrap:pretty}