@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#070707; --ink:#111; --paper:#f5f5f2; --soft:#e9e9e5;
  --line:rgba(10,10,10,.14); --muted:#6a6a67; --white:#fff;
  --mx:50%; --my:50%;
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode:multiply
}
a{color:inherit;text-decoration:none}
.mono,.eyebrow,.nav-meta,.kicker,.index,.status,.footer{font-family:"DM Mono",monospace}
.nav{
 position:fixed;top:0;left:0;right:0;height:76px;z-index:50;
 display:flex;align-items:center;justify-content:space-between;padding:0 5vw;
 border-bottom:1px solid rgba(255,255,255,.13);color:#fff;
 background:rgba(7,7,7,.72);backdrop-filter:blur(20px) saturate(130%);
 -webkit-backdrop-filter:blur(20px) saturate(130%)
}
.brand{display:flex;align-items:center;gap:13px;font:500 11px "DM Mono";letter-spacing:.18em}
.brand img{width:30px;height:30px;filter:invert(1)}
.navlinks{display:flex;gap:28px;font:400 10px "DM Mono";letter-spacing:.13em;text-transform:uppercase}
.navlinks a{opacity:.72;transition:.25s}.navlinks a:hover{opacity:1}
.hero{
 min-height:100svh;background:#070707;color:#fff;position:relative;display:grid;
 grid-template-columns:1.05fr .95fr;align-items:center;padding:120px 7vw 70px;isolation:isolate
}
.hero:after{
 content:"";position:absolute;inset:0;z-index:-2;
 background:
 radial-gradient(600px circle at var(--mx) var(--my),rgba(255,255,255,.08),transparent 58%),
 linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
 background-size:auto,58px 58px,58px 58px
}
.hero-copy{max-width:820px;position:relative;z-index:2}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#9c9c98;margin-bottom:28px}
.hero h1{font-size:clamp(60px,9.2vw,148px);line-height:.79;letter-spacing:-.075em;margin:0;font-weight:600}
.hero h1 span{display:block;overflow:hidden}.hero h1 i{font-style:normal;display:block;transform:translateY(105%)}
.hero-description{max-width:560px;font-size:17px;line-height:1.65;color:#b9b9b5;margin:42px 0}
.hero-actions{display:flex;align-items:center;gap:22px}
.btn{
 display:inline-flex;align-items:center;gap:26px;border:1px solid rgba(255,255,255,.45);
 padding:15px 18px;color:#fff;font:500 10px "DM Mono";letter-spacing:.16em;text-transform:uppercase;
 position:relative;overflow:hidden;transition:.35s
}
.btn:before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-102%);transition:.4s;z-index:-1}
.btn:hover{color:#070707;border-color:#fff}.btn:hover:before{transform:translateX(0)}
.scroll-note{font:400 9px "DM Mono";letter-spacing:.15em;color:#888;text-transform:uppercase}
.circuit-stage{height:650px;display:grid;place-items:center;position:relative;perspective:1000px}
.circuit-glow{position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 68%);filter:blur(20px)}
.logo-orbit{position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.11);border-radius:50%;animation:orbit 22s linear infinite}
.logo-orbit:before,.logo-orbit:after{content:"";position:absolute;width:7px;height:7px;border:1px solid #fff;border-radius:50%;background:#070707}
.logo-orbit:before{top:-4px;left:50%}.logo-orbit:after{bottom:-4px;right:23%}
.hero-logo{width:min(30vw,390px);filter:invert(1) drop-shadow(0 0 28px rgba(255,255,255,.13));position:relative;z-index:2;animation:logoFloat 7s ease-in-out infinite}
@keyframes logoFloat{50%{transform:translateY(-13px) rotate(.8deg)}}@keyframes orbit{to{transform:rotate(360deg)}}

.section{position:relative;padding:130px 7vw;border-top:1px solid var(--line)}
.section.dark{background:#0a0a0a;color:#fff;border-color:#222}
.section-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:8vw;margin-bottom:90px}
.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#777}
.dark .kicker{color:#888}
.section h2{font-size:clamp(42px,6vw,92px);line-height:.9;letter-spacing:-.06em;margin:0;font-weight:600}
.section-intro{max-width:700px;color:#666;font-size:17px;line-height:1.7;margin-top:30px}.dark .section-intro{color:#aaa}

.glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.glass-card{
 min-height:330px;padding:30px;position:relative;overflow:hidden;
 border:1px solid rgba(255,255,255,.55);border-radius:4px;
 background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.25));
 box-shadow:inset 0 1px rgba(255,255,255,.8),0 30px 80px rgba(0,0,0,.07);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 transform-style:preserve-3d;transition:box-shadow .35s
}
.glass-card:before{content:"";position:absolute;inset:-60%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.7),transparent 60%);transform:translateX(-40%) rotate(8deg);transition:.7s}
.glass-card:hover:before{transform:translateX(35%) rotate(8deg)}
.glass-card:hover{box-shadow:inset 0 1px rgba(255,255,255,1),0 35px 90px rgba(0,0,0,.13)}
.card-content{position:relative;z-index:2;transform:translateZ(28px)}
.index{font-size:10px;color:#777}.glass-card h3{font-size:27px;letter-spacing:-.035em;margin:100px 0 15px}.glass-card p{font-size:14px;line-height:1.6;color:#62625e;margin:0}

.manifesto{display:grid;grid-template-columns:.7fr 1.3fr;gap:9vw;align-items:start}
.manifesto h2{font-size:clamp(48px,7vw,110px);line-height:.83;letter-spacing:-.07em}
.manifesto-copy{font-size:23px;line-height:1.55;color:#cfcfcb;max-width:740px;margin:0 0 60px}
.principles{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #292929}
.principle{padding:25px 24px 28px 0;border-bottom:1px solid #292929}.principle:nth-child(even){padding-left:24px;border-left:1px solid #292929}
.principle b{display:block;font:500 10px "DM Mono";letter-spacing:.18em;text-transform:uppercase;margin-bottom:17px;color:#fff}.principle span{color:#898985;font-size:14px;line-height:1.6}

.signal{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.signal-art{height:560px;position:relative;overflow:hidden;border:1px solid var(--line);background:#ededE9}
.signal-art:before,.signal-art:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent)}
.signal-art:after{background-image:linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.5) 48% 52%,transparent 53%);background-size:100% 100%;opacity:.18;animation:scan 4s linear infinite}
@keyframes scan{to{transform:translateY(100%)}}.signal-logo{position:absolute;width:250px;left:50%;top:50%;transform:translate(-50%,-50%);filter:contrast(1.2)}
.signal-copy h2{font-size:clamp(45px,6vw,86px);line-height:.88;letter-spacing:-.065em;margin:18px 0 28px}.signal-copy p{font-size:17px;line-height:1.7;color:#5f5f5b;max-width:560px}

.contact{min-height:90vh;background:#070707;color:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:end}
.contact h2{font-size:clamp(58px,9vw,140px);line-height:.78;letter-spacing:-.075em;margin:0}
.contact-box{justify-self:end;max-width:450px;padding-bottom:8px}.contact-box p{font-size:17px;line-height:1.65;color:#aaa}.contact-box .email{font:500 14px "DM Mono";letter-spacing:.08em;border-bottom:1px solid #777;padding-bottom:7px;display:inline-block;margin-top:22px}

.footer{background:#070707;color:#777;border-top:1px solid #242424;padding:25px 7vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(35px)}.is-visible{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
@media(max-width:850px){
 .nav{padding:0 22px}.navlinks a:not(:last-child){display:none}
 .hero,.section-head,.manifesto,.signal,.contact{grid-template-columns:1fr}
 .hero{padding:130px 22px 70px}.circuit-stage{height:430px}.hero-logo{width:70vw}.logo-orbit{width:330px;height:330px}
 .section{padding:90px 22px}.section-head{gap:35px;margin-bottom:55px}.glass-grid{grid-template-columns:1fr}.glass-card{min-height:280px}.glass-card h3{margin-top:80px}
 .signal-art{height:390px}.contact{min-height:80vh}.contact-box{justify-self:start;margin-top:60px}
 .footer{padding:22px;flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.logo-orbit,.hero-logo{animation:none}.reveal{opacity:1;transform:none}.glass-card:before{display:none}
}

/* Final integration patch: preserves the supplied v2.1 visual language. */
#cinematic-canvas{z-index:-2}
.hero-actions{transform:translateY(18px)}
.practice-card{min-height:300px;transform-style:preserve-3d}
@media(max-width:850px){
  body{cursor:auto!important}
  .hero-actions{gap:8px}
}

/* --- Interaction refinements: existing layout and visual language preserved --- */
.brand-lockup{white-space:nowrap}
.nav-logo{
  width:23px;height:28px;object-fit:contain;
  filter:invert(1) brightness(1.15);
  opacity:.96;
  flex:none;
}
.brand-lockup span{line-height:1}

/* Contrast-aware cursor: white on dark, black on light via difference blending. */
#cursor-dot,#cursor-ring{mix-blend-mode:difference}
#cursor-dot{background:#fff}
#cursor-ring{border-color:rgba(255,255,255,.7)}
body.hovering #cursor-ring{background:rgba(255,255,255,.08);border-color:#fff}

/* Same nav structure, with restrained glass dropdowns. */
.navlinks{align-items:center}
.nav-dropdown{position:relative;height:76px;display:flex;align-items:center}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:6px;height:100%}
.nav-chevron{
  display:inline-block;font-family:Inter,sans-serif;font-size:12px;line-height:1;
  opacity:.5;transform:translateY(-1px);
  transition:transform .3s ease,opacity .3s ease
}
.nav-dropdown:hover .nav-chevron,.nav-dropdown:focus-within .nav-chevron{transform:rotate(45deg);opacity:1}
.nav-dropdown-menu{
  position:absolute;top:calc(100% - 8px);left:50%;
  transform:translate(-50%,-8px);width:245px;padding:9px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 22px 70px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  text-transform:none;letter-spacing:normal
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
.nav-dropdown-menu a{
  display:flex;align-items:center;min-height:38px;padding:9px 12px;
  color:#a3a3a3;font:400 9px "JetBrains Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent;
  transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease
}
.nav-dropdown-menu a:hover{
  color:#fff;background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.08);transform:translateX(3px)
}
.nav-dropdown-menu:before{
  content:"";position:absolute;top:-5px;left:50%;width:8px;height:8px;
  border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);
  background:#0b0b0b;transform:translateX(-50%) rotate(45deg)
}

/* Object hover depth; no layout changes. */
.practice-card,.about-item,#industries .grid > div,#insights article{
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,background-color .35s ease,box-shadow .45s ease
}
.about-item:hover{transform:translateX(6px)}
#industries .grid > div:hover{transform:translateY(-4px);border-color:rgba(0,0,0,.24)}
#insights article:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.08)}
.practice-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 24px 70px rgba(0,0,0,.28)}

@media(max-width:850px){
  .nav-logo{width:20px;height:25px}
  .nav-dropdown-menu{display:none}
}
@media(prefers-reduced-motion:reduce){
  .nav-dropdown-menu{transition:none}
  .practice-card,.about-item,#industries .grid > div,#insights article{transition:none}
}

/* Logo sizing refinement: scale to the mark's required visual size, preserving aspect ratio. */
.nav-logo{
  width:clamp(18px,1.7vw,27px);
  height:auto;
  max-height:30px;
  object-fit:contain;
  display:block;
}
@media(max-width:850px){
  .nav-logo{width:22px;height:auto;max-height:27px}
}

/* --- Navbar dropdown correction ---
   Sub-items are hidden by default and only appear for the active menu.
   The top-level navbar remains unchanged. */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
.nav-dropdown-menu{
  z-index:100;
  display:block !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px) !important;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) !important;
}
.nav-dropdown.is-open .nav-chevron{
  transform:rotate(45deg);
  opacity:1;
}
.nav-dropdown:hover .nav-dropdown-menu{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px) !important;
}
.nav-dropdown.is-open:hover .nav-dropdown-menu,
.nav-dropdown:focus-within.is-open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) !important;
}
.brand-lockup .nav-logo{
  width:clamp(18px,1.7vw,27px);
  height:auto;
  max-height:30px;
  object-fit:contain;
  display:block;
}
@media(max-width:850px){
  .brand-lockup .nav-logo{width:22px;max-height:27px}
}

