/* ============================================================
   BGS Imperium
   Ported class for class from the Superdesign template he supplied
   (Tailwind CDN), into plain CSS so the page has no build step, no
   runtime framework and opens by double-clicking. Values in the
   comments are the Tailwind utilities each rule replaces.
   ============================================================ */

:root{
  --bg:     #050505;
  --accent: #FF4500;   /* the template's orange: now the hero and nav only (pill glow, selection, focus) */
  /* the red that replaced the orange everywhere below the hero, 2026-09-23.
     Close to the hero arms' own red (~#CD180E). White text on it 5.06:1;
     black would be 4.15:1, under AA, so the red card's text is white. */
  --red:    #D91E18;
  --red-rgb: 217,30,24;
  --card:   #111111;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease:     cubic-bezier(.4,0,.2,1);
}

/* ---------- preflight (the parts of Tailwind's reset this page relies on) ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background-color:var(--bg);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0;font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
img{display:block;max-width:100%;height:auto}
svg{display:block}
::selection{background:var(--accent);color:#fff}
:where(a):focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* below the hero, selection and focus follow the red */
.mission ::selection,.works ::selection,.book ::selection,.foot ::selection,.legal ::selection{background:var(--red)}
:where(.mission,.works,.book,.foot,.legal) :where(a,button):focus-visible{outline-color:var(--red)}

.page{min-height:100vh;background:var(--bg)}

/* container mx-auto px-6 */
.container{width:100%;margin-inline:auto;padding-inline:1.5rem}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}

/* ---------- reveal ---------- */
/* scoped to .js so nothing is hidden when the script is blocked */
.js .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all .8s var(--ease-out);
}
.js .reveal.active{opacity:1;transform:translateY(0)}

/* ---------- floating arms ---------- */
@keyframes float-hand-left{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-20px) rotate(2deg)}
}
@keyframes float-hand-right{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(20px) rotate(-2deg)}
}

/* ---------- noise ---------- */
/* the template pulled this from grainy-gradients.vercel.app; it is
   generated in place here so the page depends on nobody's server */