/* =========================================================
   FINAL NAV / SURFACE REFINEMENT
   Dynamic Island navigation. Existing page structure/logic
   remains intact.
   ========================================================= */

body{
  background:#050505;
  color:#f5f5f5;
}

/* Remove any accidental light page surface. */
html,body,main{background-color:#050505}
section.bg-\[\#f5f5f2\],
section.bg-\[\#f5f5f2\].text-black{
  background:#090909 !important;
  color:#f5f5f5 !important;
}

/* Dynamic Island */
.dynamic-island{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(9,9,9,.70);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    width .45s cubic-bezier(.16,1,.3,1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.dynamic-island:hover,
.dynamic-island.is-active{
  background:rgba(12,12,12,.88);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 24px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.island-inner{
  display:flex;
  align-items:center;
  gap:2px;
}
.island-link,
.island-contact{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.58);
  font:500 9px "JetBrains Mono",monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:
    color .25s ease,
    background .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1);
}
.island-link:hover,
.island-link:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.08);
  outline:none;
}
.island-contact{
  margin-left:5px;
  padding:0 17px;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
}
.island-contact:hover{
  color:#000;
  background:#fff;
  border-color:#fff;
}

/* Dropdowns are invisible until activated. */
.dynamic-island .nav-dropdown{
  position:relative;
  height:34px;
  display:flex;
  align-items:center;
}
.dynamic-island .nav-dropdown-trigger{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.dynamic-island .nav-chevron{
  margin-left:5px;
  font-family:Inter,sans-serif;
  font-size:11px;
  opacity:.45;
  transition:transform .3s ease,opacity .3s ease;
}
.dynamic-island .nav-dropdown.is-open .nav-chevron{
  transform:rotate(45deg);
  opacity:1;
}
.dynamic-island .nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  width:250px;
  padding:8px;
  transform:translate(-50%,-8px) scale(.98);
  transform-origin:top center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(8,8,8,.94);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.16,1,.3,1),
    visibility .22s ease;
}
.dynamic-island .nav-dropdown-menu a{
  min-height:36px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  border-radius:9px;
  color:#8e8e8e;
  font:400 9px "JetBrains Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.dynamic-island .nav-dropdown-menu a:hover{
  color:#fff;
  background:rgba(255,255,255,.075);
  transform:translateX(3px);
}
.dynamic-island .nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.dynamic-island .nav-dropdown-menu::before{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  width:9px;
  height:9px;
  background:#0a0a0a;
  border-left:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateX(-50%) rotate(45deg);
}

/* Cursor contrast inversion. Difference blending makes it white on black
   and black over white/light content automatically. */
#cursor-dot,
#cursor-ring{
  mix-blend-mode:difference !important;
  z-index:2000 !important;
  pointer-events:none;
}
#cursor-dot{background:#fff !important}
#cursor-ring{border-color:#fff !important}

/* No light background on common content surfaces. */
#industries{
  background:#090909 !important;
  color:#f5f5f5 !important;
}
#industries .border-white\/10{border-color:rgba(255,255,255,.10)}
#industries .text-grey-400{color:#a3a3a3}
#industries .text-grey-500{color:#737373}

/* Dynamic island stays compact and usable on smaller screens. */
@media(max-width:850px){
  .dynamic-island{
    top:12px;
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
  .island-inner{
    width:100%;
    justify-content:space-between;
  }
  .island-link,
  .island-contact{
    padding:0 9px;
    font-size:8px;
    letter-spacing:.14em;
  }
  .dynamic-island .nav-dropdown-menu{
    width:min(245px,calc(100vw - 28px));
  }
}
@media(prefers-reduced-motion:reduce){
  .dynamic-island,
  .island-link,
  .island-contact,
  .dynamic-island .nav-dropdown-menu{
    transition:none !important;
  }
}

/* =========================================================
   V6 SURFACE + NAV VISIBILITY
   All major homepage sections remain in the dark system.
   ========================================================= */

/* Insights: eliminate the last white surface. */
#insights{
  background:#090909 !important;
  color:#f5f5f5 !important;
}
#insights .text-black{color:#f5f5f5 !important}
#insights .text-neutral-600,
#insights .text-neutral-500,
#insights .text-neutral-400{color:#8a8a8a !important}
#insights [class*="border-black"]{border-color:rgba(255,255,255,.10) !important}
#insights a{color:inherit}
#insights .hover\:text-black:hover{color:#fff !important}