.noise-overlay{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- parallax ---------- */
.parallax-card-up{transform:translateY(var(--scroll-offset-up,0px))}
.parallax-card-down{transform:translateY(var(--scroll-offset-down,0px))}

/* ============================================================
   NAV — fixed z-50 transition-all duration-500 py-8
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-block:2rem;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:all .5s var(--ease);
}
.nav.is-scrolled{
  padding-block:1rem;
  background:rgba(5,5,5,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.05);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* text-2xl font-bold tracking-tighter font-serif */
.nav-logo{
  font:700 1.5rem/2rem var(--serif);letter-spacing:-.05em;
  white-space:nowrap;
}

/* hidden md:flex space-x-8 ; text-sm text-gray-400 hover:text-white */
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{
  font-size:.875rem;line-height:1.25rem;color:#9ca3af;
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:#fff}

/* px-6 py-3 rounded-full text-sm font-medium bg-white text-black
   hover:scale-105 hover:bg-gray-100 */
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.75rem 1.5rem;border-radius:9999px;
  font-size:.875rem;line-height:1.25rem;font-weight:500;
  background:#fff;color:#000;white-space:nowrap;
  transition:all .3s var(--ease);
}
.nav-cta:hover{transform:scale(1.05);background:#f3f4f6}

/* ============================================================
   HERO — relative min-h-screen flex items-center justify-center
          overflow-hidden pt-32 pb-20
   ============================================================ */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:8rem 0 5rem;
  background:var(--bg);
}
.hero-atmo{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.hero-atmo img{width:100%;height:100%;object-fit:cover;object-position:center}
/* bg-gradient-to-b from-transparent via-transparent to-[#050505] */
.hero-atmo-fade{
  position:absolute;inset:0;z-index:10;
  background:linear-gradient(to bottom,rgba(5,5,5,0) 0%,rgba(5,5,5,0) 50%,#050505 100%);
}

/* the arms. The template's hands were composited with hard-light over
   its background at 80%; these are tinted to the same red in the file
   itself, so they sit at a plain opacity and no blend is needed. */
.arm{position:absolute;z-index:10;pointer-events:none}
.arm img{width:100%;height:auto;filter:drop-shadow(24px 34px 38px rgba(20,0,0,.45))}

/* -left-[10%] top-[-10%] w-[50vw] ; md: left-[-5%] top-[-15%] w-[40vw] max-w-[800px] */
.arm-robot{
  left:-10%;top:-10%;
  width:50vw;max-width:800px;opacity:.9;
  animation:float-hand-left 12s ease-in-out infinite;
}
/* -right-[10%] bottom-[-10%] w-[45vw] ; md: right-[-5%] bottom-[-5%] w-[35vw] max-w-[700px] */
.arm-human{
  right:-10%;bottom:-10%;
  width:45vw;max-width:700px;opacity:.9;
  animation:float-hand-right 14s ease-in-out infinite;
}

.hero-content{
  position:relative;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;
}
.hero-wrap{max-width:56rem;margin-inline:auto}

/* text-5xl md:text-7xl font-medium leading-[1.1] tracking-tight mb-6
   text-[#ffe0e0] mix-blend-overlay font-serif, white glow */
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:3rem;line-height:1.1;letter-spacing:-.025em;
  margin-bottom:1.5rem;
  color:#ffe0e0;mix-blend-mode:overlay;
  text-shadow:0 0 12px rgba(255,255,255,.71);
}
/* italic font-light */
.hero-title span{font-style:italic;font-weight:300;color:#ffe0e0}

/* text-base md:text-lg text-[#ffe0e0]/90 max-w-lg mx-auto mb-16 font-light
   tracking-wide leading-relaxed mix-blend-overlay */
.hero-lede{
  font-size:1rem;line-height:1.625;font-weight:300;letter-spacing:.025em;
  color:rgba(255,224,224,.9);
  max-width:32rem;margin:0 auto 4rem;
  mix-blend-mode:overlay;
  text-shadow:0 0 12px rgba(255,255,255,.71);
}

.hero-act{display:flex;flex-direction:column;align-items:center;gap:1.5rem}

/* the pill: relative group ; glow bg-[#FF4500]/20 blur-xl ; inner border-white/20
   bg-white/5 backdrop-blur-sm px-6 py-2 rounded-full text-xs md:text-sm
   text-white/80 uppercase tracking-widest */
.pill{position:relative;display:inline-block;cursor:pointer;border-radius:9999px}
.pill-glow{
  position:absolute;inset:0;border-radius:9999px;
  background:rgba(255,69,0,.2);filter:blur(24px);
  opacity:0;transition:opacity .5s var(--ease);
}
.pill:hover .pill-glow{opacity:.5}
.pill-in{
  position:relative;display:flex;align-items:center;gap:.75rem;
  padding:.5rem 1.5rem;border-radius:9999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-size:.75rem;line-height:1rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
  transition:background-color .3s var(--ease);
}
.pill:hover .pill-in{background:rgba(255,255,255,.1)}

/* flex gap-4 text-[10px] md:text-xs text-white/40 uppercase tracking-widest mt-8 font-mono */
.hero-meta{
  display:flex;align-items:center;gap:1rem;margin-top:2rem;
  font:400 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.hero-meta-rule{width:1px;height:.75rem;background:rgba(255,255,255,.2)}

/* ============================================================
   MISSION — py-32 relative
   ============================================================ */
.mission{position:relative;padding-block:8rem}
section[id]{scroll-margin-top:5rem}
/* ---------- 3D SHOWCASE (added 2026-09-23) ----------
   Ported from the 21st.dev SplineSceneBasic demo: Card w-full h-[500px]
   bg-black/[0.96] overflow-hidden, copy flex-1 p-8 on the left, the scene
   flex-1 on the right. The React wrapper is replaced by Spline's own
   runtime (main.js), framer-motion's spotlight by a small rAF follower.

   The scene column exists only when it can be filled: it is hidden
   without JavaScript and under reduced motion, and the copy then takes
   the whole card instead of sitting beside an empty half. */
.showcase{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:1.5rem;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.96);
}
.showcase-spot{
  position:absolute;left:0;top:0;z-index:0;
  width:360px;height:360px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at center,#fafafa,#f4f4f5 30%,#e4e4e7 50%,transparent 80%);
  filter:blur(24px);
  opacity:0;transition:opacity .2s ease;
  will-change:transform;
}
/* the demo's spotlight runs at full white; behind light type that washes
   the headline out, so it is held to a glow */
.showcase.is-lit .showcase-spot{opacity:.13}
.showcase-copy{
  position:relative;z-index:10;flex:1 1 0;
  display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem 2rem;
}
/* text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-b
   from-neutral-50 to-neutral-400 — set in the site's serif */
.showcase-copy h2{
  font-family:var(--serif);font-weight:400;
  font-size:2.25rem;line-height:1.1;letter-spacing:-.01em;
  background:linear-gradient(to bottom,#fafafa,#a3a3a3);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* mt-4 text-neutral-300 max-w-lg */
.showcase-copy p{margin-top:1.25rem;max-width:32rem;color:#d4d4d4;font-size:1.0625rem;line-height:1.65;font-weight:300}

.showcase-scene{display:none;position:relative;flex:1 1 0;min-height:340px}
.js .showcase-scene{display:block}
.showcase-scene canvas{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  opacity:0;transition:opacity .8s ease;
}
.showcase-scene.is-live canvas{opacity:1}
.showcase-scene.is-failed{display:none}

/* the demo's .loader, which it references but never defines */
.loader{
  position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.6);
  animation:spin .9s linear infinite;
}
.showcase-scene.is-live .loader{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- THE SIX AGENTS ---------- */
.agents{
  margin-top:1.5rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;
}
.agent{
  border-radius:1.25rem;padding:2rem;
  background:#0e0e11;border:1px solid rgba(255,255,255,.08);
}
.js .reveal.agent.active{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),border-color .5s var(--ease)}
.agent:hover{border-color:rgba(var(--red-rgb),.55)}
.agent-ico{
  width:3rem;height:3rem;border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--red-rgb),.12);border:1px solid rgba(var(--red-rgb),.35);
  color:var(--red);
}
.agent-ico svg{width:1.4rem;height:1.4rem}
.agent-no{
  margin-top:2.25rem;
  font:400 .75rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  /* #6b7280 (gray-500) is 3.99:1 on the card, under AA for 12px text */
  color:#858b96;
}
.agent h3{
  margin-top:.9rem;
  font-family:var(--serif);font-size:1.75rem;line-height:1.1;letter-spacing:-.01em;
  color:#fff;
}
.agent p:last-child{margin-top:1rem;color:#9ca3af;font-size:1rem;line-height:1.65}
.agent strong{color:#e5e7eb;font-weight:600}

/* THE NAME BAR — the template's mt-32 opacity-40 grayscale row with
   font-bold text-xl tracking-widest names, turned into an endless
   right-to-left scroll (added 2026-09-23).

   Three identical sets and a -33.333% shift: the loop is seamless when
   the track moves exactly one set width, and two sets must always cover
   the container, which one set alone does not at 1280 (a set is ~1165px).
   Each set carries its own trailing gap as padding, so the seam between
   sets is the same gap as between names. The edges fade out rather than
   cut. Hover pauses it. */
.logos-wrap{margin-top:8rem}
.logos{
  --logos-gap:4rem;
  overflow:hidden;
  opacity:.4;filter:grayscale(1);
  transition:filter .5s var(--ease);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.logos:hover{filter:grayscale(0)}
.logos-track{
  display:flex;width:max-content;
  animation:logos-scroll 30s linear infinite;
}
.logos:hover .logos-track{animation-play-state:paused}
.logos-set{
  display:flex;flex:0 0 auto;align-items:center;
  gap:var(--logos-gap);padding:0 var(--logos-gap) 0 0;margin:0;list-style:none;
}
.logos-set li{
  font-weight:700;font-size:1rem;line-height:1.75rem;letter-spacing:.1em;
  white-space:nowrap;
}
@keyframes logos-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-33.3333%)}
}

/* ============================================================
   CARDS — py-40 relative overflow-hidden
   ============================================================ */
.works{position:relative;padding-block:10rem;overflow:hidden}
.works-in{position:relative;z-index:10}
.works-head{margin-bottom:8rem}
/* text-5xl md:text-7xl text-center font-serif */
.works-head h2{font-family:var(--serif);font-size:3rem;line-height:1;text-align:center}
.works-head h2 span{font-style:italic}

/* grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;max-width:64rem;margin-inline:auto}

/* rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl
   group cursor-pointer */
.card{
  border-radius:1.5rem;padding:2rem;
  aspect-ratio:4/5;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}
.js .reveal.card{transition:all .5s var(--ease)}
.js .reveal.card:not(.active){transition:all .8s var(--ease-out)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.card-ico{
  width:3rem;height:3rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease);
}
.card-ico svg{width:1.5rem;height:1.5rem}
.card-no{
  font-weight:500;font-size:.875rem;line-height:1.25rem;
  padding:.25rem .75rem;border-radius:9999px;border:1px solid;
}
/* text-4xl md:text-5xl mb-4 leading-none tracking-tight font-serif */
.card h3{
  font-family:var(--serif);
  font-size:2.25rem;line-height:1;letter-spacing:-.025em;margin-bottom:1rem;
}
/* text-lg leading-snug */
.card p{font-size:1.125rem;line-height:1.375}
.card-rule{width:100%;height:1px;margin-top:2rem}

.card-red{background:var(--red);color:#fff}
.card-red:hover{box-shadow:0 20px 50px rgba(var(--red-rgb),.35)}
.card-red .card-ico{background:rgba(255,255,255,.14)}
.card-red:hover .card-ico{transform:rotate(45deg)}
.card-red .card-no{border-color:rgba(255,255,255,.35)}
/* full white: at 90% it falls to 4.31:1 on this red */
.card-red p{color:#fff}
.card-red .card-rule{background:rgba(255,255,255,.2)}

.card-dark{background:var(--card);border:1px solid rgba(255,255,255,.1);color:#fff}
.card-dark:hover{border-color:rgba(var(--red-rgb),.55)}
.card-dark .card-ico{background:rgba(255,255,255,.05)}
.card-dark .card-ico svg{transform:rotate(-45deg)}
.card-dark:hover .card-ico{transform:scale(1.1)}
.card-dark .card-no{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}
.card-dark p{color:#9ca3af}
.card-dark .card-rule{background:rgba(255,255,255,.1)}

/* w-[120%] h-[120%] opacity-10, a 40px dot grid */
.works-dots{
  position:absolute;top:50%;left:50%;
  width:120%;height:120%;transform:translate(-50%,-50%);
  opacity:.1;pointer-events:none;
  background-image:radial-gradient(circle,#333 1px,transparent 1px);
  background-size:40px 40px;
}

/* ============================================================
   BOOK A CALL (added 2026-09-23) — the Cal.com calendar inline,
   the same event and month view the live site embeds
   ============================================================ */
.book{position:relative;padding-block:8rem}
.book-head{max-width:40rem;margin:0 auto 3.5rem;text-align:center}
.book-head h2{font-family:var(--serif);font-size:3rem;line-height:1}
.book-head h2 span{font-style:italic}
.book-head p{margin-top:1.5rem;color:#9ca3af;font-size:1.125rem;line-height:1.625;font-weight:300}
.book-cal{
  position:relative;max-width:64rem;margin-inline:auto;
  min-height:420px;
  border-radius:1.5rem;border:1px solid rgba(255,255,255,.08);
  background:#0e0e11;overflow:hidden;
}
.book-embed{position:relative;z-index:1;width:100%}
/* Cal sizes its iframe to its content; this keeps the card from
   collapsing to nothing while it loads */
.book-embed iframe{display:block;width:100%!important}
.book-fallback{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
}
.book-fallback .loader{position:static;margin:0}
.book-fallback a{
  font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);
  padding:.5rem 1.5rem;border-radius:9999px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);transition:background-color .3s var(--ease);
}
.book-fallback a:hover{background:rgba(255,255,255,.1)}
/* the spinner only means something while a script is loading the calendar */
html:not(.js) .book-fallback .loader,.book-cal.is-failed .book-fallback .loader{display:none}
.book-cal.is-live .book-fallback{display:none}

/* ============================================================
   PRIVACY POLICY PAGE (added 2026-09-23) — privacy.html
   English and French in one page; the switch shows one at a time.
   Without JavaScript both are shown, English first.
   ============================================================ */
.legal{padding:9rem 0 6rem}
.legal-in{max-width:48rem}
.lang-switch{
  display:inline-flex;gap:.25rem;padding:.25rem;margin-bottom:3rem;
  border-radius:9999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
}
html:not(.js) .lang-switch{display:none}
.lang-switch button{
  font:500 .8125rem/1 var(--sans);letter-spacing:.06em;color:#9ca3af;
  background:none;border:0;cursor:pointer;
  padding:.6rem 1.1rem;border-radius:9999px;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.lang-switch button:hover{color:#fff}
.lang-switch button[aria-pressed="true"]{background:#fff;color:#000}
.lang-switch button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.js .legal-doc[hidden]{display:none}
.legal-doc + .legal-doc{margin-top:6rem;padding-top:6rem;border-top:1px solid rgba(255,255,255,.08)}
.js .legal-doc + .legal-doc{margin-top:0;padding-top:0;border-top:0}

.legal-head{margin-bottom:3.5rem}
.legal-head h1{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:1.05;letter-spacing:-.015em}
.legal-head h1 span{font-style:italic}
/* .legal-doc .legal-date, not .legal-date: the .legal-doc p rule below
   outranks a lone class and set this label at 17px body size */
.legal-doc .legal-date{
  margin-top:1.25rem;
  font:400 .75rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#858b96;
}
@media (min-width:480px){.legal-doc .legal-date{letter-spacing:.2em}}
.legal-doc p,.legal-doc li{color:#b4b8c0;font-size:1.0625rem;line-height:1.75;font-weight:300}
.legal-head p:last-child{margin-top:1.75rem}
.legal-doc section{padding-top:2.5rem;margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.08)}
.legal-doc h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.2;color:#fff;margin-bottom:1rem}
.legal-doc h3{
  margin:1.75rem 0 .5rem;
  font:600 .8125rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#e5e7eb;
}
.legal-doc h2 + h3{margin-top:0}
.legal-doc p + p{margin-top:1rem}
.legal-doc ul{margin:1rem 0;padding-left:1.25rem}
.legal-doc li{padding-left:.25rem}
.legal-doc li + li{margin-top:.5rem}
.legal-doc li::marker{color:var(--red)}
.legal-doc strong{color:#e5e7eb;font-weight:500}
.legal-doc em{font-style:italic}
.legal-doc a{color:#fff;text-decoration:underline;text-decoration-color:rgba(var(--red-rgb),.75);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc a:hover{text-decoration-color:var(--red)}
@media (min-width:768px){
  .legal-head h1{font-size:4.5rem}
  .legal-doc h2{font-size:2rem}
}

/* ============================================================
   FOOTER — py-20 border-t border-white/5 relative overflow-hidden
   ============================================================ */
.foot{
  position:relative;overflow:hidden;
  padding-block:5rem;background:var(--bg);
  border-top:1px solid rgba(255,255,255,.05);
}
.foot-in{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:3rem;
}
.foot-mark{width:100%;min-width:0}
/* text-[10vw] leading-[0.8] tracking-tighter text-white/10 font-bold */
.foot-mark p{
  font-size:10vw;line-height:.8;letter-spacing:-.05em;font-weight:700;
  color:rgba(255,255,255,.1);
  white-space:nowrap;user-select:none;pointer-events:none;
}
.foot-side{display:flex;flex-direction:column;gap:2rem;text-align:right;align-self:flex-end}
.foot-links{display:flex;flex-direction:column;gap:1rem;color:#9ca3af}
.foot-links a{transition:color .15s var(--ease);overflow-wrap:anywhere}
.foot-links a:hover{color:#fff}
.foot-legal{font-size:.875rem;line-height:1.25rem;color:#4b5563}

/* ============================================================
   md: 768px and up
   ============================================================ */
@media (min-width:768px){
  .nav-links{display:flex}

  /* the robot image is wider than the template's hand (1.43:1 against
     1.17:1), so it is set larger and lower to land its fingertip where
     the reference's lands: a third across, just under a third down */
  .arm-robot{left:-10%;top:-13%;width:46vw}
  .arm-human{right:-5%;bottom:-5%;width:35vw}

  .hero-title{font-size:4.5rem}
  .hero-lede{font-size:1.125rem}
  .pill-in{font-size:.875rem;line-height:1.25rem}
  .hero-meta{font-size:.75rem}

  .showcase-copy{padding:3rem}
  .showcase-copy h2{font-size:3rem}
  .showcase-scene{min-height:420px}
  .agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:2rem}
  .agent{padding:2.5rem}
  .logos{--logos-gap:6rem}
  .logos-set li{font-size:1.25rem}

  .works-head h2{font-size:4.5rem}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:3rem}
  .card h3{font-size:3rem}
  .card-offset{margin-top:6rem}

  .book-head h2{font-size:4.5rem}

}
@media (min-width:1024px){
  /* side by side only from 1024: at tablet width the scene column is
     ~360px and Spline's fixed camera crops the robot's head and arm */
  .showcase{flex-direction:row;height:500px}
  .showcase-scene{min-height:0}
  .agents{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* the template went side by side at 768; with the email address in the
     side column that squeezed it until the address broke mid-word, so the
     row waits for 1024 */
  .foot-in{flex-direction:row;align-items:flex-end}
  .foot-mark{width:auto}
  /* the template's 10vw wordmark sat beside the links in one row; ours
     is one character longer, so it steps down to keep that row intact */
  .foot-mark p{font-size:min(8vw,8.5rem)}
}

/* ============================================================
   PORTRAIT SCREENS — the template pins the arms to the corners, which
   in a tall viewport strands them far from the centred copy. Here they
   are anchored to the hero's centre instead, measured off the copy
   block: its headline sits 150-190px above centre and its clock line
   225-265px below it at every portrait size from 360 to 1024 wide.
   The robot's fingertip lands just above the headline, the human's
   just below the clock.
   ============================================================ */
@media (orientation:portrait) and (max-width:1366px){
  .arm-robot{top:auto;left:-14%;bottom:calc(50% + 160px);width:88vw;max-width:620px}
  .arm-human{bottom:auto;right:-12%;top:calc(50% + 270px);width:80vw;max-width:560px}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1366px){
  .arm-robot{left:-12%;bottom:calc(50% + 130px)}
  .arm-human{right:-10%;top:calc(50% + 275px)}
}

/* the narrowest phones: at 3rem "BGS Imperium." needs 330px, so below
   390 it scales with the column instead (36px at 320, 43px at 389) */
@media (max-width:389px){
  .hero-title{font-size:max(2.1rem,11.2vw)}
}

/* ============================================================
   REDUCED MOTION — the arms hold still, nothing slides in
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arm-robot,.arm-human{animation:none}
  .js .reveal,.js .reveal.card{opacity:1;transform:none;transition:none}
  .parallax-card-up,.parallax-card-down{transform:none}
  /* no robot: the copy takes the whole card */
  .js .showcase-scene{display:none}
  /* the name bar holds still: one set, centred, wrapping if it must */
  .logos{-webkit-mask-image:none;mask-image:none}
  .logos-track{animation:none;width:auto;justify-content:center}
  /* flex:1 1 auto — the scrolling set is sized to its content and
     would never wrap, cutting names off at phone width */
  .logos-set{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:1rem;padding:0}
  .logos-set[aria-hidden]{display:none}
}