/* Dynamic Island: make it unmistakably visible above every section. */
.dynamic-island{
  display:flex !important;
  position:fixed !important;
  top:16px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  z-index:99999 !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:translate3d(-50%,0,0) !important;
  isolation:isolate;
}
.dynamic-island .island-inner{
  position:relative;
  z-index:2;
}
.dynamic-island::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
@media(max-width:850px){
  .dynamic-island{
    top:12px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }
}

/* Never allow light page backgrounds to reappear through utility classes. */
main,
section,
footer{scroll-margin-top:90px}

/* =========================================================
   DYNAMIC ISLAND NAVBAR — interaction layer
   Keeps the existing site visual language unchanged.
   ========================================================= */

.dynamic-island {
  --island-h: 52px;
  --island-radius: 999px;
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 99999 !important;
  width: max-content !important;
  max-width: calc(100vw - 28px) !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--island-radius) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.08), transparent 35%),
    rgba(7,7,7,.76) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    0 28px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
  transform: translate3d(-50%,0,0) !important;
  transition:
    width .55s cubic-bezier(.16,1,.3,1),
    max-width .55s cubic-bezier(.16,1,.3,1),
    height .55s cubic-bezier(.16,1,.3,1),
    border-radius .45s cubic-bezier(.16,1,.3,1),
    background .3s ease,
    box-shadow .35s ease,
    border-color .3s ease,
    top .35s ease,
    transform .55s cubic-bezier(.16,1,.3,1) !important;
  isolation: isolate;
  overflow: visible;
}

.dynamic-island::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, rgba(255,255,255,.20), transparent 32%, transparent 68%, rgba(255,255,255,.07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .65;
}

.dynamic-island::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 3px;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  filter: blur(.2px);
  opacity: .5;
  pointer-events: none;
}

.island-shell {
  min-height: var(--island-h);
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 2;
}

.island-brand {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px 0 10px;
  color: #fff;
  font: 500 8px "JetBrains Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  transition: background .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}

.island-brand img {
  width: 20px;
  height: 23px;
  object-fit: contain;
  filter: invert(1) brightness(1.2);
  opacity: .95;
}

.island-brand:hover {
  background: rgba(255,255,255,.07);
}

.island-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px 0 1px;
  background: rgba(255,255,255,.11);
}

.dynamic-island .island-link,
.dynamic-island .island-contact {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.57) !important;
  font: 500 8px "JetBrains Mono", monospace !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .3s cubic-bezier(.16,1,.3,1),
    box-shadow .25s ease !important;
}

.dynamic-island .island-link:hover,
.dynamic-island .island-link:focus-visible,
.dynamic-island .nav-dropdown.is-open > .island-link {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.075) !important;
  outline: none;
}

.dynamic-island .island-contact {
  margin-left: 4px;
  padding: 0 15px !important;
  color: #080808 !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 4px 20px rgba(255,255,255,.08);
}

.dynamic-island .island-contact:hover {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 0 28px rgba(255,255,255,.10);
}

.dynamic-island .nav-dropdown {
  position: relative !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

.dynamic-island .nav-dropdown-trigger {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dynamic-island .nav-chevron {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 1px;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  line-height: 11px;
  opacity: .42;
  transform: rotate(0deg);
  transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}

.dynamic-island .nav-dropdown.is-open .nav-chevron {
  transform: rotate(45deg);
  opacity: 1;
}

.dynamic-island .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  width: 276px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.065), transparent 55%),
    rgba(7,7,7,.93) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  box-shadow:
    0 25px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.075),
    0 0 0 1px rgba(255,255,255,.025) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%,-10px) scale(.94) !important;
  transform-origin: 50% 0;
  transition:
    opacity .22s ease,
    transform .42s cubic-bezier(.16,1,.3,1),
    visibility .22s ease !important;
}

.dynamic-island .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #0a0a0a;
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateX(-50%) rotate(45deg);
}

.dynamic-island .nav-dropdown-menu::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 13px;
  right: 13px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  pointer-events: none;
}

.dynamic-island .nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%,0) scale(1) !important;
}

.dynamic-island .nav-dropdown-menu a {
  min-height: 39px !important;
  display: flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  border: 1px solid transparent !important;
  color: #8f8f8f !important;
  font: 400 8px "JetBrains Mono", monospace !important;
  letter-spacing: .095em !important;
  text-transform: uppercase !important;
  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .28s cubic-bezier(.16,1,.3,1) !important;
}

.dynamic-island .nav-dropdown-menu a:hover,
.dynamic-island .nav-dropdown-menu a:focus-visible {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.08) !important;
  transform: translateX(3px) !important;
  outline: none;
}

/* Subtle state expansion, inspired by Dynamic Island behavior. */
.dynamic-island.is-expanded {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.10), transparent 38%),
    rgba(7,7,7,.90) !important;
  border-color: rgba(255,255,255,.19) !important;
  box-shadow:
    0 12px 35px rgba(0,0,0,.34),
    0 30px 110px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.dynamic-island.is-scrolled {
  top: 12px !important;
  transform: translate3d(-50%,0,0) scale(.94) !important;
}

.dynamic-island.is-scrolled.is-expanded {
  transform: translate3d(-50%,0,0) scale(1) !important;
}

.dynamic-island.is-hidden {
  transform: translate3d(-50%, calc(-100% - 28px), 0) !important;
  pointer-events: none;
}

.dynamic-island.is-returning {
  transform: translate3d(-50%,0,0) !important;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .dynamic-island .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%,0) scale(1) !important;
  }
}

@media (max-width: 850px) {
  .dynamic-island {
    top: 10px !important;
    left: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    padding: 3px !important;
    transform: none !important;
    border-radius: 24px !important;
  }

  .island-shell {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    overflow: visible;
  }

  .island-brand {
    max-width: 125px;
    padding-right: 8px;
    font-size: 7px;
  }

  .island-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .island-divider {
    display: none;
  }

  .dynamic-island .island-link,
  .dynamic-island .island-contact {
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 7px !important;
    letter-spacing: .10em !important;
  }

  .dynamic-island .island-contact {
    margin-left: 1px;
    padding: 0 10px !important;
  }

  .dynamic-island .nav-dropdown {
    height: 36px !important;
  }

  .dynamic-island .nav-dropdown-menu {
    position: fixed !important;
    top: 66px !important;
    left: 50% !important;
    width: min(300px, calc(100vw - 28px)) !important;
    transform: translate(-50%,-10px) scale(.94) !important;
  }

  .dynamic-island .nav-dropdown.is-open .nav-dropdown-menu {
    transform: translate(-50%,0) scale(1) !important;
  }

  .dynamic-island.is-scrolled {
    top: 7px !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .island-brand span { display: none; }
  .island-brand { padding: 0 8px !important; }
  .dynamic-island .island-link,
  .dynamic-island .island-contact {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .dynamic-island .island-contact { padding-left: 9px !important; padding-right: 9px !important; }
}

@media (max-width: 360px) {
  .island-brand { padding-left: 5px !important; padding-right: 4px !important; }
  .dynamic-island .island-link,
  .dynamic-island .island-contact {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 6px !important;
    letter-spacing: .07em !important;
  }
  .dynamic-island .island-contact {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 767px) {
  .services-carousel {
    display: block !important;
    min-height: 300px;
    position: relative;
  }

  .services-carousel .practice-card {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 300px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(12%, 0, 0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  .services-carousel .practice-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .services-carousel .practice-card.is-previous {
    opacity: 0;
    transform: translate3d(-12%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-carousel .practice-card {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .dynamic-island,
  .dynamic-island *,
  .dynamic-island .nav-dropdown-menu {
    transition: none !important;
  }
}

/* Ambient interaction layer: stays behind existing content and never captures input. */
body {
  position: relative;
}

.section-index {
  display: block;
  margin: 0 0 1.1rem;
  color: transparent;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4.5rem, 8vw, 8rem);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.06em;
  -webkit-text-stroke: 1px rgba(196, 181, 253, 0.78);
}

.section-kicker {
  display: block;
  margin-bottom: 1.5rem;
  color: #737373;
  font: 400 10px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.section-marker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.section-marker .section-index { margin-bottom: 1rem; }
.section-marker .section-kicker { margin-bottom: 0; }

@media (min-width: 851px) {
  #approach .section-marker { align-items: center; }
}

.execution-marker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.execution-marker span:first-child {
  margin-bottom: 1rem;
  color: transparent;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4.5rem, 8vw, 8rem);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.06em;
  -webkit-text-stroke: 1px rgba(196, 181, 253, 0.78);
}

.execution-marker span:last-child {
  color: #737373;
  font: 400 10px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
}

@media (min-width: 851px) {
  #approach .execution-marker {
    align-items: center;
  }
}

/* Inverted watermark used by the homepage and every service-page hero. */
#hero,
main > section:first-of-type {
  isolation: isolate;
}

#hero::before,
main > section:first-of-type::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(2rem, 8vw, 9rem);
  width: min(48vw, 620px);
  aspect-ratio: 2 / 3;
  transform: translateY(-50%);
  background: url("assets/watermark.png") center / contain no-repeat;
  filter: invert(1) grayscale(1) contrast(1.35);
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .75fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 24px 80px rgba(0,0,0,.2);
  backdrop-filter: blur(16px);
}

.contact-field {
  display: grid;
  gap: .55rem;
  color: rgba(255,255,255,.48);
  font: 500 9px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-field-wide { grid-column: 1 / -1; }

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  outline: 0;
  resize: vertical;
  padding: .55rem 0 .7rem;
  color: #fff;
  background: transparent;
  font: 400 14px Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: #fff;
  box-shadow: 0 1px #fff;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.25rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(255,255,255,.65);
  color: #080808;
  background: #fff;
  font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.contact-submit:hover {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.8);
}

.contact-note {
  align-self: center;
  margin: 0;
  color: rgba(255,255,255,.35);
  font: 400 9px/1.5 "JetBrains Mono", monospace;
}

.whitepaper-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(3rem, 9vw, 9rem);
}

.whitepaper-download {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.whitepaper-download:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 2rem;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.25rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.62);
  font: 500 9px "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.contact-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.contact-link:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}

.contact-link-muted { cursor: help; color: rgba(255,255,255,.34); }

.service-search-page {
  max-width: 56rem;
  margin: 9rem auto 0;
  padding: 0 1.5rem;
}

.service-search {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .7rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.service-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.service-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font: 400 13px Inter, sans-serif;
}

.service-search input::placeholder { color: rgba(255,255,255,.32); }

.service-search-page + main .grid > a[hidden] { display: none; }

body:has(#service-search) main .grid {
  grid-template-rows: repeat(4, minmax(300px, auto));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

body:has(#service-search) main .grid > a {
  min-height: 300px;
  transform-style: preserve-3d;
}

body:has(#service-search) main .grid > a:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.service-category-tools {
  max-width: 56rem;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}

.service-category-select {
  display: none;
}

.service-category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}

.service-category-tag {
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.55);
  background: transparent;
  font: 500 9px "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.service-category-tag:hover,
.service-category-tag.is-active {
  color: #000;
  background: #fff;
  border-color: #fff;
}

@media (max-width: 1100px) and (min-width: 768px) {
  body:has(#service-search) main .grid { grid-template-rows: repeat(3, minmax(300px, auto)); }
}

@media (max-width: 600px) {
  .service-search-page { margin-top: 5rem; padding: 0; }
  .service-search input { font-size: 12px; }
  .service-category-tools { padding: 0; }
  body:has(#service-search) main .grid {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* Service cards reveal a restrained, thematic visual on hover. */
.services-carousel .practice-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  opacity: 0;
  transform: scale(1.04);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: none;
  mix-blend-mode: normal;
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}

.services-carousel .practice-card:nth-child(1)::before { background-image: url("assets/card_bg_picture/glenn-carstens-peters-npxXWgQ33ZQ-unsplash.jpg"); }
.services-carousel .practice-card:nth-child(2)::before { background-image: url("assets/card_bg_picture/luca-bravo-XJXWbfSo2f0-unsplash.jpg"); }
.services-carousel .practice-card:nth-child(3)::before { background-image: url("assets/card_bg_picture/campaign-creators-gMsnXqILjp4-unsplash.jpg"); }
.services-carousel .practice-card:nth-child(4)::before { background-image: url("assets/card_bg_picture/marvin-meyer-SYTO3xs06fU-unsplash.jpg"); }
.services-carousel .practice-card:nth-child(5)::before { background-image: url("assets/card_bg_picture/headway-5QgIuuBxKwM-unsplash.jpg"); }
.services-carousel .practice-card:nth-child(6)::before { background-image: url("assets/card_bg_picture/luca-bravo-XJXWbfSo2f0-unsplash.jpg"); }

.services-carousel .practice-card:hover::before {
  opacity: .3;
  transform: scale(1);
}

.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  align-items: center;
  gap: clamp(3rem, 10vw, 10rem);
}

.founder-grid > div:first-child { order: 1; }
.founder-grid .founder-portrait-wrap { order: 2; }

.founder-portrait-wrap {
  justify-self: end;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #0b0b0b;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 24px 80px rgba(0,0,0,.32);
}

.founder-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08);
}

.founder-portrait-fallback {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 48%),
    url("assets/watermark.png") center / 70% auto no-repeat,
    #0b0b0b;
}

.founder-link {
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  font: 500 9px "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.founder-link:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}

@media (max-width: 850px) {
  .dynamic-island.is-hidden {
    transform: translate3d(0, calc(-100% - 24px), 0) !important;
    pointer-events: none;
  }

  .dynamic-island.is-returning {
    transform: none !important;
    pointer-events: auto;
  }

  #hero::before,
  main > section:first-of-type::before {
    top: 40%;
    right: -12%;
    width: 78vw;
    opacity: .1;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 2rem;
  }

  .whitepaper-grid { grid-template-columns: 1fr; gap: 2rem; }

  .contact-intro h2 { font-size: clamp(3.5rem, 16vw, 7rem); }

  .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
  .founder-grid > div:first-child,
  .founder-grid .founder-portrait-wrap { order: initial; }
  .founder-portrait-wrap { justify-self: start; width: min(100%, 320px); }
}

@media (max-width: 600px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-field-wide { grid-column: auto; }
  .contact-note { grid-column: 1; }
}

@media (max-width: 767px) {
  #approach .max-w-4xl { max-width: 34rem; }
  #approach .text-center { margin-bottom: 4rem; }
  #approach #circuit-path-bg {
    top: 11rem !important;
    bottom: 3rem !important;
    left: 24px !important;
    width: 2px !important;
  }

  #approach .space-y-24 { display: grid; gap: 4.5rem; }
  #approach .meth-step {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 1.25rem;
    min-height: 9rem;
    padding-left: 0 !important;
    align-items: start;
  }

  #approach .meth-step > div:first-child:not(.absolute) {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin-top: .7rem;
    text-align: left;
  }

  #approach .meth-step > div.absolute {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
  }

  #approach .meth-step > div.hidden { display: none !important; }
}

.ambient-dot-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;
}

.ambient-bokeh {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

main > section {
  z-index: 0 !important;
}

main > section > * {
  position: relative;
  z-index: 2;
}

main > section > .ambient-bokeh {
  position: absolute;
  z-index: 1;
}

.ambient-bokeh::before,
.ambient-bokeh::after {
  content: "";
  position: absolute;
  width: clamp(120px, 18vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.075), rgba(255,255,255,.025) 34%, transparent 70%);
  filter: blur(18px);
  opacity: .55;
  transform: translate3d(0,0,0);
  animation: ambient-bokeh-drift 16s ease-in-out infinite alternate;
}

.ambient-bokeh::before {
  top: 12%;
  left: 10%;
}

.ambient-bokeh::after {
  right: 9%;
  bottom: 10%;
  width: clamp(90px, 14vw, 210px);
  animation-delay: -7s;
  animation-duration: 20s;
}

@keyframes ambient-bokeh-drift {
  from { transform: translate3d(-14px, 8px, 0) scale(.9); }
  to { transform: translate3d(18px, -14px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bokeh::before,
  .ambient-bokeh::after { animation: none; }
}

@media (pointer: coarse) {
  body { cursor: auto !important; }
  #cursor-dot,
  #cursor-ring { display: none !important; }
}

/* Keep the wide grid layouts from activating before tablet landscape has room. */
@media (min-width: 851px) and (max-width: 1100px) {
  #about > .grid.grid-cols-1.lg\:grid-cols-12,
  #industries .grid.grid-cols-1.lg\:grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  #about .lg\:col-span-5,
  #about .lg\:col-span-7,
  #industries .lg\:col-span-4,
  #industries .lg\:col-span-8 {
    grid-column: auto !important;
  }
}